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

Comparing version 1.5.8 to 1.5.9

dist/myuw-search.js

@@ -157,3 +157,3 @@ var MyUWSearch = (function (exports) {
 
-  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: 16px;\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: 59px;\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: 20px;\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\n   .visually-hidden {\n      position: absolute !important;\n      overflow: hidden;\n      height: 1px;\n      width: 1px;\n      word-wrap: normal;\n    }\n\n    .hiddenElement {\n      display: none !important;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] {\n      background-color: #f3f3f3 !important;\n      pointer-events: none;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] #icon{\n      opacity: 0.5;\n    }\n\n    @media screen, \\0 all, \\\\0 screen {\n      @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #submit {\n          display:none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 59px;\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\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: 42px;\n            line-height: 24px;\n            padding: 4px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n        }\n\n        #toggle:hover {\n            background: rgba(0, 0, 0, 0.2);\n        }\n\n        #toggle:focus {\n            outline: 2px solid #5e9ed6;\n            outline: -webkit-focus-ring-color auto 5px;\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            fill: white;\n            height: 22px;\n            padding-top: 5px;\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: 98.6%;\n            z-index: 999;\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] #submit {\n            display: block;\n            position: absolute;\n            right: 0;\n            background: transparent;\n            height: 100%;\n        }\n        #form[expanded] #submit:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #icon {\n            color: #000;\n            fill: #000;\n            background: transparent;\n            top: 16px;\n        }\n    }\n  } </style> <form id=\"form\" role=\"search\" class=\"myuw-search-container\" onsubmit=\"$event.preventDefault(); submitSearch($event)\"> <!-- Mobile button to toggle search input --> <button id=\"toggle\" aria-label=\"Show search input\" type=\"button\"> <svg id=\"iconToggle\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d=\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\"/></svg> </button> <input id=\"input\" name=\"myuw-search-input\" aria-label=\"\" type=\"text\" placeholder=\"\"> <!-- Submit search form button --> <button aria-disabled=\"true\" id=\"submit\" aria-label=\"\" type=\"submit\"> <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d=\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\"/></svg> </button> <p class=\"visually-hidden\" aria-live=\"assertive\"></p> </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: 16px;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        margin: 0;\n        font-family: Red Hat Text, sans-serif;\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: 59px;\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: 20px;\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\n   .visually-hidden {\n      position: absolute !important;\n      overflow: hidden;\n      height: 1px;\n      width: 1px;\n      word-wrap: normal;\n    }\n\n    .hiddenElement {\n      display: none !important;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] {\n      background-color: #f3f3f3 !important;\n      pointer-events: none;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] #icon{\n      opacity: 0.5;\n    }\n\n    @media screen, \\0 all, \\\\0 screen {\n      @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #submit {\n          display:none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 59px;\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\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: 42px;\n            line-height: 24px;\n            padding: 4px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n        }\n\n        #toggle:hover {\n            background: rgba(0, 0, 0, 0.2);\n        }\n\n        #toggle:focus {\n            outline: 2px solid #5e9ed6;\n            outline: -webkit-focus-ring-color auto 5px;\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            fill: white;\n            height: 22px;\n            padding-top: 5px;\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: 98.6%;\n            z-index: 999;\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] #submit {\n            display: block;\n            position: absolute;\n            right: 0;\n            background: transparent;\n            height: 100%;\n        }\n        #form[expanded] #submit:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #icon {\n            color: #000;\n            fill: #000;\n            background: transparent;\n            top: 16px;\n        }\n    }\n  } </style> <form id=\"form\" role=\"search\" class=\"myuw-search-container\" onsubmit=\"$event.preventDefault(); submitSearch($event)\"> <!-- Mobile button to toggle search input --> <button id=\"toggle\" aria-label=\"Show search input\" type=\"button\"> <svg id=\"iconToggle\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d=\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\"/></svg> </button> <input id=\"input\" name=\"myuw-search-input\" aria-label=\"\" type=\"text\" placeholder=\"\"> <!-- Submit search form button --> <button aria-disabled=\"true\" id=\"submit\" aria-label=\"\" type=\"submit\"> <svg id=\"icon\" xmlns=\"http://www.w3.org/2000/svg\" height=\"16\" width=\"16\" viewBox=\"0 0 512 512\">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d=\"M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z\"/></svg> </button> <p class=\"visually-hidden\" aria-live=\"assertive\"></p> </form> ";
 
@@ -160,0 +160,0 @@ var MyUWSearch = /*#__PURE__*/function (_HTMLElement) {

dist/myuw-search.min.js

@@ -1,1 +0,1 @@
-var MyUWSearch=(function(t){"use strict";function n(t){var n=(function(t,n){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var o=e.call(t,n||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)})(t,"string");return"symbol"==typeof n?n:String(n)}function e(t,e){for(var o=0;o<e.length;o++){var i=e[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,n(i.key),i)}}function o(t){return(o=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,n){return(i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,n){return t.__proto__=n,t})(t,n)}function r(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(t){return!1}}function a(t,n,e){return(a=r()?Reflect.construct.bind():function(t,n,e){var o=[null];o.push.apply(o,n);var r=new(Function.bind.apply(t,o));return e&&i(r,e.prototype),r}).apply(null,arguments)}function s(t){var n="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||!(function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(n){return"function"==typeof t}})(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return a(t,arguments,o(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),i(e,t)})(t)}function u(t,n){if(n&&("object"==typeof n||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t)}var c,l,p=(function(t){!(function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),n&&i(t,n)})(h,s(HTMLElement));var n,a,c,l,p,d=(n=h,a=r(),function(){var t,e=o(n);if(a){var i=o(this).constructor;t=Reflect.construct(e,arguments,i)}else t=e.apply(this,arguments);return u(this,t)});function h(){var t;return(function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")})(this,h),(t=d.call(this)).attachShadow({mode:"open"}),t.shadowRoot.appendChild(h.template.content.cloneNode(!0)),t}return c=h,p=[{key:"observedAttributes",get:function(){return["input-label","button-label","icon"]}}],(l=[{key:"attributeChangedCallback",value:function(t,n,e){this[t]=e,this.updateComponent(t,e)}},{key:"connectedCallback",value:function(){var t=this;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("svg#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("svg#iconToggle"),this.nonVisualHint=this.shadowRoot.querySelector(".visually-hidden"),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.$input.addEventListener("keyup",function(n){t.$input.value.length>0?t.$button.setAttribute("aria-disabled","false"):t.$button.setAttribute("aria-disabled","true")}),this.$button.addEventListener("click",function(n){t.submitSearch(n),t.$form.hasAttribute("expanded")&&t.toggleSearch(n)}),this.$toggle.addEventListener("click",function(n){t.toggleSearch(n)}),document.addEventListener("click",function(n){t.$form.hasAttribute("expanded")&&(n.target.closest("myuw-search")||t.toggleSearch(n))})}},{key:"disconnectedCallback",value:function(){}},{key:"updateComponent",value:function(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)}}},{key:"submitSearch",value:function(t){t.preventDefault(),t.stopPropagation(),this.$input.value.length>0?this.nonVisualHint.innerHTML="Searching for "+this.$input.value:this.nonVisualHint.innerHTML="Search field is empty.",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)}},{key:"toggleSearch",value:function(t){this.$cssWidth=Math.max(document.documentElement.clientWidth,window.innerWidth||0),this.$submitPosition=this.$button.getBoundingClientRect();var n=Math.floor(this.$cssWidth-this.$submitPosition.left-42);this.$form.style.right=n,this.$form.hasAttribute("expanded")?(this.$form.removeAttribute("expanded"),this.$icon.innerText=this.icon,this.$toggle.setAttribute("class","")):(this.$form.setAttribute("expanded","true"),this.$toggle.setAttribute("class","hiddenElement"),this.$icon.innerText="arrow_forward")}}])&&e(c.prototype,l),p&&e(c,p),Object.defineProperty(c,"prototype",{writable:!1}),h})();return p.template=(c='<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: 16px;\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: 59px;\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: 20px;\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\n   .visually-hidden {\n      position: absolute !important;\n      overflow: hidden;\n      height: 1px;\n      width: 1px;\n      word-wrap: normal;\n    }\n\n    .hiddenElement {\n      display: none !important;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] {\n      background-color: #f3f3f3 !important;\n      pointer-events: none;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] #icon{\n      opacity: 0.5;\n    }\n\n    @media screen, \\0 all, \\\\0 screen {\n      @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #submit {\n          display:none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 59px;\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\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: 42px;\n            line-height: 24px;\n            padding: 4px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n        }\n\n        #toggle:hover {\n            background: rgba(0, 0, 0, 0.2);\n        }\n\n        #toggle:focus {\n            outline: 2px solid #5e9ed6;\n            outline: -webkit-focus-ring-color auto 5px;\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            fill: white;\n            height: 22px;\n            padding-top: 5px;\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: 98.6%;\n            z-index: 999;\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] #submit {\n            display: block;\n            position: absolute;\n            right: 0;\n            background: transparent;\n            height: 100%;\n        }\n        #form[expanded] #submit:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #icon {\n            color: #000;\n            fill: #000;\n            background: transparent;\n            top: 16px;\n        }\n    }\n  } </style> <form id="form" role="search" class="myuw-search-container" onsubmit="$event.preventDefault(); submitSearch($event)"> \x3c!-- Mobile button to toggle search input --\x3e <button id="toggle" aria-label="Show search input" type="button"> <svg id="iconToggle" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> </button> <input id="input" name="myuw-search-input" aria-label="" type="text" placeholder=""> \x3c!-- Submit search form button --\x3e <button aria-disabled="true" id="submit" aria-label="" type="submit"> <svg id="icon" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> </button> <p class="visually-hidden" aria-live="assertive"></p> </form> ',l=document.createElement("template"),l.innerHTML=c,l),window.customElements.define("myuw-search",p),(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=p,t})({});
+var MyUWSearch=(function(t){"use strict";function n(t){var n=(function(t,n){if("object"!=typeof t||!t)return t;var e=t[Symbol.toPrimitive];if(void 0!==e){var o=e.call(t,n||"default");if("object"!=typeof o)return o;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===n?String:Number)(t)})(t,"string");return"symbol"==typeof n?n:String(n)}function e(t,e){for(var o=0;o<e.length;o++){var i=e[o];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,n(i.key),i)}}function o(t){return(o=Object.setPrototypeOf?Object.getPrototypeOf.bind():function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,n){return(i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(t,n){return t.__proto__=n,t})(t,n)}function r(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){})),!0}catch(t){return!1}}function a(t,n,e){return(a=r()?Reflect.construct.bind():function(t,n,e){var o=[null];o.push.apply(o,n);var r=new(Function.bind.apply(t,o));return e&&i(r,e.prototype),r}).apply(null,arguments)}function s(t){var n="function"==typeof Map?new Map:void 0;return(s=function(t){if(null===t||!(function(t){try{return-1!==Function.toString.call(t).indexOf("[native code]")}catch(n){return"function"==typeof t}})(t))return t;if("function"!=typeof t)throw new TypeError("Super expression must either be null or a function");if(void 0!==n){if(n.has(t))return n.get(t);n.set(t,e)}function e(){return a(t,arguments,o(this).constructor)}return e.prototype=Object.create(t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),i(e,t)})(t)}function u(t,n){if(n&&("object"==typeof n||"function"==typeof n))return n;if(void 0!==n)throw new TypeError("Derived constructors may only return object or undefined");return(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t)}var c,l,p=(function(t){!(function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),n&&i(t,n)})(h,s(HTMLElement));var n,a,c,l,p,d=(n=h,a=r(),function(){var t,e=o(n);if(a){var i=o(this).constructor;t=Reflect.construct(e,arguments,i)}else t=e.apply(this,arguments);return u(this,t)});function h(){var t;return(function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")})(this,h),(t=d.call(this)).attachShadow({mode:"open"}),t.shadowRoot.appendChild(h.template.content.cloneNode(!0)),t}return c=h,p=[{key:"observedAttributes",get:function(){return["input-label","button-label","icon"]}}],(l=[{key:"attributeChangedCallback",value:function(t,n,e){this[t]=e,this.updateComponent(t,e)}},{key:"connectedCallback",value:function(){var t=this;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("svg#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("svg#iconToggle"),this.nonVisualHint=this.shadowRoot.querySelector(".visually-hidden"),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.$input.addEventListener("keyup",function(n){t.$input.value.length>0?t.$button.setAttribute("aria-disabled","false"):t.$button.setAttribute("aria-disabled","true")}),this.$button.addEventListener("click",function(n){t.submitSearch(n),t.$form.hasAttribute("expanded")&&t.toggleSearch(n)}),this.$toggle.addEventListener("click",function(n){t.toggleSearch(n)}),document.addEventListener("click",function(n){t.$form.hasAttribute("expanded")&&(n.target.closest("myuw-search")||t.toggleSearch(n))})}},{key:"disconnectedCallback",value:function(){}},{key:"updateComponent",value:function(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)}}},{key:"submitSearch",value:function(t){t.preventDefault(),t.stopPropagation(),this.$input.value.length>0?this.nonVisualHint.innerHTML="Searching for "+this.$input.value:this.nonVisualHint.innerHTML="Search field is empty.",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)}},{key:"toggleSearch",value:function(t){this.$cssWidth=Math.max(document.documentElement.clientWidth,window.innerWidth||0),this.$submitPosition=this.$button.getBoundingClientRect();var n=Math.floor(this.$cssWidth-this.$submitPosition.left-42);this.$form.style.right=n,this.$form.hasAttribute("expanded")?(this.$form.removeAttribute("expanded"),this.$icon.innerText=this.icon,this.$toggle.setAttribute("class","")):(this.$form.setAttribute("expanded","true"),this.$toggle.setAttribute("class","hiddenElement"),this.$icon.innerText="arrow_forward")}}])&&e(c.prototype,l),p&&e(c,p),Object.defineProperty(c,"prototype",{writable:!1}),h})();return p.template=(c='<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: 16px;\n        overflow: hidden;\n        border: none;\n        border-top-left-radius: 3px;\n        border-bottom-left-radius: 3px;\n        margin: 0;\n        font-family: Red Hat Text, sans-serif;\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: 59px;\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: 20px;\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\n   .visually-hidden {\n      position: absolute !important;\n      overflow: hidden;\n      height: 1px;\n      width: 1px;\n      word-wrap: normal;\n    }\n\n    .hiddenElement {\n      display: none !important;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] {\n      background-color: #f3f3f3 !important;\n      pointer-events: none;\n    }\n\n    button[disabled],\n    button[aria-disabled=true] #icon{\n      opacity: 0.5;\n    }\n\n    @media screen, \\0 all, \\\\0 screen {\n      @media (max-width: 600px) {\n        :host,\n        myuw-search {\n            border: none;\n        }\n        #submit {\n          display:none;\n        }\n        #form {\n            justify-content: flex-end;\n            padding: 0;\n            align-items: center;\n        }\n\n        #input {\n            width: 0;\n            max-width: 0;\n            margin: 0;\n            padding: 0;\n            height: 59px;\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\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: 42px;\n            line-height: 24px;\n            padding: 4px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n            justify-content: center;\n        }\n\n        #toggle:hover {\n            background: rgba(0, 0, 0, 0.2);\n        }\n\n        #toggle:focus {\n            outline: 2px solid #5e9ed6;\n            outline: -webkit-focus-ring-color auto 5px;\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            fill: white;\n            height: 22px;\n            padding-top: 5px;\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: 98.6%;\n            z-index: 999;\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] #submit {\n            display: block;\n            position: absolute;\n            right: 0;\n            background: transparent;\n            height: 100%;\n        }\n        #form[expanded] #submit:hover {\n            background: rgba(0,0,0,0.12);\n            opacity: 1;\n        }\n        #form[expanded] #icon {\n            color: #000;\n            fill: #000;\n            background: transparent;\n            top: 16px;\n        }\n    }\n  } </style> <form id="form" role="search" class="myuw-search-container" onsubmit="$event.preventDefault(); submitSearch($event)"> \x3c!-- Mobile button to toggle search input --\x3e <button id="toggle" aria-label="Show search input" type="button"> <svg id="iconToggle" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> </button> <input id="input" name="myuw-search-input" aria-label="" type="text" placeholder=""> \x3c!-- Submit search form button --\x3e <button aria-disabled="true" id="submit" aria-label="" type="submit"> <svg id="icon" xmlns="http://www.w3.org/2000/svg" height="16" width="16" viewBox="0 0 512 512">!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.<path d="M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z"/></svg> </button> <p class="visually-hidden" aria-live="assertive"></p> </form> ',l=document.createElement("template"),l.innerHTML=c,l),window.customElements.define("myuw-search",p),(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=p,t})({});

package.json

 {
   "name": "@myuw-web-components/myuw-search",
-  "version": "1.5.8",
+  "version": "1.5.9",
   "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

70569

increased by0.27%

Lines of code

647

increased by0.31%

No dependency changes