@operato/layout 0.3.21 → 0.3.22

package/dist/src/components/ox-floating-overlay.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-floating-overlay.js","sourceRoot":"","sources":["../../../src/components/ox-floating-overlay.ts"],"names":[],"mappings":"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","sourcesContent":["import '@things-factory/help'\nimport '@material/mwc-icon'\n\nimport { css, html, LitElement, PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('ox-floating-overlay')\nclass FloatingOverlay extends LitElement {\n  static styles = [\n    ScrollbarStyles,\n    css`\n      /* for layout style */\n      :host {\n        position: relative;\n        z-index: 1;\n      }\n\n      :host([hovering='edge']) {\n        /* edge hovering 인 경우에는 상위 relative position 크기와 위치를 반영한다. */\n        position: initial;\n      }\n\n      #backdrop {\n        position: fixed;\n        left: 0;\n        top: 0;\n\n        width: 100vw;\n        height: 100vh;\n\n        background-color: var(--overlay-background-color);\n      }\n\n      [overlayed] {\n        position: absolute;\n\n        display: flex;\n        flex-direction: column;\n        overflow: hidden;\n        background: transparent;\n        pointer-events: none;\n      }\n\n      [overlayed][hovering='center'] {\n        position: fixed;\n\n        left: 50%;\n        top: 50%;\n        transform: translate(-50%, -50%);\n\n        opacity: 0;\n      }\n\n      [overlayed][hovering='center'][opened] {\n        opacity: 1;\n        transition: opacity 0.3s ease-in;\n      }\n\n      [hovering='center'] {\n        width: var(--overlay-center-normal-width, 60%);\n        height: var(--overlay-center-normal-height, 60%);\n      }\n\n      [hovering='center'][size='small'] {\n        width: var(--overlay-center-small-width, 40%);\n        height: var(--overlay-center-small-height, 40%);\n      }\n\n      [hovering='center'][size='large'] {\n        width: var(--overlay-center-large-width, 100%);\n        height: var(--overlay-center-large-height, 100%);\n      }\n\n      [header] {\n        --help-icon-color: #fff;\n        --help-icon-hover-color: #fff;\n\n        pointer-events: initial;\n      }\n\n      [content] {\n        flex: 1;\n\n        overflow: hidden;\n      }\n\n      ::slotted(*) {\n        box-sizing: border-box;\n        pointer-events: initial;\n      }\n\n      [hovering='center'] [content] ::slotted(*) {\n        width: 100%;\n        height: 100%;\n      }\n      [direction='up'],\n      [direction='down'] {\n        width: 100%;\n\n        max-height: 0;\n        transition: max-height 0.7s ease-in;\n      }\n      [direction='up'] {\n        bottom: 0;\n      }\n      [direction='down'] {\n        top: 0;\n      }\n\n      [direction='up'][opened],\n      [direction='down'][opened] {\n        max-height: 100vh;\n      }\n\n      [settled][direction='down'] [content],\n      [settled][direction='up'] [content] {\n        overflow-y: auto;\n      }\n\n      [direction='left'],\n      [direction='right'] {\n        height: 100%;\n\n        max-width: 0;\n        transition: max-width 0.5s ease-in;\n      }\n      [direction='left'] {\n        right: 0;\n      }\n      [direction='right'] {\n        left: 0;\n      }\n\n      [direction='left'][opened],\n      [direction='right'][opened] {\n        max-width: 100vw;\n      }\n\n      [settled][direction='left'] [content],\n      [settled][direction='right'] [content] {\n        overflow-x: auto;\n      }\n\n      @media screen and (max-width: 460px) {\n        [direction='up'],\n        [direction='down'] {\n          max-height: 100vh;\n        }\n\n        [direction='left'],\n        [direction='right'] {\n          max-width: 100vw;\n        }\n      }\n    `,\n    css`\n      /* for header style */\n      [header] {\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n\n        background-color: var(--overlay-header-background-color);\n        color: var(--overlay-header-color);\n      }\n\n      slot[name='header'] {\n        flex: 1;\n\n        display: flex;\n        flex-direction: row;\n        align-items: center;\n        justify-content: center;\n      }\n\n      [name='header']::slotted(*) {\n        margin: 0 auto;\n      }\n\n      [name='header'] > h1 {\n        text-transform: capitalize;\n        font: var(--overlay-header-font);\n      }\n\n      [historyback] {\n        margin-left: 10px;\n        margin-right: auto;\n      }\n\n      [close] {\n        margin-left: auto;\n        margin-right: 10px;\n      }\n\n      [historyback],\n      [close] {\n        display: none;\n      }\n\n      [closable][close] {\n        display: block;\n      }\n\n      @media screen and (max-width: 460px) {\n        [closable][historyback] {\n          display: block;\n        }\n\n        [closable][close] {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Boolean }) backdrop: boolean = false\n  @property({ type: String }) direction?: 'up' | 'down' | 'left' | 'right'\n  @property({ type: String, reflect: true }) hovering?: 'center' | 'edge'\n  @property({ type: String }) size?: 'small' | 'normal' | 'large'\n  @property({ type: String }) name?: string\n  @property({ type: String }) title: string = ''\n  @property({ type: Boolean }) closable: boolean = false\n  @property({ type: Object }) templateProperties: any\n  @property({ type: Object }) help: any\n\n  render() {\n    var direction = this.hovering == 'center' ? false : this.direction\n\n    return html`\n      ${Boolean(this.backdrop)\n        ? html` <div id=\"backdrop\" ?hidden=${!this.backdrop} @click=${() => this.onClose(true)}></div> `\n        : html``}\n\n      <div\n        overlayed\n        hovering=${this.hovering || 'center'}\n        direction=${direction}\n        size=${this.size || 'normal'}\n        @close-overlay=${() => this.onClose()}\n        @transitionstart=${(e: Event) => {\n          /* to hide scrollbar during transition */\n          ;(e.target as HTMLElement).removeAttribute('settled')\n        }}\n        @transitionend=${(e: Event) => {\n          ;(e.target as HTMLElement).setAttribute('settled', '')\n        }}\n      >\n        <div header>\n          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} historyback>arrow_back</mwc-icon>\n          <slot name=\"header\">\n            ${this.title || this.closable\n              ? html`\n                  <h1>\n                    ${this.title || ''}&nbsp;${this.help ? html` <help-icon .topic=${this.help}></help-icon>` : html``}\n                  </h1>\n                `\n              : html``}</slot\n          >\n          <mwc-icon @click=${() => this.onClose()} ?closable=${this.closable} close>close</mwc-icon>\n        </div>\n\n        <div content>\n          <slot> </slot>\n        </div>\n      </div>\n    `\n  }\n\n  updated(changes: PropertyValues<this>) {\n    if (changes.has('templateProperties') && this.templateProperties) {\n      var template = this.firstElementChild\n      if (template) {\n        for (let prop in this.templateProperties) {\n          //@ts-ignore\n          template[prop] = this.templateProperties[prop]\n        }\n      }\n    }\n  }\n\n  firstUpdated() {\n    requestAnimationFrame(() => {\n      /* transition(animation) 효과를 위해 'opened' 속성을 변화시킨다. */\n      this.renderRoot.querySelector('[overlayed]')?.setAttribute('opened', 'true')\n    })\n  }\n\n  disconnectedCallback() {\n    document.dispatchEvent(\n      new CustomEvent('overlay-closed', {\n        detail: this.name\n      })\n    )\n\n    super.disconnectedCallback()\n  }\n\n  onClose(escape?: boolean) {\n    /* 현재 overlay state를 확인해서, 자신이 포함하고 있는 템플릿인 경우에 history.back() 한다. */\n\n    var state = history.state\n    var overlay = (state || {}).overlay\n\n    if (!overlay || overlay.name !== this.name) {\n      return\n    }\n\n    /* Backdrop click 경우는 escape 시도라고 정의한다. overlay 속성이 escapable이 아닌 경우에는 동작하지 않는다. */\n    if (escape && !overlay.escapable) {\n      return true\n    }\n\n    history.back()\n  }\n}\n"]}

