@things-factory/apptool-ui 6.1.48 → 6.1.67

package/client/bootstrap.ts

@@ -0,0 +1,34 @@
+// import './layout/app-toolbar'
+// import './layout/app-busybar'
+// import './mdibar-setting-let'
+
+// import { html } from 'lit-html'
+
+// import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
+
+export default function bootstrap() {
+  // appendViewpart({
+  //   name: 'apptoolbar',
+  //   viewpart: {
+  //     show: true,
+  //     template: html` <app-toolbar></app-toolbar> `
+  //   },
+  //   position: VIEWPART_POSITION.HEADERBAR
+  // })
+  // appendViewpart({
+  //   name: 'appbusybar',
+  //   viewpart: {
+  //     show: true,
+  //     template: html` <app-busybar></app-busybar> `
+  //   },
+  //   position: VIEWPART_POSITION.HEADERBAR
+  // })
+  // appendViewpart({
+  //   name: 'appmdibar',
+  //   viewpart: {
+  //     show: false,
+  //     template: html` <app-mdibar></app-mdibar> `
+  //   },
+  //   position: VIEWPART_POSITION.HEADERBAR
+  // })
+}

package/client/index.ts

@@ -0,0 +1,64 @@
+import './layout/app-toolbar'
+import './layout/app-busybar'
+import './layout/app-mdibar'
+import './mdibar-setting-let'
+
+import { html } from 'lit-html'
+
+import { store, clientSettingStore } from '@operato/shell'
+import { appendViewpart, VIEWPART_POSITION } 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
+}: {
+  toolbar?: boolean
+  busybar?: boolean
+  mdibar?: boolean
+}) {
+  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 = ((await clientSettingStore.get('mdibar'))?.value || {}).show
+
+    appendViewpart({
+      name: 'appmdibar',
+      viewpart: {
+        show,
+        template: html` <app-mdibar></app-mdibar> `
+      },
+      position: VIEWPART_POSITION.HEADERBAR
+    })
+
+    store.dispatch({
+      type: ADD_SETTING,
+      setting: {
+        seq: 21,
+        template: html` <mdibar-setting-let></mdibar-setting-let> `
+      }
+    })
+  }
+}

package/client/layout/app-busybar.ts

@@ -0,0 +1,48 @@
+import '@material/mwc-linear-progress'
+
+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 '@operato/shell'
+
+@customElement('app-busybar')
+class AppBusyBar extends connect(store)(LitElement) {
+  static styles = [
+    css`
+      :host {
+        display: flex;
+      }
+
+      mwc-linear-progress {
+        flex: 1;
+        height: 2px;
+      }
+    `
+  ]
+
+  @state() private busy?: Boolean
+  @state() private lastState?: boolean
+  @state() private timeout?: any
+
+  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)
+    }
+  }
+}

package/client/layout/app-mdibar.ts

