@operato/layout 0.3.20 → 0.3.26

package/dist/src/layouts/ox-aside-bar.js

@@ -0,0 +1,106 @@
+import { __decorate } from "tslib";
+import '../components/ox-floating-overlay.js';
+import '../components/ox-resize-splitter.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { VIEWPART_LEVEL } from '../actions/layout.js';
+import store from '../initializer.js';
+let AsideBar = class AsideBar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.fullbleed = false;
+        this.viewparts = {};
+        this._startWidth = 0;
+    }
+    render() {
+        var viewparts = this.viewparts;
+        var asidebars = Object.keys(viewparts)
+            .map(name => {
+            return {
+                name,
+                ...viewparts[name]
+            };
+        })
+            .filter(viewpart => viewpart.position == 'asidebar' && (!this.fullbleed || viewpart.hovering));
+        asidebars = [
+            ...asidebars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
+            ...asidebars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
+        ];
+        return html `
+      ${asidebars.map(asidebar => !asidebar.show
+            ? html ``
+            : asidebar.hovering
+                ? html `
+              <ox-floating-overlay
+                .backdrop=${asidebar.backdrop}
+                direction="left"
+                .hovering=${asidebar.hovering}
+                .name=${asidebar.name}
+                .size=${asidebar.size}
+                .title=${asidebar.title}
+                .help=${asidebar.help}
+                .closable=${asidebar.closable}
+                .templateProperties=${asidebar.templateProperties}
+                >${asidebar.template}</ox-floating-overlay
+              >
+            `
+                : html `
+              <div asidebar>${asidebar.template}</div>
+              ${asidebar.resizable
+                    ? html `
+                    <ox-resize-splitter
+                      @splitter-dragstart=${(e) => this.resizeStart(e)}
+                      @splitter-drag=${(e) => this.resizeDrag(e)}
+                      vertical
+                    ></ox-resize-splitter>
+                  `
+                    : html ``}
+            `)}
+    `;
+    }
+    resizeStart(e) {
+        var _a, _b;
+        this._startWidth = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling) === null || _b === void 0 ? void 0 : _b.offsetWidth;
+    }
+    resizeDrag(e) {
+        var _a, _b;
+        var delta = e.detail;
+        var x = (_b = (_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling) === null || _b === void 0 ? void 0 : _b.querySelectorAll('*');
+        Array.from(x).forEach(ele => {
+            ;
+            ele.style.width = `${this._startWidth - delta.x}px`;
+        });
+    }
+    stateChanged(state) {
+        this.viewparts = state.layout.viewparts || {};
+    }
+};
+AsideBar.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-flow: row-reverse nowrap;
+        align-items: stretch;
+
+        position: relative;
+      }
+
+      *[asidebar] {
+        display: block;
+        overflow-y: auto;
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, attribute: 'fullbleed' })
+], AsideBar.prototype, "fullbleed", void 0);
+__decorate([
+    state()
+], AsideBar.prototype, "viewparts", void 0);
+AsideBar = __decorate([
+    customElement('ox-aside-bar')
+], AsideBar);
+//# sourceMappingURL=ox-aside-bar.js.map