package/dist/src/components/ox-resize-splitter.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+export declare class ResizeSplitter extends LitElement {
+    static _dragImage: HTMLImageElement;
+    static get dragImage(): HTMLImageElement;
+    static styles: import("lit").CSSResult;
+    private dragstart?;
+    connectedCallback(): void;
+    render(): import("lit-html").TemplateResult<1>;
+    _throttled(delay: number, fn: (...args: any) => void): (...args: any) => void;
+    _onDragStart(e: DragEvent): void;
+    _onDrag(e: DragEvent): void;
+    _onDragEnd(e: DragEvent): void;
+}

package/dist/src/components/ox-resize-splitter.js

@@ -0,0 +1,108 @@
+var ResizeSplitter_1;
+import { __decorate } from "tslib";
+import { css, html, LitElement } from 'lit';
+import { customElement } from 'lit/decorators.js';
+let ResizeSplitter = ResizeSplitter_1 = class ResizeSplitter extends LitElement {
+    static get dragImage() {
+        if (!ResizeSplitter_1._dragImage) {
+            ResizeSplitter_1._dragImage = new Image();
+            ResizeSplitter_1._dragImage.src =
+                'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==';
+        }
+        return ResizeSplitter_1._dragImage;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        if (this.hasAttribute('vertical')) {
+            this.style.width = '3px';
+            this.style.height = '100%';
+            this.style.cursor = 'col-resize';
+        }
+        else {
+            this.style.width = '100%';
+            this.style.height = '3px';
+            this.style.cursor = 'row-resize';
+        }
+    }
+    render() {
+        return html `
+      <div
+        draggable="true"
+        @dragstart=${(e) => this._onDragStart(e)}
+        @drag=${this._throttled(100, this._onDrag.bind(this))}
+        @dragend=${(e) => this._onDragEnd(e)}
+      ></div>
+    `;
+    }
+    // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함
+    _throttled(delay, fn) {
+        let lastCall = 0;
+        return function (...args) {
+            const now = new Date().getTime();
+            if (now - lastCall < delay) {
+                return;
+            }
+            lastCall = now;
+            return fn(...args);
+        };
+    }
+    _onDragStart(e) {
+        e.dataTransfer.setDragImage(ResizeSplitter_1.dragImage, 0, 0);
+        this.dragstart = {
+            x: e.clientX,
+            y: e.clientY
+        };
+        this.dispatchEvent(new CustomEvent('splitter-dragstart', {
+            bubbles: true,
+            composed: true
+        }));
+        e.stopPropagation();
+    }
+    _onDrag(e) {
+        if (e.clientX == 0) {
+            return;
+        }
+        this.dispatchEvent(new CustomEvent('splitter-drag', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                x: e.clientX - this.dragstart.x,
+                y: e.clientY - this.dragstart.y
+            }
+        }));
+        e.stopPropagation();
+    }
+    _onDragEnd(e) {
+        this.dispatchEvent(new CustomEvent('splitter-dragend', {
+            bubbles: true,
+            composed: true,
+            detail: {
+                x: e.clientX - this.dragstart.x,
+                y: e.clientY - this.dragstart.y
+            }
+        }));
+        e.stopPropagation();
+    }
+};
+ResizeSplitter.styles = css `
+    :host {
+      position: relative;
+      opacity: 0.7;
+      background-color: var(--splitter-background-color);
+    }
+
+    :host(:hover) {
+      background-color: var(--splitter-hover-background-color);
+    }
+
+    div {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+    }
+  `;
+ResizeSplitter = ResizeSplitter_1 = __decorate([
+    customElement('ox-resize-splitter')
+], ResizeSplitter);
+export { ResizeSplitter };
+//# sourceMappingURL=ox-resize-splitter.js.map

package/dist/src/components/ox-resize-splitter.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ox-resize-splitter.js","sourceRoot":"","sources":["../../../src/components/ox-resize-splitter.ts"],"names":[],"mappings":"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","sourcesContent":["import { css, html, LitElement } from 'lit'\nimport { customElement } from 'lit/decorators.js'\n\n@customElement('ox-resize-splitter')\nexport class ResizeSplitter extends LitElement {\n  static _dragImage: HTMLImageElement\n\n  static get dragImage() {\n    if (!ResizeSplitter._dragImage) {\n      ResizeSplitter._dragImage = new Image()\n      ResizeSplitter._dragImage.src =\n        'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw=='\n    }\n    return ResizeSplitter._dragImage\n  }\n\n  static styles = css`\n    :host {\n      position: relative;\n      opacity: 0.7;\n      background-color: var(--splitter-background-color);\n    }\n\n    :host(:hover) {\n      background-color: var(--splitter-hover-background-color);\n    }\n\n    div {\n      position: absolute;\n      width: 100%;\n      height: 100%;\n    }\n  `\n\n  private dragstart?: { x: number; y: number }\n\n  connectedCallback() {\n    super.connectedCallback()\n\n    if (this.hasAttribute('vertical')) {\n      this.style.width = '3px'\n      this.style.height = '100%'\n      this.style.cursor = 'col-resize'\n    } else {\n      this.style.width = '100%'\n      this.style.height = '3px'\n      this.style.cursor = 'row-resize'\n    }\n  }\n\n  render() {\n    return html`\n      <div\n        draggable=\"true\"\n        @dragstart=${(e: DragEvent) => this._onDragStart(e)}\n        @drag=${this._throttled(100, this._onDrag.bind(this))}\n        @dragend=${(e: DragEvent) => this._onDragEnd(e)}\n      ></div>\n    `\n  }\n\n  // TODO onDrag 이벤트가 계속 발생하므로 처리하는 성능 저하됨. 그래서 throttling 하도록 함\n  _throttled(delay: number, fn: (...args: any) => void) {\n    let lastCall = 0\n    return function (...args: any) {\n      const now = new Date().getTime()\n      if (now - lastCall < delay) {\n        return\n      }\n      lastCall = now\n      return fn(...args)\n    }\n  }\n\n  _onDragStart(e: DragEvent) {\n    e.dataTransfer!.setDragImage(ResizeSplitter.dragImage, 0, 0)\n\n    this.dragstart = {\n      x: e.clientX,\n      y: e.clientY\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-dragstart', {\n        bubbles: true,\n        composed: true\n      })\n    )\n\n    e.stopPropagation()\n  }\n\n  _onDrag(e: DragEvent) {\n    if (e.clientX == 0) {\n      return\n    }\n\n    this.dispatchEvent(\n      new CustomEvent('splitter-drag', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          x: e.clientX - this.dragstart!.x,\n          y: e.clientY - this.dragstart!.y\n        }\n      })\n    )\n\n    e.stopPropagation()\n  }\n\n  _onDragEnd(e: DragEvent) {\n    this.dispatchEvent(\n      new CustomEvent('splitter-dragend', {\n        bubbles: true,\n        composed: true,\n        detail: {\n          x: e.clientX - this.dragstart!.x,\n          y: e.clientY - this.dragstart!.y\n        }\n      })\n    )\n\n    e.stopPropagation()\n  }\n}\n"]}

package/dist/src/index.d.ts

@@ -1 +1,8 @@
-export * from './ox-layout';
+import './initializer';
+export * from './layouts/ox-snack-bar.js';
+export * from './layouts/ox-header-bar.js';
+export * from './layouts/ox-nav-bar.js';
+export * from './layouts/ox-aside-bar.js';
+export * from './layouts/ox-footer-bar.js';
+export * from './actions/layout';
+export * from './actions/snackbar';

package/dist/src/index.js

@@ -1,2 +1,9 @@
-export * from './ox-layout';
+import './initializer';
+export * from './layouts/ox-snack-bar.js';
+export * from './layouts/ox-header-bar.js';
+export * from './layouts/ox-nav-bar.js';
+export * from './layouts/ox-aside-bar.js';
+export * from './layouts/ox-footer-bar.js';
+export * from './actions/layout';
+export * from './actions/snackbar';
 //# sourceMappingURL=index.js.map

package/dist/src/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA","sourcesContent":["export * from './ox-layout'\n"]}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,eAAe,CAAA;AAEtB,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAC1C,cAAc,yBAAyB,CAAA;AACvC,cAAc,2BAA2B,CAAA;AACzC,cAAc,4BAA4B,CAAA;AAE1C,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA","sourcesContent":["import './initializer'\n\nexport * from './layouts/ox-snack-bar.js'\nexport * from './layouts/ox-header-bar.js'\nexport * from './layouts/ox-nav-bar.js'\nexport * from './layouts/ox-aside-bar.js'\nexport * from './layouts/ox-footer-bar.js'\n\nexport * from './actions/layout'\nexport * from './actions/snackbar'\n"]}

