@myuw-web-components/myuw-app-bar - npm Package Compare versions

Comparing version 1.5.3 to 1.5.4

dist/myuw-app-bar.js

 var MyUWAppBar = (function (exports) {
-    'use strict';
+  'use strict';
 
-    var tpl = "<style> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id=\"myuw-app-bar\" class=\"myuw-app-bar\"> <div class=\"region\" id=\"region__left\"> <div class=\"slot\" id=\"slot__navigation\"> <slot id=\"navigation-slot\" name=\"myuw-navigation\"> </div> <div id=\"title\"> <h1 id=\"myuw-app-bar__title\"></h1> </div> </div> <div class=\"region\" id=\"region__center\"> <slot id=\"search-slot\" name=\"myuw-search\"> </div> <div class=\"region\" id=\"region__right\"> <div class=\"slot\" id=\"slot__help\"> <slot id=\"help-slot\" name=\"myuw-help\"> </div> <div class=\"slot\" id=\"slot__notifications\"> <slot id=\"notifications-slot\" name=\"myuw-notifications\"> </div> <div class=\"slot\" id=\"slot__profile\"> <slot id=\"profile-slot\" name=\"myuw-profile\"> </div> </div> </div> ";
+  function _classCallCheck(instance, Constructor) {
+    if (!(instance instanceof Constructor)) {
+      throw new TypeError("Cannot call a class as a function");
+    }
+  }
 
-    class MyUWAppBar extends HTMLElement {
+  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);
+    }
+  }
 
-        constructor() {
-            super();
+  function _createClass(Constructor, protoProps, staticProps) {
+    if (protoProps) _defineProperties(Constructor.prototype, protoProps);
+    if (staticProps) _defineProperties(Constructor, staticProps);
+    return Constructor;
+  }
 
-            // Create a shadowroot for this element
-            this.attachShadow({mode: 'open'});
+  function _inherits(subClass, superClass) {
+    if (typeof superClass !== "function" && superClass !== null) {
+      throw new TypeError("Super expression must either be null or a function");
+    }
 
-            // Append the custom HTML to the shadowroot
-            this.shadowRoot.appendChild(MyUWAppBar.template.content.cloneNode(true));
-        }
+    subClass.prototype = Object.create(superClass && superClass.prototype, {
+      constructor: {
+        value: subClass,
+        writable: true,
+        configurable: true
+      }
+    });
+    if (superClass) _setPrototypeOf(subClass, superClass);
+  }
 
-        static get observedAttributes() {
-            return [
-                'app-url',
-                'app-name',
-                'theme-name'
-            ];
-        }
+  function _getPrototypeOf(o) {
+    _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+      return o.__proto__ || Object.getPrototypeOf(o);
+    };
+    return _getPrototypeOf(o);
+  }
 
-        /**
-         *  Web component lifecycle hook to update changed properties
-         *   - Called each time an attribute is changed, including on the initial load,
-         *     so will fire once for each attribute on first load
-         * @param {String} name The name of the attribute (e.g. "app-url")
-         * @param {String} oldValue The previous value of the attribute
-         * @param {String} newValue The new value for that attribute (e.g. "Time Reporting")
-         */
-        attributeChangedCallback(name, oldValue, newValue) {
-            // Update the attribute internally
-            
-            this[name] = newValue;
+  function _setPrototypeOf(o, p) {
+    _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+      o.__proto__ = p;
+      return o;
+    };
 
-            switch (name) {
-                case 'theme-name':
-                    var container = this.shadowRoot.getElementById('themeText');
-                    if (container) {
-                        container.innerText = newValue;
-                    }
-                case 'app-name':
-                    var container = this['app-text'];
-                    if (container) {
-                        container.innerText = newValue;
-                    }
-                case 'app-url':
-                    this.updateTitle();
-            }
-        }
+    return _setPrototypeOf(o, p);
+  }
 
