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
5
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.3.0 to 1.3.1

12

dist/myuw-app-bar.js

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

var MyuwAppBar = (function (exports) {
var MyUWAppBar = (function (exports) {
'use strict';

@@ -6,3 +6,3 @@

class MyuwAppBar extends HTMLElement {
class MyUWAppBar extends HTMLElement {
constructor() {

@@ -15,3 +15,3 @@ super();

// Append the custom HTML to the shadowroot
this.shadowRoot.appendChild(MyuwAppBar.template.content.cloneNode(true));
this.shadowRoot.appendChild(MyUWAppBar.template.content.cloneNode(true));
}

@@ -113,3 +113,3 @@

MyuwAppBar.template = (function template(src) {
MyUWAppBar.template = (function template(src) {
const template = (document.createElement('template'));

@@ -120,5 +120,5 @@ template.innerHTML = src;

window.customElements.define('myuw-app-bar', MyuwAppBar);
window.customElements.define('myuw-app-bar', MyUWAppBar);
exports.MyuwAppBar = MyuwAppBar;
exports.MyUWAppBar = MyUWAppBar;

@@ -125,0 +125,0 @@ return exports;

2

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

2

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

6

README.md

@@ -11,3 +11,2 @@ # `<myuw-app-bar>`

$ npm install
$ npm run build
$ npm start

@@ -21,7 +20,6 @@ ```

```html
<script type="module" src="/path/to/@myuw-web-components/myuw-app-bar/dist/myuw-app-bar.min.mjs"></script>
<script nomodule scr="/path/to/@myuw-web-components/myuw-app-bar/dist/myuw-app-bar.min.js"></script>
<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>
```
Use the component's HTML tag wherever you want:

@@ -28,0 +26,0 @@ 

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