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

Comparing version 1.3.1 to 1.4.0

dist/myuw-app-bar.js

 var MyUWAppBar = (function (exports) {
     'use strict';
 
-    var tpl = "<style> :host {\n        display: block;\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        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([font-loaded]) {\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    #myuw-app-bar {\n        font-size: 14px;\n        font-weight: 500;\n        -webkit-font-smoothing: antialiased;\n        background-color: inherit;\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__navigation {\n        margin-right: 16px;\n    }\n\n    #region__profile {\n        margin-left: 6px;\n    }\n\n    #region__notifications,\n    #region__help {\n        margin: 0 6px;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        flex: auto;\n        align-items: center;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\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__navigation\"> <slot id=\"navigation-slot\" name=\"myuw-navigation\"> </div> <div id=\"title\"> <h1 id=\"myuw-app-bar__title\"></h1> </div> <div class=\"region\" id=\"region__help\"> <slot id=\"help-slot\" name=\"myuw-help\"> </div> <div class=\"region\" id=\"region__notifications\"> <slot id=\"notifications-slot\" name=\"myuw-notifications\"> </div> <div class=\"region\" id=\"region__profile\"> <slot id=\"profile-slot\" name=\"myuw-profile\"> </div> </div> ";
+    var tpl = "<style> :host {\n        display: block;\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        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([font-loaded]) {\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    #myuw-app-bar {\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__navigation {\n        margin-right: 16px;\n    }\n\n    #myuw-app-bar #region__search {\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    #region__profile {\n        margin-left: 6px;\n    }\n\n    #region__notifications,\n    #region__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    }\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__navigation\"> <slot id=\"navigation-slot\" name=\"myuw-navigation\"> </div> <div id=\"title\"> <h1 id=\"myuw-app-bar__title\"></h1> </div> <div class=\"region\" id=\"region__search\"> <slot id=\"search-slot\" name=\"myuw-search\"> </div> <div class=\"region\" id=\"region__help\"> <slot id=\"help-slot\" name=\"myuw-help\"> </div> <div class=\"region\" id=\"region__notifications\"> <slot id=\"notifications-slot\" name=\"myuw-notifications\"> </div> <div class=\"region\" id=\"region__profile\"> <slot id=\"profile-slot\" name=\"myuw-profile\"> </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 {\n        display: block;\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        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([font-loaded]) {\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    #myuw-app-bar {\n        font-size: 14px;\n        font-weight: 500;\n        -webkit-font-smoothing: antialiased;\n        background-color: inherit;\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__navigation {\n        margin-right: 16px;\n    }\n\n    #region__profile {\n        margin-left: 6px;\n    }\n\n    #region__notifications,\n    #region__help {\n        margin: 0 6px;\n    }\n\n    #title {\n        height: 100%;\n        display: flex;\n        flex: auto;\n        align-items: center;\n    }\n\n    #myuw-app-bar__title {\n        font-size: 18px;\n        font-weight: 500;\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__navigation"> <slot id="navigation-slot" name="myuw-navigation"> </div> <div id="title"> <h1 id="myuw-app-bar__title"></h1> </div> <div class="region" id="region__help"> <slot id="help-slot" name="myuw-help"> </div> <div class="region" id="region__notifications"> <slot id="notifications-slot" name="myuw-notifications"> </div> <div class="region" id="region__profile"> <slot id="profile-slot" name="myuw-profile"> </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 {\n        display: block;\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        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    :host([hidden]) {\n        display: none;\n    }\n\n    :host([font-loaded]) {\n        color: var(--myuw-app-bar-color, var(--myuw-primary-color, #fff));\n    }\n\n    #myuw-app-bar {\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__navigation {\n        margin-right: 16px;\n    }\n\n    #myuw-app-bar #region__search {\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    #region__profile {\n        margin-left: 6px;\n    }\n\n    #region__notifications,\n    #region__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    }\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__navigation"> <slot id="navigation-slot" name="myuw-navigation"> </div> <div id="title"> <h1 id="myuw-app-bar__title"></h1> </div> <div class="region" id="region__search"> <slot id="search-slot" name="myuw-search"> </div> <div class="region" id="region__help"> <slot id="help-slot" name="myuw-help"> </div> <div class="region" id="region__notifications"> <slot id="notifications-slot" name="myuw-notifications"> </div> <div class="region" id="region__profile"> <slot id="profile-slot" name="myuw-profile"> </div> </div> '),window.customElements.define("myuw-app-bar",t),n.MyUWAppBar=t,n})({});

package.json

 {
   "name": "@myuw-web-components/myuw-app-bar",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A material top app bar designed for use with other MyUW web components",
@@ -12,3 +12,5 @@ "module": "dist/myuw-app-bar.min.mjs",
     "start": "run-p watch serve",
-    "prepare": "npm run build"
+    "prepare": "npm run build",
+    "pages": "rm -rf demo && mkdir -p demo && cp -r dist demo/ && cp index.html demo/ && gh-pages -d demo",
+    "postpublish": "npm run pages"
   },
@@ -26,7 +28,8 @@ "repository": {
   "devDependencies": {
+    "gh-pages": "^1.2.0",
+    "live-server": "^1.2.0",
+    "npm-run-all": "^4.1.3",
     "rollup": "^0.63.4",
     "rollup-plugin-html": "^0.2.1",
     "rollup-plugin-minify-es": "^1.1.1",
-    "live-server": "^1.2.0",
-    "npm-run-all": "^4.1.3",
     "tota11y": "^0.1.6"
@@ -33,0 +36,0 @@ },

README.md

@@ -19,4 +19,4 @@ # `<myuw-app-bar>`
 ```html
-<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-app-bar?module"></script>
-<script nomodule scr="https://unpkg.com/@myuw-web-components/myuw-app-bar"></script>
+<script type="module" src="https://unpkg.com/@myuw-web-components/myuw-app-bar@^1?module"></script>
+<script nomodule scr="https://unpkg.com/@myuw-web-components/myuw-app-bar@^1"></script>
 ```
@@ -81,3 +81,4 @@
 - **myuw-profile**: Insert the `<myuw-profile>` component
+- **myuw-search**: Insert a search bar (v1 of `<myuw-search>` component still in development)
 
 *Note: Child components are a WIP*

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

40786

increased by5.39%

Lines of code

254

increased by2.42%

Number of lines in readme file

83

increased by1.22%

Worsened metrics

Dev dependency count

7

increased by16.67%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes