@exmg/exm-navigation 1.0.3 → 1.1.1

package/src/exm-navigation.d.ts

@@ -0,0 +1,8 @@
+import { ExmNavigationBase } from './exm-navigation-base.js';
+export declare class ExmNavigation extends ExmNavigationBase {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'exm-navigation': ExmNavigation;
+    }
+}

package/src/exm-navigation.js

@@ -0,0 +1,10 @@
+import { __decorate } from "tslib";
+import { customElement } from 'lit/decorators.js';
+import { ExmNavigationBase } from './exm-navigation-base.js';
+let ExmNavigation = class ExmNavigation extends ExmNavigationBase {
+};
+ExmNavigation = __decorate([
+    customElement('exm-navigation')
+], ExmNavigation);
+export { ExmNavigation };
+//# sourceMappingURL=exm-navigation.js.map

package/src/mixins/media-queries.d.ts

@@ -0,0 +1,7 @@
+import { LitElement } from 'lit';
+type Constructor<T = {}> = new (...args: any[]) => T;
+type MediaType = 'mobile' | 'tablet' | 'desktop';
+export declare const MediaQueries: <T extends Constructor<LitElement>>(superClass: T) => Constructor<{
+    media: MediaType;
+}> & T;
+export {};

package/src/mixins/media-queries.js

@@ -0,0 +1,44 @@
+import { __decorate } from "tslib";
+import { property } from 'lit/decorators.js';
+export const MediaQueries = (superClass) => {
+    class MediaQueryClass extends superClass {
+        constructor() {
+            super(...arguments);
+            this.media = 'desktop';
+            this.mobileMedia = window.matchMedia('(max-width: 400px)');
+            this.tabletMedia = window.matchMedia('(min-width: 401px) and (max-width: 1200px)');
+            this.desktopMedia = window.matchMedia('(min-width: 1201px)');
+        }
+        updateMedia(media) {
+            return (mediaMatch) => {
+                if (mediaMatch.matches) {
+                    this.media = media;
+                    this.requestUpdate();
+                }
+            };
+        }
+        connectedCallback() {
+            super.connectedCallback();
+            // @ts-ignore
+            this.updateMedia('mobile')(this.mobileMedia);
+            // @ts-ignore
+            this.updateMedia('tablet')(this.tabletMedia);
+            // @ts-ignore
+            this.updateMedia('desktop')(this.desktopMedia);
+            // eslint-disable-next-line
+            this.mobileMedia.addEventListener('change', this.updateMedia('mobile').bind(this));
+            this.tabletMedia.addEventListener('change', this.updateMedia('tablet').bind(this));
+            this.desktopMedia.addEventListener('change', this.updateMedia('desktop').bind(this));
+        }
+        updated(changedProperties) {
+            var _a;
+            (_a = super.updated) === null || _a === void 0 ? void 0 : _a.call(this, changedProperties);
+            console.log(`${this.media} was updated`);
+        }
+    }
+    __decorate([
+        property({ type: String })
+    ], MediaQueryClass.prototype, "media", void 0);
+    return MediaQueryClass;
+};
+//# sourceMappingURL=media-queries.js.map

package/src/styles/exm-navigate-drawer-nav-item-css.d.ts

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

package/src/styles/exm-navigate-drawer-nav-item-css.js