package/dist/src/layouts/ox-aside-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-aside-bar.js","sourceRoot":"","sources":["../../../src/layouts/ox-aside-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '../components/ox-floating-overlay.js'\nimport '../components/ox-resize-splitter.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'\nimport store from '../initializer.js'\n\n@customElement('ox-aside-bar')\nclass AsideBar extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-flow: row-reverse nowrap;\n        align-items: stretch;\n\n        position: relative;\n      }\n\n      *[asidebar] {\n        display: block;\n        overflow-y: auto;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false\n\n  @state() viewparts: { [name: string]: Viewpart } = {}\n\n  private _startWidth: number = 0\n\n  render() {\n    var viewparts = this.viewparts\n    var asidebars = Object.keys(viewparts)\n      .map(name => {\n        return {\n          name,\n          ...viewparts[name]\n        }\n      })\n      .filter(viewpart => viewpart.position == 'asidebar' && (!this.fullbleed || viewpart.hovering))\n\n    asidebars = [\n      ...asidebars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),\n      ...asidebars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)\n    ]\n\n    return html`\n      ${asidebars.map(asidebar =>\n        !asidebar.show\n          ? html``\n          : asidebar.hovering\n          ? html`\n              <ox-floating-overlay\n                .backdrop=${asidebar.backdrop}\n                direction=\"left\"\n                .hovering=${asidebar.hovering}\n                .name=${asidebar.name}\n                .size=${asidebar.size}\n                .title=${asidebar.title}\n                .help=${asidebar.help}\n                .closable=${asidebar.closable}\n                .templateProperties=${asidebar.templateProperties}\n                >${asidebar.template}</ox-floating-overlay\n              >\n            `\n          : html`\n              <div asidebar>${asidebar.template}</div>\n              ${asidebar.resizable\n                ? html`\n                    <ox-resize-splitter\n                      @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}\n                      @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}\n                      vertical\n                    ></ox-resize-splitter>\n                  `\n                : html``}\n            `\n      )}\n    `\n  }\n\n  resizeStart(e: CustomEvent) {\n    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.offsetWidth\n  }\n\n  resizeDrag(e: CustomEvent) {\n    var delta = e.detail\n\n    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement)?.querySelectorAll('*')\n    Array.from(x).forEach(ele => {\n      ;(ele as HTMLElement).style.width = `${this._startWidth - delta.x}px`\n    })\n  }\n\n  stateChanged(state: any) {\n    this.viewparts = state.layout.viewparts || {}\n  }\n}\n"]}

package/dist/src/layouts/ox-footer-bar.d.ts

@@ -0,0 +1,2 @@
+import '../components/ox-floating-overlay.js';
+import '../components/ox-resize-splitter.js';

package/dist/src/layouts/ox-footer-bar.js

@@ -0,0 +1,107 @@
+import { __decorate } from "tslib";
+import '../components/ox-floating-overlay.js';
+import '../components/ox-resize-splitter.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { VIEWPART_LEVEL } from '../actions/layout.js';
+import store from '../initializer.js';
+let FooterBar = class FooterBar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.fullbleed = false;
+        this.viewparts = {};
+        this._startHeight = 0;
+    }
+    render() {
+        var viewparts = this.viewparts;
+        var footerbars = Object.keys(viewparts)
+            .map(name => {
+            return {
+                name,
+                ...viewparts[name]
+            };
+        })
+            .filter(viewpart => viewpart.position == 'footerbar' && (!this.fullbleed || viewpart.hovering));
+        footerbars = [
+            ...footerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
+            ...footerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
+        ];
+        return html `
+      ${footerbars.map(footerbar => !footerbar.show
+            ? html ``
+            : footerbar.hovering
+                ? html `
+              <ox-floating-overlay
+                .backdrop=${footerbar.backdrop}
+                direction="up"
+                .hovering=${footerbar.hovering}
+                .name=${footerbar.name}
+                .title=${footerbar.title}
+                .help=${footerbar.help}
+                .size=${footerbar.size}
+                .closable=${footerbar.closable}
+                .templateProperties=${footerbar.templateProperties}
+                >${footerbar.template}</ox-floating-overlay
+              >
+            `
+                : html `
+              <div footerbar>${footerbar.template}</div>
+              ${footerbar.resizable
+                    ? html `
+                    <ox-resize-splitter
+                      @splitter-dragstart=${(e) => this.resizeStart(e)}
+                      @splitter-drag=${(e) => this.resizeDrag(e)}
+                    ></ox-resize-splitter>
+                  `
+                    : html ``}
+            `)}
+    `;
+    }
+    resizeStart(e) {
+        var _a;
+        this._startHeight = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling).offsetHeight;
+    }
+    resizeDrag(e) {
+        var _a;
+        var delta = e.detail;
+        var x = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling).querySelectorAll('*');
+        Array.from(x).forEach(ele => {
+            ;
+            ele.style.height = `${this._startHeight - delta.y}px`;
+        });
+    }
+    stateChanged(state) {
+        this.viewparts = state.layout.viewparts || {};
+    }
+};
+FooterBar.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-flow: column-reverse nowrap;
+        align-items: stretch;
+        position: relative;
+      }
+
+      *[footerbar] {
+        display: block;
+      }
+
+      @media screen and (max-width: 460px) {
+        :host {
+          padding-bottom: 0;
+        }
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, attribute: 'fullbleed' })
+], FooterBar.prototype, "fullbleed", void 0);
+__decorate([
+    state()
+], FooterBar.prototype, "viewparts", void 0);
+FooterBar = __decorate([
+    customElement('ox-footer-bar')
+], FooterBar);
+//# sourceMappingURL=ox-footer-bar.js.map

