text: (window.webpackJsonp=window.webpackJsonp||[]).push([[11],{556:function(n,t,e){"use strict";e.r(t);var i=e(272),r=e.n(i),o=e(261),c=e.n(o),a=e(262),u=e.n(a),s=e(264),l=e.n(s),f=e(263),p=e.n(f),d=e(266),y=e.n(d),h=e(265),m=e.n(h),v=e(300),b=e(476),g=e(281),w=e.n(g),k=e(546),x=e(541),O=e(544),j=e(478),E=e(303),S=e(479),z=e(275),q=e(543),L=e(537),$=new O.a({uri:"http://localhost:4000"}),F=new S.a({uri:"ws://localhost:4000/graphql",options:{reconnect:!0}}),C=Object(E.e)(function(n){var t=n.query,e=Object(z.getMainDefinition)(t),i=e.kind,r=e.operation;return"OperationDefinition"===i&&"subscription"===r},F,$),_=new x.a({cacheRedirects:{Query:{operations:function(n,t,e){var i=e.getCacheKey;return t.ids.map(function(n){return i({__typename:"Book",id:n})})}}}}),Q=new L.a,H=Object(q.a)({cache:_}),I=new k.a({link:E.a.from([Object(j.a)(function(n){var t=n.graphQLErrors,e=n.networkError;t&&t.map(function(n){var t=n.message,e=n.locations,i=n.path;return console.log("[GraphQL error]: Message: ".concat(t,", Location: ").concat(e,", Path: ").concat(i))}),e&&console.log("[Network error]: ".concat(e))}),Q,H,C]),cache:_,connectToDevTools:!0});e(532);function D(){var n=r()(['<a id="list-item" href="/factories/','"><h2 id="item-title">🏭','</h2><div id="item-desc">',"</div></a>"]);return D=function(){return n},n}function B(){var n=r()(['<style>:host {\n          display: block;\n\n        }\n        #list {\n          display: flex;\n          flex-direction: column;\n        }\n        #list-item {\n          display: flex;\n          padding: 10px;\n          color: inherit;\n          text-decoration: none;\n        }\n        #list-item:hover, #list-item:focus {\n          background: --list-item-hover-background;\n        }\n        #item-title {\n          flex: 1 1 auto;\n          margin: 0;\n          font-size: 18px;\n        }\n        #item-desc {\n          opacity: 0.7;\n        }</style><div id="list">',"</div>"]);return B=function(){return n},n}function M(){var n=r()(["\n  query {\n    factories {\n      name\n      location\n    }\n  }\n"]);return M=function(){return n},n}var R=w()(M()),A=function(n){function t(){var n;c()(this,t),(n=l()(this,p()(t).call(this))).factories=[];try{I.watchQuery({query:R}).subscribe(function(t){var e=t.data.factories;n.factories=e})}catch(n){}return n}return m()(t,n),u()(t,null,[{key:"properties",get:function(){return{factories:{type:Array}}}}]),u()(t,[{key:"render",value:function(){return Object(v.b)(B(),this.factories.map(function(n){return Object(v.b)(D(),n.name,n.name,n.location)}))}}]),t}(v.a);customElements.define("wcfactory-ui-factories",A);var J=e(497),N=e(326);e(547);function P(){var n=r()(['\n      <style>\n        :host {\n          --wcfactory-ui-script-font-size: 12px;\n          font-size: var(--wcfactory-ui-script-font-size);\n        }\n        button {\n          font-family: inherit;\n          border: none;\n          margin: 0;\n          padding: 0;\n          background: none;\n          color: inherit;\n          cursor: pointer;\n          font-size: var(--wcfactory-ui-script-font-size);\n        }\n        .script {\n          cursor: pointer;\n          padding: calc(var(--wcfactory-ui-script-font-size) * .6);\n        }\n\n        .script[active="true"] {\n          background: black;\n        }\n      </style>\n\n      <button\n        class="script"\n        @click=',">\n          🚀","\n      </button>\n    "]);return P=function(){return n},n}function T(){var n=r()(["\n  mutation($script: String!, $location: String!) {\n    runScript(script: $script, location: $location) {\n      id\n      location\n      script\n    }\n  }\n"]);return T=function(){return n},n}var U=w()(T()),G=function(n){function t(){return c()(this,t),l()(this,p()(t).apply(this,arguments))}return m()(t,n),u()(t,[{key:"render",value:function(){return this.client=I,this.mutation=U,this.variables={script:this.script,location:this.location},Object(N.c)(P(),this.mutate,this.script)}}],[{key:"properties",get:function(){return{script:{type:String},location:{type:String}}}}]),t}(N.a);function K(){var n=r()(['\n      <style>\n        :host {\n          --wcfactory-ui-script-font-size: 12px;\n          font-size: var(--wcfactory-ui-script-font-size);\n        }\n        button {\n          font-family: inherit;\n          border: none;\n          margin: 0;\n          padding: 0;\n          background: none;\n          color: inherit;\n          cursor: pointer;\n          font-size: var(--wcfactory-ui-script-font-size);\n        }\n        .script {\n          cursor: pointer;\n          padding: calc(var(--wcfactory-ui-script-font-size) * .6);\n        }\n\n        .script[active="true"] {\n          background: black;\n        }\n      </style>\n\n      <button\n        class="script"\n        @click=',">\n          ❌ ","\n      </button>\n    "]);return K=function(){return n},n}function W(){var n=r()(["\n  mutation($script: String!, $location: String!) {\n    stopScript(script: $script, location: $location)\n  }\n"]);return W=function(){return n},n}customElements.define("wcfactory-ui-script-run",G);var V=w()(W()),X=function(n){function t(){return c()(this,t),l()(this,p()(t).apply(this,arguments))}return m()(t,n),u()(t,[{key:"render",value:function(){var n=this;return this.client=I,this.mutation=V,this.variables={script:this.script,location:this.location},this.onUpdate=function(t,e){if(e.data.stopScript){var i=t.readQuery({query:tn}),r=i.operations.filter(function(t){return!(t.script===n.script&&t.location===n.location)});t.writeQuery({query:tn,data:Object.assign({},i,{operations:r})})}},Object(N.c)(K(),this.mutate,this.script)}}],[{key:"properties",get:function(){return{script:{type:String},location:{type:String}}}}]),t}(N.a);function Y(){var n=r()(["\n        <wcfactory-ui-script-run .script="," .location=","></wcfactory-ui-script-run>\n      "]);return Y=function(){return n},n}function Z(){var n=r()(["\n        <wcfactory-ui-script-stop .script="," .location=","></wcfactory-ui-script-stop>\n      "]);return Z=function(){return n},n}function nn(){var n=r()(["\n  query operationsList {\n    operations {\n      id\n      location\n      script\n    }\n  }\n"]);return nn=function(){return n},n}customElements.define("wcfactory-ui-script-stop",X);var tn=w()(nn()),en=function(n){function t(){var n;return c()(this,t),(n=l()(this,p()(t).call(this))).client=I,n.query=tn,n}return m()(t,n),u()(t,null,[{key:"properties",get:function(){return{script:{type:String},location:{type:String}}}}]),u()(t,[{key:"render",value:function(){var n=this;return!!this.data.operations.find(function(t){return t.script===n.script&&t.location===n.location})?Object(N.c)(Z(),this.script,this.location):Object(N.c)(Y(),this.script,this.location)}}]),t}(N.b);function rn(){var n=r()(['<wcfactory-ui-script .script="','" .location="','"></wcfactory-ui-script>']);return rn=function(){return n},n}function on(){var n=r()(["",""]);return on=function(){return n},n}customElements.define("wcfactory-ui-script",en);var cn=function(n){function t(){return c()(this,t),l()(this,p()(t).apply(this,arguments))}return m()(t,n),u()(t,[{key:"render",value:function(){var n=this;return Object(v.b)(on(),this.scripts.map(function(t){return Object(v.b)(rn(),t,n.location)}))}}],[{key:"properties",get:function(){return{scripts:{type:Array},location:{type:String}}}}]),t}(v.a);function an(){var n=r()(['\n      <style>\n        :host {\n          display: block;\n        }\n        #location {\n          cursor: pointer;\n        }\n      </style>\n      <div id="location" @click=',">\n        📁 ","\n      </div>\n    "]);return an=function(){return n},n}function un(){var n=r()(["\n  mutation($location: String!) {\n    openLocation(location: $location)\n  }\n"]);return un=function(){return n},n}customElements.define("wcfactory-ui-scripts",cn);var sn=w()(un()),ln=function(n){function t(){return c()(this,t),l()(this,p()(t).apply(this,arguments))}return m()(t,n),u()(t,[{key:"render",value:function(){return this.client=I,this.mutation=sn,this.variables={location:this.location},Object(N.c)(an(),this.mutate,this.location)}}],[{key:"properties",get:function(){return{location:{type:String}}}}]),t}(N.a);function fn(){var n=r()(['<style>:host {\n          display: flex;\n          background: var(--wcfactory-ui-secondary-color);\n          padding: 10px;\n          min-height: 100px;\n          flex-direction: column;\n        }\n        button {\n          font-family: inherit;\n          border: none;\n          margin: 0;\n          padding: 0;\n          background: none;\n          color: inherit;\n          cursor: pointer\n        }\n        button:hover, button:focus {\n          color: white;\n        }\n        #header {\n          display: flex;\n        }\n        #title {\n          flex: 1 1 auto;\n        }\n        #middle {\n          flex: 1 1 auto;\n          font-size: 14px;\n          opacity: 0.7;\n          font-family: inherit;\n          border: none;\n          margin: 0;\n          padding: 0;\n          background: none;\n          color: inherit;\n          margin: 10px 0;\n        }\n        #location {\n          font-size: 14px;\n          opacity: 0.7;\n          font-family: inherit;\n          border: none;\n          margin: 0;\n          padding: 0;\n          background: none;\n          color: inherit;\n          cursor: pointer;\n        }</style><div id="header"><div id="title">','</div><div id="version">📦','</div></div><div id="middle"><wcfactory-ui-scripts .scripts="','" .location="','"></wcfactory-ui-scripts></div><div id="footer"><wcfactory-ui-location .location="','"></wcfactory-ui-location></div>']);return fn=function(){return n},n}customElements.define("wcfactory-ui-location",ln);var pn=function(n){function t(){var n;return c()(this,t),(n=l()(this,p()(t).call(this))).element={},n}return m()(t,n),u()(t,null,[{key:"properties",get:function(){return{element:{type:Object}}}}]),u()(t,[{key:"render",value:function(){return Object(v.b)(fn(),this.element.name,this.element.version,this.element.scripts,this.element.location,this.element.location)}}]),t}(v.a);function dn(){var n=r()(['<style>input {\n        }</style><label><slot name="label"></slot></label> <input type="text" placeholder="','">']);return dn=function(){return n},n}customElements.define("wcfactory-ui-element",pn);var yn=function(n){function t(){var n;return c()(this,t),(n=l()(this,p()(t).call(this))).placeholder="",n}return m()(t,n),u()(t,null,[{key:"properties",get:function(){return{placeholder:{type:String}}}}]),u()(t,[{key:"render",value:function(){return Object(v.b)(dn(),this.placeholder)}}]),t}(v.a);function hn(){var n=r()(["\n        query($name: ID!) {\n          factory(name: $name) {\n            name\n            location\n            scripts\n            elements {\n              id\n              name\n              location\n              version\n              scripts\n            }\n          }\n        }\n      "]);return hn=function(){return n},n}function mn(){var n=r()(['<div id="element-container" active="','"><div id="element" @click="','" @keypress="','" data-name="','" aria-role="button" aria-haspopup="true" aria-pressed="','" tabindex="1">📦 ','</div><div id="element-item-container" tabindex="','"><wcfactory-ui-element .element="','" tabindex="','"></wcfactory-ui-element></div></div>']);return mn=function(){return n},n}function vn(){var n=r()(['<style>:host {\n            --wcfactory-ui-factory-font-size: 16px;\n            display: block;\n            font-size: var(--wcfactory-ui-factory-font-size);\n          }\n          *[aria-role="button"] {\n            cursor: pointer;\n          }\n          #factory-info {\n            background: rgba(0,0,0, 0.1);\n            padding: calc(var(--wcfactory-ui-factory-font-size) * 1.2);\n          }\n          #factory-info wcfactory-ui-scripts {\n            --wcfactory-ui-scripts-font-size: 14px;\n          }\n          #factory-info + #filter {\n            --wcfactory-ui-factory-filter-margin-top: 3em;\n            margin-top: var(--wcfactory-ui-factory-filter-margin-top);\n          }\n          #element-container {\n            display: block;\n            font-family: inherit;\n            border: none;\n            padding: 0;\n            margin: 0;\n            color: inherit;\n          }\n          #element {\n            display: flex;\n            flex-direction: column;\n            padding: 10px;\n          }\n          #element:hover, #element:focus {\n            background-color: var(--list-item-hover-background);\n          }\n          #element-item-container {\n            max-height: 0;\n            display: block;\n            overflow: hidden;\n          }\n          #element-container[active="true"] {\n            margin: 20px;\n          }\n          #element-container[active="true"] #element-item-container {\n            max-height: 100vh;\n            transform: scale(1.1);\n            transition: all 0.4s ease-in-out;\n            margin-top: -50px;\n            box-shadow: 1px 1px 1px rgba(0,0,0, 0.2)\n          }</style><div id="factory-info">Name: <span class="name">','</span><br>Location:<wcfactory-ui-location location="','"></wcfactory-ui-location><br><wcfactory-ui-scripts .scripts="','" .location="','"></wcfactory-ui-scripts><br></div><div id="filter">Elements: (',')<wcfactory-ui-search placeholder="element name" @input="','"><span slot="label">Filter elements:</span></wcfactory-ui-search></div><div id="elements">',"</div>"]);return vn=function(){return n},n}function bn(){var n=r()(["loading..."]);return bn=function(){return n},n}customElements.define("wcfactory-ui-search",yn);var gn=function(n){function t(){var n;return c()(this,t),(n=l()(this,p()(t).call(this))).factory=null,n.loading=!0,n.activeElement=null,n.elementFilter="",n}return m()(t,n),u()(t,null,[{key:"properties",get:function(){return{location:{type:Object},loading:{type:Boolean},factory:{type:Object},activeElement:{type:String},elementFilter:{type:String}}}}]),u()(t,[{key:"render",value:function(){var n=this,t=this.location.params.factory;if(this.fetchFactory(t),this.loading)return Object(v.b)(bn());if(this.factory){var e=new J.default(this.factory.elements,{keys:["name"],minMatchCharLength:2}),i=""!==this.elementFilter?e.search(this.elementFilter):this.factory.elements;return Object(v.b)(vn(),this.factory.name,this.factory.location,this.factory.scripts,this.factory.location,this.factory.elements.length,function(t){return n.elementFilter=t.composedPath()[0].value},i.map(function(t){return Object(v.b)(mn(),t.name===n.activeElement,n._activateItemHander,n._activateItemHander,t.name,t.name===n.activeElement,t.name,t.name===n.activeElement?"1":null,t,t.name===n.activeElement?"1":null)}))}}},{key:"fetchFactory",value:function(n){var t=this;try{I.watchQuery({query:w()(hn()),variables:{name:n}}).subscribe(function(n){var e=n.data.factory;t.loading=!1,t.factory=e})}catch(n){}}},{key:"_activateItemHander",value:function(n){var t=!1;"click"===n.type?t=!0:void 0!==n.keyCode&&(13!==n.keyCode&&32!==n.keyCode||(t=!0)),t&&(this.activeElement=n.target.dataset.name,n.target.nextSibling.focus())}}]),t}(v.a);function wn(){var n=r()(["that path does not exist 😔"]);return wn=function(){return n},n}customElements.define("wcfactory-ui-factory",gn);var kn=function(n){function t(){return c()(this,t),l()(this,p()(t).apply(this,arguments))}return m()(t,n),u()(t,[{key:"render",value:function(){return Object(v.b)(wn())}}]),t}(v.a);function xn(){var n=r()(["\n          <div>\n            <wcfactory-ui-active-script .script=","></wcfactory-ui-active-script>\n          </div>\n        "]);return xn=function(){return n},n}function On(){var n=r()(["\n      ","\n    "]);return On=function(){return n},n}function jn(){var n=r()(["\n  query {\n    operations {\n      pid\n      location\n      script\n      element {\n        name\n      }\n    }\n  }\n"]);return jn=function(){return n},n}customElements.define("wcfactory-ui-404",kn);var En=w()(jn()),Sn=function(n){function t(){var n;return c()(this,t),(n=l()(this,p()(t).call(this))).client=I,n.query=En,n}return m()(t,n),u()(t,[{key:"render",value:function(){var n=this.data;this.error,this.loading;return Object(N.c)(On(),n.operations.map(function(n){return Object(N.c)(xn(),n)}))}}]),t}(N.b);function zn(){var n=r()(['<style>:host {\n          --list-item-hover-background: rgba(255,255,255, 0.1);\n        }\n        h1 a {\n          color: inherit;\n          text-decoration: inherit;\n        }</style><style>:host {\n          display: block;\n          max-width: 900px;\n          margin: auto;\n        }\n        h1 {\n          text-align: center;\n          margin-bottom: 5vw\n        }</style><h1><a href="/">WCFactory</a></h1><wcfactory-ui-active-scripts></wcfactory-ui-active-scripts><div id="router-outlet"></div>']);return zn=function(){return n},n}customElements.define("wcfactory-ui-active-scripts",Sn);var qn=function(n){function t(){return c()(this,t),l()(this,p()(t).apply(this,arguments))}return m()(t,n),u()(t,[{key:"firstUpdated",value:function(){this.addEventListener("wcfactory-ui-open-location",this._openLocationHandler.bind(this)),this.routerSetup()}},{key:"disconnectedCallback",value:function(){y()(p()(t.prototype),"disconnectedCallback",this).call(this),this.removeEventListener("wcfactory-ui-open-location",this._openLocationHandler.bind(this))}},{key:"render",value:function(){return Object(v.b)(zn())}},{key:"routerSetup",value:function(){var n=this.shadowRoot.getElementById("router-outlet");new b.a(n).setRoutes([{path:"/",component:"wcfactory-ui-factories"},{path:"/factories",component:"wcfactory-ui-factory"},{path:"/factories/:factory",component:"wcfactory-ui-factory"},{path:"(.*)",component:"wcfactory-ui-404"}])}},{key:"_openLocationHandler",value:function(n){console.log("e:",n)}}]),t}(v.a);customElements.define("wcfactory-ui",qn)}}]);