-        /**
-        *   When component is first attached to the DOM,
-        *   get its defined attributes and listen for
-        *   scrolling
-        */
-        connectedCallback() {
-            // Fall back on "theme-url" to support older implementations
-            this['app-url']     = this.getAttribute('app-url') || this.getAttribute('theme-url');
-            this['app-name']    = this.getAttribute('app-name') || 'Hello World';
-            this['theme-name']  = this.getAttribute('theme-name');
+  function isNativeReflectConstruct() {
+    if (typeof Reflect === "undefined" || !Reflect.construct) return false;
+    if (Reflect.construct.sham) return false;
+    if (typeof Proxy === "function") return true;
 
-            // Set the title on initial load
-            this.updateTitle();
+    try {
+      Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
+      return true;
+    } catch (e) {
+      return false;
+    }
+  }
 
-            // Attach scroll listener
-            window.addEventListener('scroll', e => {
-                if (window.scrollY !== 0) {
-                    this.shadowRoot.getElementById('myuw-app-bar').classList.add('shadow');
-                } else {
-                    this.shadowRoot.getElementById('myuw-app-bar').classList.remove('shadow');
-                }
-            });
-        }
+  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() {
-            window.removeEventListener('scroll', e => {
-                this.shadowRoot.getElementById('myuw-app-bar').classList.remove('shadow');
-            });
+    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);
+    };
 
