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

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

@@ -1,147 +0,0 @@
-import { css } from 'lit';
-export const LiteMenuPortraitStyles = 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 mwc-icon {
-    margin-right: var(--margin-narrow);
-    font-size: 15px;
-    color: rgba(var(--secondary-color-rgb), 0.7);
-  }
-
-  a [submenu-button] {
-    float: left;
-    font-size: 15px;
-    max-height: 20px;
-  }
-
-  a [submenu-button]::before {
-    content: 'add_box';
-  }
-
-  li[active] > a [submenu-button]::before {
-    content: 'indeterminate_check_box';
-  }
-
-  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[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);
-    }
-  }
-`;
-//# sourceMappingURL=lite-menu-portrait-styles.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"lite-menu-portrait-styles.js","sourceRoot":"","sources":["../../client/viewparts/lite-menu-portrait-styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAA;AAEzB,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgJxC,CAAA","sourcesContent":["import { css } from 'lit'\n\nexport const LiteMenuPortraitStyles = 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 mwc-icon {\n    margin-right: var(--margin-narrow);\n    font-size: 15px;\n    color: rgba(var(--secondary-color-rgb), 0.7);\n  }\n\n  a [submenu-button] {\n    float: left;\n    font-size: 15px;\n    max-height: 20px;\n  }\n\n  a [submenu-button]::before {\n    content: 'add_box';\n  }\n\n  li[active] > a [submenu-button]::before {\n    content: 'indeterminate_check_box';\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[active] ul {\n      border-bottom: 2px solid rgba(0, 0, 0, 0.1);\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-client/viewparts/lite-menu-portrait.d.ts

@@ -1,12 +0,0 @@
-import '@material/mwc-icon';
-import { LitElement } from 'lit';
-export declare class LiteMenuPortrait extends LitElement {
-    static styles: import("lit").CSSResult[];
-    menus?: any[];
-    activeTopLevel: any;
-    activeMenu: any;
-    path?: string;
-    renderMenus(menus: any, activeTopLevel: any, activeMenu?: any): import("lit").TemplateResult<1>;
-    render(): import("lit").TemplateResult<1>;
-    firstUpdated(): void;
-}

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

@@ -1,89 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
-import { html, LitElement } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { navigate } from '@operato/shell';
-import { ScrollbarStyles } from '@operato/styles';
-import { LiteMenuPortraitStyles } from './lite-menu-portrait-styles';
-let LiteMenuPortrait = class LiteMenuPortrait extends LitElement {
-    renderMenus(menus, activeTopLevel, activeMenu) {
-        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 || '#'}>
-                    ${(menus === null || menus === void 0 ? void 0 : menus.length) > 0 ? html ` <mwc-icon submenu-button></mwc-icon> ` : html ``}
-                    <mwc-icon>${icon}</mwc-icon>
-                    ${name} ${badge !== false ? html `<div badge>${badge}</div>` : 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', '');
-        });
-    }
-};
-LiteMenuPortrait.styles = [ScrollbarStyles, LiteMenuPortraitStyles];
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], LiteMenuPortrait.prototype, "menus", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], LiteMenuPortrait.prototype, "activeTopLevel", void 0);
-__decorate([
-    property({ type: Object }),
-    __metadata("design:type", Object)
-], LiteMenuPortrait.prototype, "activeMenu", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], LiteMenuPortrait.prototype, "path", void 0);
-LiteMenuPortrait = __decorate([
-    customElement('lite-menu-portrait')
-], LiteMenuPortrait);
-export { LiteMenuPortrait };
-//# sourceMappingURL=lite-menu-portrait.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"lite-menu-portrait.js","sourceRoot":"","sources":["../../client/viewparts/lite-menu-portrait.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'\n\nimport { navigate } from '@operato/shell'\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { LiteMenuPortraitStyles } from './lite-menu-portrait-styles'\n\n@customElement('lite-menu-portrait')\nexport class LiteMenuPortrait extends LitElement {\n  static styles = [ScrollbarStyles, LiteMenuPortraitStyles]\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  renderMenus(menus, activeTopLevel, activeMenu?) {\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                    ${menus?.length > 0 ? html` <mwc-icon submenu-button></mwc-icon> ` : html``}\n                    <mwc-icon>${icon}</mwc-icon>\n                    ${name} ${badge !== false ? html`<div badge>${badge}</div>` : 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-client/viewparts/top-menu-bar.d.ts

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

package/dist-client/viewparts/top-menu-bar.js

@@ -1,150 +0,0 @@
-import { __decorate, __metadata } from "tslib";
-import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
-import { customElement, property, state } from 'lit/decorators.js';
-import { connect } from 'pwa-helpers';
-import { toggleOverlay } from '@operato/layout';
-import { store } from '@operato/shell';
-let TopMenuBar = class TopMenuBar extends connect(store)(LitElement) {
-    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 => {
-            var _a;
-            if (((_a = menu.path) === null || _a === void 0 ? void 0 : _a.split('?')[0]) === path) {
-                return true;
-            }
-            else if (menu.menus) {
-                return !!menu.menus.find(menu => { var _a; return ((_a = menu.path) === null || _a === void 0 ? void 0 : _a.split('?')[0]) === path; });
-            }
-        });
-    }
-};
-TopMenuBar.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;
-      }
-    `
-];
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], TopMenuBar.prototype, "page", void 0);
-__decorate([
-    property({ type: String }),
-    __metadata("design:type", String)
-], TopMenuBar.prototype, "resourceId", void 0);
-__decorate([
-    property({ type: Array }),
-    __metadata("design:type", Array)
-], TopMenuBar.prototype, "menus", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], TopMenuBar.prototype, "slotTemplate", void 0);
-__decorate([
-    state(),
-    __metadata("design:type", Object)
-], TopMenuBar.prototype, "_activeTopLevel", void 0);
-TopMenuBar = __decorate([
-    customElement('top-menu-bar')
-], TopMenuBar);
-export { TopMenuBar };
-//# sourceMappingURL=top-menu-bar.js.map

package/dist-client/viewparts/top-menu-bar.js.map

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