@myuw-web-components/myuw-search - npm Package Compare versions

Comparing version 1.1.0 to 1.1.1

dist/myuw-search.js

 var MyUWSearch = (function (exports) {
     'use strict';
 
-    var tpl = "<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n    :host {\n        display: flex;\n        flex: auto;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    #container {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\n        padding: 0 18px;\n    }\n\n    #input {\n        display: flex;\n        flex: auto;\n        height: 40px;\n        padding: 0 8px;\n        font-size: 1rem;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 5px;\n        border-bottom-left-radius: 5px;\n\n    }\n\n    #submit {\n        border-top-right-radius: 5px;\n        border-bottom-right-radius: 5px;\n        border: none;\n        border-left: 1px solid #333;\n        color: #333;\n        background: #fff;\n        width: 56px;\n        font-size: 1.8rem;\n    }\n\n    #icon {\n        color: #333;\n    } </style> <div id=\"container\" class=\"myuw-search-container\"> <input id=\"input\" name=\"myuw-search-input\" aria-label=\"\" type=\"text\" placeholder=\"\"> <button id=\"submit\" aria-label=\"\"> <i id=\"icon\" class=\"material-icons\"></i> </button> </div> ";
+    var tpl = "<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n    :host {\n        display: flex;\n        flex: auto;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    #form {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\n        padding: 0 18px;\n        margin: 0;\n    }\n\n    #input {\n        display: flex;\n        flex: auto;\n        height: 40px;\n        padding: 0 8px;\n        font-size: 1rem;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 5px;\n        border-bottom-left-radius: 5px;\n\n    }\n\n    #submit {\n        border-top-right-radius: 5px;\n        border-bottom-right-radius: 5px;\n        border: none;\n        border-left: 1px solid #333;\n        color: #333;\n        background: #fff;\n        width: 56px;\n        font-size: 1.8rem;\n    }\n\n    #icon {\n        color: #333;\n    } </style> <form id=\"form\" class=\"myuw-search-container\" onsubmit=\"submitSearch()\"> <input id=\"input\" name=\"myuw-search-input\" aria-label=\"\" type=\"text\" placeholder=\"\"> <button id=\"submit\" aria-label=\"\" type=\"submit\"> <i id=\"icon\" class=\"material-icons\"></i> </button> </form> ";
 
@@ -47,2 +47,3 @@ class MyUWSearch extends HTMLElement {
             // Get elements to update
+            this.$form      = this.shadowRoot.querySelector('form#form');
             this.$icon      = this.shadowRoot.querySelector('i#icon');
@@ -62,6 +63,2 @@ this.$input     = this.shadowRoot.querySelector('input#input');
                 this.submitSearch();
-
-                if(this.callback && typeof this.callback === 'function'){
-                    this.callback( this.$input.value );
-                }
             });
@@ -90,3 +87,5 @@
         submitSearch() {
-            
+            if (this.callback && typeof this.callback === 'function') {
+                this.callback( this.$input.value );
+            }
         }
@@ -93,0 +92,0 @@ }

dist/myuw-search.min.js

