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

Comparing version 1.4.2 to 1.4.3

dist/myuw-app-bar.js

 var MyUWAppBar = (function (exports) {
     '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: 500;\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: 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        margin-right: 16px;\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    #slot__profile {\n        margin-left: 6px;\n    }\n\n    #slot__notifications,\n    #slot__help {\n        margin: 0 6px;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\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 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    #myuw-app-bar__title > span:hover {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\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 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: 500;\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: 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        margin-right: 16px;\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    #slot__profile {\n        margin-left: 6px;\n    }\n\n    #slot__notifications,\n    #slot__help {\n        margin: 0 6px;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\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 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    #myuw-app-bar__title > span:hover {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar {\n            padding-right: 0;\n        }\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 6px;\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> ";
 
@@ -6,0 +6,0 @@ class MyUWAppBar extends HTMLElement {

dist/myuw-app-bar.min.js

@@ -1,1 +0,1 @@
-var MyUWAppBar=(function(n){"use strict";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.template.content.cloneNode(!0))}static get observedAttributes(){return["theme-name","theme-url","app-name","app-url"]}attributeChangedCallback(n,t,e){this[n]=e,this.updateComponent(n,e)}connectedCallback(){this["theme-name"]=this.getAttribute("theme-name"),this["theme-url"]=this.getAttribute("theme-url"),this["app-name"]=this.getAttribute("app-name"),this["app-url"]=this.getAttribute("app-url"),window.addEventListener("scroll",n=>{0!==window.scrollY?this.shadowRoot.getElementById("myuw-app-bar").classList.add("shadow"):this.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")}),this.updateComponent()}disconnectedCallback(){window.removeEventListener("scroll",n=>{this.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}buildTitleString(){var n="";return null!==this["theme-name"]&&(null!==this["theme-url"]?n+='<a href="'+this["theme-url"]+'" target="_self" aria-label="'+this["theme-name"]+'">'+this["theme-name"]+"</a>":n+="<span>"+this["theme-name"]+"</span>"),null!==this["app-name"]&&(n+="&nbsp;",null!==this["app-url"]?n+='<a href="'+this["app-url"]+'" target="_self" aria-label="'+this["app-name"]+'">'+this["app-name"]+"</a>":n+='<span tabindex="0" aria-label="'+this["app-name"]+'">'+this["app-name"]+"</span>"),n}updateComponent(){this.shadowRoot.getElementById("myuw-app-bar__title").innerHTML=this.buildTitleString()}}return t.template=(function(n){const t=document.createElement("template");return t.innerHTML=n,t})('<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: 500;\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: 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        margin-right: 16px;\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    #slot__profile {\n        margin-left: 6px;\n    }\n\n    #slot__notifications,\n    #slot__help {\n        margin: 0 6px;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\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 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    #myuw-app-bar__title > span:hover {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\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",t),n.MyUWAppBar=t,n})({});
+var MyUWAppBar=(function(n){"use strict";class t extends HTMLElement{constructor(){super(),this.attachShadow({mode:"open"}),this.shadowRoot.appendChild(t.template.content.cloneNode(!0))}static get observedAttributes(){return["theme-name","theme-url","app-name","app-url"]}attributeChangedCallback(n,t,e){this[n]=e,this.updateComponent(n,e)}connectedCallback(){this["theme-name"]=this.getAttribute("theme-name"),this["theme-url"]=this.getAttribute("theme-url"),this["app-name"]=this.getAttribute("app-name"),this["app-url"]=this.getAttribute("app-url"),window.addEventListener("scroll",n=>{0!==window.scrollY?this.shadowRoot.getElementById("myuw-app-bar").classList.add("shadow"):this.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")}),this.updateComponent()}disconnectedCallback(){window.removeEventListener("scroll",n=>{this.shadowRoot.getElementById("myuw-app-bar").classList.remove("shadow")})}buildTitleString(){var n="";return null!==this["theme-name"]&&(null!==this["theme-url"]?n+='<a href="'+this["theme-url"]+'" target="_self" aria-label="'+this["theme-name"]+'">'+this["theme-name"]+"</a>":n+="<span>"+this["theme-name"]+"</span>"),null!==this["app-name"]&&(n+="&nbsp;",null!==this["app-url"]?n+='<a href="'+this["app-url"]+'" target="_self" aria-label="'+this["app-name"]+'">'+this["app-name"]+"</a>":n+='<span tabindex="0" aria-label="'+this["app-name"]+'">'+this["app-name"]+"</span>"),n}updateComponent(){this.shadowRoot.getElementById("myuw-app-bar__title").innerHTML=this.buildTitleString()}}return t.template=(function(n){const t=document.createElement("template");return t.innerHTML=n,t})('<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: 500;\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: 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        margin-right: 16px;\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    #slot__profile {\n        margin-left: 6px;\n    }\n\n    #slot__notifications,\n    #slot__help {\n        margin: 0 6px;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        align-items: center;\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 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    #myuw-app-bar__title > span:hover {\n            text-decoration: none;\n            cursor: pointer;\n            color: inherit;\n    }\n    @media (max-width: 600px) {\n        #myuw-app-bar {\n            padding-right: 0;\n        }\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 6px;\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",t),n.MyUWAppBar=t,n})({});

package.json

 {
   "name": "@myuw-web-components/myuw-app-bar",
-  "version": "1.4.2",
+  "version": "1.4.3",
   "description": "A material top app bar designed for use with other MyUW web components",
@@ -10,3 +10,3 @@ "module": "dist/myuw-app-bar.min.mjs",
     "watch": "rollup -c -w",
-    "serve": "live-server",
+    "serve": "live-server --port=4200",
     "start": "run-p watch serve",
@@ -13,0 +13,0 @@ "prepare": "npm run build",

README.md

@@ -5,11 +5,2 @@ # `<myuw-app-bar>`
 
-## Development and contribution
-
-To run the demo app locally and test the component, run the following commands:
-
-```bash
-$ npm install
-$ npm start
-```
-
 ## Getting Started
@@ -24,2 +15,8 @@
 
+**Important**: For responsiveness to many screen sizes, ensure you have included the viewport meta tag in your application:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1">
+```
+
 Use the component's HTML tag wherever you want:
@@ -82,4 +79,11 @@
 - **myuw-profile**: Insert the `<myuw-profile>` component
-- **myuw-search**: Insert a search bar (v1 of `<myuw-search>` component still in development)
+- **myuw-search**: Insert the `<myuw-search>` component
 
-*Note: Child components are a WIP*
+## Development and contribution
+
+To run the demo app locally and test the component, run the following commands:
+
+```bash
+$ npm install
+$ npm start
+```

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

43865

increased by5.18%

Lines of code

262

increased by2.34%

Number of lines in readme file

86

increased by3.61%

No dependency changes