@exmg/exm-navigation 1.0.3 → 1.1.1-alpha.9

package/src/exm-navigation-toolbar-base.js

@@ -1,33 +0,0 @@
-import { ExmgElement } from '@exmg/lit-base';
-import { html } from 'lit';
-import '@material/web/iconbutton/icon-button.js';
-import '@material/web/icon/icon.js';
-import '@material/mwc-top-app-bar-fixed';
-export class ExmNavigationToolbarBase extends ExmgElement {
-    firstUpdated() {
-        const appToolbar = this.shadowRoot.querySelector('mwc-top-app-bar-fixed');
-        if (appToolbar) {
-            const observer = new MutationObserver((_, obs) => {
-                const shadowRoot = appToolbar.shadowRoot;
-                const header = shadowRoot ? shadowRoot.querySelector('header') : null;
-                if (header) {
-                    header.style.left = '0px';
-                    header.style.right = '0px';
-                    obs.disconnect(); // Stop observing once we have made the changes
-                }
-            });
-            observer.observe(appToolbar.shadowRoot, {
-                childList: true,
-                subtree: true,
-            });
-        }
-    }
-    render() {
-        return html `<mwc-top-app-bar-fixed>
-      <slot name="navigationIcon" slot="navigationIcon"></slot>
-      <slot name="title" slot="title"></slot>
-      <slot name="actionItems" slot="actionItems"></slot>
-    </mwc-top-app-bar-fixed>`;
-    }
-}
-//# sourceMappingURL=exm-navigation-toolbar-base.js.map

package/src/exm-navigation-toolbar.d.ts

@@ -1,9 +0,0 @@
-import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
-export declare class ExmNavigationToolbar extends ExmNavigationToolbarBase {
-    static styles: import("lit").CSSResult[];
-}
-declare global {
-    interface HTMLElementTagNameMap {
-        'exm-navigation-toolbar': ExmNavigationToolbar;
-    }
-}

package/src/exm-navigation-toolbar.js

@@ -1,12 +0,0 @@
-import { __decorate } from "tslib";
-import { customElement } from 'lit/decorators.js';
-import { style } from './styles/exm-navigation-toolbar-css.js';
-import { ExmNavigationToolbarBase } from './exm-navigation-toolbar-base.js';
-let ExmNavigationToolbar = class ExmNavigationToolbar extends ExmNavigationToolbarBase {
-};
-ExmNavigationToolbar.styles = [style];
-ExmNavigationToolbar = __decorate([
-    customElement('exm-navigation-toolbar')
-], ExmNavigationToolbar);
-export { ExmNavigationToolbar };
-//# sourceMappingURL=exm-navigation-toolbar.js.map

package/src/styles/exm-navigation-drawer-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{display:block;height:100vh;width:100%;box-sizing:border-box}mwc-drawer{--mdc-drawer-width: 240px}@media screen and (min-width: 961px){:host{padding-left:0}mwc-drawer{margin-left:88px}}@media screen and (max-width: 961px){:host{padding-left:0}mwc-drawer{margin-left:0;--mdc-drawer-width: 319px}}`;
-export default style;
-//# sourceMappingURL=exm-navigation-drawer-css.js.map

package/src/styles/exm-navigation-drawer.scss

@@ -1,29 +0,0 @@
-:host {
-  display: block;
-  height: 100vh;
-  width: 100%;
-  box-sizing: border-box;
-}
-
-mwc-drawer {
-  --mdc-drawer-width: 240px;
-}
-
-@media screen and (min-width: 961px) {
-  :host {
-    padding-left: 0;
-  }
-  mwc-drawer {
-    margin-left: 88px;
-  }
-}
-
-@media screen and (max-width: 961px) {
-  :host {
-    padding-left: 0;
-  }
-  mwc-drawer {
-    margin-left: 0;
-    --mdc-drawer-width: 319px;
-  }
-}

package/src/styles/exm-navigation-rail-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-rail-background-color: var( --exm-navigation-rail-background-color, var(--md-sys-color-surface-container) );display:none;position:fixed;top:0;left:0;flex-direction:column;justify-content:space-between;height:100%;background:var(--_exm-navigation-rail-background-color);overflow-y:auto;z-index:8;box-sizing:border-box}@media screen and (min-width: 961px){:host{display:flex}}.nav{flex:1}.bottom{display:flex;flex-direction:column;flex-grow:1;justify-content:flex-end}`;
-export default style;
-//# sourceMappingURL=exm-navigation-rail-css.js.map