-        /**
-         * Remove existing child node and replace it with newly-built title HTML
-         */
-        updateTitle() {
-            var appBarTitle = this.shadowRoot.getElementById('myuw-app-bar__title');
-            if (appBarTitle.childNodes[0]) {
-                appBarTitle.replaceChild(this.buildTitle(), appBarTitle.childNodes[0]);    
-            } else {
-                appBarTitle.appendChild(this.buildTitle());
+    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> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id=\"myuw-app-bar\" class=\"myuw-app-bar\"> <div class=\"region\" id=\"region__left\"> <div class=\"slot\" id=\"slot__navigation\"> <slot id=\"navigation-slot\" name=\"myuw-navigation\"> </div> <div id=\"title\"> <h1 id=\"myuw-app-bar__title\"></h1> </div> </div> <div class=\"region\" id=\"region__center\"> <slot id=\"search-slot\" name=\"myuw-search\"> </div> <div class=\"region\" id=\"region__right\"> <div class=\"slot\" id=\"slot__help\"> <slot id=\"help-slot\" name=\"myuw-help\"> </div> <div class=\"slot\" id=\"slot__notifications\"> <slot id=\"notifications-slot\" name=\"myuw-notifications\"> </div> <div class=\"slot\" id=\"slot__profile\"> <slot id=\"profile-slot\" name=\"myuw-profile\"> </div> </div> </div> ";
+
+  var MyUWAppBar =
+  /*#__PURE__*/
+  function (_HTMLElement) {
+    _inherits(MyUWAppBar, _HTMLElement);
+
+    function MyUWAppBar() {
+      var _this;
+
+      _classCallCheck(this, MyUWAppBar);
+
+      _this = _possibleConstructorReturn(this, _getPrototypeOf(MyUWAppBar).call(this)); // Create a shadowroot for this element
+
+      _this.attachShadow({
+        mode: 'open'
+      }); // Append the custom HTML to the shadowroot
+
+
+      _this.shadowRoot.appendChild(MyUWAppBar.template.content.cloneNode(true));
+
+      return _this;
+    }
+
+    _createClass(MyUWAppBar, [{
+      key: "attributeChangedCallback",
+
+      /**
+       *  Web component lifecycle hook to update changed properties
+       *   - Called each time an attribute is changed, including on the initial load,
+       *     so will fire once for each attribute on first load
+       * @param {String} name The name of the attribute (e.g. "app-url")
+       * @param {String} oldValue The previous value of the attribute
+       * @param {String} newValue The new value for that attribute (e.g. "Time Reporting")
+       */
+      value: function attributeChangedCallback(name, oldValue, newValue) {
+        // Update the attribute internally
+        this[name] = newValue;
+
+        switch (name) {
+          case 'theme-name':
+            var container = this.shadowRoot.getElementById('themeText');
+
+            if (container) {
+              container.innerText = newValue;
             }
+
+          case 'app-name':
+            var container = this['app-text'];
+
+            if (container) {
+              container.innerText = newValue;
+            }
+
+          case 'app-url':
+            this.updateTitle();
         }
+      }
+      /**
+      *   When component is first attached to the DOM,
+      *   get its defined attributes and listen for
+      *   scrolling
+      */
 
-        /**
-        *   Create the title HTML element based on
-        *   which properties exist.
-        *   @return {HTMLElement} title An HTML element to use within the app bar title slot
-        */
-        buildTitle() {
-            var title = HTMLElement;
+    }, {
+      key: "connectedCallback",
+      value: function connectedCallback() {
+        var _this2 = this;
 
-            // Create element for theme name text
-            var themeText = document.createElement('span');
-            themeText.setAttribute('id', 'themeText');
-            themeText.innerText = this['theme-name'] ? this['theme-name'] + ' ' : '';
+        // Fall back on "theme-url" to support older implementations
+        this['app-url'] = this.getAttribute('app-url') || this.getAttribute('theme-url');
+        this['app-name'] = this.getAttribute('app-name') || 'Hello World';
+        this['theme-name'] = this.getAttribute('theme-name'); // Set the title on initial load
 
-            // Create element for app name text
-            var appText = document.createElement('span');
-            appText.setAttribute('id', 'appText');
-            appText.innerText = this['app-name'] ? this['app-name'] : '';
+        this.updateTitle(); // Attach scroll listener
 
-            // Create containing element depending on whether url is present
-            if (this['app-url'] && this['app-url'] !== null) {
-                title = document.createElement('a');
-                title.setAttribute('target', '_self');
-                title.setAttribute('href', this['app-url']);
-            } else {
-                title = document.createElement('div');
-                title.setAttribute('tabindex', '0');
-            }
+        window.addEventListener('scroll', function (e) {
+          if (window.scrollY !== 0) {
+            _this2.shadowRoot.getElementById('myuw-app-bar').classList.add('shadow');
+          } else {
+            _this2.shadowRoot.getElementById('myuw-app-bar').classList.remove('shadow');
+          }
+        });
+      }
+      /**
+      *   Clean up event listeners if element is removed from the DOM
+      */
 
-            title.appendChild(themeText);
-            title.appendChild(appText);
+    }, {
+      key: "disconnectedCallback",
+      value: function disconnectedCallback() {
+        var _this3 = this;
 
-            return title;
+        window.removeEventListener('scroll', function (e) {
+          _this3.shadowRoot.getElementById('myuw-app-bar').classList.remove('shadow');
+        });
+      }
+      /**
+       * Remove existing child node and replace it with newly-built title HTML
+       */
+
+    }, {
+      key: "updateTitle",
+      value: function updateTitle() {
+        var appBarTitle = this.shadowRoot.getElementById('myuw-app-bar__title');
+
+        if (appBarTitle.childNodes[0]) {
+          appBarTitle.replaceChild(this.buildTitle(), appBarTitle.childNodes[0]);
+        } else {
+          appBarTitle.appendChild(this.buildTitle());
         }
-    }
+      }
+      /**
+      *   Create the title HTML element based on
+      *   which properties exist.
+      *   @return {HTMLElement} title An HTML element to use within the app bar title slot
+      */
 
-    MyUWAppBar.template = (function template(src) {
-      const template = (document.createElement('template'));
-      template.innerHTML = src;
-      return template;
-    })(tpl);
+    }, {
+      key: "buildTitle",
+      value: function buildTitle() {
+        var title = HTMLElement; // Create element for theme name text
 
-    window.customElements.define('myuw-app-bar', MyUWAppBar);
+        var themeText = document.createElement('span');
+        themeText.setAttribute('id', 'themeText');
+        themeText.innerText = this['theme-name'] ? this['theme-name'] + ' ' : ''; // Create element for app name text
 
-    exports.MyUWAppBar = MyUWAppBar;
+        var appText = document.createElement('span');
+        appText.setAttribute('id', 'appText');
+        appText.innerText = this['app-name'] ? this['app-name'] : ''; // Create containing element depending on whether url is present
 
-    return exports;
+        if (this['app-url'] && this['app-url'] !== null) {
+          title = document.createElement('a');
+          title.setAttribute('target', '_self');
+          title.setAttribute('href', this['app-url']);
+        } else {
+          title = document.createElement('div');
+          title.setAttribute('tabindex', '0');
+        }
 
+        title.appendChild(themeText);
+        title.appendChild(appText);
+        return title;
+      }
+    }], [{
+      key: "observedAttributes",
+      get: function get() {
+        return ['app-url', 'app-name', 'theme-name'];
+      }
+    }]);
+
+    return MyUWAppBar;
+  }(_wrapNativeSuper(HTMLElement));
+
+  MyUWAppBar.template = function template(src) {
+    var template = document.createElement('template');
+    template.innerHTML = src;
+    return template;
+  }(tpl);
+
+  window.customElements.define('myuw-app-bar', MyUWAppBar);
+
+  exports.MyUWAppBar = MyUWAppBar;
+
+  return exports;
+
 }({}));