package/dist/src/initializer.d.ts

@@ -0,0 +1,2 @@
+import { store } from '@operato/shell';
+export default store;

package/dist/src/initializer.js

@@ -0,0 +1,91 @@
+import { REGISTER_NAVIGATION_CALLBACK, store } from '@operato/shell';
+import { closeOverlay, openOverlay, openPopup, toggleOverlay, UPDATE_VIEWPART } from './actions/layout';
+import { showSnackbar } from './actions/snackbar';
+import layout from './reducers/layout';
+import snackbar from './reducers/snackbar';
+store.addReducers({
+    layout,
+    snackbar
+});
+document.addEventListener('open-overlay', event => {
+    const { name, options } = event.detail;
+    openOverlay(name, options);
+});
+document.addEventListener('close-overlay', event => {
+    const { name } = event.detail;
+    closeOverlay(name);
+});
+document.addEventListener('toggle-overlay', event => {
+    const { name, options } = event.detail;
+    toggleOverlay(name, options);
+});
+document.addEventListener('open-popup', event => {
+    const { template, options, callback } = event.detail;
+    var popup = openPopup(template, options);
+    if (popup && callback)
+        callback(popup);
+});
+document.addEventListener('notify', event => {
+    let { message, level, ex = '', option = {} } = event.detail;
+    switch (level) {
+        case 'error':
+            console.error(message, ex);
+            break;
+        case 'warn':
+            console.warn(message, ex);
+            break;
+        case 'info':
+            console.info(message);
+            break;
+        default:
+            break;
+    }
+    store.dispatch(showSnackbar(level, {
+        message,
+        ...option
+    }));
+});
+/* overlay handling */
+var overlayStack = [];
+function getLastSequence() {
+    return overlayStack.length > 0 ? overlayStack[overlayStack.length - 1].overlay.sequence : -1;
+}
+document.addEventListener('keydown', event => {
+    var _a, _b;
+    if (overlayStack.length > 0 && event.keyCode == 27 /* KEY_ESC */) {
+        ((_b = (_a = history.state) === null || _a === void 0 ? void 0 : _a.overlay) === null || _b === void 0 ? void 0 : _b.escapable) && history.back();
+    }
+});
+const historyHandler = (location, event) => {
+    var navigated = event instanceof PopStateEvent;
+    var state = history.state;
+    var overlay = state === null || state === void 0 ? void 0 : state.overlay;
+    var sequence = (overlay === null || overlay === void 0 ? void 0 : overlay.sequence) || -1;
+    var lastSequence = getLastSequence();
+    if (overlayStack.length > 0 && sequence < lastSequence) {
+        /* overlay 관련 history가 아닌 경우. */
+        do {
+            let { overlay } = overlayStack.pop();
+            store.dispatch({
+                type: UPDATE_VIEWPART,
+                name: overlay.name,
+                override: { show: false }
+            });
+            lastSequence = getLastSequence();
+        } while (sequence < lastSequence);
+    }
+    if (!navigated && overlay) {
+        overlayStack.push({ ...state });
+        store.dispatch({
+            type: UPDATE_VIEWPART,
+            name: overlay.name,
+            override: { show: true }
+        });
+    }
+};
+store.dispatch({
+    type: REGISTER_NAVIGATION_CALLBACK,
+    callback: historyHandler
+});
+export default store;
+//# sourceMappingURL=initializer.js.map

