web-components-starter - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

dist/build-custom-elements-shady-dom/module/template3.js

@@ -1,1 +0,1 @@
-var style="<style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>",template=function(e){var n=e.options,t=e.type;return"\n  "+style+'\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+n.reduce(function(e,n){return e+'\n        <option\n          value="'+n.value+'"\n          '+(n.selected?"selected":"")+"\n        >\n          "+n.text+"\n        </option>\n      "},"")+"\n    </select>\n  </div>\n"};export default template;
+var style="<style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>",template=function(e){var n=e.options,t=e.type;return"\n  "+style+'\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+(n?n.reduce(function(e,n){return e+'\n        <option\n          value="'+n.value+'"\n          '+(n.selected?"selected":"")+"\n        >\n          "+n.text+"\n        </option>\n      "},""):[])+"\n    </select>\n  </div>\n"};export default template;

dist/build-custom-elements-shady-dom/module/web-components-starter-input.js

@@ -1,1 +0,1 @@
-import{generateUUID,loadComponent}from"./utilities.js";import template from"./template2.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterInput=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");return n.innerHTML=template({type:t.type}),t.attachShadow({mode:"open"}).appendChild(n).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),e}(),WebComponentsStarterInput$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-input",element:WebComponentsStarterInput})};export default WebComponentsStarterInput$1;
+import{generateUUID,loadComponent}from"./utilities.js";import template from"./template2.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterInput=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");n.innerHTML=template({type:t.type});return t.attachShadow({mode:"open"}).appendChild(n).querySelector("div[data-web-components-starter-input] > input").addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),e}(),WebComponentsStarterInput$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-input",element:WebComponentsStarterInput})};export default WebComponentsStarterInput$1;

dist/build-custom-elements-shady-dom/module/web-components-starter-select.js

@@ -1,1 +0,1 @@
-import{generateUUID,loadComponent}from"./utilities.js";import template from"./template3.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterSelect=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");return n.innerHTML=template({options:t.options,type:t.type}),t.attachShadow({mode:"open"}).appendChild(n).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var t=void 0;try{t=JSON.parse(this.getAttribute("options"))}catch(e){t=[]}return t}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),e}(),WebComponentsStarterSelect$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-select",element:WebComponentsStarterSelect})};export default WebComponentsStarterSelect$1;
+import{generateUUID,loadComponent}from"./utilities.js";import template from"./template3.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterSelect=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");n.innerHTML=template({options:t.options,type:t.type});return t.attachShadow({mode:"open"}).appendChild(n).querySelector("div[data-web-components-starter-select] > select").addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var t=void 0;try{t=JSON.parse(this.getAttribute("options"))}catch(e){t=[]}return t}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),e}(),WebComponentsStarterSelect$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-select",element:WebComponentsStarterSelect})};export default WebComponentsStarterSelect$1;

dist/build-custom-elements-shady-dom/nomodule/template3.js

