@operato/menu 2.0.0-alpha.100

package/dist/src/menu-portrait-styles.js

@@ -0,0 +1,145 @@
+import { css } from 'lit';
+export const MenuPortraitStyles = css `
+  :host {
+    display: flex;
+    overflow-y: auto;
+    flex-direction: column;
+    height: 100%;
+  }
+
+  :host > ul {
+    margin-block-end: 1.5em;
+  }
+
+  ul {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  [group-label] {
+    padding: 25px 0 var(--padding-narrow) var(--padding-wide);
+    border-bottom: var(--border-dark-color);
+    font: bold 12px var(--theme-font);
+    color: rgba(var(--primary-color-rgb), 0.9);
+    text-transform: uppercase;
+  }
+
+  a {
+    display: flex;
+    align-items: center;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+    padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);
+    text-decoration: none;
+    font: normal 14px var(--theme-font);
+    color: var(--secondary-color);
+    text-transform: capitalize;
+
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  a:hover {
+    color: var(--primary-color);
+    font-weight: bold;
+  }
+
+  a * {
+    vertical-align: middle;
+  }
+
+  a md-icon {
+    --md-icon-size: 20px;
+    font-variation-settings: 'FILL' 1;
+
+    margin-right: var(--margin-narrow);
+    color: rgba(var(--secondary-color-rgb), 0.7);
+  }
+
+  a [submenu-button] {
+    --md-icon-size: 20px;
+    max-height: 20px;
+    margin-left: auto;
+  }
+
+  a [submenu-button]::before {
+    content: 'chevron_right';
+  }
+
+  li[active] > a [submenu-button]::before {
+    content: 'expand_more';
+  }
+
+  li[active] > a {
+    border-left: 3px solid var(--primary-color);
+    font-weight: bold;
+    color: var(--primary-color);
+  }
+
+  li li a {
+    padding: 7px 0 7px 35px;
+    font: normal 13px var(--theme-font);
+    color: var(--secondary-color);
+  }
+
+  li li[active] a {
+    background-color: rgba(var(--primary-color-rgb), 0.15);
+    font: bold 13px var(--theme-font);
+    color: var(--primary-color);
+  }
+
+  li > ul {
+    overflow-y: hidden;
+    max-height: 0;
+    background-color: #f6f6f6;
+
+    transition-property: all;
+    transition-duration: 0.7s;
+  }
+
+  li[active] > ul {
+    max-height: 500px;
+  }
+
+  li[active] > ul[settled] {
+    overflow-y: auto;
+  }
+
+  li li a::before {
+    margin-right: var(--margin-narrow);
+  }
+
+  a [badge] {
+    margin-left: auto;
+    background-color: var(--primary-background-color);
+    color: white;
+    border-radius: 999em;
+    padding: 0px 6px;
+  }
+
+  @media only screen and (max-width: 460px) {
+    :host {
+      min-width: 100vw;
+    }
+
+    a {
+      padding: var(--padding-wide);
+      font: normal 15px var(--theme-font);
+    }
+
+    li li a {
+      display: block;
+      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      font: normal 14px var(--theme-font);
+    }
+
+    li li[active] a {
+      font: bold 14px var(--theme-font);
+    }
+  }
+`;
+//# sourceMappingURL=menu-portrait-styles.js.map

package/dist/src/menu-portrait-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"menu-portrait-styles.js","sourceRoot":"","sources":["../../src/menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,kBAAkB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8IpC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const MenuPortraitStyles = css`\n  :host {\n    display: flex;\n    overflow-y: auto;\n    flex-direction: column;\n    height: 100%;\n  }\n\n  :host > ul {\n    margin-block-end: 1.5em;\n  }\n\n  ul {\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  [group-label] {\n    padding: 25px 0 var(--padding-narrow) var(--padding-wide);\n    border-bottom: var(--border-dark-color);\n    font: bold 12px var(--theme-font);\n    color: rgba(var(--primary-color-rgb), 0.9);\n    text-transform: uppercase;\n  }\n\n  a {\n    display: flex;\n    align-items: center;\n    border-bottom: 1px solid rgba(0, 0, 0, 0.07);\n    padding: var(--padding-default) var(--padding-default) var(--padding-default) var(--padding-wide);\n    text-decoration: none;\n    font: normal 14px var(--theme-font);\n    color: var(--secondary-color);\n    text-transform: capitalize;\n\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  a:hover {\n    color: var(--primary-color);\n    font-weight: bold;\n  }\n\n  a * {\n    vertical-align: middle;\n  }\n\n  a md-icon {\n    --md-icon-size: 20px;\n    font-variation-settings: 'FILL' 1;\n\n    margin-right: var(--margin-narrow);\n    color: rgba(var(--secondary-color-rgb), 0.7);\n  }\n\n  a [submenu-button] {\n    --md-icon-size: 20px;\n    max-height: 20px;\n    margin-left: auto;\n  }\n\n  a [submenu-button]::before {\n    content: 'chevron_right';\n  }\n\n  li[active] > a [submenu-button]::before {\n    content: 'expand_more';\n  }\n\n  li[active] > a {\n    border-left: 3px solid var(--primary-color);\n    font-weight: bold;\n    color: var(--primary-color);\n  }\n\n  li li a {\n    padding: 7px 0 7px 35px;\n    font: normal 13px var(--theme-font);\n    color: var(--secondary-color);\n  }\n\n  li li[active] a {\n    background-color: rgba(var(--primary-color-rgb), 0.15);\n    font: bold 13px var(--theme-font);\n    color: var(--primary-color);\n  }\n\n  li > ul {\n    overflow-y: hidden;\n    max-height: 0;\n    background-color: #f6f6f6;\n\n    transition-property: all;\n    transition-duration: 0.7s;\n  }\n\n  li[active] > ul {\n    max-height: 500px;\n  }\n\n  li[active] > ul[settled] {\n    overflow-y: auto;\n  }\n\n  li li a::before {\n    margin-right: var(--margin-narrow);\n  }\n\n  a [badge] {\n    margin-left: auto;\n    background-color: var(--primary-background-color);\n    color: white;\n    border-radius: 999em;\n    padding: 0px 6px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      min-width: 100vw;\n    }\n\n    a {\n      padding: var(--padding-wide);\n      font: normal 15px var(--theme-font);\n    }\n\n    li li a {\n      display: block;\n      padding: var(--padding-wide) var(--padding-default) var(--padding-wide) 35px;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      white-space: nowrap;\n      font: normal 14px var(--theme-font);\n    }\n\n    li li[active] a {\n      font: bold 14px var(--theme-font);\n    }\n  }\n`\n"]}

package/dist/src/ox-menu-landscape.d.ts

@@ -0,0 +1,21 @@
+import '@material/web/icon/icon.js';
+import { LitElement } from 'lit';
+import { Menu } from './types';
+declare const OxMenuLandscape_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class OxMenuLandscape extends OxMenuLandscape_base {
+    static styles: import("lit").CSSResult[];
+    menus?: Menu[];
+    activeTopLevel?: Menu;
+    activeMenu: Menu;
+    path?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    onWheelEvent(e: WheelEvent): void;
+}
+export {};

package/dist/src/ox-menu-landscape.js

@@ -0,0 +1,99 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers';
+import { navigate, store } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { MenuLandscapeStyles } from './menu-landscape-styles';
+let OxMenuLandscape = class OxMenuLandscape extends connect(store)(LitElement) {
+    render() {
+        const { menus = [], activeTopLevel, activeMenu } = this;
+        return html `
+      <div id="wrap" @mousewheel=${this.onWheelEvent.bind(this)}>
+        <ul>
+          ${menus.map(menu => {
+            var _a;
+            return menu.type == 'group'
+                ? html ``
+                : html `
+                  <li ?active=${menu === activeTopLevel}>
+                    <a href=${menu.path || '#'}>
+                      ${menu.icon ? html `<md-icon>${menu.icon}</md-icon>` : html ``} ${menu.name}
+                    </a>
+
+                    <ul submenus>
+                      ${(_a = menu.menus) === null || _a === void 0 ? void 0 : _a.map(menu => html `
+                          <li ?active=${menu === activeMenu}>
+                            <a href=${menu.path || '#'}> ${menu.name} </a>
+                          </li>
+                        `)}
+                    </ul>
+
+                    <div description>
+                      ${menu.icon ? html `<md-icon>${menu.icon}</md-icon>` : html ``} ${menu.description || ''}
+                    </div>
+                  </li>
+                `;
+        })}
+        </ul>
+      </div>
+    `;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('click', (e) => {
+            //@ts-ignore
+            if (e.target.submenu) {
+                /* protect to act move to href. */
+                e.stopPropagation();
+                e.preventDefault();
+                //@ts-ignore
+                let menu = e.target.submenu;
+                this.dispatchEvent(new CustomEvent('active-toplevel', {
+                    bubbles: true,
+                    detail: this.activeTopLevel === menu ? undefined : menu
+                }));
+                return;
+            }
+            /* to respond even if current acting menu is selected */
+            let href = e.target.href;
+            href && location.href === href && navigate(href + '#force', true);
+        });
+        /* to hide scrollbar during transition */
+        this.renderRoot.addEventListener('transitionstart', e => {
+            ;
+            e.target.removeAttribute('settled');
+        });
+        this.renderRoot.addEventListener('transitionend', e => {
+            ;
+            e.target.setAttribute('settled', '');
+        });
+    }
+    onWheelEvent(e) {
+        const { target, deltaY, detail } = e;
+        if (!(target instanceof HTMLElement)) {
+            return;
+        }
+        const delta = deltaY || -detail;
+        target.scrollLeft -= (delta / Math.abs(delta)) * 10;
+        e.preventDefault();
+    }
+};
+OxMenuLandscape.styles = [ScrollbarStyles, MenuLandscapeStyles];
+__decorate([
+    property({ type: Array })
+], OxMenuLandscape.prototype, "menus", void 0);
+__decorate([
+    property({ type: Object })
+], OxMenuLandscape.prototype, "activeTopLevel", void 0);
+__decorate([
+    property({ type: Object })
+], OxMenuLandscape.prototype, "activeMenu", void 0);
+__decorate([
+    property({ type: String })
+], OxMenuLandscape.prototype, "path", void 0);
+OxMenuLandscape = __decorate([
+    customElement('ox-menu-landscape')
+], OxMenuLandscape);
+export { OxMenuLandscape };
+//# sourceMappingURL=ox-menu-landscape.js.map