@@ -0,0 +1,40 @@
+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));
+  }
+
+  md-list-item {
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 1rem;
+    --md-list-item-container-shape: 1rem;
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+  }
+
+  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);
+  }
+
+  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);
+  }
+
+  md-list-item[selected] md-icon {
+    color: var(--md-sys-color-primary);
+  }
+
+  .sub-menu {
+    margin-left: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-navigate-drawer-nav-item-css.js.map

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

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

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

@@ -0,0 +1,56 @@
+import { css } from 'lit';
+export const style = css `
+  .navigation-container {
+    display: grid;
+    grid-template-columns: auto var(--exm-drawer-width, 500px) 1fr;
+    grid-template-rows: 1fr;
+    width: 100%;
+    transition: grid-template-columns 0.3s ease;
+  }
+
+  .navigation-container.show-topbar {
+    grid-template-columns: 1fr;
+    grid-template-rows: auto 1fr;
+  }
+
+  .navigation-container.show-topbar exm-navigation-topbar {
+    grid-area: 1/1/2/2;
+    z-index: 2;
+  }
+
+  .navigation-container.show-topbar exm-navigation-drawer {
+    grid-area: 1/1/3/2;
+  }
+
+  .navigation-container.show-topbar .content {
+    grid-area: 2/1/3/2;
+  }
+
+  exm-navigation-rail {
+    grid-area: 1/1/2/2;
+  }
+
+  exm-navigation-drawer {
+    grid-area: 1/2/2/3;
+  }
+
+  .content {
+    grid-area: 1/3/2/4;
+    z-index: 1;
+  }
+
+  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;
+    --mdc-theme-surface: var(--md-sys-color-surface-container-high);
+    --mdc-shape-large: 1rem;
+  }
+
+  .left-margin {
+    margin-left: 2.5rem;
+  }
+`;
+//# sourceMappingURL=exm-navigation-css.js.map

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

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

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

@@ -1,4 +1,24 @@
 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;
+export const style = css `
+  :root {
+    --md-sys-color-background: var(--md-sys-color-surface-container-high);
+  }
+
+  :host {
+    --mdc-drawer-width: 319px;
+    display: grid;
+    grid-template-columns: var(--mdc-drawer-width, 300px) 1fr;
+    height: 100vh;
+    width: 100%;
+    box-sizing: border-box;
+    transition: grid-template-columns 0.3s ease;
+    position: relative;
+  }
+
+  @media screen and (min-width: 961px) {
+    slot[name='appContent'] {
+      background-color: rgba(0, 0, 0, 0);
+    }
+  }
+`;
 //# sourceMappingURL=exm-navigation-drawer-css.js.map

package/src/styles/exm-navigation-drawer-nav-item-css.d.ts

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

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

@@ -0,0 +1,40 @@
+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));
+  }
+
+  md-list-item {
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 1rem;
+    --md-list-item-container-shape: 1rem;
+  }
+
+  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);
+    --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected)
+      --md-list-item-trailing-icon-color: var(--_exm-navigation-item-color-selected);
+  }
+
+  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);
+  }
+
+  md-list-item[selected] md-icon {
+    color: var(--md-sys-color-primary);
+  }
+
+  .sub-menu {
+    margin-left: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-navigation-drawer-nav-item-css.js.map

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

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

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

@@ -0,0 +1,23 @@
+import { css } from 'lit';
+export const style = css `
+  .icon-button {
+    border: none;
+    background-color: rgba(0, 0, 0, 0);
+    color: #fff;
+    width: 48px;
+    height: 48px;
+    display: flex;
+    align-items: center;
+  }
+
+  .icon-button.has-label {
+    width: auto;
+  }
+
+  .icon-button .label {
+    padding: 0 8px;
+    white-space: nowrap;
+    font-size: 16px;
+  }
+`;
+//# sourceMappingURL=exm-navigation-icon-button-css.js.map

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

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

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

@@ -0,0 +1,22 @@
+import { css } from 'lit';
+export const style = css `
+  .icon {
+    align-items: center;
+    justify-content: center;
+    display: flex;
+    position: relative;
+    height: 100%;
+    width: 100%;
+    font-variation-settings:
+      'wght' 400,
+      'opsz' 24;
+    transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
+    border-radius: 16px;
+    font-family: 'Material Symbols Outlined';
+    font-size: 24px;
+    line-height: 1;
+    direction: ltr;
+    -webkit-font-smoothing: antialiased;
+  }
+`;
+//# sourceMappingURL=exm-navigation-icon-css.js.map

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

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

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

@@ -1,4 +1,49 @@
 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;
+export const style = css `
+  :host {
+    --_exm-navigation-rail-background-color: var(
+      --exm-navigation-rail-background-color,
+      var(--md-sys-color-surface-container)
+    );
+    --_exm-navigation-rail-width: var(--exm-navigation-rail-nav-width, 88px);
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    justify-content: space-between;
+    height: 100%;
+    background: var(--_exm-navigation-rail-background-color);
+    overflow-y: auto;
+    z-index: 8;
+    box-sizing: border-box;
+    width: var(--_exm-navigation-rail-width);
+  }
+
+  @media screen and (min-width: 961px) {
+    :host {
+      display: flex;
+    }
+  }
+
+  nav {
+    flex: 1;
+  }
+
+  nav ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  nav li {
+    padding: 0;
+    margin: 0;
+  }
+
+  .bottom {
+    display: flex;
+    flex-direction: column;
+    flex-grow: 1;
+    justify-content: flex-end;
+  }
+`;
 //# sourceMappingURL=exm-navigation-rail-css.js.map

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

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

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

@@ -1,4 +1,94 @@
 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;
+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)
+    );
+    --_exm-navigation-rail-nav-item-width: var(--exm-navigation-rail-nav-item-width, 80px);
+    display: flex;
+    flex-direction: column;
+    width: var(--_exm-navigation-rail-nav-item-width);
+    margin: -2px 0 14px;
+    padding: 2px 0;
+    vertical-align: baseline;
+    align-items: center;
+    cursor: pointer;
+    width: 100%;
+  }
+
+  button {
+    position: relative;
+    background: none;
+    border: none;
+    color: var(--_exm-navigation-rail-nav-item-color);
+  }
+
+  button:focus {
+    outline: none;
+  }
+
+  .symbols {
+    display: flex;
+    position: relative;
+    align-items: center;
+    justify-content: center;
+    width: 56px;
+    height: 32px;
+    margin: 0 auto 4px;
+    transition: font-variation-settings 0.2s cubic-bezier(0.2, 0, 0, 1);
+    border-radius: 16px;
+    color: var(--_exm-navigation-rail-nav-item-icon-color);
+  }
+
+  .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;
+  }
+
+  :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;
+  }
+`;
 //# sourceMappingURL=exm-navigation-rail-nav-item-css.js.map

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

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

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

@@ -0,0 +1,38 @@
+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));
+  }
+
+  md-list-item {
+    margin-right: 8px;
+    margin-left: 8px;
+    border-radius: 1rem;
+    --md-list-item-container-shape: 1rem;
+  }
+
+  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);
+  }
+
+  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);
+  }
+
+  md-list-item[selected] md-icon {
+    color: var(--md-sys-color-primary);
+  }
+
+  .sub-menu {
+    margin-left: 1rem;
+  }
+`;
+//# sourceMappingURL=exm-navigation-sub-menu-css.js.map

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

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

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

