@things-factory/lite-menu 7.0.1-alpha.4 → 7.0.1-alpha.9

package/client/viewparts/top-menu-bar.ts

@@ -1,145 +0,0 @@
-import '@material/mwc-icon'
-
-import { css, html, LitElement } from 'lit'
-import { customElement, property, query, state } from 'lit/decorators.js'
-import { connect } from 'pwa-helpers'
-
-import { toggleOverlay } from '@operato/layout'
-import { store } from '@operato/shell'
-
-@customElement('top-menu-bar')
-export class TopMenuBar extends connect(store)(LitElement) {
-  static styles = [
-    css`
-      :host {
-        display: flex;
-        flex-direction: row;
-      }
-
-      span {
-        flex: 1;
-      }
-
-      ul {
-        display: flex;
-        align-items: center;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        display: inline-flex;
-        flex-direction: row nowrap;
-        float: left;
-        overflow: none;
-      }
-
-      a {
-        display: inline-block;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding: var(--padding-default) var(--padding-wide) var(--padding-narrow) var(--padding-wide);
-        text-decoration: none;
-        color: white;
-      }
-      a * {
-        vertical-align: middle;
-      }
-      a mwc-icon {
-        opacity: 0.5;
-        position: relative;
-        top: -2px;
-        font-size: 1em;
-      }
-
-      li[active] a {
-        font-weight: bold;
-      }
-      li[active] a mwc-icon {
-        opacity: 1;
-      }
-    `
-  ]
-
-  @property({ type: String }) page?: string
-  @property({ type: String }) resourceId?: string
-  @property({ type: Array }) menus?: any[]
-
-  @state() private slotTemplate: any
-  @state() private _activeTopLevel: any
-
-  render() {
-    const { menus = [], _activeTopLevel } = this
-
-    return html`
-      <slot name="head"></slot>
-      <ul>
-        ${menus.map(menu =>
-          menu.type == 'group'
-            ? html``
-            : html`
-                <li ?active=${menu === _activeTopLevel}>
-                  <a
-                    href="#"
-                    @click=${e => {
-                      e.preventDefault()
-                      toggleOverlay('lite-menu-part', {
-                        backdrop: true
-                      })
-                    }}
-                  >
-                    ${menu.name}
-                    <mwc-icon>expand_more</mwc-icon>
-                  </a>
-                </li>
-              `
-        )}
-      </ul>
-      <slot name="tail"></slot>
-    `
-  }
-
-  stateChanged(state) {
-    this.page = state.route.page
-    this.resourceId = state.route.resourceId
-    this.menus = state.liteMenu.menus || []
-    this.slotTemplate = state.liteMenu.slotTemplate
-  }
-
-  // firstUpdated() {
-  //   this.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-  // }
-
-  updated(changes) {
-    if (changes.has('menus') || changes.has('page') || changes.has('resourceId')) {
-      this._findActivePage()
-    }
-
-    if (changes.has('slotTemplate')) {
-      this.replaceChild(this.slotTemplate, this.renderRoot)
-    }
-  }
-
-  // onWheelEvent(e) {
-  //   var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))
-  //   this.scrollLeft -= delta * 40
-  //   console.log('delta', this.scrollLeft, delta, e.wheelDelta || -e.detail)
-
-  //   e.preventDefault()
-  // }
-
-  _findActivePage() {
-    var path = this.resourceId ? `${this.page}/${this.resourceId}` : this.page
-    var menus = this.menus || []
-
-    this._activeTopLevel = menus.find(menu => {
-      if (menu.path?.split('?')[0] === path) {
-        return true
-      } else if (menu.menus) {
-        return !!menu.menus.find(menu => menu.path?.split('?')[0] === path)
-      }
-    })
-  }
-}

package/dist-client/viewparts/lite-menu-landscape-styles.d.ts

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

package/dist-client/viewparts/lite-menu-landscape-styles.js

