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

Comparing version 1.3.0 to 1.3.1

dist/myuw-search.js

 var MyUWSearch = (function (exports) {
-    'use strict';
+  '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 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> ";
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
 
-    class MyUWSearch extends HTMLElement {
-        constructor() {
-            super();
+  function _defineProperties(target, props) {
+    for (var i = 0; i < props.length; i++) {
+      var descriptor = props[i];
+      descriptor.enumerable = descriptor.enumerable || false;
+      descriptor.configurable = true;
+      if ("value" in descriptor) descriptor.writable = true;
+      Object.defineProperty(target, descriptor.key, descriptor);
+    }
+  }
 
-            // Create a shadowroot for this element
-            this.attachShadow({mode: 'open'});
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
 
-            // Append the custom HTML to the shadowroot
-            this.shadowRoot.appendChild(MyUWSearch.template.content.cloneNode(true));
-        }
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
 
-        static get observedAttributes() {
-            return [
-                'input-label',
-                'button-label',
-                'icon'
-            ];
-        }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
 
-        /**
-        *   Web component lifecycle hook to update changed properties
-        */
-        attributeChangedCallback(name, oldValue, newValue) {
-            // Update the attribute internally
-            this[name] = newValue;
-            // Update the component
-            this.updateComponent(name, newValue);
-        }
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
 
-        /**
-        *   When component is first attached to the DOM,
-        *   get its defined attributes and listen for
-        *   scrolling
-        */
-        connectedCallback() {
-            // Get all attributes
-            this.icon           = this.getAttribute('icon') || 'search';
-            this.inputLabel     = this.getAttribute('input-label') || 'Search';
-            this.buttonLabel    = this.getAttribute('button-label') || 'Submit search';
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
 
-            // Get elements to update
-            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');
-            
-            // Set icon and label values
-            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');
+    return _setPrototypeOf(o, p);
+  }
 
-            // Get viewport width and toggle button position
-            // this.$cssWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
-            // this.$togglePosition = this.$toggle.getBoundingClientRect();
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
 
-            // Add click event listeners for submit and toggle buttons
-            this.$button.addEventListener('click', e => {
-                this.submitSearch(e);
-            });
-            
-            this.$toggle.addEventListener('click', e => {
-                this.toggleSearch(e);
-            });
+    try {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
 
-            // Listen for clicks outside the element
-            document.addEventListener('click', e => {
-                if (this.$form.hasAttribute('expanded')) {
-                    if (!e.target.closest('myuw-search')) {
-                        this.toggleSearch(e);
-                    }
-                }
-            });
-        }
+  function _construct(Parent, args, Class) {
+    if (isNativeReflectConstruct()) {
+      _construct = Reflect.construct;
+    } else {
+      _construct = function _construct(Parent, args, Class) {
+        var a = [null];
+        a.push.apply(a, args);
+        var Constructor = Function.bind.apply(Parent, a);
+        var instance = new Constructor();
+        if (Class) _setPrototypeOf(instance, Class.prototype);
+        return instance;
+      };
+    }
 
-        /**
-        *   Clean up event listeners if element is removed from the DOM
-        */
-        disconnectedCallback() {
+    return _construct.apply(null, arguments);
+  }
 
+  function _isNativeFunction(fn) {
+    return Function.toString.call(fn).indexOf("[native code]") !== -1;
+  }
+
+  function _wrapNativeSuper(Class) {
+    var _cache = typeof Map === "function" ? new Map() : undefined;
+
+    _wrapNativeSuper = function _wrapNativeSuper(Class) {
+      if (Class === null || !_isNativeFunction(Class)) return Class;
+
+      if (typeof Class !== "function") {
+        throw new TypeError("Super expression must either be null or a function");
+      }
+
+      if (typeof _cache !== "undefined") {
+        if (_cache.has(Class)) return _cache.get(Class);
+
+        _cache.set(Class, Wrapper);
+      }
+
+      function Wrapper() {
+        return _construct(Class, arguments, _getPrototypeOf(this).constructor);
+      }
+
+      Wrapper.prototype = Object.create(Class.prototype, {
+        constructor: {
+          value: Wrapper,
+          enumerable: false,
+          writable: true,
+          configurable: true
         }
+      });
+      return _setPrototypeOf(Wrapper, Class);
+    };
 
-        /**
-        *   Update the component state 
-        */
-        updateComponent(attribute, value) {
-            switch (attribute) {
-                case 'input-label':
-                    if (this.$input) {
-                        this.$input.setAttribute('placeholder', value);    
-                    }
-                    break;
-                case 'button-label':
-                    if (this.$button) {
-                        this.$button.setAttribute('aria-label', value);    
-                    }
-                    break;
-                case 'icon':
-                    if (this.$icon) {
-                        this.$icon.innerText = value;
-                    }
-                    break;
-                default:
-                    break;
+    return _wrapNativeSuper(Class);
+  }
+
+  function _assertThisInitialized(self) {
+    if (self === void 0) {
+      throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
+    }
+
+    return self;
+  }
+
+  function _possibleConstructorReturn(self, call) {
+    if (call && (typeof call === "object" || typeof call === "function")) {
+      return call;
+    }
+
+    return _assertThisInitialized(self);
+  }
+
+  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 screen, \\0 all, \\\\0 screen {\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    }\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 MyUWSearch =
+  /*#__PURE__*/
+  function (_HTMLElement) {
+    _inherits(MyUWSearch, _HTMLElement);
+
+    function MyUWSearch() {
+      var _this;
+
+      _classCallCheck(this, MyUWSearch);
+
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(MyUWSearch).call(this)); // Create a shadowroot for this element
+
+      _this.attachShadow({
+        mode: 'open'
+      }); // Append the custom HTML to the shadowroot
+
+
+      _this.shadowRoot.appendChild(MyUWSearch.template.content.cloneNode(true));
+
+      return _this;
+    }
+
+    _createClass(MyUWSearch, [{
+      key: "attributeChangedCallback",
+
+      /**
+      *   Web component lifecycle hook to update changed properties
+      */
+      value: function attributeChangedCallback(name, oldValue, newValue) {
+        // Update the attribute internally
+        this[name] = newValue; // Update the component
+
+        this.updateComponent(name, newValue);
+      }
+      /**
+      *   When component is first attached to the DOM,
+      *   get its defined attributes and listen for
+      *   scrolling
+      */
+
+    }, {
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        var _this2 = this;
+
+        // Get all attributes
+        this.icon = this.getAttribute('icon') || 'search';
+        this.inputLabel = this.getAttribute('input-label') || 'Search';
+        this.buttonLabel = this.getAttribute('button-label') || 'Submit search'; // Get elements to update
+
+        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'); // Set icon and label values
+
+        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'); // Get viewport width and toggle button position
+        // this.$cssWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+        // this.$togglePosition = this.$toggle.getBoundingClientRect();
+        // Add click event listeners for submit and toggle buttons
+
+        this.$button.addEventListener('click', function (e) {
+          _this2.submitSearch(e);
+        });
+        this.$toggle.addEventListener('click', function (e) {
+          _this2.toggleSearch(e);
+        }); // Listen for clicks outside the element
+
+        document.addEventListener('click', function (e) {
+          if (_this2.$form.hasAttribute('expanded')) {
+            if (!e.target.closest('myuw-search')) {
+              _this2.toggleSearch(e);
             }
-        }
+          }
+        });
+      }
+      /**
+      *   Clean up event listeners if element is removed from the DOM
+      */
 
-        /**
-         *  Submit search
-         */
-        submitSearch(event) {
-            event.preventDefault();
-            event.stopPropagation();
+    }, {
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {}
+      /**
+      *   Update the component state 
+      */
 
-            // Using `callback` property:
-            if (this.callback && typeof this.callback === 'function') {
-                this.callback(this.$input.value);
+    }, {
+      key: "updateComponent",
+      value: function updateComponent(attribute, value) {
+        switch (attribute) {
+          case 'input-label':
+            if (this.$input) {
+              this.$input.setAttribute('placeholder', value);
             }
 
-            // Emitting a custom event:
-            var customEvent = new CustomEvent('myuw-search', {
-                bubbles: true,
-                detail: {
-                    value: this.$input.value
-                }
-            });
-            this.dispatchEvent(customEvent);
-        }
+            break;
 
-        /**
-         * (MOBILE-ONLY) Display the search bar
-         */
-        toggleSearch(event) {
-            // Get viewport width and position of toggle button
-            this.$cssWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
-            this.$togglePosition = this.$toggle.getBoundingClientRect();
+          case 'button-label':
+            if (this.$button) {
+              this.$button.setAttribute('aria-label', value);
+            }
 
-            // Get value for 'right' positioning of form anchor (minus width of button)
-            var right = Math.floor(this.$cssWidth - this.$togglePosition.left - 42);
+            break;
 
-            // Set positioning
-            this.$form.style.right = right;
+          case 'icon':
+            if (this.$icon) {
+              this.$icon.innerText = value;
+            }
 
-            // Set icon for toggle button and expand form
-            if (this.$form.hasAttribute('expanded')) {
-                this.$form.removeAttribute('expanded');
-                this.$toggleIcon.innerText = this.icon;
-                this.$toggle.setAttribute('aria-label', 'show search');
-            } else {
-                this.$form.setAttribute('expanded', 'true');
-                this.$toggleIcon.innerText = 'arrow_forward';
-                this.$toggle.setAttribute('aria-label', 'close search');
-            }
+            break;
+
+          default:
+            break;
         }
-    }
+      }
+      /**
+       *  Submit search
+       */
 
-    MyUWSearch.template = (function template(src) {
-      const template = (document.createElement('template'));
-      template.innerHTML = src;
-      return template;
-    })(tpl);
+    }, {
+      key: "submitSearch",
+      value: function submitSearch(event) {
+        event.preventDefault();
+        event.stopPropagation(); // Using `callback` property:
 
-    window.customElements.define('myuw-search', MyUWSearch);
+        if (this.callback && typeof this.callback === 'function') {
+          this.callback(this.$input.value);
+        } // Emitting a custom event:
 
-    /**
-     * 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;
+        var customEvent = new CustomEvent('myuw-search', {
+          bubbles: true,
+          detail: {
+            value: this.$input.value
+          }
+        });
+        this.dispatchEvent(customEvent);
+      }
+      /**
+       * (MOBILE-ONLY) Display the search bar
+       */
+
+    }, {
+      key: "toggleSearch",
+      value: function toggleSearch(event) {
+        // Get viewport width and position of toggle button
+        this.$cssWidth = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
+        this.$togglePosition = this.$toggle.getBoundingClientRect(); // Get value for 'right' positioning of form anchor (minus width of button)
+
+        var right = Math.floor(this.$cssWidth - this.$togglePosition.left - 42); // Set positioning
+
+        this.$form.style.right = right; // Set icon for toggle button and expand form
+
+        if (this.$form.hasAttribute('expanded')) {
+          this.$form.removeAttribute('expanded');
+          this.$toggleIcon.innerText = this.icon;
+          this.$toggle.setAttribute('aria-label', 'show search');
+        } else {
+          this.$form.setAttribute('expanded', 'true');
+          this.$toggleIcon.innerText = 'arrow_forward';
+          this.$toggle.setAttribute('aria-label', 'close search');
         }
+      }
+    }], [{
+      key: "observedAttributes",
+      get: function get() {
+        return ['input-label', 'button-label', 'icon'];
+      }
+    }]);
 
-        CustomEvent.prototype = window.Event.prototype;
+    return MyUWSearch;
+  }(_wrapNativeSuper(HTMLElement));
 
-        window.CustomEvent = CustomEvent;
-    })();
+  MyUWSearch.template = function template(src) {
+    var template = document.createElement('template');
+    template.innerHTML = src;
+    return template;
+  }(tpl);
 
-    exports.MyUWSearch = MyUWSearch;
+  window.customElements.define('myuw-search', MyUWSearch);
+  /**
+   * Polyfill for supporting the CustomEvent constructor in IE9+
+   * From: https://developer.mozilla.org/en-US/docs/Web/API/CustomEvent/CustomEvent#Polyfill
+   */
 
-    return exports;
+  (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;
+
+  return exports;
+
 }({}));

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);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})({});
+var MyUWSearch=(function(t){"use strict";function n(t,n){for(var e=0;e<n.length;e++){var o=n[e];o.enumerable=o.enumerable||!1,o.configurable=!0,"value"in o&&(o.writable=!0),Object.defineProperty(t,o.key,o)}}function e(t){return(e=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function o(t,n){return(o=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function i(t,n,e){return(i=(function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Date.prototype.toString.call(Reflect.construct(Date,[],function(){})),!0}catch(t){return!1}})()?Reflect.construct:function(t,n,e){var i=[null];i.push.apply(i,n);var r=new(Function.bind.apply(t,i));return e&&o(r,e.prototype),r}).apply(null,arguments)}function r(t){var n="function"==typeof Map?new Map:void 0;return(r=function(t){if(null===t||(r=t,-1===Function.toString.call(r).indexOf("[native code]")))return t;var r;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,a)}function a(){return i(t,arguments,e(this).constructor)}return a.prototype=Object.create(t.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),o(a,t)})(t)}function a(t,n){return!n||"object"!=typeof n&&"function"!=typeof n?(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t):n}var u,s,c=(function(t){function i(){var t;return(function(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")})(this,i),(t=a(this,e(i).call(this))).attachShadow({mode:"open"}),t.shadowRoot.appendChild(i.template.content.cloneNode(!0)),t}var u,s,c;return(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}}),n&&o(t,n)})(i,r(HTMLElement)),u=i,c=[{key:"observedAttributes",get:function(){return["input-label","button-label","icon"]}}],(s=[{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("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",function(n){t.submitSearch(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.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.$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"))}}])&&n(u.prototype,s),c&&n(u,c),i})();return c.template=(u='<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 screen, \\0 all, \\\\0 screen {\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    }\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> ',s=document.createElement("template"),s.innerHTML=u,s),window.customElements.define("myuw-search",c),(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=c,t})({});

