Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@myuw-web-components/myuw-app-bar
Advanced tools
@myuw-web-components/myuw-app-bar - npm Package Compare versions
Comparing version 1.4.3 to 1.5.0
| 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 }\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> "; | ||
| 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 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> "; | ||
| class MyUWAppBar extends HTMLElement { | ||
| constructor() { | ||
@@ -19,6 +20,5 @@ super(); | ||
| return [ | ||
| 'theme-name', | ||
| 'theme-url', | ||
| 'app-url', | ||
| 'app-name', | ||
| 'app-url' | ||
| 'theme-name' | ||
| ]; | ||
@@ -28,10 +28,28 @@ } | ||
| /** | ||
| * Web component lifecycle hook to update changed properties | ||
| */ | ||
| * 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; | ||
| // Update the component | ||
| this.updateComponent(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(); | ||
| } | ||
| } | ||
@@ -45,8 +63,9 @@ | ||
| connectedCallback() { | ||
| // Get all attributes | ||
| 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'); | ||
| // 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'); | ||
| this.updateTitle(); | ||
| // Attach scroll listener | ||
@@ -60,4 +79,2 @@ window.addEventListener('scroll', e => { | ||
| }); | ||
| this.updateComponent(); | ||
| } | ||
@@ -75,40 +92,46 @@ | ||
| /** | ||
| * Assemble the HTML to be used in the top bar <h1> tag based on | ||
| * whether the requisite properties exist. | ||
| * @return {String} htmlString A string for the HTML to add to the shadow DOM | ||
| * 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()); | ||
| } | ||
| } | ||
| /** | ||
| * Create the title HTML element based on | ||
| * which properties exist. | ||
| * @return {HTMLElement} title An HTML element to use within the app bar title slot | ||
| */ | ||
| buildTitleString() { | ||
| buildTitle() { | ||
| var title = HTMLElement; | ||
| var htmlString = ''; | ||
| // Create element for theme name text | ||
| var themeText = document.createElement('span'); | ||
| themeText.setAttribute('id', 'themeText'); | ||
| themeText.innerText = this['theme-name'] ? this['theme-name'] + ' ' : ''; | ||
| if (this['theme-name'] !== null) { | ||
| if (this['theme-url'] !== null) { | ||
| htmlString += '<a href="' + this['theme-url'] + '" target="_self" aria-label="' + this['theme-name'] + '">' | ||
| + this['theme-name'] + '</a>'; | ||
| } else { | ||
| htmlString += '<span>' + this['theme-name'] + '</span>'; | ||
| } | ||
| } | ||
| // Create element for app name text | ||
| var appText = document.createElement('span'); | ||
| appText.setAttribute('id', 'appText'); | ||
| appText.innerText = this['app-name'] ? this['app-name'] : ''; | ||
| if (this['app-name'] !== null) { | ||
| htmlString += ' '; | ||
| if (this['app-url'] !== null) { | ||
| htmlString += '<a href="' + this['app-url'] + '" target="_self" aria-label="' + this['app-name'] + '">' | ||
| + this['app-name'] + '</a>'; | ||
| } else { | ||
| htmlString += '<span tabindex="0" aria-label="' + this['app-name'] + '">' + this['app-name'] + '</span>'; | ||
| } | ||
| // 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'); | ||
| } | ||
| return htmlString; | ||
| title.appendChild(themeText); | ||
| title.appendChild(appText); | ||
| return title; | ||
| } | ||
| /** | ||
| * Update the component state depending on changed properties | ||
| * and/or font loading | ||
| */ | ||
| updateComponent() { | ||
| this.shadowRoot.getElementById('myuw-app-bar__title').innerHTML = this.buildTitleString(); | ||
| } | ||
| } | ||
@@ -115,0 +138,0 @@ |
@@ -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+=" ",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})({}); | ||
| var MyUWAppBar=(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["app-url","app-name","theme-name"]}attributeChangedCallback(t,n,e){switch(this[t]=e,t){case"theme-name":(i=this.shadowRoot.getElementById("themeText"))&&(i.innerText=e);case"app-name":var i;(i=this["app-text"])&&(i.innerText=e);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,n=document.createElement("span");n.setAttribute("id","themeText"),n.innerText=this["theme-name"]?this["theme-name"]+" ":"";var e=document.createElement("span");return e.setAttribute("id","appText"),e.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(n),t.appendChild(e),t}}return n.template=(function(t){const n=document.createElement("template");return n.innerHTML=t,n})('<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 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",n),t.MyUWAppBar=n,t})({}); |
| { | ||
| "name": "@myuw-web-components/myuw-app-bar", | ||
| "version": "1.4.3", | ||
| "version": "1.5.0", | ||
| "description": "A material top app bar designed for use with other MyUW web components", | ||
@@ -5,0 +5,0 @@ "module": "dist/myuw-app-bar.min.mjs", |
@@ -25,3 +25,2 @@ # `<myuw-app-bar>` | ||
| theme-name="MyUW" | ||
| theme-url="" | ||
| app-name="" | ||
@@ -36,5 +35,4 @@ app-url="" | ||
| - **themeName (theme-name):** Sets the theme/portal name (defaults to "MyUW") | ||
| - **themeUrl (theme-url):** Sets then URL to go to when user clicks the theme name | ||
| - **appName (app-name):** Sets the app name (e.g. "Bucky Backup") | ||
| - **appUrl (app-url):** Sets then URL to go to when user clicks the app name | ||
| - **appUrl (app-url):** Sets then URL to go to when user clicks the app title | ||
@@ -41,0 +39,0 @@ ### Styling the app bar |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by6.62%
46768
- Number of package files
- increased by14.29%
8
- Lines of code
- increased by16.03%
304
Worsened metrics
- Number of lines in readme file
- decreased by-2.33%
84
No dependency changes