@@ -1,1 +0,1 @@
-System.register([],function(n,e){"use strict";return{execute:function(){System.register([],function(n,e){return{setters:[],execute:function(){"<style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>",n("default",function(n){var e=n.options,t=n.type;return'\n  <style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+e.reduce(function(n,e){return n+'\n        <option\n          value="'+e.value+'"\n          '+(e.selected?"selected":"")+"\n        >\n          "+e.text+"\n        </option>\n      "},"")+"\n    </select>\n  </div>\n"})}}})}}});
+System.register([],function(n,e){"use strict";return{execute:function(){System.register([],function(n,e){return{setters:[],execute:function(){"<style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>",n("default",function(n){var e=n.options,t=n.type;return'\n  <style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+(e?e.reduce(function(n,e){return n+'\n        <option\n          value="'+e.value+'"\n          '+(e.selected?"selected":"")+"\n        >\n          "+e.text+"\n        </option>\n      "},""):[])+"\n    </select>\n  </div>\n"})}}})}}});

dist/build-custom-elements-shady-dom/nomodule/web-components-starter-input.js

@@ -1,1 +0,1 @@
-System.register(["./chunk-bb24755f.js"],function(t,e){"use strict";var s,c,a,l;return{setters:[function(t){s=t.a,c=t.b,a=t.c,l=t.d}],execute:function(){System.register(["../../../utilities.js","./template.js"],function(t,e){var u,n,r,o;function i(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}return{setters:[function(t){u=t.generateUUID,n=t.loadComponent},function(t){r=t.default}],execute:function(){Object.setPrototypeOf(i.prototype,HTMLElement.prototype),Object.setPrototypeOf(i,HTMLElement),o=function(t){function n(){s(this,n);var t=l(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");return e.innerHTML=r({type:t.type}),t.attachShadow({mode:"open"}).appendChild(e).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return a(n,i),c(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||u()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),n}(),t("default",function(){return n({customElements:customElements,tagName:"web-components-starter-input",element:o})})}}})}}});
+System.register(["./chunk-bb24755f.js"],function(t,e){"use strict";var s,c,a,l;return{setters:[function(t){s=t.a,c=t.b,a=t.c,l=t.d}],execute:function(){System.register(["../../../utilities.js","./template.js"],function(t,e){var u,n,r,o;function i(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}return{setters:[function(t){u=t.generateUUID,n=t.loadComponent},function(t){r=t.default}],execute:function(){Object.setPrototypeOf(i.prototype,HTMLElement.prototype),Object.setPrototypeOf(i,HTMLElement),o=function(t){function n(){s(this,n);var t=l(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");e.innerHTML=r({type:t.type});return t.attachShadow({mode:"open"}).appendChild(e).querySelector("div[data-web-components-starter-input] > input").addEventListener("change",t.inputValueChange.bind(t)),t}return a(n,i),c(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||u()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),n}(),t("default",function(){return n({customElements:customElements,tagName:"web-components-starter-input",element:o})})}}})}}});

dist/build-custom-elements-shady-dom/nomodule/web-components-starter-select.js

@@ -1,1 +0,1 @@
-System.register(["./chunk-bb24755f.js"],function(t,e){"use strict";var s,c,a,l;return{setters:[function(t){s=t.a,c=t.b,a=t.c,l=t.d}],execute:function(){System.register(["../../../utilities.js","./template.js"],function(t,e){var o,n,u,r;function i(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}return{setters:[function(t){o=t.generateUUID,n=t.loadComponent},function(t){u=t.default}],execute:function(){Object.setPrototypeOf(i.prototype,HTMLElement.prototype),Object.setPrototypeOf(i,HTMLElement),r=function(t){function n(){s(this,n);var t=l(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");return e.innerHTML=u({options:t.options,type:t.type}),t.attachShadow({mode:"open"}).appendChild(e).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return a(n,i),c(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var e=void 0;try{e=JSON.parse(this.getAttribute("options"))}catch(t){e=[]}return e}},{key:"type",get:function(){return this.getAttribute("type")||o()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),n}(),t("default",function(){return n({customElements:customElements,tagName:"web-components-starter-select",element:r})})}}})}}});
+System.register(["./chunk-bb24755f.js"],function(t,e){"use strict";var s,c,a,l;return{setters:[function(t){s=t.a,c=t.b,a=t.c,l=t.d}],execute:function(){System.register(["../../../utilities.js","./template.js"],function(t,e){var o,n,r,u;function i(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}return{setters:[function(t){o=t.generateUUID,n=t.loadComponent},function(t){r=t.default}],execute:function(){Object.setPrototypeOf(i.prototype,HTMLElement.prototype),Object.setPrototypeOf(i,HTMLElement),u=function(t){function n(){s(this,n);var t=l(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");e.innerHTML=r({options:t.options,type:t.type});return t.attachShadow({mode:"open"}).appendChild(e).querySelector("div[data-web-components-starter-select] > select").addEventListener("change",t.inputValueChange.bind(t)),t}return a(n,i),c(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var e=void 0;try{e=JSON.parse(this.getAttribute("options"))}catch(t){e=[]}return e}},{key:"type",get:function(){return this.getAttribute("type")||o()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),n}(),t("default",function(){return n({customElements:customElements,tagName:"web-components-starter-select",element:u})})}}})}}});

dist/build-ie11/nomodule/template3.js

@@ -1,1 +0,1 @@
-System.register([],function(n,e){"use strict";return{execute:function(){n("default",function(n){var e=n.options,t=n.type;return'\n  <style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+e.reduce(function(n,e){return n+'\n        <option\n          value="'+e.value+'"\n          '+(e.selected?"selected":"")+"\n        >\n          "+e.text+"\n        </option>\n      "},"")+"\n    </select>\n  </div>\n"})}}});
+System.register([],function(n,e){"use strict";return{execute:function(){n("default",function(n){var e=n.options,t=n.type;return'\n  <style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+(e?e.reduce(function(n,e){return n+'\n        <option\n          value="'+e.value+'"\n          '+(e.selected?"selected":"")+"\n        >\n          "+e.text+"\n        </option>\n      "},""):[])+"\n    </select>\n  </div>\n"})}}});

dist/build-ie11/nomodule/web-components-starter-input.js

@@ -1,1 +0,1 @@
-System.register(["./utilities.js","./template2.js","./chunk-bb24755f.js"],function(e,t){"use strict";var u,n,i,r,a,o,s;return{setters:[function(t){u=t.generateUUID,n=t.loadComponent},function(t){i=t.default},function(t){r=t.a,a=t.b,o=t.c,s=t.d}],execute:function(){var t=function(t){function n(){r(this,n);var t=s(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");return e.innerHTML=i({type:t.type}),t.attachShadow({mode:"open"}).appendChild(e).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return o(n,t),a(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||u()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),n}(HTMLElement);e("default",function(){return n({customElements:customElements,tagName:"web-components-starter-input",element:t})})}}});
+System.register(["./utilities.js","./template2.js","./chunk-bb24755f.js"],function(e,t){"use strict";var u,n,i,r,a,o,s;return{setters:[function(t){u=t.generateUUID,n=t.loadComponent},function(t){i=t.default},function(t){r=t.a,a=t.b,o=t.c,s=t.d}],execute:function(){var t=function(t){function n(){r(this,n);var t=s(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");e.innerHTML=i({type:t.type});return t.attachShadow({mode:"open"}).appendChild(e).querySelector("div[data-web-components-starter-input] > input").addEventListener("change",t.inputValueChange.bind(t)),t}return o(n,t),a(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||u()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),n}(HTMLElement);e("default",function(){return n({customElements:customElements,tagName:"web-components-starter-input",element:t})})}}});

dist/build-ie11/nomodule/web-components-starter-select.js

@@ -1,1 +0,1 @@
-System.register(["./utilities.js","./template3.js","./chunk-bb24755f.js"],function(e,t){"use strict";var u,n,i,o,r,s,a;return{setters:[function(t){u=t.generateUUID,n=t.loadComponent},function(t){i=t.default},function(t){o=t.a,r=t.b,s=t.c,a=t.d}],execute:function(){var t=function(t){function n(){o(this,n);var t=a(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");return e.innerHTML=i({options:t.options,type:t.type}),t.attachShadow({mode:"open"}).appendChild(e).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return s(n,t),r(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var e=void 0;try{e=JSON.parse(this.getAttribute("options"))}catch(t){e=[]}return e}},{key:"type",get:function(){return this.getAttribute("type")||u()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),n}(HTMLElement);e("default",function(){return n({customElements:customElements,tagName:"web-components-starter-select",element:t})})}}});
+System.register(["./utilities.js","./template3.js","./chunk-bb24755f.js"],function(e,t){"use strict";var u,n,i,o,r,s,a;return{setters:[function(t){u=t.generateUUID,n=t.loadComponent},function(t){i=t.default},function(t){o=t.a,r=t.b,s=t.c,a=t.d}],execute:function(){var t=function(t){function n(){o(this,n);var t=a(this,(n.__proto__||Object.getPrototypeOf(n)).call(this)),e=document.createElement("div");e.innerHTML=i({options:t.options,type:t.type});return t.attachShadow({mode:"open"}).appendChild(e).querySelector("div[data-web-components-starter-select] > select").addEventListener("change",t.inputValueChange.bind(t)),t}return s(n,t),r(n,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var e=void 0;try{e=JSON.parse(this.getAttribute("options"))}catch(t){e=[]}return e}},{key:"type",get:function(){return this.getAttribute("type")||u()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),n}(HTMLElement);e("default",function(){return n({customElements:customElements,tagName:"web-components-starter-select",element:t})})}}});

dist/build-no-polyfills/module/template3.js

@@ -1,1 +0,1 @@
-var style="<style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>",template=function(e){var n=e.options,t=e.type;return"\n  "+style+'\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+n.reduce(function(e,n){return e+'\n        <option\n          value="'+n.value+'"\n          '+(n.selected?"selected":"")+"\n        >\n          "+n.text+"\n        </option>\n      "},"")+"\n    </select>\n  </div>\n"};export default template;
+var style="<style>\n  :host {\n    display: block;\n  }\n\n  /* ie11 has a :host styling issue */\n  div[data-web-components-starter-select] {\n    margin-bottom: 1rem;\n  }\n\n  select {\n    width: calc(100% + 1rem);\n  }\n</style>",template=function(e){var n=e.options,t=e.type;return"\n  "+style+'\n\n  <div data-web-components-starter-select>\n    <label for="'+t+'"><slot name="label"></slot></label>\n    <select id="'+t+'" name="'+t+'">\n      '+(n?n.reduce(function(e,n){return e+'\n        <option\n          value="'+n.value+'"\n          '+(n.selected?"selected":"")+"\n        >\n          "+n.text+"\n        </option>\n      "},""):[])+"\n    </select>\n  </div>\n"};export default template;

dist/build-no-polyfills/module/web-components-starter-input.js

@@ -1,1 +0,1 @@
-import{generateUUID,loadComponent}from"./utilities.js";import template from"./template2.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterInput=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");return n.innerHTML=template({type:t.type}),t.attachShadow({mode:"open"}).appendChild(n).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),e}(),WebComponentsStarterInput$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-input",element:WebComponentsStarterInput})};export default WebComponentsStarterInput$1;
+import{generateUUID,loadComponent}from"./utilities.js";import template from"./template2.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterInput=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");n.innerHTML=template({type:t.type});return t.attachShadow({mode:"open"}).appendChild(n).querySelector("div[data-web-components-starter-input] > input").addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("input").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["type","value"]}}]),e}(),WebComponentsStarterInput$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-input",element:WebComponentsStarterInput})};export default WebComponentsStarterInput$1;

dist/build-no-polyfills/module/web-components-starter-select.js

@@ -1,1 +0,1 @@
-import{generateUUID,loadComponent}from"./utilities.js";import template from"./template3.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterSelect=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");return n.innerHTML=template({options:t.options,type:t.type}),t.attachShadow({mode:"open"}).appendChild(n).querySelector("#"+t.type).addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var t=void 0;try{t=JSON.parse(this.getAttribute("options"))}catch(e){t=[]}return t}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),e}(),WebComponentsStarterSelect$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-select",element:WebComponentsStarterSelect})};export default WebComponentsStarterSelect$1;
+import{generateUUID,loadComponent}from"./utilities.js";import template from"./template3.js";import{a as classCallCheck,b as createClass,c as inherits,d as possibleConstructorReturn}from"./chunk-bf29fde5.js";function _CustomElement(){return Reflect.construct(HTMLElement,[],this.__proto__.constructor)}Object.setPrototypeOf(_CustomElement.prototype,HTMLElement.prototype),Object.setPrototypeOf(_CustomElement,HTMLElement);var WebComponentsStarterSelect=function(t){function e(){classCallCheck(this,e);var t=possibleConstructorReturn(this,(e.__proto__||Object.getPrototypeOf(e)).call(this)),n=document.createElement("div");n.innerHTML=template({options:t.options,type:t.type});return t.attachShadow({mode:"open"}).appendChild(n).querySelector("div[data-web-components-starter-select] > select").addEventListener("change",t.inputValueChange.bind(t)),t}return inherits(e,_CustomElement),createClass(e,[{key:"attributeChangedCallback",value:function(t,e,n){e!==n&&(this[t]=n)}},{key:"inputValueChange",value:function(t){this.value=t.target.value}},{key:"options",get:function(){var t=void 0;try{t=JSON.parse(this.getAttribute("options"))}catch(e){t=[]}return t}},{key:"type",get:function(){return this.getAttribute("type")||generateUUID()},set:function(t){this.setAttribute("type",t)}},{key:"value",get:function(){return this.getAttribute("value")},set:function(t){this.shadowRoot.querySelector("select").value=t,this.setAttribute("value",t)}}],[{key:"observedAttributes",get:function(){return["options, type","value"]}}]),e}(),WebComponentsStarterSelect$1=function(){return loadComponent({customElements:customElements,tagName:"web-components-starter-select",element:WebComponentsStarterSelect})};export default WebComponentsStarterSelect$1;

package.json

 {
-  "version": "0.0.9",
+  "version": "0.0.10",
   "name": "web-components-starter",
@@ -4,0 +4,0 @@ "description": "A Web Components starter project",

src/components/form-elements/web-components-starter-input/web-components-starter-input.js

@@ -12,3 +12,4 @@ import { generateUUID, loadComponent } from '../../../utilities.js'
     const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(container)
-    const inputNode = shadowRoot.querySelector(`#${this.type}`)
+    const querySelector = 'div[data-web-components-starter-input] > input'
+    const inputNode = shadowRoot.querySelector(querySelector)
 
@@ -15,0 +16,0 @@ inputNode.addEventListener(

src/components/form-elements/web-components-starter-select/template.js

@@ -22,3 +22,3 @@ const style = `<style>
     <select id="${type}" name="${type}">
-      ${options.reduce((pre, cur) => `${pre}
+      ${options ? options.reduce((pre, cur) => `${pre}
         <option
@@ -33,5 +33,5 @@ value="${cur.value}"
         </option>
-      `, '')}
+      `, '') : []}
     </select>
   </div>
 `

src/components/form-elements/web-components-starter-select/web-components-starter-select.js

@@ -12,5 +12,6 @@ import { generateUUID, loadComponent } from '../../../utilities.js'
     const shadowRoot = this.attachShadow({ mode: 'open' }).appendChild(container)
-    const inputNode = shadowRoot.querySelector(`#${this.type}`)
+    const querySelector = 'div[data-web-components-starter-select] > select'
+    const selectNode = shadowRoot.querySelector(querySelector)
 
-    inputNode.addEventListener(
+    selectNode.addEventListener(
       'change',
@@ -17,0 +18,0 @@ this.inputValueChange.bind(this)

No alert changes

Improved metrics

Total package byte prevSize

77435

increased by0.64%

Lines of code

619

increased by0.65%

No dependency changes