package.json

 {
   "name": "@myuw-web-components/myuw-search",
-  "version": "1.3.0",
+  "version": "1.3.1",
   "description": "A material search field made for use with MyUW web components",
@@ -27,2 +27,4 @@ "module": "dist/myuw-search.min.mjs",
   "devDependencies": {
+    "@babel/core": "^7.1.2",
+    "@babel/preset-env": "^7.1.0",
     "gh-pages": "^1.2.0",
@@ -32,2 +34,3 @@ "live-server": "^1.2.0",
     "rollup": "^0.63.4",
+    "rollup-plugin-babel": "^4.0.3",
     "rollup-plugin-html": "^0.2.1",
@@ -34,0 +37,0 @@ "rollup-plugin-minify-es": "^1.1.1",

README.md

@@ -9,3 +9,3 @@ # `<myuw-search>`
 <script type="module" src="https://unpkg.com/@myuw-web-components/myuw-search@^1?module"></script>
-<script nomodule scr="https://unpkg.com/@myuw-web-components/myuw-search@^1"></script>
+<script nomodule src="https://unpkg.com/@myuw-web-components/myuw-search@^1"></script>
 ```
@@ -12,0 +12,0 @@

New alerts

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

59043

increased by11.81%

Lines of code

534

increased by32.84%

Worsened metrics

Dev dependency count

10

increased by42.86%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes