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

Comparing version 1.1.3 to 1.1.4

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    #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($event)\"> <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> ";
+    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=\"$event.preventDefault(); submitSearch($event)\"> <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> ";
 
@@ -85,2 +85,3 @@ class MyUWSearch extends HTMLElement {
         submitSearch(event) {
+            event.preventDefault();
             event.stopPropagation();
@@ -87,0 +88,0 @@ if (this.callback && typeof this.callback === 'function') {

dist/myuw-search.min.js

@@ -1,1 +0,1 @@
-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(t)}),this.updateComponent()}disconnectedCallback(){}updateComponent(){}submitSearch(t){t.stopPropagation(),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($event)"> <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})({});
+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(t)}),this.updateComponent()}disconnectedCallback(){}updateComponent(){}submitSearch(t){t.preventDefault(),t.stopPropagation(),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="$event.preventDefault(); submitSearch($event)"> <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.3",
+  "version": "1.1.4",
   "description": "A material search field made for use with MyUW web components",
@@ -5,0 +5,0 @@ "module": "dist/myuw-search.min.mjs",

No alert changes

Improved metrics

Total package byte prevSize

27098

increased by0.77%

Lines of code

186

increased by1.09%

No dependency changes