@things-factory/apptool-ui 6.1.66 → 6.1.68

package/dist-client/index.js

@@ -0,0 +1,63 @@
+import './layout/app-toolbar';
+import './layout/app-busybar';
+import './layout/page-mdibar';
+import './layout/page-toolbar';
+import './mdibar-setting-let';
+import { html } from 'lit-html';
+import { store, clientSettingStore } from '@operato/shell';
+import { appendViewpart, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout';
+import { isMobileDevice } from '@operato/utils';
+import { ADD_SETTING } from '@things-factory/setting-base';
+export async function setupAppToolPart({ toolbar = true, busybar = true, mdibar = true, pageToolbar = false }) {
+    var _a;
+    if (toolbar) {
+        appendViewpart({
+            name: 'apptoolbar',
+            viewpart: {
+                show: true,
+                template: html ` <app-toolbar></app-toolbar> `
+            },
+            position: VIEWPART_POSITION.HEADERBAR
+        });
+    }
+    if (busybar) {
+        appendViewpart({
+            name: 'appbusybar',
+            viewpart: {
+                show: true,
+                template: html ` <app-busybar></app-busybar> `
+            },
+            position: VIEWPART_POSITION.HEADERBAR
+        });
+    }
+    if (mdibar && !isMobileDevice()) {
+        const show = (((_a = (await clientSettingStore.get('mdibar'))) === null || _a === void 0 ? void 0 : _a.value) || {}).show;
+        appendViewpart({
+            name: 'appmdibar',
+            viewpart: {
+                show,
+                level: VIEWPART_LEVEL.TOPMOST,
+                template: html ` <page-mdibar></page-mdibar> `
+            },
+            position: VIEWPART_POSITION.PAGE_HEADERBAR
+        });
+        store.dispatch({
+            type: ADD_SETTING,
+            setting: {
+                seq: 21,
+                template: html ` <mdibar-setting-let></mdibar-setting-let> `
+            }
+        });
+    }
+    if (pageToolbar) {
+        appendViewpart({
+            name: 'page-toolbar',
+            viewpart: {
+                show: true,
+                template: html ` <page-toolbar> </page-toolbar> `
+            },
+            position: VIEWPART_POSITION.PAGE_HEADERBAR
+        });
+    }
+}
+//# sourceMappingURL=index.js.map

package/dist-client/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../client/index.ts"],"names":[],"mappings":"AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,sBAAsB,CAAA;AAC7B,OAAO,uBAAuB,CAAA;AAC9B,OAAO,sBAAsB,CAAA;AAE7B,OAAO,EAAE,IAAI,EAAE,MAAM,UAAU,CAAA;AAE/B,OAAO,EAAE,KAAK,EAAE,kBAAkB,EAAE,MAAM,gBAAgB,CAAA;AAC1D,OAAO,EAAE,cAAc,EAAiB,iBAAiB,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAA;AAClG,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAE/C,OAAO,EAAE,WAAW,EAAE,MAAM,8BAA8B,CAAA;AAE1D,MAAM,CAAC,KAAK,UAAU,gBAAgB,CAAC,EACrC,OAAO,GAAG,IAAI,EACd,OAAO,GAAG,IAAI,EACd,MAAM,GAAG,IAAI,EACb,WAAW,GAAG,KAAK,EAMpB;;IACC,IAAI,OAAO,EAAE;QACX,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;KACH;IAED,IAAI,OAAO,EAAE;QACX,cAAc,CAAC;YACb,IAAI,EAAE,YAAY;YAClB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,CAAC,CAAA;KACH;IAED,IAAI,MAAM,IAAI,CAAC,cAAc,EAAE,EAAE;QAC/B,MAAM,IAAI,GAAG,CAAC,CAAA,MAAA,CAAC,MAAM,kBAAkB,CAAC,GAAG,CAAC,QAAQ,CAAC,CAAC,0CAAE,KAAK,KAAI,EAAE,CAAC,CAAC,IAAI,CAAA;QAEzE,cAAc,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,QAAQ,EAAE;gBACR,IAAI;gBACJ,KAAK,EAAE,cAAc,CAAC,OAAO;gBAC7B,QAAQ,EAAE,IAAI,CAAA,+BAA+B;aAC9C;YACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;SAC3C,CAAC,CAAA;QAEF,KAAK,CAAC,QAAQ,CAAC;YACb,IAAI,EAAE,WAAW;YACjB,OAAO,EAAE;gBACP,GAAG,EAAE,EAAE;gBACP,QAAQ,EAAE,IAAI,CAAA,6CAA6C;aAC5D;SACF,CAAC,CAAA;KACH;IAED,IAAI,WAAW,EAAE;QACf,cAAc,CAAC;YACb,IAAI,EAAE,cAAc;YACpB,QAAQ,EAAE;gBACR,IAAI,EAAE,IAAI;gBACV,QAAQ,EAAE,IAAI,CAAA,kCAAkC;aACjD;YACD,QAAQ,EAAE,iBAAiB,CAAC,cAAc;SAC3C,CAAC,CAAA;KACH;AACH,CAAC","sourcesContent":["import './layout/app-toolbar'\nimport './layout/app-busybar'\nimport './layout/page-mdibar'\nimport './layout/page-toolbar'\nimport './mdibar-setting-let'\n\nimport { html } from 'lit-html'\n\nimport { store, clientSettingStore } from '@operato/shell'\nimport { appendViewpart, TOOL_POSITION, VIEWPART_POSITION, VIEWPART_LEVEL } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\nimport { APPEND_PAGE_TOOL } from '@things-factory/apptool-base'\nimport { ADD_SETTING } from '@things-factory/setting-base'\n\nexport async function setupAppToolPart({\n  toolbar = true,\n  busybar = true,\n  mdibar = true,\n  pageToolbar = false\n}: {\n  toolbar?: boolean\n  busybar?: boolean\n  mdibar?: boolean\n  pageToolbar?: boolean\n}) {\n  if (toolbar) {\n    appendViewpart({\n      name: 'apptoolbar',\n      viewpart: {\n        show: true,\n        template: html` <app-toolbar></app-toolbar> `\n      },\n      position: VIEWPART_POSITION.HEADERBAR\n    })\n  }\n\n  if (busybar) {\n    appendViewpart({\n      name: 'appbusybar',\n      viewpart: {\n        show: true,\n        template: html` <app-busybar></app-busybar> `\n      },\n      position: VIEWPART_POSITION.HEADERBAR\n    })\n  }\n\n  if (mdibar && !isMobileDevice()) {\n    const show = ((await clientSettingStore.get('mdibar'))?.value || {}).show\n\n    appendViewpart({\n      name: 'appmdibar',\n      viewpart: {\n        show,\n        level: VIEWPART_LEVEL.TOPMOST,\n        template: html` <page-mdibar></page-mdibar> `\n      },\n      position: VIEWPART_POSITION.PAGE_HEADERBAR\n    })\n\n    store.dispatch({\n      type: ADD_SETTING,\n      setting: {\n        seq: 21,\n        template: html` <mdibar-setting-let></mdibar-setting-let> `\n      }\n    })\n  }\n\n  if (pageToolbar) {\n    appendViewpart({\n      name: 'page-toolbar',\n      viewpart: {\n        show: true,\n        template: html` <page-toolbar> </page-toolbar> `\n      },\n      position: VIEWPART_POSITION.PAGE_HEADERBAR\n    })\n  }\n}\n"]}

package/dist-client/layout/app-busybar.d.ts

@@ -0,0 +1 @@
+import '@material/mwc-linear-progress';

package/dist-client/layout/app-busybar.js

@@ -0,0 +1,53 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-linear-progress';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { store } from '@operato/shell';
+let AppBusyBar = class AppBusyBar extends connect(store)(LitElement) {
+    render() {
+        return this.busy ? html `<mwc-linear-progress indeterminate></mwc-linear-progress>` : html ``;
+    }
+    stateChanged(state) {
+        if (!state.busy.busy) {
+            this.busy = false;
+        }
+        this.lastState = state.busy.busy;
+        if (!this.timeout) {
+            this.timeout = setTimeout(() => {
+                if (this.lastState) {
+                    this.busy = true;
+                }
+                delete this.timeout;
+            }, 500);
+        }
+    }
+};
+AppBusyBar.styles = [
+    css `
+      :host {
+        display: flex;
+      }
+
+      mwc-linear-progress {
+        flex: 1;
+        height: 2px;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], AppBusyBar.prototype, "busy", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Boolean)
+], AppBusyBar.prototype, "lastState", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AppBusyBar.prototype, "timeout", void 0);
+AppBusyBar = __decorate([
+    customElement('app-busybar')
+], AppBusyBar);
+//# sourceMappingURL=app-busybar.js.map

package/dist-client/layout/app-busybar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-busybar.js","sourceRoot":"","sources":["../../client/layout/app-busybar.ts"],"names":[],"mappings":";AAAA,OAAO,+BAA+B,CAAA;AAEtC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAY,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAClE,OAAO,EAAE,OAAO,EAAE,MAAM,8BAA8B,CAAA;AAEtD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGtC,IAAM,UAAU,GAAhB,MAAM,UAAW,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAkBjD,MAAM;QACJ,OAAO,IAAI,CAAC,IAAI,CAAC,CAAC,CAAC,IAAI,CAAA,2DAA2D,CAAC,CAAC,CAAC,IAAI,CAAA,EAAE,CAAA;IAC7F,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,EAAE;YACpB,IAAI,CAAC,IAAI,GAAG,KAAK,CAAA;SAClB;QAED,IAAI,CAAC,SAAS,GAAG,KAAK,CAAC,IAAI,CAAC,IAAI,CAAA;QAEhC,IAAI,CAAC,IAAI,CAAC,OAAO,EAAE;YACjB,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE;gBAC7B,IAAI,IAAI,CAAC,SAAS,EAAE;oBAClB,IAAI,CAAC,IAAI,GAAG,IAAI,CAAA;iBACjB;gBACD,OAAO,IAAI,CAAC,OAAO,CAAA;YACrB,CAAC,EAAE,GAAG,CAAC,CAAA;SACR;IACH,CAAC;;AApCM,iBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;KASF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;8BAAgB,OAAO;wCAAA;AAC/B;IAAC,KAAK,EAAE;;6CAA4B;AACpC;IAAC,KAAK,EAAE;;2CAAsB;AAhB1B,UAAU;IADf,aAAa,CAAC,aAAa,CAAC;GACvB,UAAU,CAsCf","sourcesContent":["import '@material/mwc-linear-progress'\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 { store } from '@operato/shell'\n\n@customElement('app-busybar')\nclass AppBusyBar extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n      }\n\n      mwc-linear-progress {\n        flex: 1;\n        height: 2px;\n      }\n    `\n  ]\n\n  @state() private busy?: Boolean\n  @state() private lastState?: boolean\n  @state() private timeout?: any\n\n  render() {\n    return this.busy ? html`<mwc-linear-progress indeterminate></mwc-linear-progress>` : html``\n  }\n\n  stateChanged(state) {\n    if (!state.busy.busy) {\n      this.busy = false\n    }\n\n    this.lastState = state.busy.busy\n\n    if (!this.timeout) {\n      this.timeout = setTimeout(() => {\n        if (this.lastState) {\n          this.busy = true\n        }\n        delete this.timeout\n      }, 500)\n    }\n  }\n}\n"]}

package/dist-client/layout/app-mdibar.d.ts

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

package/dist-client/layout/app-mdibar.js

@@ -0,0 +1,136 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { navigate, store, PageView } from '@operato/shell';
+let AppMDIBar = class AppMDIBar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.pages = [];
+        this.title = '';
+    }
+    render() {
+        const pages = this.pages || [];
+        return html `
+      <div home><mwc-icon>home</mwc-icon></div>
+
+      ${pages.map((page, idx) => {
+            var _a;
+            const context = page.context;
+            const title = (context === null || context === void 0 ? void 0 : context.title) || ((_a = context === null || context === void 0 ? void 0 : context.search) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+            return html `
+          <div @click=${() => this.moveTo(page)} ?active=${this.activePage === page}>
+            ${title}
+            <mwc-icon
+              @click=${(e) => {
+                e.stopPropagation();
+                this.closePage(page, idx);
+            }}
+              >close</mwc-icon
+            >
+          </div>
+        `;
+        })}
+    `;
+    }
+    updated(changed) {
+        if (changed.has('activePage')) {
+            const page = this.activePage;
+            if (!this.pages) {
+                this.pages = [];
+            }
+            if (!this.pages.includes(page)) {
+                this.pages = [...this.pages, page];
+            }
+        }
+    }
+    stateChanged(state) {
+        var _a;
+        const { context, activePage } = state.route || {};
+        this.activePage = activePage;
+        /* refresh를 일으키기위한 property 변경을 위한 코드임. */
+        this.title = context.title || ((_a = context.search) === null || _a === void 0 ? void 0 : _a.placeholder);
+    }
+    getHomeRoute() {
+        var base = document.querySelector('base');
+        return (base === null || base === void 0 ? void 0 : base.getAttribute('href')) || '/';
+    }
+    moveTo(page) {
+        navigate(page.getAttribute('data-page'));
+    }
+    closePage(page, idx) {
+        var _a;
+        this.pages = [...this.pages.slice(0, idx), ...this.pages.slice(idx + 1)];
+        (_a = page.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(page);
+        page.pageDispose();
+        if (this.activePage === page) {
+            const next = this.pages.length > 0 ? Math.max(0, idx - 1) : -1;
+            navigate(next != -1 ? this.pages[next].getAttribute('data-page') : this.getHomeRoute());
+        }
+    }
+};
+AppMDIBar.styles = [
+    css `
+      :host {
+        display: flex;
+        background-color: var(--main-section-background-color);
+        color: var(--mdibar-color, rgba(0, 0, 0, 0.7));
+        font-size: var(--fontsize-small);
+      }
+
+      div {
+        display: inline-block;
+        position: relative;
+        max-width: var(--mdibar-max-width, 120px);
+        padding: var(--mdibar-padding, 3px 22px 0 5px);
+        border-right: var(--border-dark-color);
+        border-bottom: var(--border-dark-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      mwc-icon {
+        position: absolute;
+        right: 2px;
+        top: 3px;
+        margin-left: var(--margin-narrow);
+        font-size: var(--mdibar-icon-size, 18px);
+        opacity: 0.5;
+      }
+      mwc-icon:hover {
+        opacity: 0.8;
+        color: var(--mdibar-hover-color, #cc3300);
+      }
+
+      [active] {
+        background-color: var(--mdibar-background-color, #fff);
+        border-bottom: 1px solid var(--mdibar-background-color, #fff);
+        color: var(--primary-text-color);
+        font-weight: bold;
+      }
+      [home] {
+        padding: var(--mdibar-padding-home, 3px 5px 0 23px);
+      }
+      [home] mwc-icon {
+        left: 0;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], AppMDIBar.prototype, "pages", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", PageView)
+], AppMDIBar.prototype, "activePage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], AppMDIBar.prototype, "title", void 0);
+AppMDIBar = __decorate([
+    customElement('app-mdibar')
+], AppMDIBar);
+//# sourceMappingURL=app-mdibar.js.map

package/dist-client/layout/app-mdibar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-mdibar.js","sourceRoot":"","sources":["../../client/layout/app-mdibar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { navigate, store, PageView } from '@operato/shell'\n\n@customElement('app-mdibar')\nclass AppMDIBar extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: var(--main-section-background-color);\n        color: var(--mdibar-color, rgba(0, 0, 0, 0.7));\n        font-size: var(--fontsize-small);\n      }\n\n      div {\n        display: inline-block;\n        position: relative;\n        max-width: var(--mdibar-max-width, 120px);\n        padding: var(--mdibar-padding, 3px 22px 0 5px);\n        border-right: var(--border-dark-color);\n        border-bottom: var(--border-dark-color);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      mwc-icon {\n        position: absolute;\n        right: 2px;\n        top: 3px;\n        margin-left: var(--margin-narrow);\n        font-size: var(--mdibar-icon-size, 18px);\n        opacity: 0.5;\n      }\n      mwc-icon:hover {\n        opacity: 0.8;\n        color: var(--mdibar-hover-color, #cc3300);\n      }\n\n      [active] {\n        background-color: var(--mdibar-background-color, #fff);\n        border-bottom: 1px solid var(--mdibar-background-color, #fff);\n        color: var(--primary-text-color);\n        font-weight: bold;\n      }\n      [home] {\n        padding: var(--mdibar-padding-home, 3px 5px 0 23px);\n      }\n      [home] mwc-icon {\n        left: 0;\n      }\n    `\n  ]\n\n  @state() pages: PageView[] = []\n  @state() activePage!: PageView\n  @state() title: string = ''\n\n  render() {\n    const pages = this.pages || []\n\n    return html`\n      <div home><mwc-icon>home</mwc-icon></div>\n\n      ${pages.map((page, idx) => {\n        const context = page.context as any\n        const title = context?.title || context?.search?.placeholder || ''\n\n        return html`\n          <div @click=${() => this.moveTo(page)} ?active=${this.activePage === page}>\n            ${title}\n            <mwc-icon\n              @click=${(e: MouseEvent) => {\n                e.stopPropagation()\n                this.closePage(page, idx)\n              }}\n              >close</mwc-icon\n            >\n          </div>\n        `\n      })}\n    `\n  }\n\n  updated(changed) {\n    if (changed.has('activePage')) {\n      const page = this.activePage\n\n      if (!this.pages) {\n        this.pages = []\n      }\n\n      if (!this.pages.includes(page)) {\n        this.pages = [...this.pages, page]\n      }\n    }\n  }\n\n  stateChanged(state) {\n    const { context, activePage } = state.route || {}\n    this.activePage = activePage\n\n    /* refresh를 일으키기위한 property 변경을 위한 코드임. */\n    this.title = context.title || context.search?.placeholder\n  }\n\n  getHomeRoute() {\n    var base = document.querySelector('base')\n    return base?.getAttribute('href') || '/'\n  }\n\n  moveTo(page: PageView) {\n    navigate(page.getAttribute('data-page')!)\n  }\n\n  closePage(page: PageView, idx: number) {\n    this.pages = [...this.pages.slice(0, idx), ...this.pages.slice(idx + 1)]\n\n    page.parentNode?.removeChild(page)\n    page.pageDispose()\n\n    if (this.activePage === page) {\n      const next = this.pages.length > 0 ? Math.max(0, idx - 1) : -1\n      navigate(next != -1 ? this.pages[next].getAttribute('data-page')! : this.getHomeRoute())\n    }\n  }\n}\n"]}

package/dist-client/layout/app-toolbar.d.ts

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

package/dist-client/layout/app-toolbar.js

@@ -0,0 +1,123 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import { css, html, LitElement } from 'lit';
+import { customElement, query, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { TOOL_POSITION } from '@operato/layout';
+import { navigate, store } from '@operato/shell';
+let AppToolbar = class AppToolbar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this._tools = [];
+    }
+    render() {
+        var tools = this._tools || [];
+        var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END);
+        var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT);
+        var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER);
+        var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR);
+        var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END);
+        /* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */
+        var state = history.state;
+        var overlay = (state || {}).overlay;
+        return html `
+      ${overlay
+            ? html ` <mwc-icon @click=${e => history.back()}>arrow_back</mwc-icon> `
+            : frontEndTools.length == 0
+                ? html ` <mwc-icon @click=${e => this.navigateToHome()}>home</mwc-icon> `
+                : frontEndTools.map(tool => html ` ${tool.template} `)}
+      ${frontTools.map(tool => html ` ${tool.template} `)}
+
+      <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html ` ${tool.template} `)}</div>
+
+      ${rearTools.map(tool => html ` ${tool.template} `)} ${rearEndTools.map(tool => html ` ${tool.template} `)}
+    `;
+    }
+    stateChanged(state) {
+        /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
+        this._route = state.route;
+        this._tools = state.apptool.tools;
+    }
+    navigateToHome() {
+        var base = document.querySelector('base');
+        if (base) {
+            navigate(base.getAttribute('href') || '');
+        }
+        else {
+            navigate('/');
+        }
+    }
+    onWheelEvent(e) {
+        const center = e.currentTarget;
+        var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail));
+        center.scrollLeft -= delta * 10;
+        e.preventDefault();
+    }
+};
+AppToolbar.styles = [
+    css `
+      :host {
+        display: flex;
+        height: var(--header-bar-height, 45px);
+        color: var(--header-bar-color);
+        background-color: var(--header-bar-background-color, white);
+        justify-content: space-between;
+        align-items: center;
+        padding: 0 5px;
+
+        text-transform: capitalize;
+      }
+
+      :host > * {
+        margin: var(--header-bar-item-padding);
+      }
+
+      [center] {
+        flex: 1;
+        flex-wrap: nowrap;
+        display: flex;
+        align-items: center;
+        overflow: hidden;
+      }
+
+      [center] > * {
+        margin: auto;
+      }
+
+      :host(.vline) {
+        display: block;
+        flex: none;
+        border-left: 1px solid rgba(255, 255, 255, 0.07);
+        border-right: 1px solid rgba(0, 0, 0, 0.1);
+        width: 0px;
+        height: 18px;
+        margin: 0 4px;
+      }
+
+      :host(label) {
+        margin-right: 5px;
+        color: #fff;
+        font-size: 20px;
+      }
+
+      span.space {
+        width: 10px;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], AppToolbar.prototype, "_tools", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", Object)
+], AppToolbar.prototype, "_route", void 0);
+__decorate([
+    query('[center]'),
+    __metadata("design:type", HTMLDivElement)
+], AppToolbar.prototype, "center", void 0);
+AppToolbar = __decorate([
+    customElement('app-toolbar')
+], AppToolbar);
+//# sourceMappingURL=app-toolbar.js.map

package/dist-client/layout/app-toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-toolbar.js","sourceRoot":"","sources":["../../client/layout/app-toolbar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, query, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { TOOL_POSITION } from '@operato/layout'\nimport { navigate, store } from '@operato/shell'\n\n@customElement('app-toolbar')\nclass AppToolbar extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        height: var(--header-bar-height, 45px);\n        color: var(--header-bar-color);\n        background-color: var(--header-bar-background-color, white);\n        justify-content: space-between;\n        align-items: center;\n        padding: 0 5px;\n\n        text-transform: capitalize;\n      }\n\n      :host > * {\n        margin: var(--header-bar-item-padding);\n      }\n\n      [center] {\n        flex: 1;\n        flex-wrap: nowrap;\n        display: flex;\n        align-items: center;\n        overflow: hidden;\n      }\n\n      [center] > * {\n        margin: auto;\n      }\n\n      :host(.vline) {\n        display: block;\n        flex: none;\n        border-left: 1px solid rgba(255, 255, 255, 0.07);\n        border-right: 1px solid rgba(0, 0, 0, 0.1);\n        width: 0px;\n        height: 18px;\n        margin: 0 4px;\n      }\n\n      :host(label) {\n        margin-right: 5px;\n        color: #fff;\n        font-size: 20px;\n      }\n\n      span.space {\n        width: 10px;\n      }\n    `\n  ]\n\n  @state() _tools: { position: string; template: TemplateResult }[] = []\n  @state() _route: any\n\n  @query('[center]') center!: HTMLDivElement\n\n  render() {\n    var tools = this._tools || ([] as { position: string; template: TemplateResult }[])\n\n    var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)\n    var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)\n    var centerTools = tools.filter(tool => tool.position == TOOL_POSITION.CENTER)\n    var rearTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR)\n    var rearEndTools = tools.filter(tool => tool.position == TOOL_POSITION.REAR_END)\n\n    /* 현재 OVERLAY가 있으면, 뒤로가기 버튼이 보이고, 아니면, HOME 버튼이 보인다. */\n    var state = history.state\n    var overlay = (state || {}).overlay\n\n    return html`\n      ${overlay\n        ? html` <mwc-icon @click=${e => history.back()}>arrow_back</mwc-icon> `\n        : frontEndTools.length == 0\n        ? html` <mwc-icon @click=${e => this.navigateToHome()}>home</mwc-icon> `\n        : frontEndTools.map(tool => html` ${tool.template} `)}\n      ${frontTools.map(tool => html` ${tool.template} `)}\n\n      <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>\n\n      ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}\n    `\n  }\n\n  stateChanged(state) {\n    /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */\n    this._route = state.route\n\n    this._tools = state.apptool.tools\n  }\n\n  navigateToHome() {\n    var base = document.querySelector('base')\n    if (base) {\n      navigate(base.getAttribute('href') || '')\n    } else {\n      navigate('/')\n    }\n  }\n\n  onWheelEvent(e) {\n    const center = e.currentTarget\n    var delta = Math.max(-1, Math.min(1, e.wheelDelta || -e.detail))\n    center.scrollLeft -= delta * 10\n\n    e.preventDefault()\n  }\n}\n"]}

package/dist-client/layout/page-mdibar.d.ts

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

package/dist-client/layout/page-mdibar.js

@@ -0,0 +1,136 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import { css, html, LitElement } from 'lit';
+import { customElement, state } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin.js';
+import { navigate, store, PageView } from '@operato/shell';
+let PageMDIBar = class PageMDIBar extends connect(store)(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.pages = [];
+        this.title = '';
+    }
+    render() {
+        const pages = this.pages || [];
+        return html `
+      <div home><mwc-icon>home</mwc-icon></div>
+
+      ${pages.map((page, idx) => {
+            var _a;
+            const context = page.context;
+            const title = (context === null || context === void 0 ? void 0 : context.title) || ((_a = context === null || context === void 0 ? void 0 : context.search) === null || _a === void 0 ? void 0 : _a.placeholder) || '';
+            return html `
+          <div @click=${() => this.moveTo(page)} ?active=${this.activePage === page}>
+            ${title}
+            <mwc-icon
+              @click=${(e) => {
+                e.stopPropagation();
+                this.closePage(page, idx);
+            }}
+              >close</mwc-icon
+            >
+          </div>
+        `;
+        })}
+    `;
+    }
+    updated(changed) {
+        if (changed.has('activePage')) {
+            const page = this.activePage;
+            if (!this.pages) {
+                this.pages = [];
+            }
+            if (!this.pages.includes(page)) {
+                this.pages = [...this.pages, page];
+            }
+        }
+    }
+    stateChanged(state) {
+        var _a;
+        const { context, activePage } = state.route || {};
+        this.activePage = activePage;
+        /* refresh를 일으키기위한 property 변경을 위한 코드임. */
+        this.title = context.title || ((_a = context.search) === null || _a === void 0 ? void 0 : _a.placeholder);
+    }
+    getHomeRoute() {
+        var base = document.querySelector('base');
+        return (base === null || base === void 0 ? void 0 : base.getAttribute('href')) || '/';
+    }
+    moveTo(page) {
+        navigate(page.getAttribute('data-page'));
+    }
+    closePage(page, idx) {
+        var _a;
+        this.pages = [...this.pages.slice(0, idx), ...this.pages.slice(idx + 1)];
+        (_a = page.parentNode) === null || _a === void 0 ? void 0 : _a.removeChild(page);
+        page.pageDispose();
+        if (this.activePage === page) {
+            const next = this.pages.length > 0 ? Math.max(0, idx - 1) : -1;
+            navigate(next != -1 ? this.pages[next].getAttribute('data-page') : this.getHomeRoute());
+        }
+    }
+};
+PageMDIBar.styles = [
+    css `
+      :host {
+        display: flex;
+        background-color: var(--main-section-background-color);
+        color: var(--mdibar-color, rgba(0, 0, 0, 0.7));
+        font-size: var(--fontsize-small);
+      }
+
+      div {
+        display: inline-block;
+        position: relative;
+        max-width: var(--mdibar-max-width, 120px);
+        padding: var(--mdibar-padding, 3px 22px 0 5px);
+        border-right: var(--border-dark-color);
+        border-bottom: var(--border-dark-color);
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+      }
+
+      mwc-icon {
+        position: absolute;
+        right: 2px;
+        top: 3px;
+        margin-left: var(--margin-narrow);
+        font-size: var(--mdibar-icon-size, 18px);
+        opacity: 0.5;
+      }
+      mwc-icon:hover {
+        opacity: 0.8;
+        color: var(--mdibar-hover-color, #cc3300);
+      }
+
+      [active] {
+        background-color: var(--mdibar-background-color, #fff);
+        border-bottom: 1px solid var(--mdibar-background-color, #fff);
+        color: var(--primary-text-color);
+        font-weight: bold;
+      }
+      [home] {
+        padding: var(--mdibar-padding-home, 3px 5px 0 23px);
+      }
+      [home] mwc-icon {
+        left: 0;
+      }
+    `
+];
+__decorate([
+    state(),
+    __metadata("design:type", Array)
+], PageMDIBar.prototype, "pages", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", PageView)
+], PageMDIBar.prototype, "activePage", void 0);
+__decorate([
+    state(),
+    __metadata("design:type", String)
+], PageMDIBar.prototype, "title", void 0);
+PageMDIBar = __decorate([
+    customElement('page-mdibar')
+], PageMDIBar);
+//# sourceMappingURL=page-mdibar.js.map

