@things-factory/meta-ui 7.0.1-alpha.1 → 7.0.1-alpha.11

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

@@ -1,133 +0,0 @@
-import '@material/mwc-icon';
-import { css, html, LitElement } from 'lit';
-import { connect } from 'pwa-helpers';
-import { toggleOverlay } from '@operato/layout';
-import { store } from '@operato/shell';
-export class DynamicTopMenuBar extends connect(store)(LitElement) {
-    static get styles() {
-        return 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;
-      }
-    `;
-    }
-    static get properties() {
-        return {
-            page: String,
-            resourceId: String,
-            menus: Array,
-            _activeTopLevel: Object
-        };
-    }
-    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('dyamic-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.metaUI.menus || [];
-        this.slotTemplate = state.metaUI.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);
-        }
-    }
-    // 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; });
-            }
-        });
-    }
-}
-customElements.define('dynamic-top-menu-bar', DynamicTopMenuBar);
-//# sourceMappingURL=dynamic-top-menu-bar.js.map

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

@@ -1 +0,0 @@
-{"version":3,"file":"dynamic-top-menu-bar.js","sourceRoot":"","sources":["../../client/viewparts/dynamic-top-menu-bar.js"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { connect } from 'pwa-helpers'\n\nimport { toggleOverlay } from '@operato/layout'\nimport { store } from '@operato/shell'\n\nexport class DynamicTopMenuBar extends connect(store)(LitElement) {\n  static get styles() {\n    return 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  static get properties() {\n    return {\n      page: String,\n      resourceId: String,\n      menus: Array,\n\n      _activeTopLevel: Object\n    }\n  }\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('dyamic-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.metaUI.menus || []\n    this.slotTemplate = state.metaUI.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)\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\ncustomElements.define('dynamic-top-menu-bar', DynamicTopMenuBar)\n"]}