@@ -0,0 +1,132 @@
+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'
+
+@customElement('app-mdibar')
+class AppMDIBar extends connect(store)(LitElement) {
+  static 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;
+      }
+    `
+  ]
+
+  @state() pages: PageView[] = []
+  @state() activePage!: PageView
+  @state() title: string = ''
+
+  render() {
+    const pages = this.pages || []
+
+    return html`
+      <div home><mwc-icon>home</mwc-icon></div>
+
+      ${pages.map((page, idx) => {
+        const context = page.context as any
+        const title = context?.title || context?.search?.placeholder || ''
+
+        return html`
+          <div @click=${() => this.moveTo(page)} ?active=${this.activePage === page}>
+            ${title}
+            <mwc-icon
+              @click=${(e: MouseEvent) => {
+                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) {
+    const { context, activePage } = state.route || {}
+    this.activePage = activePage
+
+    /* refresh를 일으키기위한 property 변경을 위한 코드임. */
+    this.title = context.title || context.search?.placeholder
+  }
+
+  getHomeRoute() {
+    var base = document.querySelector('base')
+    return base?.getAttribute('href') || '/'
+  }
+
+  moveTo(page: PageView) {
+    navigate(page.getAttribute('data-page')!)
+  }
+
+  closePage(page: PageView, idx: number) {
+    this.pages = [...this.pages.slice(0, idx), ...this.pages.slice(idx + 1)]
+
+    page.parentNode?.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())
+    }
+  }
+}

package/client/layout/{app-toolbar.js → app-toolbar.ts}

@@ -1,75 +1,73 @@
 import '@material/mwc-icon'
 
-import { css, html, LitElement } from 'lit'
+import { css, html, LitElement, TemplateResult } 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 '@things-factory/shell'
+import { navigate, store } from '@operato/shell'
 
+@customElement('app-toolbar')
 class AppToolbar extends connect(store)(LitElement) {
-  static get properties() {
-    return {
-      _tools: Array,
-      _route: Object
-    }
-  }
+  static 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;
+      }
+    `
+  ]
 
-  static get styles() {
-    return [
-      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;
-        }
-      `
-    ]
-  }
+  @state() _tools: { position: string; template: TemplateResult }[] = []
+  @state() _route: any
+
+  @query('[center]') center!: HTMLDivElement
 
   render() {
-    var tools = this._tools || []
+    var tools = this._tools || ([] as { position: string; template: TemplateResult }[])
 
     var frontEndTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT_END)
     var frontTools = tools.filter(tool => tool.position == TOOL_POSITION.FRONT)
@@ -89,17 +87,12 @@ class AppToolbar extends connect(store)(LitElement) {
         : frontEndTools.map(tool => html` ${tool.template} `)}
       ${frontTools.map(tool => html` ${tool.template} `)}
 
-      <div center>${centerTools.map(tool => html` ${tool.template} `)}</div>
+      <div center @mousewheel=${this.onWheelEvent}>${centerTools.map(tool => html` ${tool.template} `)}</div>
 
       ${rearTools.map(tool => html` ${tool.template} `)} ${rearEndTools.map(tool => html` ${tool.template} `)}
     `
   }
 
-  firstUpdated() {
-    const center = this.renderRoot.querySelector('[center]')
-    center.addEventListener('mousewheel', this.onWheelEvent.bind(this), false)
-  }
-
   stateChanged(state) {
     /* page의 변화를 감지하기 위해서 route의 변화를 체크한다. */
     this._route = state.route
@@ -110,7 +103,7 @@ class AppToolbar extends connect(store)(LitElement) {
   navigateToHome() {
     var base = document.querySelector('base')
     if (base) {
-      navigate(base.getAttribute('href'))
+      navigate(base.getAttribute('href') || '')
     } else {
       navigate('/')
     }
@@ -124,5 +117,3 @@ class AppToolbar extends connect(store)(LitElement) {
     e.preventDefault()
   }
 }
-
-customElements.define('app-toolbar', AppToolbar)

package/client/mdibar-setting-let.ts

@@ -0,0 +1,64 @@
+import '@material/mwc-formfield'
+import '@material/mwc-checkbox'
+import '@operato/i18n/ox-i18n.js'
+
+import { css, html, LitElement } from 'lit'
+import { customElement, property, state } from 'lit/decorators.js'
+
+import { i18next, localize } from '@operato/i18n'
+import { clientSettingStore } from '@operato/shell'
+import { updateViewpart } from '@operato/layout'
+
+@customElement('mdibar-setting-let')
+export class MDIBarSettingLet extends localize(i18next)(LitElement) {
+  static styles = [
+    css`
+      label {
+        font: var(--label-font);
+        color: var(--label-color);
+        text-transform: var(--label-text-transform);
+      }
+    `
+  ]
+
+  @property({ type: Boolean }) show: boolean = false
+
+  render() {
+    const checked = this.show === true
+
+    return html`
+      <setting-let>
+        <ox-i18n slot="title" msgid="title.mdibar setting"></ox-i18n>
+
+        <div slot="content">
+          <mwc-formfield label=${i18next.t('label.show')}>
+            <mwc-checkbox @change=${e => this.onChangeShowMDIBar(e)} ?checked=${checked}></mwc-checkbox>
+          </mwc-formfield>
+        </div>
+      </setting-let>
+    `
+  }
+
+  async firstUpdated() {
+    this.show = ((await clientSettingStore.get('mdibar'))?.value || {}).show
+  }
+
+  async onChangeShowMDIBar(e) {
+    const show = e.currentTarget.checked
+
+    try {
+      await clientSettingStore.put({
+        key: 'mdibar',
+        value: {
+          show
+        }
+      })
+    } catch (e) {
+      console.error(e)
+    }
+
+    updateViewpart('appmdibar', {
+      show
+    })
+  }
+}

package/dist-client/bootstrap.d.ts

@@ -0,0 +1 @@
+export default function bootstrap(): void;

package/dist-client/bootstrap.js

@@ -0,0 +1,32 @@
+// import './layout/app-toolbar'
+// import './layout/app-busybar'
+// import './mdibar-setting-let'
+// import { html } from 'lit-html'
+// import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'
+export default function bootstrap() {
+    // appendViewpart({
+    //   name: 'apptoolbar',
+    //   viewpart: {
+    //     show: true,
+    //     template: html` <app-toolbar></app-toolbar> `
+    //   },
+    //   position: VIEWPART_POSITION.HEADERBAR
+    // })
+    // appendViewpart({
+    //   name: 'appbusybar',
+    //   viewpart: {
+    //     show: true,
+    //     template: html` <app-busybar></app-busybar> `
+    //   },
+    //   position: VIEWPART_POSITION.HEADERBAR
+    // })
+    // appendViewpart({
+    //   name: 'appmdibar',
+    //   viewpart: {
+    //     show: false,
+    //     template: html` <app-mdibar></app-mdibar> `
+    //   },
+    //   position: VIEWPART_POSITION.HEADERBAR
+    // })
+}
+//# sourceMappingURL=bootstrap.js.map

package/dist-client/bootstrap.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"bootstrap.js","sourceRoot":"","sources":["../client/bootstrap.ts"],"names":[],"mappings":"AAAA,gCAAgC;AAChC,gCAAgC;AAChC,gCAAgC;AAEhC,kCAAkC;AAElC,sEAAsE;AAEtE,MAAM,CAAC,OAAO,UAAU,SAAS;IAC/B,mBAAmB;IACnB,wBAAwB;IACxB,gBAAgB;IAChB,kBAAkB;IAClB,oDAAoD;IACpD,OAAO;IACP,0CAA0C;IAC1C,KAAK;IACL,mBAAmB;IACnB,wBAAwB;IACxB,gBAAgB;IAChB,kBAAkB;IAClB,oDAAoD;IACpD,OAAO;IACP,0CAA0C;IAC1C,KAAK;IACL,mBAAmB;IACnB,uBAAuB;IACvB,gBAAgB;IAChB,mBAAmB;IACnB,kDAAkD;IAClD,OAAO;IACP,0CAA0C;IAC1C,KAAK;AACP,CAAC","sourcesContent":["// import './layout/app-toolbar'\n// import './layout/app-busybar'\n// import './mdibar-setting-let'\n\n// import { html } from 'lit-html'\n\n// import { appendViewpart, VIEWPART_POSITION } from '@operato/layout'\n\nexport default function bootstrap() {\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  // appendViewpart({\n  //   name: 'appbusybar',\n  //   viewpart: {\n  //     show: true,\n  //     template: html` <app-busybar></app-busybar> `\n  //   },\n  //   position: VIEWPART_POSITION.HEADERBAR\n  // })\n  // appendViewpart({\n  //   name: 'appmdibar',\n  //   viewpart: {\n  //     show: false,\n  //     template: html` <app-mdibar></app-mdibar> `\n  //   },\n  //   position: VIEWPART_POSITION.HEADERBAR\n  // })\n}\n"]}

package/dist-client/index.d.ts

@@ -0,0 +1,9 @@
+import './layout/app-toolbar';
+import './layout/app-busybar';
+import './layout/app-mdibar';
+import './mdibar-setting-let';
+export declare function setupAppToolPart({ toolbar, busybar, mdibar }: {
+    toolbar?: boolean;
+    busybar?: boolean;
+    mdibar?: boolean;
+}): Promise<void>;

package/dist-client/index.js

@@ -0,0 +1,51 @@
+import './layout/app-toolbar';
+import './layout/app-busybar';
+import './layout/app-mdibar';
+import './mdibar-setting-let';
+import { html } from 'lit-html';
+import { store, clientSettingStore } from '@operato/shell';
+import { appendViewpart, VIEWPART_POSITION } 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 }) {
+    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,
+                template: html ` <app-mdibar></app-mdibar> `
+            },
+            position: VIEWPART_POSITION.HEADERBAR
+        });
+        store.dispatch({
+            type: ADD_SETTING,
+            setting: {
+                seq: 21,
+                template: html ` <mdibar-setting-let></mdibar-setting-let> `
+            }
+        });
+    }
+}
+//# 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,qBAAqB,CAAA;AAC5B,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,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAA;AACnE,OAAO,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAA;AAC/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,EAKd;;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,QAAQ,EAAE,IAAI,CAAA,6BAA6B;aAC5C;YACD,QAAQ,EAAE,iBAAiB,CAAC,SAAS;SACtC,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;AACH,CAAC","sourcesContent":["import './layout/app-toolbar'\nimport './layout/app-busybar'\nimport './layout/app-mdibar'\nimport './mdibar-setting-let'\n\nimport { html } from 'lit-html'\n\nimport { store, clientSettingStore } from '@operato/shell'\nimport { appendViewpart, VIEWPART_POSITION } from '@operato/layout'\nimport { isMobileDevice } from '@operato/utils'\nimport { ADD_SETTING } from '@things-factory/setting-base'\n\nexport async function setupAppToolPart({\n  toolbar = true,\n  busybar = true,\n  mdibar = true\n}: {\n  toolbar?: boolean\n  busybar?: boolean\n  mdibar?: 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        template: html` <app-mdibar></app-mdibar> `\n      },\n      position: VIEWPART_POSITION.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"]}

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"]}