@@ -1,149 +0,0 @@
-import { css } from 'lit';
-export const LiteMenuLandscapeStyles = css `
-  :host {
-    overflow-x: auto;
-    background-color: var(--secondary-text-color);
-    --focus-anchor-color: #e6ffa2;
-  }
-
-  :host > div {
-    overflow-x: auto;
-  }
-
-  :host > div > ul {
-    display: flex;
-    flex-direction: row;
-    list-style: none;
-    margin: auto;
-    padding: 0;
-    border: var(--border-dark-color);
-    border-width: 0 1px;
-    max-width: 1250px;
-  }
-
-  :host > div > ul > li {
-    flex: 1;
-
-    display: flex;
-    flex-direction: column;
-  }
-  :host > div > ul > li > a {
-    display: none;
-    font-weight: bold;
-    font-size: var(--fontsize-large);
-  }
-
-  ul[submenus] {
-    flex: 1;
-    list-style: none;
-    overflow-y: hidden;
-    background-color: var(--primary-color);
-    margin: 0;
-    padding: 0;
-    border-left: var(--border-dark-color);
-  }
-
-  ul[submenus] li {
-    min-width: 120px;
-    max-width: 180px;
-  }
-
-  a {
-    display: block;
-    padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);
-    text-decoration: none;
-    font: normal 14px var(--theme-font);
-    color: var(--theme-white-color);
-    text-transform: capitalize;
-
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  a:hover {
-    font-weight: bold;
-  }
-
-  ul[submenus] a::before {
-    content: '';
-    display: inline-block;
-    position: relative;
-    top: -1px;
-    width: 5px;
-    height: 5px;
-    border: 1px solid var(--theme-white-color);
-    border-radius: 50%;
-    background-color: transparent;
-    margin-right: 3px;
-  }
-  ul[submenus] a:hover,
-  ul[submenus] li[active] a {
-    background-color: rgba(var(--secondary-color-rgb), 0.3);
-    color: var(--focus-anchor-color);
-    font-weight: bold;
-  }
-
-  [description] {
-    background-color: var(--primary-color);
-    margin: 0;
-    padding: var(--padding-default) 0;
-    border-left: 1px solid rgba(0, 0, 0, 0.1);
-    color: var(--focus-anchor-color);
-    font-size: 11px;
-  }
-  [description] mwc-icon {
-    background-color: rgba(0, 0, 0, 0.15);
-    margin-right: 4px;
-    padding: var(--padding-narrow);
-    border-radius: 0 5px 5px 0;
-    float: left;
-    font-size: 26px;
-  }
-
-  @media only screen and (max-width: 460px) {
-    :host {
-      min-width: 100vw;
-    }
-    :host > div {
-      display: initial;
-    }
-    :host > div > ul {
-      flex-direction: column;
-    }
-    a {
-      padding: var(--padding-wide);
-      font: normal 15px var(--theme-font);
-    }
-    li[active] ul {
-      border-bottom: 2px solid rgba(0, 0, 0, 0.1);
-    }
-    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);
-    }
-    :host > div > ul > li > a {
-      display: block;
-    }
-    :host > div > ul > li > a mwc-icon {
-      font-size: 1em;
-      position: relative;
-      top: 2px;
-    }
-    [description] {
-      display: none;
-    }
-    ul[submenus] a:hover,
-    ul[submenus] li[active] a {
-      background-color: rgba(var(--secondary-color-rgb), 0.3);
-    }
-  }
-`;
-//# sourceMappingURL=lite-menu-landscape-styles.js.map