package/dist-client/layout/page-mdibar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"page-mdibar.js","sourceRoot":"","sources":["../../client/layout/page-mdibar.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\nimport { connect } from 'pwa-helpers/connect-mixin.js'\n\nimport { navigate, store, PageView } from '@operato/shell'\n\n@customElement('page-mdibar')\nclass PageMDIBar extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: var(--main-section-background-color);\n        color: var(--mdibar-color, rgba(0, 0, 0, 0.7));\n        font-size: var(--fontsize-small);\n      }\n\n      div {\n        display: inline-block;\n        position: relative;\n        max-width: var(--mdibar-max-width, 120px);\n        padding: var(--mdibar-padding, 3px 22px 0 5px);\n        border-right: var(--border-dark-color);\n        border-bottom: var(--border-dark-color);\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      mwc-icon {\n        position: absolute;\n        right: 2px;\n        top: 3px;\n        margin-left: var(--margin-narrow);\n        font-size: var(--mdibar-icon-size, 18px);\n        opacity: 0.5;\n      }\n      mwc-icon:hover {\n        opacity: 0.8;\n        color: var(--mdibar-hover-color, #cc3300);\n      }\n\n      [active] {\n        background-color: var(--mdibar-background-color, #fff);\n        border-bottom: 1px solid var(--mdibar-background-color, #fff);\n        color: var(--primary-text-color);\n        font-weight: bold;\n      }\n      [home] {\n        padding: var(--mdibar-padding-home, 3px 5px 0 23px);\n      }\n      [home] mwc-icon {\n        left: 0;\n      }\n    `\n  ]\n\n  @state() pages: PageView[] = []\n  @state() activePage!: PageView\n  @state() title: string = ''\n\n  render() {\n    const pages = this.pages || []\n\n    return html`\n      <div home><mwc-icon>home</mwc-icon></div>\n\n      ${pages.map((page, idx) => {\n        const context = page.context as any\n        const title = context?.title || context?.search?.placeholder || ''\n\n        return html`\n          <div @click=${() => this.moveTo(page)} ?active=${this.activePage === page}>\n            ${title}\n            <mwc-icon\n              @click=${(e: MouseEvent) => {\n                e.stopPropagation()\n                this.closePage(page, idx)\n              }}\n              >close</mwc-icon\n            >\n          </div>\n        `\n      })}\n    `\n  }\n\n  updated(changed) {\n    if (changed.has('activePage')) {\n      const page = this.activePage\n\n      if (!this.pages) {\n        this.pages = []\n      }\n\n      if (!this.pages.includes(page)) {\n        this.pages = [...this.pages, page]\n      }\n    }\n  }\n\n  stateChanged(state) {\n    const { context, activePage } = state.route || {}\n    this.activePage = activePage\n\n    /* refresh를 일으키기위한 property 변경을 위한 코드임. */\n    this.title = context.title || context.search?.placeholder\n  }\n\n  getHomeRoute() {\n    var base = document.querySelector('base')\n    return base?.getAttribute('href') || '/'\n  }\n\n  moveTo(page: PageView) {\n    navigate(page.getAttribute('data-page')!)\n  }\n\n  closePage(page: PageView, idx: number) {\n    this.pages = [...this.pages.slice(0, idx), ...this.pages.slice(idx + 1)]\n\n    page.parentNode?.removeChild(page)\n    page.pageDispose()\n\n    if (this.activePage === page) {\n      const next = this.pages.length > 0 ? Math.max(0, idx - 1) : -1\n      navigate(next != -1 ? this.pages[next].getAttribute('data-page')! : this.getHomeRoute())\n    }\n  }\n}\n"]}

package/dist-client/layout/page-toolbar.d.ts

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