package/dist/src/layouts/ox-footer-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-footer-bar.js","sourceRoot":"","sources":["../../../src/layouts/ox-footer-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '../components/ox-floating-overlay.js'\nimport '../components/ox-resize-splitter.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'\nimport store from '../initializer.js'\n\n@customElement('ox-footer-bar')\nclass FooterBar extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-flow: column-reverse nowrap;\n        align-items: stretch;\n        position: relative;\n      }\n\n      *[footerbar] {\n        display: block;\n      }\n\n      @media screen and (max-width: 460px) {\n        :host {\n          padding-bottom: 0;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false\n\n  @state() viewparts: { [name: string]: Viewpart } = {}\n\n  private _startHeight: number = 0\n\n  render() {\n    var viewparts = this.viewparts\n    var footerbars = Object.keys(viewparts)\n      .map(name => {\n        return {\n          name,\n          ...viewparts[name]\n        }\n      })\n      .filter(viewpart => viewpart.position == 'footerbar' && (!this.fullbleed || viewpart.hovering))\n\n    footerbars = [\n      ...footerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),\n      ...footerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)\n    ]\n\n    return html`\n      ${footerbars.map(footerbar =>\n        !footerbar.show\n          ? html``\n          : footerbar.hovering\n          ? html`\n              <ox-floating-overlay\n                .backdrop=${footerbar.backdrop}\n                direction=\"up\"\n                .hovering=${footerbar.hovering}\n                .name=${footerbar.name}\n                .title=${footerbar.title}\n                .help=${footerbar.help}\n                .size=${footerbar.size}\n                .closable=${footerbar.closable}\n                .templateProperties=${footerbar.templateProperties}\n                >${footerbar.template}</ox-floating-overlay\n              >\n            `\n          : html`\n              <div footerbar>${footerbar.template}</div>\n              ${footerbar.resizable\n                ? html`\n                    <ox-resize-splitter\n                      @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}\n                      @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}\n                    ></ox-resize-splitter>\n                  `\n                : html``}\n            `\n      )}\n    `\n  }\n\n  resizeStart(e: CustomEvent) {\n    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight\n  }\n\n  resizeDrag(e: CustomEvent) {\n    var delta = e.detail\n\n    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).querySelectorAll('*')\n    Array.from(x).forEach(ele => {\n      ;(ele as HTMLElement).style.height = `${this._startHeight - delta.y}px`\n    })\n  }\n\n  stateChanged(state: any) {\n    this.viewparts = state.layout.viewparts || {}\n  }\n}\n"]}

package/dist/src/layouts/ox-header-bar.d.ts

@@ -0,0 +1,2 @@
+import '../components/ox-floating-overlay.js';
+import '../components/ox-resize-splitter.js';

package/dist/src/layouts/ox-header-bar.js