package/dist-client/viewparts/lite-menu-landscape-styles.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lite-menu-landscape-styles.js","sourceRoot":"","sources":["../../client/viewparts/lite-menu-landscape-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,uBAAuB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkJzC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const LiteMenuLandscapeStyles = css`\n  :host {\n    overflow-x: auto;\n    background-color: var(--secondary-text-color);\n    --focus-anchor-color: #e6ffa2;\n  }\n\n  :host > div {\n    overflow-x: auto;\n  }\n\n  :host > div > ul {\n    display: flex;\n    flex-direction: row;\n    list-style: none;\n    margin: auto;\n    padding: 0;\n    border: var(--border-dark-color);\n    border-width: 0 1px;\n    max-width: 1250px;\n  }\n\n  :host > div > ul > li {\n    flex: 1;\n\n    display: flex;\n    flex-direction: column;\n  }\n  :host > div > ul > li > a {\n    display: none;\n    font-weight: bold;\n    font-size: var(--fontsize-large);\n  }\n\n  ul[submenus] {\n    flex: 1;\n    list-style: none;\n    overflow-y: hidden;\n    background-color: var(--primary-color);\n    margin: 0;\n    padding: 0;\n    border-left: var(--border-dark-color);\n  }\n\n  ul[submenus] li {\n    min-width: 120px;\n    max-width: 180px;\n  }\n\n  a {\n    display: block;\n    padding: var(--padding-default) var(--padding-default) var(--padding-narrow) var(--padding-wide);\n    text-decoration: none;\n    font: normal 14px var(--theme-font);\n    color: var(--theme-white-color);\n    text-transform: capitalize;\n\n    overflow: hidden;\n    white-space: nowrap;\n    text-overflow: ellipsis;\n  }\n\n  a:hover {\n    font-weight: bold;\n  }\n\n  ul[submenus] a::before {\n    content: '';\n    display: inline-block;\n    position: relative;\n    top: -1px;\n    width: 5px;\n    height: 5px;\n    border: 1px solid var(--theme-white-color);\n    border-radius: 50%;\n    background-color: transparent;\n    margin-right: 3px;\n  }\n  ul[submenus] a:hover,\n  ul[submenus] li[active] a {\n    background-color: rgba(var(--secondary-color-rgb), 0.3);\n    color: var(--focus-anchor-color);\n    font-weight: bold;\n  }\n\n  [description] {\n    background-color: var(--primary-color);\n    margin: 0;\n    padding: var(--padding-default) 0;\n    border-left: 1px solid rgba(0, 0, 0, 0.1);\n    color: var(--focus-anchor-color);\n    font-size: 11px;\n  }\n  [description] mwc-icon {\n    background-color: rgba(0, 0, 0, 0.15);\n    margin-right: 4px;\n    padding: var(--padding-narrow);\n    border-radius: 0 5px 5px 0;\n    float: left;\n    font-size: 26px;\n  }\n\n  @media only screen and (max-width: 460px) {\n    :host {\n      min-width: 100vw;\n    }\n    :host > div {\n      display: initial;\n    }\n    :host > div > ul {\n      flex-direction: column;\n    }\n    a {\n      padding: var(--padding-wide);\n      font: normal 15px var(--theme-font);\n    }\n    li[active] ul {\n      border-bottom: 2px solid rgba(0, 0, 0, 0.1);\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    li li[active] a {\n      font: bold 14px var(--theme-font);\n    }\n    :host > div > ul > li > a {\n      display: block;\n    }\n    :host > div > ul > li > a mwc-icon {\n      font-size: 1em;\n      position: relative;\n      top: 2px;\n    }\n    [description] {\n      display: none;\n    }\n    ul[submenus] a:hover,\n    ul[submenus] li[active] a {\n      background-color: rgba(var(--secondary-color-rgb), 0.3);\n    }\n  }\n`\n"]}

package/dist-client/viewparts/lite-menu-landscape.d.ts

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

package/dist-client/viewparts/lite-menu-landscape.js

@@ -1,103 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
-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 { LiteMenuLandscapeStyles } from './lite-menu-landscape-styles';
-let LiteMenuLandscape = class LiteMenuLandscape 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 `<mwc-icon>${menu.icon}</mwc-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 `<mwc-icon>${menu.icon}</mwc-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();
-    }
-};
-LiteMenuLandscape.styles = [ScrollbarStyles, LiteMenuLandscapeStyles];
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], LiteMenuLandscape.prototype, "menus", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], LiteMenuLandscape.prototype, "activeTopLevel", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], LiteMenuLandscape.prototype, "activeMenu", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], LiteMenuLandscape.prototype, "path", void 0);
-LiteMenuLandscape = __decorate([
-    customElement('lite-menu-landscape')
-], LiteMenuLandscape);
-export { LiteMenuLandscape };
-//# sourceMappingURL=lite-menu-landscape.js.map