package/dist/src/ox-menu-landscape.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-menu-landscape.js","sourceRoot":"","sources":["../../src/ox-menu-landscape.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, LitElement } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { navigate, store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\nimport { MenuLandscapeStyles } from './menu-landscape-styles'\n\n@customElement('ox-menu-landscape')\nexport class OxMenuLandscape extends connect(store)(LitElement) {\n  static styles = [ScrollbarStyles, MenuLandscapeStyles]\n\n  @property({ type: Array }) menus?: Menu[]\n  @property({ type: Object }) activeTopLevel?: Menu\n  @property({ type: Object }) activeMenu!: Menu\n  @property({ type: String }) path?: string\n\n  render() {\n    const { menus = [], activeTopLevel, activeMenu } = this\n\n    return html`\n      <div id=\"wrap\" @mousewheel=${this.onWheelEvent.bind(this)}>\n        <ul>\n          ${menus.map(menu =>\n            menu.type == 'group'\n              ? html``\n              : html`\n                  <li ?active=${menu === activeTopLevel}>\n                    <a href=${menu.path || '#'}>\n                      ${menu.icon ? html`<md-icon>${menu.icon}</md-icon>` : html``} ${menu.name}\n                    </a>\n\n                    <ul submenus>\n                      ${menu.menus?.map(\n                        menu => html`\n                          <li ?active=${menu === activeMenu}>\n                            <a href=${menu.path || '#'}> ${menu.name} </a>\n                          </li>\n                        `\n                      )}\n                    </ul>\n\n                    <div description>\n                      ${menu.icon ? html`<md-icon>${menu.icon}</md-icon>` : html``} ${menu.description || ''}\n                    </div>\n                  </li>\n                `\n          )}\n        </ul>\n      </div>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('click', (e: Event) => {\n      //@ts-ignore\n      if (e.target.submenu) {\n        /* protect to act move to href. */\n        e.stopPropagation()\n        e.preventDefault()\n\n        //@ts-ignore\n        let menu = e.target.submenu\n\n        this.dispatchEvent(\n          new CustomEvent('active-toplevel', {\n            bubbles: true,\n            detail: this.activeTopLevel === menu ? undefined : menu\n          })\n        )\n\n        return\n      }\n\n      /* to respond even if current acting menu is selected */\n      let href = (e.target as HTMLAnchorElement).href\n      href && location.href === href && navigate(href + '#force', true)\n    })\n\n    /* to hide scrollbar during transition */\n    this.renderRoot.addEventListener('transitionstart', e => {\n      ;(e.target as HTMLElement).removeAttribute('settled')\n    })\n    this.renderRoot.addEventListener('transitionend', e => {\n      ;(e.target as HTMLElement).setAttribute('settled', '')\n    })\n  }\n\n  onWheelEvent(e: WheelEvent) {\n    const { target, deltaY, detail } = e\n\n    if (!(target instanceof HTMLElement)) {\n      return\n    }\n\n    const delta = deltaY || -detail\n    target.scrollLeft -= (delta / Math.abs(delta)) * 10\n\n    e.preventDefault()\n  }\n}\n"]}

package/dist/src/ox-menu-part.d.ts

@@ -0,0 +1,29 @@
+import '@material/web/icon/icon.js';
+import './ox-menu-portrait';
+import './ox-menu-landscape';
+import { LitElement, PropertyValues } from 'lit';
+import { Menu } from './types';
+declare const OxMenuPart_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class OxMenuPart extends OxMenuPart_base {
+    static styles: import("lit").CSSResult[];
+    page: string;
+    resourceId?: string;
+    menus?: Menu[];
+    orientation?: 'landscape' | 'portrait';
+    slotTemplate: any;
+    _activeTopLevel?: Menu;
+    _activeMenu?: Menu;
+    _path?: string;
+    render(): import("lit-html").TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changes: PropertyValues<this>): void;
+    stateChanged(state: any): void;
+    private findActivePage;
+}
+export {};

package/dist/src/ox-menu-part.js

@@ -0,0 +1,135 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import './ox-menu-portrait';
+import './ox-menu-landscape';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers';
+import { store } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+function isActiveMenu(menu, path) {
+    var _a;
+    return (((_a = menu.path) === null || _a === void 0 ? void 0 : _a.split('?')[0]) === path ||
+        (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path })));
+}
+let OxMenuPart = class OxMenuPart extends connect(store)(LitElement) {
+    render() {
+        return html `
+      <slot name="head"></slot>
+      ${this.orientation !== 'landscape'
+            ? html `<ox-menu-portrait
+            .menus=${this.menus}
+            .activeTopLevel=${this._activeTopLevel}
+            .activeMenu=${this._activeMenu}
+            .path=${this._path}
+          ></ox-menu-portrait>`
+            : html `<ox-menu-landscape
+            .menus=${this.menus}
+            .activeTopLevel=${this._activeTopLevel}
+            .activeMenu=${this._activeMenu}
+            .path=${this._path}
+          ></ox-menu-landscape>`}
+      <slot name="tail"></slot>
+    `;
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('active-toplevel', (e) => {
+            e.stopPropagation();
+            e.preventDefault();
+            this._activeTopLevel = e.detail;
+        });
+    }
+    updated(changes) {
+        if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
+            this.findActivePage();
+        }
+        if (changes.has('orientation')) {
+            if (this.orientation == 'portrait') {
+                this.removeAttribute('landscape');
+            }
+            else {
+                this.setAttribute('landscape', '');
+            }
+        }
+        if (changes.has('slotTemplate')) {
+            this.replaceChild(this.slotTemplate, this.renderRoot);
+        }
+    }
+    stateChanged(state) {
+        this.page = state.route.page;
+        this.resourceId = state.route.resourceId;
+        this.menus = state.liteMenu.menus || [];
+        this.slotTemplate = state.liteMenu.slotTemplate;
+    }
+    findActivePage() {
+        var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page;
+        var menus = this.menus || [];
+        var activeMenu;
+        this._activeTopLevel = menus.find(menu => {
+            if (isActiveMenu(menu, path)) {
+                activeMenu = menu;
+                return true;
+            }
+            else if (menu.menus) {
+                activeMenu = menu.menus.find(menu => isActiveMenu(menu, path));
+                return !!activeMenu;
+            }
+        });
+        this._path = path;
+        this._activeMenu = activeMenu || this._activeTopLevel;
+    }
+};
+OxMenuPart.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        overflow-y: auto;
+        flex-direction: column;
+        height: 100%;
+        min-width: 200px;
+        background-color: var(--theme-white-color);
+      }
+
+      :host([landscape]) {
+        overflow-x: auto;
+        flex-direction: row;
+        width: 100%;
+        min-height: 20px;
+      }
+
+      ox-menu-portrait,
+      ox-menu-landscape {
+        flex: 1;
+      }
+    `
+];
+__decorate([
+    property({ type: String })
+], OxMenuPart.prototype, "page", void 0);
+__decorate([
+    property({ type: String })
+], OxMenuPart.prototype, "resourceId", void 0);
+__decorate([
+    property({ type: Array })
+], OxMenuPart.prototype, "menus", void 0);
+__decorate([
+    property({ type: String })
+], OxMenuPart.prototype, "orientation", void 0);
+__decorate([
+    state()
+], OxMenuPart.prototype, "slotTemplate", void 0);
+__decorate([
+    state()
+], OxMenuPart.prototype, "_activeTopLevel", void 0);
+__decorate([
+    state()
+], OxMenuPart.prototype, "_activeMenu", void 0);
+__decorate([
+    state()
+], OxMenuPart.prototype, "_path", void 0);
+OxMenuPart = __decorate([
+    customElement('ox-menu-part')
+], OxMenuPart);
+export { OxMenuPart };
+//# sourceMappingURL=ox-menu-part.js.map

package/dist/src/ox-menu-part.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-menu-part.js","sourceRoot":"","sources":["../../src/ox-menu-part.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport './ox-menu-portrait'\nimport './ox-menu-landscape'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers'\n\nimport { store } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\n\nfunction isActiveMenu(menu: Menu, path: string) {\n  return (\n    menu.path?.split('?')[0] === path ||\n    (menu.active && typeof menu.active === 'function' && menu.active.call(menu, { path }))\n  )\n}\n\n@customElement('ox-menu-part')\nexport class OxMenuPart extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        overflow-y: auto;\n        flex-direction: column;\n        height: 100%;\n        min-width: 200px;\n        background-color: var(--theme-white-color);\n      }\n\n      :host([landscape]) {\n        overflow-x: auto;\n        flex-direction: row;\n        width: 100%;\n        min-height: 20px;\n      }\n\n      ox-menu-portrait,\n      ox-menu-landscape {\n        flex: 1;\n      }\n    `\n  ]\n\n  @property({ type: String }) page!: string\n  @property({ type: String }) resourceId?: string\n  @property({ type: Array }) menus?: Menu[]\n  @property({ type: String }) orientation?: 'landscape' | 'portrait'\n\n  @state() slotTemplate: any\n  @state() _activeTopLevel?: Menu\n  @state() _activeMenu?: Menu\n  @state() _path?: string\n\n  render() {\n    return html`\n      <slot name=\"head\"></slot>\n      ${this.orientation !== 'landscape'\n        ? html`<ox-menu-portrait\n            .menus=${this.menus}\n            .activeTopLevel=${this._activeTopLevel}\n            .activeMenu=${this._activeMenu}\n            .path=${this._path}\n          ></ox-menu-portrait>`\n        : html`<ox-menu-landscape\n            .menus=${this.menus}\n            .activeTopLevel=${this._activeTopLevel}\n            .activeMenu=${this._activeMenu}\n            .path=${this._path}\n          ></ox-menu-landscape>`}\n      <slot name=\"tail\"></slot>\n    `\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('active-toplevel', (e: Event) => {\n      e.stopPropagation()\n      e.preventDefault()\n\n      this._activeTopLevel = (e as CustomEvent).detail\n    })\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {\n      this.findActivePage()\n    }\n\n    if (changes.has('orientation')) {\n      if (this.orientation == 'portrait') {\n        this.removeAttribute('landscape')\n      } else {\n        this.setAttribute('landscape', '')\n      }\n    }\n\n    if (changes.has('slotTemplate')) {\n      this.replaceChild(this.slotTemplate, this.renderRoot)\n    }\n  }\n\n  stateChanged(state: any): void {\n    this.page = state.route.page\n    this.resourceId = state.route.resourceId\n    this.menus = state.liteMenu.menus || []\n    this.slotTemplate = state.liteMenu.slotTemplate\n  }\n\n  private findActivePage() {\n    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page\n    var menus = this.menus || []\n    var activeMenu\n\n    this._activeTopLevel = menus.find(menu => {\n      if (isActiveMenu(menu, path)) {\n        activeMenu = menu\n        return true\n      } else if (menu.menus) {\n        activeMenu = menu.menus.find(menu => isActiveMenu(menu, path))\n        return !!activeMenu\n      }\n    })\n\n    this._path = path\n    this._activeMenu = activeMenu || this._activeTopLevel\n  }\n}\n"]}

package/dist/src/ox-menu-portrait.d.ts

@@ -0,0 +1,13 @@
+import '@material/web/icon/icon.js';
+import { LitElement, nothing, TemplateResult } from 'lit';
+import { Menu } from './types';
+export declare class OxMenuPortrait extends LitElement {
+    static styles: import("lit").CSSResult[];
+    menus?: Menu[];
+    activeTopLevel?: Menu;
+    activeMenu?: Menu;
+    path: string;
+    renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu): TemplateResult | typeof nothing;
+    render(): TemplateResult | typeof nothing;
+    firstUpdated(): void;
+}

package/dist/src/ox-menu-portrait.js

@@ -0,0 +1,88 @@
+import { __decorate } from "tslib";
+import '@material/web/icon/icon.js';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { navigate } from '@operato/shell';
+import { ScrollbarStyles } from '@operato/styles';
+import { MenuPortraitStyles } from './menu-portrait-styles';
+let OxMenuPortrait = class OxMenuPortrait extends LitElement {
+    renderMenus(menus, activeTopLevel, activeMenu) {
+        if (menus.length == 0) {
+            return nothing;
+        }
+        return html `
+      <ul>
+        ${menus.map(menu => {
+            var { type, active, path, name, badge, icon, menus = [] } = menu;
+            active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false;
+            badge = typeof badge === 'function' ? badge.call(menu) : badge !== null && badge !== void 0 ? badge : false;
+            return type == 'group'
+                ? html `<li group-label>${name}</li>`
+                : html `
+                <li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>
+                  <a href=${path || '#'}>
+                    <md-icon>${icon || 'fiber_manual_record'}</md-icon>
+                    ${name} ${badge !== false ? html `<div badge>${badge}</div>` : html ``}
+                    ${menus.length > 0 ? html ` <md-icon submenu-button></md-icon> ` : html ``}
+                  </a>
+                  ${menus && this.renderMenus(menus || [], activeMenu)}
+                </li>
+              `;
+        })}
+      </ul>
+    `;
+    }
+    render() {
+        const { menus, activeTopLevel, activeMenu } = this;
+        return this.renderMenus(menus || [], activeTopLevel, activeMenu);
+    }
+    firstUpdated() {
+        this.renderRoot.addEventListener('click', (e) => {
+            const menuElement = e.target.closest('[menu]');
+            //@ts-ignore
+            if (menuElement === null || menuElement === void 0 ? void 0 : menuElement.menu) {
+                //@ts-ignore
+                let menu = menuElement.menu;
+                if (!menu.path) {
+                    /* protect to act move to href. */
+                    e.stopPropagation();
+                    e.preventDefault();
+                }
+                this.dispatchEvent(new CustomEvent('active-toplevel', {
+                    bubbles: true,
+                    detail: this.activeTopLevel === menu ? undefined : menu
+                }));
+            }
+            /* to respond even if current acting menu is selected */
+            let href = e.target.href;
+            href && location.href === href && navigate(href + '#force', true);
+        });
+        /* to hide scrollbar during transition */
+        this.renderRoot.addEventListener('transitionstart', e => {
+            ;
+            e.target.removeAttribute('settled');
+        });
+        this.renderRoot.addEventListener('transitionend', e => {
+            ;
+            e.target.setAttribute('settled', '');
+        });
+    }
+};
+OxMenuPortrait.styles = [ScrollbarStyles, MenuPortraitStyles];
+__decorate([
+    property({ type: Array })
+], OxMenuPortrait.prototype, "menus", void 0);
+__decorate([
+    property({ type: Object })
+], OxMenuPortrait.prototype, "activeTopLevel", void 0);
+__decorate([
+    property({ type: Object })
+], OxMenuPortrait.prototype, "activeMenu", void 0);
+__decorate([
+    property({ type: String })
+], OxMenuPortrait.prototype, "path", void 0);
+OxMenuPortrait = __decorate([
+    customElement('ox-menu-portrait')
+], OxMenuPortrait);
+export { OxMenuPortrait };
+//# sourceMappingURL=ox-menu-portrait.js.map

package/dist/src/ox-menu-portrait.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-menu-portrait.js","sourceRoot":"","sources":["../../src/ox-menu-portrait.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Menu } from './types'\nimport { MenuPortraitStyles } from './menu-portrait-styles'\n\n@customElement('ox-menu-portrait')\nexport class OxMenuPortrait extends LitElement {\n  static styles = [ScrollbarStyles, MenuPortraitStyles]\n\n  @property({ type: Array }) menus?: Menu[]\n  @property({ type: Object }) activeTopLevel?: Menu\n  @property({ type: Object }) activeMenu?: Menu\n  @property({ type: String }) path!: string\n\n  renderMenus(menus: Menu[], activeTopLevel?: Menu, activeMenu?: Menu): TemplateResult | typeof nothing {\n    if (menus.length == 0) {\n      return nothing\n    }\n\n    return html`\n      <ul>\n        ${menus.map(menu => {\n          var { type, active, path, name, badge, icon, menus = [] } = menu\n          active = active && typeof active === 'function' ? active.call(menu, { path: this.path }) : false\n          badge = typeof badge === 'function' ? badge.call(menu) : badge ?? false\n\n          return type == 'group'\n            ? html`<li group-label>${name}</li>`\n            : html`\n                <li ?active=${activeTopLevel ? menu === activeTopLevel : active} .menu=${menu} menu>\n                  <a href=${path || '#'}>\n                    <md-icon>${icon || 'fiber_manual_record'}</md-icon>\n                    ${name} ${badge !== false ? html`<div badge>${badge}</div>` : html``}\n                    ${menus.length > 0 ? html` <md-icon submenu-button></md-icon> ` : html``}\n                  </a>\n                  ${menus && this.renderMenus(menus || [], activeMenu)}\n                </li>\n              `\n        })}\n      </ul>\n    `\n  }\n\n  render() {\n    const { menus, activeTopLevel, activeMenu } = this\n    return this.renderMenus(menus || [], activeTopLevel, activeMenu)\n  }\n\n  firstUpdated() {\n    this.renderRoot.addEventListener('click', (e: Event) => {\n      const menuElement = (e.target as Element)!.closest('[menu]')\n\n      //@ts-ignore\n      if (menuElement?.menu) {\n        //@ts-ignore\n        let menu = menuElement.menu\n\n        if (!menu.path) {\n          /* protect to act move to href. */\n          e.stopPropagation()\n          e.preventDefault()\n        }\n\n        this.dispatchEvent(\n          new CustomEvent('active-toplevel', {\n            bubbles: true,\n            detail: this.activeTopLevel === menu ? undefined : menu\n          })\n        )\n      }\n\n      /* to respond even if current acting menu is selected */\n      let href = (e.target as HTMLAnchorElement)!.href\n      href && location.href === href && navigate(href + '#force', true)\n    })\n\n    /* to hide scrollbar during transition */\n    this.renderRoot.addEventListener('transitionstart', e => {\n      ;(e.target as Element).removeAttribute('settled')\n    })\n    this.renderRoot.addEventListener('transitionend', e => {\n      ;(e.target as Element).setAttribute('settled', '')\n    })\n  }\n}\n"]}

package/dist/src/ox-top-menu-bar.d.ts

@@ -0,0 +1,23 @@
+import '@material/web/icon/icon.js';
+import { LitElement, PropertyValueMap, TemplateResult } from 'lit';
+import { Menu } from './types';
+declare const OxTopMenuBar_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class OxTopMenuBar extends OxTopMenuBar_base {
+    static styles: import("lit").CSSResult[];
+    page?: string;
+    resourceId?: string;
+    menus?: Menu[];
+    slotTemplate: Node;
+    private _activeTopLevel?;
+    render(): TemplateResult<1>;
+    stateChanged(state: any): void;
+    updated(changes: PropertyValueMap<this>): void;
+    _findActivePage(): void;
+}
+export {};