package/src/styles/exm-navigation-rail-nav-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{display:flex;flex-direction:column;--_exm-navigation-rail-nav-width: var(--exm-navigation-rail-nav-width, 88px);width:var(--_exm-navigation-rail-nav-width);margin-top:20px}`;
-export default style;
-//# sourceMappingURL=exm-navigation-rail-nav-css.js.map

package/src/styles/exm-navigation-rail-nav-item-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-rail-nav-item-color: var( --exm-navigation-rail-nav-item-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color: var( --exm-navigation-rail-nav-item-icon-color, var(--md-sys-color-on-surface-variant) );--_exm-navigation-rail-nav-item-icon-color-hover: var( --exm-navigation-rail-nav-item-icon-color-hover, var(--md-sys-color-surface-container-highest) );--_exm-navigation-rail-nav-item-icon-color-selected: var( --exm-navigation-rail-nav-item-icon-color-selected, var(--md-sys-color-secondary) );--_exm-navigation-rail-nav-item-color-selected: var( --exm-navigation-rail-nav-item-color-selected, var(--md-sys-color-on-secondary) );display:flex;flex-direction:column;width:80px;margin:-2px auto 14px;padding:2px;vertical-align:baseline;align-items:center;cursor:pointer}button{position:relative;background:none;border:none;color:var(--_exm-navigation-rail-nav-item-color)}button:focus{outline:none}.symbols{display:flex;text-align:center;position:relative;align-items:center;justify-content:center;width:56px;height:32px;margin-right:auto;margin-bottom:4px;margin-left:auto;font-variation-settings:"wght" 400,"opsz" 24;transition:font-variation-settings .2s cubic-bezier(0.2, 0, 0, 1);border-radius:16px}.symbols{font-family:"Material Symbols Outlined";font-weight:normal;font-style:normal;font-size:24px;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;word-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased}.symbols:before{position:absolute;width:100%;height:100%;opacity:0;transform:scaleX(0.32);transition-duration:.2s;transition-property:transform,opacity;transition-timing-function:linear;border-radius:100px;background:var(--md-sys-color-secondary-container);content:"";z-index:-1}.symbols{color:var(--_exm-navigation-rail-nav-item-icon-color);font-variation-settings:"FILL" 1,"wght" 400,"opsz" 24}:host(:hover) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-hover);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]) .symbols{background:var(--_exm-navigation-rail-nav-item-icon-color-selected);color:var(--_exm-navigation-rail-nav-item-color-selected);font-variation-settings:"wght" 600,"opsz" 24}:host([selected]:hover) .symbols{opacity:.7}`;
-export default style;
-//# sourceMappingURL=exm-navigation-rail-nav-item-css.js.map

package/src/styles/exm-navigation-rail-nav-item.scss