@@ -0,0 +1,104 @@
+import { __decorate } from "tslib";
+import '../components/ox-floating-overlay.js';
+import '../components/ox-resize-splitter.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { VIEWPART_LEVEL } from '../actions/layout.js';
+import store from '../initializer.js';
+let HeaderBar = class HeaderBar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.fullbleed = false;
+        this.viewparts = {};
+        this._startHeight = 0;
+    }
+    render() {
+        var viewparts = this.viewparts;
+        var headerbars = Object.keys(viewparts)
+            .map(name => {
+            return {
+                name,
+                ...viewparts[name]
+            };
+        })
+            .filter(viewpart => viewpart.position == 'headerbar' && (!this.fullbleed || viewpart.hovering));
+        headerbars = [
+            ...headerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
+            ...headerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
+        ];
+        return html `
+      ${headerbars.map(headerbar => !headerbar.show
+            ? html ``
+            : headerbar.hovering
+                ? html `
+              <ox-floating-overlay
+                .backdrop=${headerbar.backdrop}
+                direction="down"
+                .hovering=${headerbar.hovering}
+                .name=${headerbar.name}
+                .title=${headerbar.title}
+                .help=${headerbar.help}
+                .size=${headerbar.size}
+                .closable=${headerbar.closable}
+                .templateProperties=${headerbar.templateProperties}
+                >${headerbar.template}</ox-floating-overlay
+              >
+            `
+                : html `
+              <div headerbar>${headerbar.template}</div>
+              ${headerbar.resizable
+                    ? html `
+                    <ox-resize-splitter
+                      @splitter-dragstart=${(e) => this.resizeStart(e)}
+                      @splitter-drag=${(e) => this.resizeDrag(e)}
+                    ></ox-resize-splitter>
+                  `
+                    : html ``}
+            `)}
+    `;
+    }
+    resizeStart(e) {
+        var _a;
+        this._startHeight = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling).offsetHeight;
+    }
+    resizeDrag(e) {
+        var _a;
+        var delta = e.detail;
+        var x = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling).querySelectorAll('*');
+        Array.from(x).forEach(ele => {
+            ;
+            ele.style.height = `${this._startHeight + delta.y}px`;
+        });
+    }
+    stateChanged(state) {
+        this.viewparts = state.layout.viewparts || {};
+    }
+};
+HeaderBar.styles = [
+    css `
+      :host {
+        display: flex;
+        flex-flow: column nowrap;
+        align-items: stretch;
+
+        position: relative;
+
+        background-color: var(--header-bar-background-color);
+      }
+
+      *[headerbar] {
+        display: block;
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, attribute: 'fullbleed' })
+], HeaderBar.prototype, "fullbleed", void 0);
+__decorate([
+    state()
+], HeaderBar.prototype, "viewparts", void 0);
+HeaderBar = __decorate([
+    customElement('ox-header-bar')
+], HeaderBar);
+//# sourceMappingURL=ox-header-bar.js.map

package/dist/src/layouts/ox-header-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-header-bar.js","sourceRoot":"","sources":["../../../src/layouts/ox-header-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '../components/ox-floating-overlay.js'\nimport '../components/ox-resize-splitter.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'\nimport store from '../initializer.js'\n\n@customElement('ox-header-bar')\nclass HeaderBar extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        flex-flow: column nowrap;\n        align-items: stretch;\n\n        position: relative;\n\n        background-color: var(--header-bar-background-color);\n      }\n\n      *[headerbar] {\n        display: block;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false\n\n  @state() viewparts: { [name: string]: Viewpart } = {}\n\n  private _startHeight: number = 0\n\n  render() {\n    var viewparts = this.viewparts\n    var headerbars = Object.keys(viewparts)\n      .map(name => {\n        return {\n          name,\n          ...viewparts[name]\n        }\n      })\n      .filter(viewpart => viewpart.position == 'headerbar' && (!this.fullbleed || viewpart.hovering))\n\n    headerbars = [\n      ...headerbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),\n      ...headerbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)\n    ]\n\n    return html`\n      ${headerbars.map(headerbar =>\n        !headerbar.show\n          ? html``\n          : headerbar.hovering\n          ? html`\n              <ox-floating-overlay\n                .backdrop=${headerbar.backdrop}\n                direction=\"down\"\n                .hovering=${headerbar.hovering}\n                .name=${headerbar.name}\n                .title=${headerbar.title}\n                .help=${headerbar.help}\n                .size=${headerbar.size}\n                .closable=${headerbar.closable}\n                .templateProperties=${headerbar.templateProperties}\n                >${headerbar.template}</ox-floating-overlay\n              >\n            `\n          : html`\n              <div headerbar>${headerbar.template}</div>\n              ${headerbar.resizable\n                ? html`\n                    <ox-resize-splitter\n                      @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}\n                      @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}\n                    ></ox-resize-splitter>\n                  `\n                : html``}\n            `\n      )}\n    `\n  }\n\n  resizeStart(e: CustomEvent) {\n    this._startHeight = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetHeight\n  }\n\n  resizeDrag(e: CustomEvent) {\n    var delta = e.detail\n\n    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).querySelectorAll('*')\n    Array.from(x).forEach(ele => {\n      ;(ele as HTMLElement).style.height = `${this._startHeight + delta.y}px`\n    })\n  }\n\n  stateChanged(state: any) {\n    this.viewparts = state.layout.viewparts || {}\n  }\n}\n"]}

package/dist/src/layouts/ox-nav-bar.d.ts

@@ -0,0 +1,2 @@
+import '../components/ox-floating-overlay.js';
+import '../components/ox-resize-splitter.js';

package/dist/src/layouts/ox-nav-bar.js

@@ -0,0 +1,108 @@
+import { __decorate } from "tslib";
+import '../components/ox-floating-overlay.js';
+import '../components/ox-resize-splitter.js';
+import { css, html, LitElement } from 'lit';
+import { customElement, property, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { ScrollbarStyles } from '@operato/styles';
+import { VIEWPART_LEVEL } from '../actions/layout.js';
+import store from '../initializer.js';
+let NavBar = class NavBar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.fullbleed = false;
+        this.viewparts = {};
+        this._startWidth = 0;
+    }
+    render() {
+        var viewparts = this.viewparts;
+        var navbars = Object.keys(viewparts)
+            .map(name => {
+            return {
+                name,
+                ...viewparts[name]
+            };
+        })
+            .filter(viewpart => viewpart.position == 'navbar' && (!this.fullbleed || viewpart.hovering));
+        navbars = [
+            ...navbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),
+            ...navbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)
+        ];
+        return html `
+      ${navbars.map(navbar => !navbar.show
+            ? html ``
+            : navbar.hovering
+                ? html `
+              <ox-floating-overlay
+                .backdrop=${navbar.backdrop}
+                direction="right"
+                .hovering=${navbar.hovering}
+                .name=${navbar.name}
+                .title=${navbar.title}
+                .help=${navbar.help}
+                .size=${navbar.size}
+                .closable=${navbar.closable}
+                .templateProperties=${navbar.templateProperties}
+                >${navbar.template}</ox-floating-overlay
+              >
+            `
+                : html `
+              <div navbar>${navbar.template}</div>
+              ${navbar.resizable
+                    ? html `
+                    <ox-resize-splitter
+                      @splitter-dragstart=${(e) => this.resizeStart(e)}
+                      @splitter-drag=${(e) => this.resizeDrag(e)}
+                      vertical
+                    ></ox-resize-splitter>
+                  `
+                    : html ``}
+            `)}
+    `;
+    }
+    resizeStart(e) {
+        var _a;
+        this._startWidth = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling).offsetWidth;
+    }
+    resizeDrag(e) {
+        var _a;
+        var delta = e.detail;
+        var x = ((_a = e.target) === null || _a === void 0 ? void 0 : _a.previousElementSibling).querySelectorAll('*');
+        Array.from(x).forEach(ele => {
+            ;
+            ele.style.width = `${this._startWidth + delta.x}px`;
+        });
+    }
+    stateChanged(state) {
+        this.viewparts = state.layout.viewparts || {};
+    }
+};
+NavBar.styles = [
+    ScrollbarStyles,
+    css `
+      :host {
+        display: flex;
+        flex-flow: row nowrap;
+        align-items: stretch;
+
+        position: relative;
+
+        background-color: var(--nav-bar-background-color);
+      }
+
+      *[navbar] {
+        display: flex;
+        flex-direction: row;
+      }
+    `
+];
+__decorate([
+    property({ type: Boolean, attribute: 'fullbleed' })
+], NavBar.prototype, "fullbleed", void 0);
+__decorate([
+    state()
+], NavBar.prototype, "viewparts", void 0);
+NavBar = __decorate([
+    customElement('ox-nav-bar')
+], NavBar);
+//# sourceMappingURL=ox-nav-bar.js.map

package/dist/src/layouts/ox-nav-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-nav-bar.js","sourceRoot":"","sources":["../../../src/layouts/ox-nav-bar.ts"],"names":[],"mappings":"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","sourcesContent":["import '../components/ox-floating-overlay.js'\nimport '../components/ox-resize-splitter.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { Viewpart, VIEWPART_LEVEL } from '../actions/layout.js'\nimport store from '../initializer.js'\n\n@customElement('ox-nav-bar')\nclass NavBar extends connect(store)(LitElement) {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      :host {\n        display: flex;\n        flex-flow: row nowrap;\n        align-items: stretch;\n\n        position: relative;\n\n        background-color: var(--nav-bar-background-color);\n      }\n\n      *[navbar] {\n        display: flex;\n        flex-direction: row;\n      }\n    `\n  ]\n\n  @property({ type: Boolean, attribute: 'fullbleed' }) fullbleed: boolean = false\n\n  @state() viewparts: { [name: string]: Viewpart } = {}\n\n  private _startWidth: number = 0\n\n  render() {\n    var viewparts = this.viewparts\n    var navbars = Object.keys(viewparts)\n      .map(name => {\n        return {\n          name,\n          ...viewparts[name]\n        }\n      })\n      .filter(viewpart => viewpart.position == 'navbar' && (!this.fullbleed || viewpart.hovering))\n\n    navbars = [\n      ...navbars.filter(viewpart => viewpart.level == VIEWPART_LEVEL.TOPMOST),\n      ...navbars.filter(viewpart => viewpart.level !== VIEWPART_LEVEL.TOPMOST)\n    ]\n\n    return html`\n      ${navbars.map(navbar =>\n        !navbar.show\n          ? html``\n          : navbar.hovering\n          ? html`\n              <ox-floating-overlay\n                .backdrop=${navbar.backdrop}\n                direction=\"right\"\n                .hovering=${navbar.hovering}\n                .name=${navbar.name}\n                .title=${navbar.title}\n                .help=${navbar.help}\n                .size=${navbar.size}\n                .closable=${navbar.closable}\n                .templateProperties=${navbar.templateProperties}\n                >${navbar.template}</ox-floating-overlay\n              >\n            `\n          : html`\n              <div navbar>${navbar.template}</div>\n              ${navbar.resizable\n                ? html`\n                    <ox-resize-splitter\n                      @splitter-dragstart=${(e: CustomEvent) => this.resizeStart(e)}\n                      @splitter-drag=${(e: CustomEvent) => this.resizeDrag(e)}\n                      vertical\n                    ></ox-resize-splitter>\n                  `\n                : html``}\n            `\n      )}\n    `\n  }\n\n  resizeStart(e: CustomEvent) {\n    this._startWidth = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).offsetWidth\n  }\n\n  resizeDrag(e: CustomEvent) {\n    var delta = e.detail\n\n    var x = ((e.target as HTMLElement)?.previousElementSibling as HTMLElement).querySelectorAll('*')\n    Array.from(x).forEach(ele => {\n      ;(ele as HTMLElement).style.width = `${this._startWidth + delta.x}px`\n    })\n  }\n\n  stateChanged(state: any) {\n    this.viewparts = state.layout.viewparts || {}\n  }\n}\n"]}