package/dist-client/viewparts/lite-menu-landscape.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lite-menu-landscape.js","sourceRoot":"","sources":["../../client/viewparts/lite-menu-landscape.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\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 { LiteMenuLandscapeStyles } from './lite-menu-landscape-styles'\n\n@customElement('lite-menu-landscape')\nexport class LiteMenuLandscape extends connect(store)(LitElement) {\n  static styles = [ScrollbarStyles, LiteMenuLandscapeStyles]\n\n  @property({ type: Array }) menus?: any[]\n  @property({ type: Object }) activeTopLevel: any\n  @property({ type: Object }) activeMenu: any\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`<mwc-icon>${menu.icon}</mwc-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`<mwc-icon>${menu.icon}</mwc-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-client/viewparts/lite-menu-part.d.ts

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

package/dist-client/viewparts/lite-menu-part.js

@@ -1,143 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
-import './lite-menu-portrait';
-import './lite-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 LiteMenuPart = class LiteMenuPart extends connect(store)(LitElement) {
-    render() {
-        return html `
-      <slot name="head"></slot>
-      ${this.orientation !== 'landscape'
-            ? html `<lite-menu-portrait
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></lite-menu-portrait>`
-            : html `<lite-menu-landscape
-            .menus=${this.menus}
-            .activeTopLevel=${this._activeTopLevel}
-            .activeMenu=${this._activeMenu}
-            .path=${this._path}
-          ></lite-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;
-    }
-};
-LiteMenuPart.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;
-      }
-
-      lite-menu-portrait,
-      lite-menu-landscape {
-        flex: 1;
-      }
-    `
-];
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], LiteMenuPart.prototype, "page", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], LiteMenuPart.prototype, "resourceId", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], LiteMenuPart.prototype, "menus", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], LiteMenuPart.prototype, "orientation", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], LiteMenuPart.prototype, "slotTemplate", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], LiteMenuPart.prototype, "_activeTopLevel", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], LiteMenuPart.prototype, "_activeMenu", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", String)
-], LiteMenuPart.prototype, "_path", void 0);
-LiteMenuPart = __decorate([
-    customElement('lite-menu-part')
-], LiteMenuPart);
-export { LiteMenuPart };
-//# sourceMappingURL=lite-menu-part.js.map

package/dist-client/viewparts/lite-menu-part.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"lite-menu-part.js","sourceRoot":"","sources":["../../client/viewparts/lite-menu-part.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\nimport './lite-menu-portrait'\nimport './lite-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\nfunction isActiveMenu(menu, path) {\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('lite-menu-part')\nexport class LiteMenuPart 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      lite-menu-portrait,\n      lite-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?: any[]\n  @property({ type: String }) orientation?: string\n\n  @state() slotTemplate: any\n  @state() _activeTopLevel: any\n  @state() _activeMenu: any\n  @state() _path?: string\n\n  render() {\n    return html`\n      <slot name=\"head\"></slot>\n      ${this.orientation !== 'landscape'\n        ? html`<lite-menu-portrait\n            .menus=${this.menus}\n            .activeTopLevel=${this._activeTopLevel}\n            .activeMenu=${this._activeMenu}\n            .path=${this._path}\n          ></lite-menu-portrait>`\n        : html`<lite-menu-landscape\n            .menus=${this.menus}\n            .activeTopLevel=${this._activeTopLevel}\n            .activeMenu=${this._activeMenu}\n            .path=${this._path}\n          ></lite-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) {\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-client/viewparts/lite-menu-portrait-styles.d.ts

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