@@ -1,107 +0,0 @@
-:host {
-  --_exm-navigation-rail-nav-item-color: var(
-    --exm-navigation-rail-nav-item-color,
-    var(--md-sys-color-on-surface-variant)
-  );
-  --_exm-navigation-rail-nav-item-icon-color: var(
-    --exm-navigation-rail-nav-item-icon-color,
-    var(--md-sys-color-on-surface-variant)
-  );
-  --_exm-navigation-rail-nav-item-icon-color-hover: var(
-    --exm-navigation-rail-nav-item-icon-color-hover,
-    var(--md-sys-color-surface-container-highest)
-  );
-  --_exm-navigation-rail-nav-item-icon-color-selected: var(
-    --exm-navigation-rail-nav-item-icon-color-selected,
-    var(--md-sys-color-secondary)
-  );
-  --_exm-navigation-rail-nav-item-color-selected: var(
-    --exm-navigation-rail-nav-item-color-selected,
-    var(--md-sys-color-on-secondary)
-  );
-
-  display: flex;
-  flex-direction: column;
-  width: 80px;
-  margin: -2px auto 14px;
-  padding: 2px;
-  vertical-align: baseline;
-  align-items: center;
-  cursor: pointer;
-}
-
-button {
-  position: relative;
-  background: none;
-  border: none;
-  color: var(--_exm-navigation-rail-nav-item-color);
-}
-
-button:focus {
-  outline: none;
-}
-
-.symbols {
-  display: flex;
-  text-align: center;
-  position: relative;
-  align-items: center;
-  justify-content: center;
-  width: 56px;
-  height: 32px;
-  margin-right: auto;
-  margin-bottom: 4px;
-  margin-left: auto;
-  font-variation-settings: 'wght' 400, 'opsz' 24;
-  transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
-  border-radius: 16px;
-}
-
-.symbols {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: 24px;
-  line-height: 1;
-  letter-spacing: normal;
-  text-transform: none;
-  white-space: nowrap;
-  word-wrap: normal;
-  direction: ltr;
-  -webkit-font-smoothing: antialiased;
-}
-
-.symbols:before {
-  position: absolute;
-  width: 100%;
-  height: 100%;
-  opacity: 0;
-  transform: scaleX(0.32);
-  transition-duration: 0.2s;
-  transition-property: transform, opacity;
-  transition-timing-function: linear;
-  border-radius: 100px;
-  background: var(--md-sys-color-secondary-container);
-  content: '';
-  z-index: -1;
-}
-
-.symbols {
-  color: var(--_exm-navigation-rail-nav-item-icon-color);
-  font-variation-settings: 'FILL' 1, 'wght' 400, 'opsz' 24;
-}
-
-:host(:hover) .symbols {
-  background: var(--_exm-navigation-rail-nav-item-icon-color-hover);
-  font-variation-settings: 'wght' 600, 'opsz' 24;
-}
-
-:host([selected]) .symbols {
-  background: var(--_exm-navigation-rail-nav-item-icon-color-selected);
-  color: var(--_exm-navigation-rail-nav-item-color-selected);
-  font-variation-settings: 'wght' 600, 'opsz' 24;
-}
-
-:host([selected]:hover) .symbols {
-  opacity: 0.7;
-}

package/src/styles/exm-navigation-rail-nav.scss

@@ -1,7 +0,0 @@
-:host {
-  display: flex;
-  flex-direction: column;
-  --_exm-navigation-rail-nav-width: var(--exm-navigation-rail-nav-width, 88px);
-  width: var(--_exm-navigation-rail-nav-width);
-  margin-top: 20px;
-}

package/src/styles/exm-navigation-rail.scss

@@ -1,35 +0,0 @@
-:host {
-  --_exm-navigation-rail-background-color: var(
-    --exm-navigation-rail-background-color,
-    var(--md-sys-color-surface-container)
-  );
-
-  display: none;
-  position: fixed;
-  top: 0;
-  left: 0;
-  flex-direction: column;
-  justify-content: space-between;
-  height: 100%;
-  background: var(--_exm-navigation-rail-background-color);
-  overflow-y: auto;
-  z-index: 8;
-  box-sizing: border-box;
-}
-
-@media screen and (min-width: 961px) {
-  :host {
-    display: flex;
-  }
-}
-
-.nav {
-  flex: 1;
-}
-
-.bottom {
-  display: flex;
-  flex-direction: column;
-  flex-grow: 1;
-  justify-content: flex-end;
-}

package/src/styles/exm-navigation-styles-css.d.ts

@@ -1,2 +0,0 @@
-export declare const style: import("lit").CSSResult;
-export default style;