package/dist/src/layouts/ox-snack-bar.d.ts

@@ -0,0 +1,2 @@
+import '@material/mwc-button';
+import '@material/mwc-icon';

package/dist/src/layouts/ox-snack-bar.js

@@ -0,0 +1,119 @@
+import { __decorate } from "tslib";
+import '@material/mwc-button';
+import '@material/mwc-icon';
+import { css, html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { CLOSE_SNACKBAR } from '../actions/snackbar';
+import store from '../initializer.js';
+let SnackBar = class SnackBar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.level = 'info';
+        this.message = '';
+        this.active = false;
+    }
+    render() {
+        return html `
+      <span>
+        <mwc-icon class=${this.level}
+          >${this.level == 'info'
+            ? html ` notification_important `
+            : this.level == 'warn'
+                ? html ` warning `
+                : this.level == 'error'
+                    ? html ` error `
+                    : html ``}</mwc-icon
+        >
+      </span>
+      <span>${this.message}</span>
+      ${this.action && this.action.label
+            ? html `
+            <mwc-button
+              @click=${() => {
+                store.dispatch({ type: CLOSE_SNACKBAR });
+                this.action.callback();
+            }}
+              >${this.action.label}</mwc-button
+            >
+          `
+            : html ``}
+    `;
+    }
+    stateChanged(state) {
+        var { level, message, snackbarOpened, action } = state.snackbar || {};
+        this.level = level;
+        this.message = message;
+        this.active = snackbarOpened;
+        this.action = action;
+    }
+};
+SnackBar.styles = css `
+    :host {
+      display: block;
+      position: fixed;
+      top: 100%;
+      left: 0;
+      right: 0;
+      padding: 12px;
+      background-color: black;
+      color: white;
+      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+      text-align: center;
+      will-change: transform;
+      transform: translate3d(0, 0, 0);
+      transition-property: visibility, transform;
+      transition-duration: 0.2s;
+      visibility: hidden;
+    }
+
+    :host([active]) {
+      visibility: visible;
+      transform: translate3d(0, -100%, 0);
+    }
+
+    mwc-icon {
+      --mdc-icon-size: 1.2em;
+      vertical-align: middle;
+      max-width: 20px;
+    }
+
+    mwc-button {
+      display: block;
+    }
+
+    .info {
+      color: green;
+    }
+
+    .warn {
+      color: yellow;
+    }
+
+    .error {
+      color: red;
+    }
+
+    @media (min-width: 460px) {
+      :host {
+        width: 320px;
+        margin: auto;
+      }
+    }
+  `;
+__decorate([
+    property({ type: String })
+], SnackBar.prototype, "level", void 0);
+__decorate([
+    property({ type: String })
+], SnackBar.prototype, "message", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], SnackBar.prototype, "active", void 0);
+__decorate([
+    property({ type: Object })
+], SnackBar.prototype, "action", void 0);
+SnackBar = __decorate([
+    customElement('ox-snack-bar')
+], SnackBar);
+//# sourceMappingURL=ox-snack-bar.js.map

