@myuw-web-components/myuw-app-bar
Advanced tools
Comparing version 1.5.2 to 1.5.3
# myuw-app-bar versions | ||
## 1.5.2 | ||
## 1.5 | ||
### Changed | ||
### 1.5.3 | ||
#### Added | ||
* Exposed a new css property to set the z-index of the top bar (`--z-index`). Usage instructions have been included in the README. | ||
### 1.5.2 | ||
#### Changed | ||
* Removed CSS margins on div elements that contains slots so they don't take up space when the slot has no content -- taking the position that margins are the responsibility of the slotted content. | ||
* Consume font-weight variables in app bar for theming (`--myuw-app-bar-font-weight` and `--theme-text-font-weight`) | ||
## 1.5.0 | ||
### 1.5.0 | ||
### Changed | ||
#### Changed | ||
* Deprecated support for "theme-url" property for better UX. You can still set a theme name and app name, but now the title only supports a single link. | ||
### How to upgrade | ||
#### How to upgrade | ||
@@ -18,0 +26,0 @@ If you are using the recommended version (1^), you don't need to do anything special to get these changes. Upgrading to this version will not cause breaking changes. For implementations that use a "theme-url" property and no "app-url" property, the "theme-url" will be used as the title link. For implementations currently using both, the "app-url" will be favored. |
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: 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: 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 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> "; | ||
@@ -6,0 +6,0 @@ class MyUWAppBar extends HTMLElement { |
@@ -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: 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";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})({}); |
{ | ||
"name": "@myuw-web-components/myuw-app-bar", | ||
"version": "1.5.2", | ||
"version": "1.5.3", | ||
"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", |
@@ -58,2 +58,3 @@ # `<myuw-app-bar>` | ||
--theme-text-font-weight: 600; | ||
--z-index: 56; | ||
} | ||
@@ -60,0 +61,0 @@ ``` |
Sorry, the diff of this file is not supported yet
Sorry, the diff of this file is not supported yet
47576
87