dist/myuw-app-bar.min.js

@@ -1,1 +0,1 @@
-var MyUWAppBar=(function(t){"use strict";class e extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(e.template.content.cloneNode(!0))}static get observedAttributes(){return["app-url","app-name","theme-name"]}attributeChangedCallback(t,e,n){switch(this[t]=n,t){case"theme-name":(i=this.shadowRoot.getElementById("themeText"))&&(i.innerText=n);case"app-name":var i;(i=this["app-text"])&&(i.innerText=n);case"app-url":this.updateTitle()}}connectedCallback(){this["app-url"]=this.getAttribute("app-url")||this.getAttribute("theme-url"),this["app-name"]=this.getAttribute("app-name")||"Hello World",this["theme-name"]=this.getAttribute("theme-name"),this.updateTitle(),window.addEventListener("scroll",t=>{0!==window.scrollY?this.shadowRoot.getElementById("myuw-app-bar").classList.add("shadow"):this.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}disconnectedCallback(){window.removeEventListener("scroll",t=>{this.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}updateTitle(){var t=this.shadowRoot.getElementById("myuw-app-bar__title");t.childNodes[0]?t.replaceChild(this.buildTitle(),t.childNodes[0]):t.appendChild(this.buildTitle())}buildTitle(){var t=HTMLElement,e=document.createElement("span");e.setAttribute("id","themeText"),e.innerText=this["theme-name"]?this["theme-name"]+" ":"";var n=document.createElement("span");return n.setAttribute("id","appText"),n.innerText=this["app-name"]?this["app-name"]:"",this["app-url"]&&null!==this["app-url"]?((t=document.createElement("a")).setAttribute("target","_self"),t.setAttribute("href",this["app-url"])):(t=document.createElement("div")).setAttribute("tabindex","0"),t.appendChild(e),t.appendChild(n),t}}return e.template=(function(t){const e=document.createElement("template");return e.innerHTML=t,e})('<style> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id="myuw-app-bar" class="myuw-app-bar"> <div class="region" id="region__left"> <div class="slot" id="slot__navigation"> <slot id="navigation-slot" name="myuw-navigation"> </div> <div id="title"> <h1 id="myuw-app-bar__title"></h1> </div> </div> <div class="region" id="region__center"> <slot id="search-slot" name="myuw-search"> </div> <div class="region" id="region__right"> <div class="slot" id="slot__help"> <slot id="help-slot" name="myuw-help"> </div> <div class="slot" id="slot__notifications"> <slot id="notifications-slot" name="myuw-notifications"> </div> <div class="slot" id="slot__profile"> <slot id="profile-slot" name="myuw-profile"> </div> </div> </div> '),window.customElements.define("myuw-app-bar",e),t.MyUWAppBar=e,t})({});
+var MyUWAppBar=(function(t){"use strict";function e(t,e){for(var n=0;n<e.length;n++){var i=e[n];i.enumerable=i.enumerable||!1,i.configurable=!0,"value"in i&&(i.writable=!0),Object.defineProperty(t,i.key,i)}}function n(t){return(n=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function i(t,e){return(i=Object.setPrototypeOf||function(t,e){return t.__proto__=e,t})(t,e)}function o(t,e,n){return(o=(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,e,n){var o=[null];o.push.apply(o,e);var r=new(Function.bind.apply(t,o));return n&&i(r,n.prototype),r}).apply(null,arguments)}function r(t){var e="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!==e){if(e.has(t))return e.get(t);e.set(t,a)}function a(){return o(t,arguments,n(this).constructor)}return a.prototype=Object.create(t.prototype,{constructor:{value:a,enumerable:!1,writable:!0,configurable:!0}}),i(a,t)})(t)}function a(t,e){return!e||"object"!=typeof e&&"function"!=typeof e?(function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t})(t):e}var l,s,p=(function(t){function o(){var t;return(function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")})(this,o),(t=a(this,n(o).call(this))).attachShadow({mode:"open"}),t.shadowRoot.appendChild(o.template.content.cloneNode(!0)),t}var l,s,p;return(function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),e&&i(t,e)})(o,r(HTMLElement)),l=o,p=[{key:"observedAttributes",get:function(){return["app-url","app-name","theme-name"]}}],(s=[{key:"attributeChangedCallback",value:function(t,e,n){switch(this[t]=n,t){case"theme-name":(i=this.shadowRoot.getElementById("themeText"))&&(i.innerText=n);case"app-name":var i;(i=this["app-text"])&&(i.innerText=n);case"app-url":this.updateTitle()}}},{key:"connectedCallback",value:function(){var t=this;this["app-url"]=this.getAttribute("app-url")||this.getAttribute("theme-url"),this["app-name"]=this.getAttribute("app-name")||"Hello World",this["theme-name"]=this.getAttribute("theme-name"),this.updateTitle(),window.addEventListener("scroll",function(e){0!==window.scrollY?t.shadowRoot.getElementById("myuw-app-bar").classList.add("shadow"):t.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}},{key:"disconnectedCallback",value:function(){var t=this;window.removeEventListener("scroll",function(e){t.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}},{key:"updateTitle",value:function(){var t=this.shadowRoot.getElementById("myuw-app-bar__title");t.childNodes[0]?t.replaceChild(this.buildTitle(),t.childNodes[0]):t.appendChild(this.buildTitle())}},{key:"buildTitle",value:function(){var t=HTMLElement,e=document.createElement("span");e.setAttribute("id","themeText"),e.innerText=this["theme-name"]?this["theme-name"]+" ":"";var n=document.createElement("span");return n.setAttribute("id","appText"),n.innerText=this["app-name"]?this["app-name"]:"",this["app-url"]&&null!==this["app-url"]?((t=document.createElement("a")).setAttribute("target","_self"),t.setAttribute("href",this["app-url"])):(t=document.createElement("div")).setAttribute("tabindex","0"),t.appendChild(e),t.appendChild(n),t}}])&&e(l.prototype,s),p&&e(l,p),o})();return p.template=(l='<style> :host([hidden]) {\n        display: none;\n    }\n\n    #myuw-app-bar {\n        position: -webkit-sticky;\n        position: sticky;\n        top: 0;\n        background: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        font-family: var(--myuw-app-bar-font, var( --myuw-font, Arial, sans-serif));\n        font-size: 14px;\n        font-weight: var(--myuw-app-bar-font-weight, 400);\n        -webkit-font-smoothing: antialiased;\n        background-color: var(--myuw-app-bar-bg, var( --myuw-primary-bg, #c5050c));\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n        z-index: var(--z-index, 80);\n        width: 100%;\n        height: 64px;\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        align-items: center;\n        -webkit-box-orient: horizontal;\n        -webkit-box-direction: normal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        padding: 0 16px;\n        margin: 0;\n        transition: box-shadow 0.3s ease-in-out;\n    }\n\n    #myuw-app-bar.shadow {\n        box-shadow: 0 1px 3px 0 rgba(0,0,0,0.2), 0 1px 1px 0 rgba(0,0,0,0.14), 0 2px 1px -1px rgba(0,0,0,0.12);\n    }\n\n    #myuw-app-bar .region {\n        box-sizing: border-box;\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        -webkit-box-orient: horizontal;\n        -webkit-flex-direction: row;\n        flex-direction: row;\n        -webkit-box-align: center;\n        -webkit-align-items: center;\n        -ms-grid-row-align: center;\n        align-items: center;\n        -webkit-align-content: center;\n        align-content: center;\n        -webkit-box-pack: start;\n        -webkit-justify-content: flex-start;\n        justify-content: flex-start;\n    }\n\n    #region__left, \n    #region__right {\n        -webkit-box-flex: 1;\n        -webkit-flex: 1 1 30%;\n        flex: 1 1 30%;\n        box-sizing: border-box;\n        max-width: 30%;\n    }\n\n    #myuw-app-bar #region__right {\n        -webkit-box-pack: end;\n        -webkit-justify-content: flex-end;\n        justify-content: flex-end;\n    }\n\n    #slot__navigation,\n    #slot__help,\n    #slot__notifications,\n    #slot__profile {\n        margin: 0;\n    }\n\n    #myuw-app-bar #region__center {\n        display: -webkit-box;\n        display: -webkit-flex;\n        display: flex;\n        flex: auto;\n        margin: 0 24px;\n        -webkit-justify-content: center;\n        justify-content: center;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\n        margin-left: 8px;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\n        margin: 0 auto;\n    }\n\n    #myuw-app-bar__title #themeText {\n        font-weight: var(--theme-name-font-weight, 600);\n    }\n\n    #myuw-app-bar__title a {\n        text-decoration: none;\n        color: inherit;\n    }\n\n    #myuw-app-bar__title a:hover,\n    #myuw-app-bar__title a:visited, {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar #region__left {\n            flex: auto;\n            max-width: none;\n        }\n        #myuw-app-bar #region__center {\n            max-width: 42px;\n            margin: 0;\n            justify-content: flex-end;\n        }\n        #myuw-app-bar #region__right {\n            flex: 0;\n            max-width: 50%;\n            justify-content: flex-end;\n        }\n    } </style> <div id="myuw-app-bar" class="myuw-app-bar"> <div class="region" id="region__left"> <div class="slot" id="slot__navigation"> <slot id="navigation-slot" name="myuw-navigation"> </div> <div id="title"> <h1 id="myuw-app-bar__title"></h1> </div> </div> <div class="region" id="region__center"> <slot id="search-slot" name="myuw-search"> </div> <div class="region" id="region__right"> <div class="slot" id="slot__help"> <slot id="help-slot" name="myuw-help"> </div> <div class="slot" id="slot__notifications"> <slot id="notifications-slot" name="myuw-notifications"> </div> <div class="slot" id="slot__profile"> <slot id="profile-slot" name="myuw-profile"> </div> </div> </div> ',s=document.createElement("template"),s.innerHTML=l,s),window.customElements.define("myuw-app-bar",p),t.MyUWAppBar=p,t})({});

package.json

 {
   "name": "@myuw-web-components/myuw-app-bar",
-  "version": "1.5.3",
+  "version": "1.5.4",
   "description": "A material top app bar designed for use with other MyUW web components",
@@ -27,2 +27,4 @@ "module": "dist/myuw-app-bar.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",

No alert changes

Improved metrics

Total package byte prevSize

53856

increased by13.2%

Lines of code

441

increased by43.18%

Worsened metrics

Dev dependency count

10

increased by42.86%

No dependency changes