package/dist/src/layouts/ox-snack-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-snack-bar.js","sourceRoot":"","sources":["../../../src/layouts/ox-snack-bar.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAC3D,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAA;AACpD,OAAO,KAAK,MAAM,mBAAmB,CAAA;AAGrC,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAAjD;;QAuD8B,UAAK,GAA8B,MAAM,CAAA;QACzC,YAAO,GAAW,EAAE,CAAA;QACJ,WAAM,GAAY,KAAK,CAAA;IAuCrE,CAAC;IApCC,MAAM;QACJ,OAAO,IAAI,CAAA;;0BAEW,IAAI,CAAC,KAAK;aACvB,IAAI,CAAC,KAAK,IAAI,MAAM;YACrB,CAAC,CAAC,IAAI,CAAA,0BAA0B;YAChC,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,MAAM;gBACtB,CAAC,CAAC,IAAI,CAAA,WAAW;gBACjB,CAAC,CAAC,IAAI,CAAC,KAAK,IAAI,OAAO;oBACvB,CAAC,CAAC,IAAI,CAAA,SAAS;oBACf,CAAC,CAAC,IAAI,CAAA,EAAE;;;cAGN,IAAI,CAAC,OAAO;QAClB,IAAI,CAAC,MAAM,IAAI,IAAI,CAAC,MAAM,CAAC,KAAK;YAChC,CAAC,CAAC,IAAI,CAAA;;uBAES,GAAG,EAAE;gBACZ,KAAK,CAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,cAAc,EAAE,CAAC,CAAA;gBACxC,IAAI,CAAC,MAAM,CAAC,QAAQ,EAAE,CAAA;YACxB,CAAC;iBACE,IAAI,CAAC,MAAM,CAAC,KAAK;;WAEvB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;KACX,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAU;QACrB,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,MAAM,EAAE,GAAG,KAAK,CAAC,QAAQ,IAAI,EAAE,CAAA;QAErE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAA;QAClB,IAAI,CAAC,OAAO,GAAG,OAAO,CAAA;QACtB,IAAI,CAAC,MAAM,GAAG,cAAc,CAAA;QAC5B,IAAI,CAAC,MAAM,GAAG,MAAM,CAAA;IACtB,CAAC;CACF,CAAA;AA/FQ,eAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAoDlB,CAAA;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;uCAA0C;AACzC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;yCAAqB;AACJ;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCAAwB;AACvC;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;wCAAY;AA1DnC,QAAQ;IADb,aAAa,CAAC,cAAc,CAAC;GACxB,QAAQ,CAgGb","sourcesContent":["import '@material/mwc-button'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { CLOSE_SNACKBAR } from '../actions/snackbar'\nimport store from '../initializer.js'\n\n@customElement('ox-snack-bar')\nclass SnackBar extends connect(store)(LitElement) {\n  static styles = css`\n    :host {\n      display: block;\n      position: fixed;\n      top: 100%;\n      left: 0;\n      right: 0;\n      padding: 12px;\n      background-color: black;\n      color: white;\n      box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);\n      text-align: center;\n      will-change: transform;\n      transform: translate3d(0, 0, 0);\n      transition-property: visibility, transform;\n      transition-duration: 0.2s;\n      visibility: hidden;\n    }\n\n    :host([active]) {\n      visibility: visible;\n      transform: translate3d(0, -100%, 0);\n    }\n\n    mwc-icon {\n      --mdc-icon-size: 1.2em;\n      vertical-align: middle;\n      max-width: 20px;\n    }\n\n    mwc-button {\n      display: block;\n    }\n\n    .info {\n      color: green;\n    }\n\n    .warn {\n      color: yellow;\n    }\n\n    .error {\n      color: red;\n    }\n\n    @media (min-width: 460px) {\n      :host {\n        width: 320px;\n        margin: auto;\n      }\n    }\n  `\n\n  @property({ type: String }) level: 'info' | 'warn' | 'error' = 'info'\n  @property({ type: String }) message: string = ''\n  @property({ type: Boolean, reflect: true }) active: boolean = false\n  @property({ type: Object }) action: any\n\n  render() {\n    return html`\n      <span>\n        <mwc-icon class=${this.level}\n          >${this.level == 'info'\n            ? html` notification_important `\n            : this.level == 'warn'\n            ? html` warning `\n            : this.level == 'error'\n            ? html` error `\n            : html``}</mwc-icon\n        >\n      </span>\n      <span>${this.message}</span>\n      ${this.action && this.action.label\n        ? html`\n            <mwc-button\n              @click=${() => {\n                store.dispatch({ type: CLOSE_SNACKBAR })\n                this.action.callback()\n              }}\n              >${this.action.label}</mwc-button\n            >\n          `\n        : html``}\n    `\n  }\n\n  stateChanged(state: any) {\n    var { level, message, snackbarOpened, action } = state.snackbar || {}\n\n    this.level = level\n    this.message = message\n    this.active = snackbarOpened\n    this.action = action\n  }\n}\n"]}

package/dist/src/reducers/layout.d.ts

@@ -0,0 +1,13 @@
+import { Viewpart } from '../actions/layout';
+declare const layout: (state: {
+    viewparts: {
+        [name: string]: Viewpart;
+    };
+    width: 'WIDE' | 'NARROW';
+} | undefined, action: any) => {
+    width: any;
+    viewparts: {
+        [name: string]: Viewpart;
+    };
+};
+export default layout;