@@ -0,0 +1,29 @@
+import { css } from 'lit';
+export const style = css `
+  :host {
+    --_exm-navigation-topbar-background-color: var(
+      --exm-navigation-topbar-background-color,
+      var(--md-sys-color-surface-container)
+    );
+    --_exm-navigation-top-bar-height: var(--exm-navigation-top-bar-height, 64px);
+    background: var(--_exm-navigation-rail-background-color);
+    box-sizing: border-box;
+    display: grid;
+    grid-template-columns: var(--_exm-navigation-top-bar-height) 1fr;
+    height: var(--_exm-navigation-top-bar-height);
+    gap: 8px;
+    justify-content: space-between;
+    width: 100%;
+  }
+
+  exm-navigation-icon-button {
+    align-self: center;
+    grid-area: 1/1/2/2;
+    justify-self: center;
+  }
+
+  ::slotted(*) {
+    align-self: center;
+  }
+`;
+//# sourceMappingURL=exm-navigation-topbar-css.js.map

package/src/types.d.ts

@@ -0,0 +1,8 @@
+export interface MenuItem {
+    id: string;
+    label: string;
+    path?: string;
+    url?: string;
+    icon?: string;
+    items?: MenuItem[];
+}

package/src/types.js

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=types.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;
-  }
-}