@operato/layout 0.3.21 → 0.3.22

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

@@ -0,0 +1,103 @@
+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 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 == "TOPMOST" /* TOPMOST */),
+            ...headerbars.filter(viewpart => viewpart.level !== "TOPMOST" /* 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,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 { ScrollbarStyles } from '@operato/styles';
+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 == "TOPMOST" /* TOPMOST */),
+            ...navbars.filter(viewpart => viewpart.level !== "TOPMOST" /* 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;

package/dist/src/reducers/layout.js

@@ -0,0 +1,62 @@
+import { APPEND_VIEWPART, REMOVE_VIEWPART, UPDATE_VIEWPART, UPDATE_VIEWPORT_WIDTH } from '../actions/layout';
+const INITIAL_STATE = {
+    viewparts: {},
+    width: 'WIDE'
+};
+const layout = (state = INITIAL_STATE, action) => {
+    let viewparts = { ...state.viewparts };
+    switch (action.type) {
+        case APPEND_VIEWPART:
+            return {
+                ...state,
+                viewparts: {
+                    ...state.viewparts,
+                    [action.name]: {
+                        ...action.viewpart,
+                        position: action.position
+                    }
+                }
+            };
+        case REMOVE_VIEWPART:
+            delete viewparts[action.name];
+            return {
+                ...state,
+                viewparts
+            };
+        case UPDATE_VIEWPART:
+            let viewpart = viewparts[action.name];
+            if (!viewpart) {
+                return state;
+            }
+            let override = action.override || {};
+            if (viewpart.temporary && override.show === false) {
+                /* temporary viewpart는 show=false가 될 때, 제거되어야 한다. */
+                delete viewparts[action.name];
+                return {
+                    ...state,
+                    viewparts
+                };
+            }
+            else {
+                return {
+                    ...state,
+                    viewparts: {
+                        ...state.viewparts,
+                        [action.name]: {
+                            ...viewpart,
+                            ...action.override
+                        }
+                    }
+                };
+            }
+        case UPDATE_VIEWPORT_WIDTH:
+            return {
+                ...state,
+                width: action.width
+            };
+        default:
+            return state;
+    }
+};
+export default layout;
+//# sourceMappingURL=layout.js.map

package/dist/src/reducers/layout.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"layout.js","sourceRoot":"","sources":["../../../src/reducers/layout.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,eAAe,EAAE,eAAe,EAAE,qBAAqB,EAAY,MAAM,mBAAmB,CAAA;AAEtH,MAAM,aAAa,GAGf;IACF,SAAS,EAAE,EAAE;IACb,KAAK,EAAE,MAAM;CACd,CAAA;AAED,MAAM,MAAM,GAAG,CAAC,KAAK,GAAG,aAAa,EAAE,MAAW,EAAE,EAAE;IACpD,IAAI,SAAS,GAAG,EAAE,GAAG,KAAK,CAAC,SAAS,EAAE,CAAA;IAEtC,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,eAAe;YAClB,OAAO;gBACL,GAAG,KAAK;gBACR,SAAS,EAAE;oBACT,GAAG,KAAK,CAAC,SAAS;oBAClB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;wBACb,GAAG,MAAM,CAAC,QAAQ;wBAClB,QAAQ,EAAE,MAAM,CAAC,QAAQ;qBAC1B;iBACF;aACF,CAAA;QAEH,KAAK,eAAe;YAClB,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YAC7B,OAAO;gBACL,GAAG,KAAK;gBACR,SAAS;aACV,CAAA;QAEH,KAAK,eAAe;YAClB,IAAI,QAAQ,GAAG,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;YACrC,IAAI,CAAC,QAAQ,EAAE;gBACb,OAAO,KAAK,CAAA;aACb;YACD,IAAI,QAAQ,GAAG,MAAM,CAAC,QAAQ,IAAI,EAAE,CAAA;YAEpC,IAAI,QAAQ,CAAC,SAAS,IAAI,QAAQ,CAAC,IAAI,KAAK,KAAK,EAAE;gBACjD,oDAAoD;gBACpD,OAAO,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAA;gBAC7B,OAAO;oBACL,GAAG,KAAK;oBACR,SAAS;iBACV,CAAA;aACF;iBAAM;gBACL,OAAO;oBACL,GAAG,KAAK;oBACR,SAAS,EAAE;wBACT,GAAG,KAAK,CAAC,SAAS;wBAClB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE;4BACb,GAAG,QAAQ;4BACX,GAAG,MAAM,CAAC,QAAQ;yBACnB;qBACF;iBACF,CAAA;aACF;QAEH,KAAK,qBAAqB;YACxB,OAAO;gBACL,GAAG,KAAK;gBACR,KAAK,EAAE,MAAM,CAAC,KAAK;aACpB,CAAA;QAEH;YACE,OAAO,KAAK,CAAA;KACf;AACH,CAAC,CAAA;AAED,eAAe,MAAM,CAAA","sourcesContent":["import { APPEND_VIEWPART, REMOVE_VIEWPART, UPDATE_VIEWPART, UPDATE_VIEWPORT_WIDTH, Viewpart } from '../actions/layout'\n\nconst INITIAL_STATE: {\n  viewparts: { [name: string]: Viewpart }\n  width: 'WIDE' | 'NARROW'\n} = {\n  viewparts: {},\n  width: 'WIDE'\n}\n\nconst layout = (state = INITIAL_STATE, action: any) => {\n  let viewparts = { ...state.viewparts }\n\n  switch (action.type) {\n    case APPEND_VIEWPART:\n      return {\n        ...state,\n        viewparts: {\n          ...state.viewparts,\n          [action.name]: {\n            ...action.viewpart,\n            position: action.position\n          }\n        }\n      }\n\n    case REMOVE_VIEWPART:\n      delete viewparts[action.name]\n      return {\n        ...state,\n        viewparts\n      }\n\n    case UPDATE_VIEWPART:\n      let viewpart = viewparts[action.name]\n      if (!viewpart) {\n        return state\n      }\n      let override = action.override || {}\n\n      if (viewpart.temporary && override.show === false) {\n        /* temporary viewpart는 show=false가 될 때, 제거되어야 한다. */\n        delete viewparts[action.name]\n        return {\n          ...state,\n          viewparts\n        }\n      } else {\n        return {\n          ...state,\n          viewparts: {\n            ...state.viewparts,\n            [action.name]: {\n              ...viewpart,\n              ...action.override\n            }\n          }\n        }\n      }\n\n    case UPDATE_VIEWPORT_WIDTH:\n      return {\n        ...state,\n        width: action.width\n      }\n\n    default:\n      return state\n  }\n}\n\nexport default layout\n"]}

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

