New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@myuw-web-components/myuw-app-bar

Package Overview
Dependencies
Maintainers
6
Versions
38
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

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

Comparing version 1.5.0 to 1.5.1

6

CHANGELOG.md
# myuw-app-bar versions
## 1.5.1
### 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.
## 1.5.0

@@ -4,0 +10,0 @@

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 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 #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 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> ";

@@ -66,2 +66,3 @@ class MyUWAppBar extends HTMLElement {

// Set the title on initial load
this.updateTitle();

@@ -68,0 +69,0 @@

2

dist/myuw-app-bar.min.js

@@ -1,1 +0,1 @@

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})({});
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: 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 #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 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})({});

2

package.json
{
"name": "@myuw-web-components/myuw-app-bar",
"version": "1.5.0",
"version": "1.5.1",
"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",

dist/myuw-app-bar.min.mjs

Sorry, the diff of this file is not supported yet

dist/myuw-app-bar.mjs

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc