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

Comparing version 1.2.4 to 1.3.0

CHANGELOG.md

 # myuw-search versions
 
+## 1.3.0
+
+* Added `myuw-search` CustomEvent that exposes the value in the search field when a search is submitted
+
 ## 1.2.4
@@ -4,0 +8,0 @@

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    myuw-search {\n        display: flex;\n        flex: auto;\n        border: var(--myuw-search-border, none);\n        border-radius: 5px;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    myuw-search {\n        border: var(--myuw-search-border, none);\n    }\n\n    #form {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\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        margin: 0;\n    }\n\n    #submit {\n        border-top-right-radius: 5px;\n        border-bottom-right-radius: 5px;\n        border: none;\n        border-left: 1px solid;\n        border-color: rgba(0,0,0,0.5);\n        color: #333;\n        background: #fff;\n        width: 56px;\n        font-size: 1.8rem;\n        margin: 0;\n        cursor: pointer;\n        transition: background-color 0.2s ease-in-out;\n    }\n\n    #submit:hover {\n        background-color: #ebeaea;\n    }\n\n    #toggle {\n        display: none;\n    }\n\n    #icon {\n        color: #333;\n    }\n    @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n        #submit {\n            display: none;\n        }\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 56px;\n            border-top-right-radius: 5px;\n            border-bottom-right-radius: 5px;\n            opacity: 0;\n            transition: opacity .4s cubic-bezier(.25, .8, .25, 1);\n        }\n        #toggle {\n            display: flex;\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: transparent;\n            border: none;\n            margin: 0 0 0 6px;\n            height: 42px;\n            width: 42px;\n            min-width: initial;\n            padding: 0;\n            min-width: 42px;\n            line-height: 24px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n\n        }\n        #toggle:hover {\n            background: var(--myuw-bar-button-hover, rgba(0,0,0,0.12));\n        }\n\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: var(--myuw-bar-button-bg, transparent);\n            border-radius: 50%;\n            overflow: hidden;\n            position: relative;\n            height: 34px;\n            width: 34px;\n            line-height: 34px;\n            padding: 0;\n            margin: 0;\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            right: var(--search-mobile-origin);\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\n            border: var(--myuw-search-border, 1px solid rgba(0,0,0,0.5));\n            border-radius: 5px;\n        }\n        #form[expanded] #input {\n            opacity: 1;\n            width: 100%;\n            max-width: none;\n            padding: 0 16px;\n        }\n        #form[expanded] #toggle {\n            position: absolute;\n            right: 0;\n            margin: 0 6px;\n            background: transparent;\n        }\n        #form[expanded] #toggle:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #iconToggle {\n            color: #000;\n            background: transparent;\n        }\n    } </style> <form id=\"form\" class=\"myuw-search-container\" onsubmit=\"$event.preventDefault(); submitSearch($event)\"> <button id=\"toggle\" aria-label=\"\" type=\"button\"> <i id=\"iconToggle\" class=\"material-icons\"></i> </button> <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    myuw-search {\n        display: flex;\n        flex: auto;\n        border: var(--myuw-search-border, none);\n        border-radius: 5px;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    myuw-search {\n        border: var(--myuw-search-border, none);\n    }\n\n    #form {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\n        margin: 0;\n    }\n\n    #input {\n        display: flex;\n        flex: auto;\n        height: 40px;\n        padding: 0 8px 0 12px;\n        font-size: 1rem;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        margin: 0;\n    }\n\n    #submit {\n        padding: 0;\n        position: relative;\n        border-top-right-radius: 3px;\n        border-bottom-right-radius: 3px;\n        border: none;\n        border-left: 1px solid;\n        border-color: rgba(0,0,0,0.15);\n        color: #333;\n        background: #fff;\n        width: 56px;\n        height: 40px;\n        font-size: 1.8rem;\n        margin: 0;\n        cursor: pointer;\n        transition: background-color 0.2s ease-in-out;\n    }\n\n    #submit #icon {\n        width: 24px;\n        height: 24px;\n        position: absolute;\n        top: 8px;\n        left: 16px;\n    }\n\n    #submit:hover {\n        background-color: #ebeaea;\n    }\n\n    #toggle {\n        display: none;\n    }\n\n    #icon {\n        color: #333;\n    }\n    @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n        #submit {\n            display: none;\n        }\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 56px;\n            border-top-right-radius: 5px;\n            border-bottom-right-radius: 5px;\n            opacity: 0;\n            transition: opacity .4s cubic-bezier(.25, .8, .25, 1);\n        }\n        #toggle {\n            display: flex;\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: transparent;\n            border: none;\n            margin: 0 0 0 6px;\n            height: 42px;\n            width: 42px;\n            min-width: initial;\n            padding: 0;\n            min-width: 42px;\n            line-height: 24px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n\n        }\n        #toggle:hover {\n            background: var(--myuw-bar-button-hover, rgba(0,0,0,0.12));\n        }\n\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: var(--myuw-bar-button-bg, transparent);\n            border-radius: 50%;\n            overflow: hidden;\n            position: relative;\n            height: 34px;\n            width: 34px;\n            line-height: 34px;\n            padding: 0;\n            margin: 0;\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            right: var(--search-mobile-origin);\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\n            border: var(--myuw-search-border, 1px solid rgba(0,0,0,0.5));\n            border-radius: 5px;\n        }\n        #form[expanded] #input {\n            opacity: 1;\n            width: 100%;\n            max-width: none;\n            padding: 0 16px;\n        }\n        #form[expanded] #toggle {\n            position: absolute;\n            right: 0;\n            margin: 0 6px;\n            background: transparent;\n        }\n        #form[expanded] #toggle:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #iconToggle {\n            color: #000;\n            background: transparent;\n        }\n    } </style> <form id=\"form\" class=\"myuw-search-container\" onsubmit=\"$event.preventDefault(); submitSearch($event)\"> <button id=\"toggle\" aria-label=\"\" type=\"button\"> <i id=\"iconToggle\" class=\"material-icons\"></i> </button> <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> ";
 
@@ -123,5 +123,16 @@ class MyUWSearch extends HTMLElement {
             event.stopPropagation();
+
+            // Using `callback` property:
             if (this.callback && typeof this.callback === 'function') {
-                this.callback( this.$input.value );
+                this.callback(this.$input.value);
             }
+
+            // Emitting a custom event:
+            var customEvent = new CustomEvent('myuw-search', {
+                bubbles: true,
+                detail: {
+                    value: this.$input.value
+                }
+            });
+            this.dispatchEvent(customEvent);
         }
@@ -164,2 +175,23 @@
 
+    /**
+     * Polyfill for supporting the CustomEvent constructor in IE9+
+     * From: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
+     */
+    (function () {
+        if (typeof window.CustomEvent === 'function') {
+            return false;
+        }
+
+        function CustomEvent (event, params) {
+            params = params || { bubbles: false, cancelable: false, detail: undefined };
+            var evt = document.createEvent( 'CustomEvent' );
+            evt.initCustomEvent(event, params.bubbles, params.cancelable, params.detail);
+            return evt;
+        }
+
+        CustomEvent.prototype = window.Event.prototype;
+
+        window.CustomEvent = CustomEvent;
+    })();
+
     exports.MyUWSearch = MyUWSearch;
@@ -166,0 +198,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.$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.$toggle=this.shadowRoot.querySelector("button#toggle"),this.$toggleIcon=this.shadowRoot.querySelector("i#iconToggle"),this.$icon.innerText=this.icon,this.$toggleIcon.innerText=this.icon,this.$input.setAttribute("aria-label",this.inputLabel),this.$input.setAttribute("placeholder",this.inputLabel),this.$button.setAttribute("aria-label",this.buttonLabel),this.$toggle.setAttribute("aria-label","show search"),this.$button.addEventListener("click",t=>{this.submitSearch(t)}),this.$toggle.addEventListener("click",t=>{this.toggleSearch(t)}),document.addEventListener("click",t=>{this.$form.hasAttribute("expanded")&&(t.target.closest("myuw-search")||this.toggleSearch(t))})}disconnectedCallback(){}updateComponent(t,n){switch(t){case"input-label":this.$input&&this.$input.setAttribute("placeholder",n);break;case"button-label":this.$button&&this.$button.setAttribute("aria-label",n);break;case"icon":this.$icon&&(this.$icon.innerText=n)}}submitSearch(t){t.preventDefault(),t.stopPropagation(),this.callback&&"function"==typeof this.callback&&this.callback(this.$input.value)}toggleSearch(t){this.$cssWidth=Math.max(document.documentElement.clientWidth,window.innerWidth||0),this.$togglePosition=this.$toggle.getBoundingClientRect();var n=Math.floor(this.$cssWidth-this.$togglePosition.left-42);this.$form.style.right=n,this.$form.hasAttribute("expanded")?(this.$form.removeAttribute("expanded"),this.$toggleIcon.innerText=this.icon,this.$toggle.setAttribute("aria-label","show search")):(this.$form.setAttribute("expanded","true"),this.$toggleIcon.innerText="arrow_forward",this.$toggle.setAttribute("aria-label","close search"))}}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    myuw-search {\n        display: flex;\n        flex: auto;\n        border: var(--myuw-search-border, none);\n        border-radius: 5px;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    myuw-search {\n        border: var(--myuw-search-border, none);\n    }\n\n    #form {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\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        margin: 0;\n    }\n\n    #submit {\n        border-top-right-radius: 5px;\n        border-bottom-right-radius: 5px;\n        border: none;\n        border-left: 1px solid;\n        border-color: rgba(0,0,0,0.5);\n        color: #333;\n        background: #fff;\n        width: 56px;\n        font-size: 1.8rem;\n        margin: 0;\n        cursor: pointer;\n        transition: background-color 0.2s ease-in-out;\n    }\n\n    #submit:hover {\n        background-color: #ebeaea;\n    }\n\n    #toggle {\n        display: none;\n    }\n\n    #icon {\n        color: #333;\n    }\n    @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n        #submit {\n            display: none;\n        }\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 56px;\n            border-top-right-radius: 5px;\n            border-bottom-right-radius: 5px;\n            opacity: 0;\n            transition: opacity .4s cubic-bezier(.25, .8, .25, 1);\n        }\n        #toggle {\n            display: flex;\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: transparent;\n            border: none;\n            margin: 0 0 0 6px;\n            height: 42px;\n            width: 42px;\n            min-width: initial;\n            padding: 0;\n            min-width: 42px;\n            line-height: 24px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n\n        }\n        #toggle:hover {\n            background: var(--myuw-bar-button-hover, rgba(0,0,0,0.12));\n        }\n\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: var(--myuw-bar-button-bg, transparent);\n            border-radius: 50%;\n            overflow: hidden;\n            position: relative;\n            height: 34px;\n            width: 34px;\n            line-height: 34px;\n            padding: 0;\n            margin: 0;\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            right: var(--search-mobile-origin);\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\n            border: var(--myuw-search-border, 1px solid rgba(0,0,0,0.5));\n            border-radius: 5px;\n        }\n        #form[expanded] #input {\n            opacity: 1;\n            width: 100%;\n            max-width: none;\n            padding: 0 16px;\n        }\n        #form[expanded] #toggle {\n            position: absolute;\n            right: 0;\n            margin: 0 6px;\n            background: transparent;\n        }\n        #form[expanded] #toggle:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #iconToggle {\n            color: #000;\n            background: transparent;\n        }\n    } </style> <form id="form" class="myuw-search-container" onsubmit="$event.preventDefault(); submitSearch($event)"> <button id="toggle" aria-label="" type="button"> <i id="iconToggle" class="material-icons"></i> </button> <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",n),t.MyUWSearch=n,t})({});
+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.$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.$toggle=this.shadowRoot.querySelector("button#toggle"),this.$toggleIcon=this.shadowRoot.querySelector("i#iconToggle"),this.$icon.innerText=this.icon,this.$toggleIcon.innerText=this.icon,this.$input.setAttribute("aria-label",this.inputLabel),this.$input.setAttribute("placeholder",this.inputLabel),this.$button.setAttribute("aria-label",this.buttonLabel),this.$toggle.setAttribute("aria-label","show search"),this.$button.addEventListener("click",t=>{this.submitSearch(t)}),this.$toggle.addEventListener("click",t=>{this.toggleSearch(t)}),document.addEventListener("click",t=>{this.$form.hasAttribute("expanded")&&(t.target.closest("myuw-search")||this.toggleSearch(t))})}disconnectedCallback(){}updateComponent(t,n){switch(t){case"input-label":this.$input&&this.$input.setAttribute("placeholder",n);break;case"button-label":this.$button&&this.$button.setAttribute("aria-label",n);break;case"icon":this.$icon&&(this.$icon.innerText=n)}}submitSearch(t){t.preventDefault(),t.stopPropagation(),this.callback&&"function"==typeof this.callback&&this.callback(this.$input.value);var n=new CustomEvent("myuw-search",{bubbles:!0,detail:{value:this.$input.value}});this.dispatchEvent(n)}toggleSearch(t){this.$cssWidth=Math.max(document.documentElement.clientWidth,window.innerWidth||0),this.$togglePosition=this.$toggle.getBoundingClientRect();var n=Math.floor(this.$cssWidth-this.$togglePosition.left-42);this.$form.style.right=n,this.$form.hasAttribute("expanded")?(this.$form.removeAttribute("expanded"),this.$toggleIcon.innerText=this.icon,this.$toggle.setAttribute("aria-label","show search")):(this.$form.setAttribute("expanded","true"),this.$toggleIcon.innerText="arrow_forward",this.$toggle.setAttribute("aria-label","close search"))}}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    myuw-search {\n        display: flex;\n        flex: auto;\n        border: var(--myuw-search-border, none);\n        border-radius: 5px;\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    myuw-search {\n        border: var(--myuw-search-border, none);\n    }\n\n    #form {\n        display: flex;\n        flex: auto;\n        flex-direction: row;\n        margin: 0;\n    }\n\n    #input {\n        display: flex;\n        flex: auto;\n        height: 40px;\n        padding: 0 8px 0 12px;\n        font-size: 1rem;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        margin: 0;\n    }\n\n    #submit {\n        padding: 0;\n        position: relative;\n        border-top-right-radius: 3px;\n        border-bottom-right-radius: 3px;\n        border: none;\n        border-left: 1px solid;\n        border-color: rgba(0,0,0,0.15);\n        color: #333;\n        background: #fff;\n        width: 56px;\n        height: 40px;\n        font-size: 1.8rem;\n        margin: 0;\n        cursor: pointer;\n        transition: background-color 0.2s ease-in-out;\n    }\n\n    #submit #icon {\n        width: 24px;\n        height: 24px;\n        position: absolute;\n        top: 8px;\n        left: 16px;\n    }\n\n    #submit:hover {\n        background-color: #ebeaea;\n    }\n\n    #toggle {\n        display: none;\n    }\n\n    #icon {\n        color: #333;\n    }\n    @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n        #submit {\n            display: none;\n        }\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 56px;\n            border-top-right-radius: 5px;\n            border-bottom-right-radius: 5px;\n            opacity: 0;\n            transition: opacity .4s cubic-bezier(.25, .8, .25, 1);\n        }\n        #toggle {\n            display: flex;\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: transparent;\n            border: none;\n            margin: 0 0 0 6px;\n            height: 42px;\n            width: 42px;\n            min-width: initial;\n            padding: 0;\n            min-width: 42px;\n            line-height: 24px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n\n        }\n        #toggle:hover {\n            background: var(--myuw-bar-button-hover, rgba(0,0,0,0.12));\n        }\n\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n            transition: background 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: var(--myuw-bar-button-bg, transparent);\n            border-radius: 50%;\n            overflow: hidden;\n            position: relative;\n            height: 34px;\n            width: 34px;\n            line-height: 34px;\n            padding: 0;\n            margin: 0;\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            right: var(--search-mobile-origin);\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\n            border: var(--myuw-search-border, 1px solid rgba(0,0,0,0.5));\n            border-radius: 5px;\n        }\n        #form[expanded] #input {\n            opacity: 1;\n            width: 100%;\n            max-width: none;\n            padding: 0 16px;\n        }\n        #form[expanded] #toggle {\n            position: absolute;\n            right: 0;\n            margin: 0 6px;\n            background: transparent;\n        }\n        #form[expanded] #toggle:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #iconToggle {\n            color: #000;\n            background: transparent;\n        }\n    } </style> <form id="form" class="myuw-search-container" onsubmit="$event.preventDefault(); submitSearch($event)"> <button id="toggle" aria-label="" type="button"> <i id="iconToggle" class="material-icons"></i> </button> <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",n),(function(){if("function"==typeof window.CustomEvent)return!1;function t(t,n){n=n||{bubbles:!1,cancelable:!1,detail:void 0};var e=document.createEvent("CustomEvent");return e.initCustomEvent(t,n.bubbles,n.cancelable,n.detail),e}t.prototype=window.Event.prototype,window.CustomEvent=t})(),t.MyUWSearch=n,t})({});

package.json

 {
   "name": "@myuw-web-components/myuw-search",
-  "version": "1.2.4",
+  "version": "1.3.0",
   "description": "A material search field made for use with MyUW web components",
@@ -5,0 +5,0 @@ "module": "dist/myuw-search.min.mjs",

README.md

@@ -28,16 +28,17 @@ # `<myuw-search>`
 
-Create a callback function wherever you want in your code:
+Listen for the `myuw-search` CustomEvent and process the value how you like:
 
 ```js
 /* 
-    Target the search component
-    - This example assumes you have given the component an ID value (e.g. <myuw-search id="search">)-
-    - The "value" parameter is the String value from the search input field
+    1. Listen for myuw-search event
+    2. Get the event data from event.detail.value
+    3. Do what you want with the search term!
 */
-document.getElementById('search').callback = (value) => {
-    /*
-        Perform search logic here. For example:
-            - Pass the search value as a parameter to your app's search page
-    */
-}
+document.body.addEventListener('myuw-search', (event) => {
+  var valueFromSearchBar = event.detail.value // "detail" object is part of CustomEvent spec
+  /*
+    Perform search logic here. For example:
+      - Pass the search value as a parameter to your app's search page
+  */
+}, false );
 ```
@@ -44,0 +45,0 @@

No alert changes

Improved metrics

Total package byte prevSize

52805

increased by7.81%

Lines of code

402

increased by16.86%

Number of lines in readme file

64

increased by1.59%

No dependency changes