package/dist/src/initializer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"initializer.js","sourceRoot":"","sources":["../../src/initializer.ts"],"names":[],"mappings":"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","sourcesContent":["import { REGISTER_NAVIGATION_CALLBACK, store } from '@operato/shell'\n\nimport { closeOverlay, openOverlay, openPopup, toggleOverlay, UPDATE_VIEWPART } from './actions/layout'\nimport { showSnackbar } from './actions/snackbar'\nimport layout from './reducers/layout'\nimport snackbar from './reducers/snackbar'\n\nstore.addReducers({\n  layout,\n  snackbar\n})\n\ndocument.addEventListener('open-overlay', event => {\n  const { name, options } = (event as CustomEvent).detail\n  openOverlay(name, options)\n})\n\ndocument.addEventListener('close-overlay', event => {\n  const { name } = (event as CustomEvent).detail\n  closeOverlay(name)\n})\n\ndocument.addEventListener('toggle-overlay', event => {\n  const { name, options } = (event as CustomEvent).detail\n  toggleOverlay(name, options)\n})\n\ndocument.addEventListener('open-popup', event => {\n  const { template, options, callback } = (event as CustomEvent).detail\n  var popup = openPopup(template, options)\n  if (popup && callback) callback(popup)\n})\n\ndocument.addEventListener('notify', event => {\n  let { message, level, ex = '', option = {} } = (event as CustomEvent).detail\n\n  switch (level) {\n    case 'error':\n      console.error(message, ex)\n      break\n    case 'warn':\n      console.warn(message, ex)\n      break\n    case 'info':\n      console.info(message)\n      break\n    default:\n      break\n  }\n\n  store.dispatch(\n    showSnackbar(level, {\n      message,\n      ...(option as {\n        action?: any\n        timer?: number\n      })\n    }) as any\n  )\n})\n\n/* overlay handling */\nvar overlayStack: any[] = []\nfunction getLastSequence() {\n  return overlayStack.length > 0 ? overlayStack[overlayStack.length - 1].overlay.sequence : -1\n}\n\ndocument.addEventListener('keydown', event => {\n  if (overlayStack.length > 0 && event.keyCode == 27 /* KEY_ESC */) {\n    history.state?.overlay?.escapable && history.back()\n  }\n})\n\nconst historyHandler = (location: string, event: Event) => {\n  var navigated = event instanceof PopStateEvent\n\n  var state = history.state\n  var overlay = state?.overlay\n  var sequence = overlay?.sequence || -1\n\n  var lastSequence = getLastSequence()\n\n  if (overlayStack.length > 0 && sequence < lastSequence) {\n    /* overlay 관련 history가 아닌 경우. */\n    do {\n      let { overlay } = overlayStack.pop()\n      store.dispatch({\n        type: UPDATE_VIEWPART,\n        name: overlay.name,\n        override: { show: false }\n      })\n\n      lastSequence = getLastSequence()\n    } while (sequence < lastSequence)\n  }\n\n  if (!navigated && overlay) {\n    overlayStack.push({ ...state })\n\n    store.dispatch({\n      type: UPDATE_VIEWPART,\n      name: overlay.name,\n      override: { show: true }\n    })\n  }\n}\n\nstore.dispatch({\n  type: REGISTER_NAVIGATION_CALLBACK,\n  callback: historyHandler\n})\n\nexport default store\n"]}

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

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

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

@@ -0,0 +1,105 @@
+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 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 == "TOPMOST" /* TOPMOST */),
+            ...asidebars.filter(viewpart => viewpart.level !== "TOPMOST" /* 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,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 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 == "TOPMOST" /* TOPMOST */),
+            ...footerbars.filter(viewpart => viewpart.level !== "TOPMOST" /* 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';