@@ -1,1 +0,1 @@
-var MyUWSearch=(function(t){"use strict";class n extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(n.template.content.cloneNode(!0))}static get observedAttributes(){return["input-label","button-label","icon"]}attributeChangedCallback(t,n,e){this[t]=e,this.updateComponent(t,e)}connectedCallback(){this.icon=this.getAttribute("icon")||"search",this.inputLabel=this.getAttribute("input-label")||"Search",this.buttonLabel=this.getAttribute("button-label")||"Submit search",this.$icon=this.shadowRoot.querySelector("i#icon"),this.$input=this.shadowRoot.querySelector("input#input"),this.$button=this.shadowRoot.querySelector("button#submit"),this.$icon.innerText=this.icon,this.$input.setAttribute("aria-label",this.inputLabel),this.$input.setAttribute("placeholder",this.inputLabel),this.$button.setAttribute("aria-label",this.buttonLabel),this.$button.addEventListener("click",t=>{this.submitSearch(),this.callback&&"function"==typeof this.callback&&this.callback(this.$input.value)}),this.updateComponent()}disconnectedCallback(){}updateComponent(){}submitSearch(){}}return n.template=(function(t){const n=document.createElement("template");return n.innerHTML=t,n})('<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n    :host {\n        display: flex;\n        flex: auto;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    #container {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\n        padding: 0 18px;\n    }\n\n    #input {\n        display: flex;\n        flex: auto;\n        height: 40px;\n        padding: 0 8px;\n        font-size: 1rem;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 5px;\n        border-bottom-left-radius: 5px;\n\n    }\n\n    #submit {\n        border-top-right-radius: 5px;\n        border-bottom-right-radius: 5px;\n        border: none;\n        border-left: 1px solid #333;\n        color: #333;\n        background: #fff;\n        width: 56px;\n        font-size: 1.8rem;\n    }\n\n    #icon {\n        color: #333;\n    } </style> <div id="container" class="myuw-search-container"> <input id="input" name="myuw-search-input" aria-label="" type="text" placeholder=""> <button id="submit" aria-label=""> <i id="icon" class="material-icons"></i> </button> </div> '),window.customElements.define("myuw-search",n),t.MyUWSearch=n,t})({});
+var MyUWSearch=(function(t){"use strict";class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.template.content.cloneNode(!0))}static get observedAttributes(){return["input-label","button-label","icon"]}attributeChangedCallback(t,e,n){this[t]=n,this.updateComponent(t,n)}connectedCallback(){this.icon=this.getAttribute("icon")||"search",this.inputLabel=this.getAttribute("input-label")||"Search",this.buttonLabel=this.getAttribute("button-label")||"Submit search",this.$form=this.shadowRoot.querySelector("form#form"),this.$icon=this.shadowRoot.querySelector("i#icon"),this.$input=this.shadowRoot.querySelector("input#input"),this.$button=this.shadowRoot.querySelector("button#submit"),this.$icon.innerText=this.icon,this.$input.setAttribute("aria-label",this.inputLabel),this.$input.setAttribute("placeholder",this.inputLabel),this.$button.setAttribute("aria-label",this.buttonLabel),this.$button.addEventListener("click",t=>{this.submitSearch()}),this.updateComponent()}disconnectedCallback(){}updateComponent(){}submitSearch(){this.callback&&"function"==typeof this.callback&&this.callback(this.$input.value)}}return e.template=(function(t){const e=document.createElement("template");return e.innerHTML=t,e})('<style> @import url(https://fonts.googleapis.com/icon?family=Material+Icons);\n\n    :host {\n        display: flex;\n        flex: auto;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    #form {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\n        padding: 0 18px;\n        margin: 0;\n    }\n\n    #input {\n        display: flex;\n        flex: auto;\n        height: 40px;\n        padding: 0 8px;\n        font-size: 1rem;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 5px;\n        border-bottom-left-radius: 5px;\n\n    }\n\n    #submit {\n        border-top-right-radius: 5px;\n        border-bottom-right-radius: 5px;\n        border: none;\n        border-left: 1px solid #333;\n        color: #333;\n        background: #fff;\n        width: 56px;\n        font-size: 1.8rem;\n    }\n\n    #icon {\n        color: #333;\n    } </style> <form id="form" class="myuw-search-container" onsubmit="submitSearch()"> <input id="input" name="myuw-search-input" aria-label="" type="text" placeholder=""> <button id="submit" aria-label="" type="submit"> <i id="icon" class="material-icons"></i> </button> </form> '),window.customElements.define("myuw-search",e),t.MyUWSearch=e,t})({});

package.json

 {
   "name": "@myuw-web-components/myuw-search",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "A material search field made for use with MyUW web components",
@@ -13,3 +13,3 @@ "module": "dist/myuw-search.min.mjs",
     "prepare": "npm run build",
-    "pages": "rm -rf demo && mkdir -p demo && cp -r dist demo/ && cp index.html demo/ && gh-pages -d demo",
+    "pages": "rm -rf demo && mkdir -p demo && cp -r dist demo/ && cp index.html demo/ && gh-pages -d demo --repo [e-mail]:myuw-web-components/myuw-search.git",
     "postpublish": "npm run pages"
@@ -16,0 +16,0 @@ },

No alert changes

Improved metrics

Total package byte prevSize

26742

increased by1.83%

Lines of code

182

increased by1.11%

No dependency changes