package/src/styles/exm-navigation-styles-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{--_exm-navigation-item-background-color-selected: var( --exm-navigation-item-background-color-selected, var(--md-sys-color-secondary) );--_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary))}exm-navigation-drawer{--md-list-container-color: none;--md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);--md-list-item-container-shape: 24px}exm-navigation-drawer md-list-item{margin-right:8px;margin-left:8px;border-radius:24px;--md-list-item-container-shape: 24px}exm-navigation-drawer md-list-item[selected]{--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);background-color:var(--_exm-navigation-item-background-color-selected);--md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected) --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected)}exm-navigation-drawer md-list-item.collapsed-item[selected]{--md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);background-color:var(--_exm-navigation-item-background-color-selected)}exm-navigation-drawer md-list-item[selected] md-icon{color:var(--md-sys-color-primary)}.sub-menu{margin-left:.8rem}.left-margin{margin-left:2.5rem}`;
-export default style;
-//# sourceMappingURL=exm-navigation-styles-css.js.map

package/src/styles/exm-navigation-styles.scss

@@ -1,46 +0,0 @@
-:host {
-  --_exm-navigation-item-background-color-selected: var(
-    --exm-navigation-item-background-color-selected,
-    var(--md-sys-color-secondary)
-  );
-  --_exm-navigation-item-color-selected: var(--exm-navigation-item-color-selected, var(--md-sys-color-on-secondary));
-}
-
-exm-navigation-drawer {
-  --md-list-container-color: none;
-  --md-list-item-label-text-color: var(--md-sys-color-on-surface-variant);
-  --md-list-item-supporting-text-color: var(--md-sys-color-on-surface-variant);
-  --md-list-item-trailing-supporting-text-color: var(--md-sys-color-on-surface-variant);
-  --md-list-item-container-shape: 24px;
-}
-
-exm-navigation-drawer md-list-item {
-  margin-right: 8px;
-  margin-left: 8px;
-  border-radius: 24px;
-  --md-list-item-container-shape: 24px;
-}
-
-exm-navigation-drawer md-list-item[selected] {
-  --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-  background-color: var(--_exm-navigation-item-background-color-selected);
-  --md-list-item-leading-icon-color: var(--_exm-navigation-item-color-selected)
-  --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
-}
-
-exm-navigation-drawer md-list-item.collapsed-item[selected] {
-  --md-list-item-label-text-color: var(--_exm-navigation-item-color-selected);
-  background-color: var(--_exm-navigation-item-background-color-selected);
-}
-
-exm-navigation-drawer md-list-item[selected] md-icon {
-  color: var(--md-sys-color-primary);
-}
-
-.sub-menu {
-  margin-left: 0.8rem;
-}
-
-.left-margin {
-  margin-left: 2.5rem;
-}

package/src/styles/exm-navigation-toolbar-css.d.ts

@@ -1,2 +0,0 @@
-export declare const style: import("lit").CSSResult;
-export default style;

package/src/styles/exm-navigation-toolbar-css.js

@@ -1,4 +0,0 @@
-import { css } from 'lit';
-export const style = css `:host{display:block}mwc-top-app-bar-fixed{--mdc-theme-primary: var(--exm-navigation-toolbar-primary, var(--md-sys-color-background));--mdc-theme-on-primary: var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background))}md-icon{fill:var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background))}@media screen and (min-width: 961px){slot[name=navigationIcon]{display:none}}`;
-export default style;
-//# sourceMappingURL=exm-navigation-toolbar-css.js.map

package/src/styles/exm-navigation-toolbar.scss

@@ -1,18 +0,0 @@
-:host {
-  display: block;
-}
-
-mwc-top-app-bar-fixed {
-  --mdc-theme-primary: var(--exm-navigation-toolbar-primary, var(--md-sys-color-background));
-  --mdc-theme-on-primary: var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background));
-}
-
-md-icon {
-  fill: var(--exm-navigation-toolbar-on-primary, var(--md-sys-color-on-background));
-}
-
-@media screen and (min-width: 961px) {
-  slot[name='navigationIcon'] {
-    display: none;
-  }
-}