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

Comparing version 1.1.9 to 1.2.0

CHANGELOG.md

 # myuw-search versions
 
+## 1.2.0
+
+### Added 
+
+* Responsive theming support
+
 ## 1.1.9
@@ -4,0 +10,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        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        #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: block;\n            background: transparent;\n            border: none;\n            margin: 0 0 0 6px;\n            height: 40px;\n            min-width: 0;\n            line-height: 24px;\n            padding: 8px;\n            width: 40px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n\n        }\n        #toggle:hover {\n            background: rgba(0,0,0,0.12);\n        }\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\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        }\n        #form[expanded] #iconToggle {\n            color: #000;\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;\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: block;\n            transition: opacity 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: var(--myuw-primary-color, transparent);\n            border: none;\n            margin: 0 0 0 6px;\n            height: 40px;\n            min-width: 0;\n            line-height: 24px;\n            padding: 8px;\n            width: 40px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n\n        }\n        #toggle:hover {\n            opacity: 0.8;\n        }\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\n            border: var(--myuw-search-border, none);\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        }\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>";
 
@@ -6,0 +6,0 @@ class MyUWSearch extends HTMLElement {

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        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        #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: block;\n            background: transparent;\n            border: none;\n            margin: 0 0 0 6px;\n            height: 40px;\n            min-width: 0;\n            line-height: 24px;\n            padding: 8px;\n            width: 40px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n\n        }\n        #toggle:hover {\n            background: rgba(0,0,0,0.12);\n        }\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\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        }\n        #form[expanded] #iconToggle {\n            color: #000;\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)}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: block;\n            transition: opacity 0.2s cubic-bezier(.25, .8, .25, 1);\n            background: var(--myuw-primary-color, transparent);\n            border: none;\n            margin: 0 0 0 6px;\n            height: 40px;\n            min-width: 0;\n            line-height: 24px;\n            padding: 8px;\n            width: 40px;\n            border-radius: 50%;\n            cursor: pointer;\n            outline: none;\n\n        }\n        #toggle:hover {\n            opacity: 0.8;\n        }\n        #iconToggle {\n            color: var(--myuw-app-bar-color, #fff);\n        }\n        #form[expanded] {\n            position: absolute;\n            top: 3px;\n            left: 3px;\n            margin-left: 0;\n            margin-right: 0;\n            width: auto;\n            border: var(--myuw-search-border, none);\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        }\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})({});

package.json

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

46581

increased by3.86%

Lines of code

338

increased by1.81%

No dependency changes