@@ -0,0 +1,18 @@
+import { SnackbarAction } from '../actions/snackbar.js';
+declare const snackbar: (state: {
+    snackbarOpened: boolean;
+    level: string;
+    message: string;
+    action: {};
+} | undefined, action: SnackbarAction) => {
+    snackbarOpened: boolean;
+    level: string;
+    message: string;
+    action: {};
+} | {
+    snackbarOpened: boolean;
+    level: import("../actions/snackbar.js").NotificationLevel;
+    message: string | undefined;
+    action: any;
+};
+export default snackbar;

package/dist/src/reducers/snackbar.js

@@ -0,0 +1,30 @@
+import { CLOSE_SNACKBAR, OPEN_SNACKBAR } from '../actions/snackbar.js';
+const INITIAL_STATE = {
+    snackbarOpened: false,
+    level: '',
+    message: '',
+    action: {}
+};
+const snackbar = (state = INITIAL_STATE, action) => {
+    switch (action.type) {
+        case OPEN_SNACKBAR:
+            return {
+                ...state,
+                snackbarOpened: true,
+                level: action.level || 'info',
+                message: action.message,
+                action: {
+                    ...action.action
+                }
+            };
+        case CLOSE_SNACKBAR:
+            return {
+                ...state,
+                snackbarOpened: false
+            };
+        default:
+            return state;
+    }
+};
+export default snackbar;
+//# sourceMappingURL=snackbar.js.map

package/dist/src/reducers/snackbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"snackbar.js","sourceRoot":"","sources":["../../../src/reducers/snackbar.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,aAAa,EAAkB,MAAM,wBAAwB,CAAA;AAEtF,MAAM,aAAa,GAAG;IACpB,cAAc,EAAE,KAAK;IACrB,KAAK,EAAE,EAAE;IACT,OAAO,EAAE,EAAE;IACX,MAAM,EAAE,EAAE;CACX,CAAA;AAED,MAAM,QAAQ,GAAG,CAAC,KAAK,GAAG,aAAa,EAAE,MAAsB,EAAE,EAAE;IACjE,QAAQ,MAAM,CAAC,IAAI,EAAE;QACnB,KAAK,aAAa;YAChB,OAAO;gBACL,GAAG,KAAK;gBACR,cAAc,EAAE,IAAI;gBACpB,KAAK,EAAE,MAAM,CAAC,KAAK,IAAI,MAAM;gBAC7B,OAAO,EAAE,MAAM,CAAC,OAAO;gBACvB,MAAM,EAAE;oBACN,GAAG,MAAM,CAAC,MAAM;iBACjB;aACF,CAAA;QACH,KAAK,cAAc;YACjB,OAAO;gBACL,GAAG,KAAK;gBACR,cAAc,EAAE,KAAK;aACtB,CAAA;QACH;YACE,OAAO,KAAK,CAAA;KACf;AACH,CAAC,CAAA;AAED,eAAe,QAAQ,CAAA","sourcesContent":["import { CLOSE_SNACKBAR, OPEN_SNACKBAR, SnackbarAction } from '../actions/snackbar.js'\n\nconst INITIAL_STATE = {\n  snackbarOpened: false,\n  level: '',\n  message: '',\n  action: {}\n}\n\nconst snackbar = (state = INITIAL_STATE, action: SnackbarAction) => {\n  switch (action.type) {\n    case OPEN_SNACKBAR:\n      return {\n        ...state,\n        snackbarOpened: true,\n        level: action.level || 'info',\n        message: action.message,\n        action: {\n          ...action.action\n        }\n      }\n    case CLOSE_SNACKBAR:\n      return {\n        ...state,\n        snackbarOpened: false\n      }\n    default:\n      return state\n  }\n}\n\nexport default snackbar\n"]}