@things-factory/organization 7.0.0-alpha.8 → 7.0.0

package/client/grist-editor/grist-editor-approval-line.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../component/approval-line-items-editor-popup.js'
 
 import { html, TemplateResult } from 'lit'
@@ -17,8 +18,8 @@ export class GristEditorApprovalLine extends OxGristEditor {
     return !value || !(value instanceof Array) || value.length == 0
       ? html``
       : value.length == 1
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-      : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
   }
 
   _onclick(e: Event): void {
@@ -58,13 +59,7 @@ export class GristEditorApprovalLine extends OxGristEditor {
     var value = this.value || []
 
     var template =
-      this.template ||
-      html`
-        <approval-line-items-editor-popup
-          .value=${value}
-          .confirmCallback=${confirmCallback.bind(this)}
-        ></approval-line-items-editor-popup>
-      `
+      this.template || html` <approval-line-items-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></approval-line-items-editor-popup> `
 
     this.popup = openPopup(template, {
       backdrop: true,

package/client/grist-editor/grist-editor-assignees.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../component/assignees-editor-popup.js'
 
 import { html, TemplateResult } from 'lit'
@@ -17,8 +18,8 @@ export class GristEditorAssignees extends OxGristEditor {
     return !value || !(value instanceof Array) || value.length == 0
       ? html``
       : value.length == 1
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-      : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
   }
 
   _onclick(e: Event): void {
@@ -57,11 +58,7 @@ export class GristEditorAssignees extends OxGristEditor {
 
     var value = this.value || []
 
-    var template =
-      this.template ||
-      html`
-        <assignees-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></assignees-editor-popup>
-      `
+    var template = this.template || html` <assignees-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></assignees-editor-popup> `
 
     this.popup = openPopup(template, {
       backdrop: true,

package/client/grist-editor/grist-editor-recipients.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '../component/recipients-editor-popup.js'
 
 import { html, TemplateResult } from 'lit'
@@ -17,8 +18,8 @@ export class GristEditorRecipients extends OxGristEditor {
     return !value || !(value instanceof Array) || value.length == 0
       ? html``
       : value.length == 1
-      ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-      : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+      ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+      : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
   }
 
   _onclick(e: Event): void {
@@ -57,14 +58,7 @@ export class GristEditorRecipients extends OxGristEditor {
 
     var value = this.value || []
 
-    var template =
-      this.template ||
-      html`
-        <recipients-editor-popup
-          .value=${value}
-          .confirmCallback=${confirmCallback.bind(this)}
-        ></recipients-editor-popup>
-      `
+    var template = this.template || html` <recipients-editor-popup .value=${value} .confirmCallback=${confirmCallback.bind(this)}></recipients-editor-popup> `
 
     this.popup = openPopup(template, {
       backdrop: true,

package/client/grist-editor/grist-renderer-approval-line.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+
 import { html } from 'lit-html'
 
 import { FieldRenderer } from '@operato/data-grist'
@@ -7,6 +8,6 @@ export const GristRendererApprovalLine: FieldRenderer = (value, column, record,
   return !value || !(value instanceof Array) || value.length == 0
     ? html``
     : value.length == 1
-    ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-    : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
 }

package/client/grist-editor/grist-renderer-assignees.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+
 import { html } from 'lit-html'
 
 import { FieldRenderer } from '@operato/data-grist'
@@ -7,6 +8,6 @@ export const GristRendererAssignees: FieldRenderer = (value, column, record, row
   return !value || !(value instanceof Array) || value.length == 0
     ? html``
     : value.length == 1
-    ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-    : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
 }

package/client/grist-editor/grist-renderer-recipients.ts

@@ -1,4 +1,5 @@
-import '@material/mwc-icon'
+import '@material/web/icon/icon.js'
+
 import { html } from 'lit-html'
 
 import { FieldRenderer } from '@operato/data-grist'
@@ -7,6 +8,6 @@ export const GristRendererRecipients: FieldRenderer = (value, column, record, ro
   return !value || !(value instanceof Array) || value.length == 0
     ? html``
     : value.length == 1
-    ? html`<mwc-icon style="--mdc-icon-size:1.3em">person</mwc-icon>`
-    : html`<mwc-icon style="--mdc-icon-size:1.3em">group</mwc-icon>`
+    ? html`<md-icon style="--md-icon-size:1.3em">person</md-icon>`
+    : html`<md-icon style="--md-icon-size:1.3em">group</md-icon>`
 }

package/client/pages/approval-line/common-approval-line-templates-page.ts

@@ -67,7 +67,10 @@ export class CommonApprovalLineTemplatesPage extends connect(store)(localize(i18
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.deleteApprovalLines.bind(this)
+          action: this.deleteApprovalLines.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -80,10 +83,7 @@ export class CommonApprovalLineTemplatesPage extends connect(store)(localize(i18
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.common-approval-line template list')}
-          </div>
+          <div class="title">${i18next.t('title.common-approval-line template list')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>

package/client/pages/approval-line/my-approval-line-templates-page.ts

@@ -67,7 +67,10 @@ export class MyApprovalLineTemplatesPage extends connect(store)(localize(i18next
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.deleteApprovalLines.bind(this)
+          action: this.deleteApprovalLines.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       toolbar: false
@@ -80,10 +83,7 @@ export class MyApprovalLineTemplatesPage extends connect(store)(localize(i18next
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.my-approval-line template list')}
-          </div>
+          <div class="title">${i18next.t('title.my-approval-line template list')}</div>
 
           <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
         </div>
@@ -118,6 +118,8 @@ export class MyApprovalLineTemplatesPage extends connect(store)(localize(i18next
                     .confirmCallback=${async model => {
                       await this.updateApprovalLine(id, model)
                       await this.grist.fetch()
+
+                      return false
                     }}
                     .value=${model}
                   ></approval-line-items-editor-popup>

package/client/pages/department/department-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,30 +8,22 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class DepartmentImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -60,21 +53,18 @@ export class DepartmentImporter extends LitElement {
     ]
   }
 
-
   render() {
     return html`
       <ox-grist
         .mode=${isMobileDevice() ? 'LIST' : 'GRID'}
         .config=${this.columns}
-        .data=${
-          { 
-            records: this.departments 
-          }
-        }
+        .data=${{
+          records: this.departments
+        }}
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }
@@ -94,4 +84,3 @@ export class DepartmentImporter extends LitElement {
     this.dispatchEvent(new CustomEvent('imported'))
   }
 }
-

package/client/pages/department/department-list-page.ts

@@ -100,7 +100,10 @@ export class DepartmentListPage extends connect(store)(localize(i18next)(ScopedE
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.delete.bind(this)
+          action: this.delete.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ].filter(Boolean),
       toolbar: false
@@ -115,10 +118,7 @@ export class DepartmentListPage extends connect(store)(localize(i18next)(ScopedE
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.department list')}
-          </div>
+          <div class="title">${i18next.t('title.department list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>

package/client/pages/department/department-tree-page.ts

@@ -2,7 +2,7 @@ import '@operato/data-tree'
 import '@operato/context/ox-context-page-toolbar.js'
 
 import { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'
-import { PageView, store } from '@operato/shell'
+import { CustomAlert, PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query, state } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
@@ -105,7 +105,10 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this.delete.bind(this)
+          action: this.delete.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ].filter(Boolean),
       exportable: {
@@ -122,15 +125,17 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
   render() {
     return html`
       <div class="header">
-        <div class="title">
-          <mwc-icon>summarize</mwc-icon>
-          ${i18next.t('title.department list')}
-        </div>
+        <div class="title">${i18next.t('title.department list')}</div>
 
         <ox-context-page-toolbar class="actions" .context=${this.context}></ox-context-page-toolbar>
       </div>
 
-      <ox-tree-vertical .data=${this.root} .selected=${this.selected} @select=${this.onSelect.bind(this)} label-property="name"></ox-tree-vertical>
+      <ox-tree-vertical
+        .data=${this.root}
+        .selected=${this.selected}
+        @select=${this.onSelect.bind(this)}
+        label-property="name"
+      ></ox-tree-vertical>
 
       <department-view .department=${this.selected}></department-view>
     `
@@ -193,7 +198,14 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
     const { id, controlNo, name, description, picture, active, manager } = this.departmentView.department
 
     if (!id) {
-      alert('Please select department first.')
+      await CustomAlert({
+        type: 'warning',
+        title: 'department not selected',
+        text: 'Please select department first.',
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+
+      return
     }
 
     var patch = {
@@ -234,12 +246,26 @@ export class DepartmentTreePage extends connect(store)(localize(i18next)(ScopedE
 
   async delete() {
     if (!this.selected) {
-      alert('select department first.')
+      await CustomAlert({
+        type: 'warning',
+        title: 'department not selected',
+        text: 'Please select department first.',
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+
+      return
     }
 
     const children = this.selected?.children
     if (children && children.length > 0) {
-      alert('Department having children cannot be deleted.')
+      await CustomAlert({
+        type: 'warning',
+        title: 'Departments with subordinates cannot be deleted.',
+        text: 'Department having children cannot be deleted.',
+        confirmButton: { text: i18next.t('button.confirm') }
+      })
+
+      return
     }
 
     if (confirm(i18next.t('text.sure_to_x', { x: i18next.t('text.delete') }))) {

package/client/pages/employee/employee-importer.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js'
 import '@operato/data-grist'
 
 import gql from 'graphql-tag'
@@ -7,30 +8,22 @@ import { property } from 'lit/decorators.js'
 import { client } from '@operato/graphql'
 import { i18next } from '@operato/i18n'
 import { isMobileDevice } from '@operato/utils'
+import { ButtonContainerStyles } from '@operato/styles'
 
 export class EmployeeImporter extends LitElement {
   static styles = [
+    ButtonContainerStyles,
     css`
       :host {
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       ox-grist {
         flex: 1;
       }
-
-      .button-container {
-        display: flex;
-        margin-left: auto;
-        padding: var(--padding-default);
-      }
-
-      mwc-button {
-        margin-left: var(--margin-default);
-      }
     `
   ]
 
@@ -71,7 +64,7 @@ export class EmployeeImporter extends LitElement {
       ></ox-grist>
 
       <div class="button-container">
-        <mwc-button raised @click="${this.save.bind(this)}">${i18next.t('button.save')}</mwc-button>
+        <button @click="${this.save.bind(this)}"><md-icon>save</md-icon>${i18next.t('button.save')}</button>
       </div>
     `
   }

package/client/pages/employee/employee-list-page.ts

@@ -76,7 +76,10 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
         {
           icon: 'delete',
           title: i18next.t('button.delete'),
-          action: this._deleteEmployee.bind(this)
+          action: this._deleteEmployee.bind(this),
+          emphasis: {
+            danger: true
+          }
         }
       ],
       exportable: {
@@ -96,10 +99,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
     return html`
       <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom" class="header">
-          <div class="title">
-            <mwc-icon>summarize</mwc-icon>
-            ${i18next.t('title.employee list')}
-          </div>
+          <div class="title">${i18next.t('title.employee list')}</div>
 
           <div class="filters">
             <ox-filters-form class="filter" autofocus without-search></ox-filters-form>
@@ -415,11 +415,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
           name: 'profile',
           record: {
             renderer: function (value, column, record, rowIndex, field) {
-              return html`<ox-pfp-view
-                style="height:90%; width: unset; aspect-ratio: 1 / 1;"
-                .profile=${record.profile}
-                .name=${record.name}
-              ></ox-pfp-view>`
+              return html`<ox-pfp-view style="height:90%; width: unset; aspect-ratio: 1 / 1;" .profile=${record.profile} .name=${record.name}></ox-pfp-view>`
             }
           },
           hidden: true
@@ -574,17 +570,7 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
 
   async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'controlNo',
-      'name',
-      'alias',
-      'type',
-      'hiredOn',
-      'retiredAt',
-      'active',
-      'note'
-    ])
+    const targetFieldSet = new Set(['id', 'controlNo', 'name', 'alias', 'type', 'hiredOn', 'retiredAt', 'active', 'note'])
 
     return exportTargets.map(employee => {
       let tempObj = {}
@@ -679,16 +665,11 @@ export class EmployeeListPage extends connect(store)(localize(i18next)(ScopedEle
   }
 
   async openContactSelector(record: GristRecord) {
-    const popup = openPopup(
-      html`
-        <contact-selector .confirmCallback=${selected => this.attachContact(record, selected)}></contact-selector>
-      `,
-      {
-        backdrop: true,
-        size: 'large',
-        title: i18next.t('title.contact')
-      }
-    )
+    const popup = openPopup(html` <contact-selector .confirmCallback=${selected => this.attachContact(record, selected)}></contact-selector> `, {
+      backdrop: true,
+      size: 'large',
+      title: i18next.t('title.contact')
+    })
   }
 
   async attachContact(record: GristRecord, contact: Contact) {

package/client/pages/employee/employees-by-department.ts

@@ -87,12 +87,7 @@ export class EmployeesByDepartment extends connect(store)(localize(i18next)(Scop
 
   render() {
     return html`
-      <ox-tree
-        .data=${this.root}
-        .selected=${this.selected}
-        @select=${this.onSelect.bind(this)}
-        label-property="name"
-      ></ox-tree>
+      <ox-tree .data=${this.root} .selected=${this.selected} @select=${this.onSelect.bind(this)} label-property="name"></ox-tree>
 
       <ox-grist .config=${this.gristConfig} .fetchHandler=${this.fetchEmployees.bind(this)}>
         <div slot="headroom">

package/dist-client/component/approval-line-brief.js

@@ -81,7 +81,7 @@ ApprovalLineBrief.styles = [
         margin: auto;
         background-color: rgba(0, 0, 0, 0.4);
         border-radius: 50%;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
         line-height: 1.2;
       }
 
@@ -92,12 +92,12 @@ ApprovalLineBrief.styles = [
 
       [current] span {
         background-color: #84d600;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
 
       [current] {
         font-weight: bold;
-        color: var(--theme-white-color);
+        color: var(--md-sys-color-on-primary);
       }
 
       [past] span:before,

package/dist-client/component/approval-line-brief.js.map

@@ -1 +1 @@
-{"version":3,"file":"approval-line-brief.js","sourceRoot":"","sources":["../../client/component/approval-line-brief.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QA4EsB,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;IAiClD,CAAC;IA/BC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,GAAG,CAAC,yBAAyB;YACpG,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI;YAC3B,IAAI,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC,QAAQ,CAC7G,IAAK,CACN;gBACC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;gBAC5B,CAAC,CAAC,EAAE;SACP,CAAA;QAED,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK,UAAU,IAAI,CAAC,OAAO,GAAG,KAAK,UAAU,IAAI,IAAI,EAAE;gBACrF,KAAK,GAAG,CAAC;eACV,IAAI;;KAEd,CAAA;IACH,CAAC;;AA5GM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AACzD;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;AA7ErC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8G7B;SA9GY,iBAAiB","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem } from '../types/approval-line'\nimport { OrgMemberTargetType } from '../types/org-member'\n\n@customElement('approval-line-brief')\nexport class ApprovalLineBrief extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      ol {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n      }\n\n      li {\n        position: relative;\n        width: 85px;\n        text-align: center;\n        color: rgba(255, 255, 255, 0.7);\n      }\n\n      li div {\n        text-align: center;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      span:before {\n        content: '';\n        height: 2px;\n        width: 70px;\n        display: block;\n        position: absolute;\n        margin-left: -70px;\n        margin-top: 6px;\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      span {\n        display: block;\n        width: 15px;\n        height: 15px;\n        margin: auto;\n        background-color: rgba(0, 0, 0, 0.4);\n        border-radius: 50%;\n        color: var(--theme-white-color);\n        line-height: 1.2;\n      }\n\n      [past] span {\n        background-color: rgba(255, 255, 255, 0.9);\n        color: var(--primary-text-color);\n      }\n\n      [current] span {\n        background-color: #84d600;\n        color: var(--theme-white-color);\n      }\n\n      [current] {\n        font-weight: bold;\n        color: var(--theme-white-color);\n      }\n\n      [past] span:before,\n      [current] span:before {\n        background-color: rgba(255, 255, 255, 0.9);\n      }\n\n      li:first-child span:before {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) model: ApprovalLineItem[] = []\n  @property({ type: Number }) current: number = -1\n\n  render() {\n    const items = this.model || []\n    const current = this.current\n\n    return html`\n      <ol>\n        ${this.model\n          ? html` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `\n          : html``}\n        ${items.map((item, order) => this.renderItem(item, order + 1))}\n      </ol>\n    `\n  }\n\n  renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n    const { type, approver } = item\n    const { name } = approver || {\n      name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(\n        type!\n      )\n        ? i18next.t(`label.${type}`)\n        : ''\n    }\n\n    return html`\n      <li approver ?current=${this.current == order} ?past=${this.current > order} title=${name || ''}>\n        <span>${order + 1}</span>\n        <div>${name}</div>\n      </li>\n    `\n  }\n}\n"]}
+{"version":3,"file":"approval-line-brief.js","sourceRoot":"","sources":["../../client/component/approval-line-brief.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAA;AAC3D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AAEjD,OAAO,EAAE,mBAAmB,EAAE,MAAM,qBAAqB,CAAA;AAGlD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QA4EsB,UAAK,GAAuB,EAAE,CAAA;QAC7B,YAAO,GAAW,CAAC,CAAC,CAAA;IAiClD,CAAC;IA/BC,MAAM;QACJ,MAAM,KAAK,GAAG,IAAI,CAAC,KAAK,IAAI,EAAE,CAAA;QAC9B,MAAM,OAAO,GAAG,IAAI,CAAC,OAAO,CAAA;QAE5B,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,KAAK;YACV,CAAC,CAAC,IAAI,CAAA,0BAA0B,IAAI,CAAC,OAAO,IAAI,CAAC,UAAU,IAAI,CAAC,OAAO,GAAG,CAAC,yBAAyB;YACpG,CAAC,CAAC,IAAI,CAAA,EAAE;UACR,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,EAAE,KAAK,GAAG,CAAC,CAAC,CAAC;;KAEjE,CAAA;IACH,CAAC;IAED,UAAU,CAAC,IAAsB,EAAE,KAAa;QAC9C,MAAM,EAAE,IAAI,EAAE,QAAQ,EAAE,GAAG,IAAI,CAAA;QAC/B,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI;YAC3B,IAAI,EAAE,CAAC,mBAAmB,CAAC,MAAM,EAAE,mBAAmB,CAAC,YAAY,EAAE,mBAAmB,CAAC,YAAY,CAAC,CAAC,QAAQ,CAC7G,IAAK,CACN;gBACC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC;gBAC5B,CAAC,CAAC,EAAE;SACP,CAAA;QAED,OAAO,IAAI,CAAA;8BACe,IAAI,CAAC,OAAO,IAAI,KAAK,UAAU,IAAI,CAAC,OAAO,GAAG,KAAK,UAAU,IAAI,IAAI,EAAE;gBACrF,KAAK,GAAG,CAAC;eACV,IAAI;;KAEd,CAAA;IACH,CAAC;;AA5GM,wBAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAuEF;CACF,AAzEY,CAyEZ;AAE0B;IAA1B,QAAQ,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,CAAC;;gDAA+B;AAC7B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;kDAAqB;AA7ErC,iBAAiB;IAD7B,aAAa,CAAC,qBAAqB,CAAC;GACxB,iBAAiB,CA8G7B","sourcesContent":["import { css, html, LitElement, TemplateResult } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { ApprovalLineItem } from '../types/approval-line'\nimport { OrgMemberTargetType } from '../types/org-member'\n\n@customElement('approval-line-brief')\nexport class ApprovalLineBrief extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n      }\n\n      ol {\n        list-style: none;\n        margin: 0;\n        padding: 0;\n        display: flex;\n      }\n\n      li {\n        position: relative;\n        width: 85px;\n        text-align: center;\n        color: rgba(255, 255, 255, 0.7);\n      }\n\n      li div {\n        text-align: center;\n        white-space: nowrap;\n        overflow: hidden;\n        text-overflow: ellipsis;\n      }\n\n      span:before {\n        content: '';\n        height: 2px;\n        width: 70px;\n        display: block;\n        position: absolute;\n        margin-left: -70px;\n        margin-top: 6px;\n        background-color: rgba(0, 0, 0, 0.4);\n      }\n\n      span {\n        display: block;\n        width: 15px;\n        height: 15px;\n        margin: auto;\n        background-color: rgba(0, 0, 0, 0.4);\n        border-radius: 50%;\n        color: var(--md-sys-color-on-primary);\n        line-height: 1.2;\n      }\n\n      [past] span {\n        background-color: rgba(255, 255, 255, 0.9);\n        color: var(--primary-text-color);\n      }\n\n      [current] span {\n        background-color: #84d600;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      [current] {\n        font-weight: bold;\n        color: var(--md-sys-color-on-primary);\n      }\n\n      [past] span:before,\n      [current] span:before {\n        background-color: rgba(255, 255, 255, 0.9);\n      }\n\n      li:first-child span:before {\n        display: none;\n      }\n    `\n  ]\n\n  @property({ type: Array }) model: ApprovalLineItem[] = []\n  @property({ type: Number }) current: number = -1\n\n  render() {\n    const items = this.model || []\n    const current = this.current\n\n    return html`\n      <ol>\n        ${this.model\n          ? html` <li approver ?current=${this.current <= 0} ?past=${this.current > 0}><span>1</span>ME</li> `\n          : html``}\n        ${items.map((item, order) => this.renderItem(item, order + 1))}\n      </ol>\n    `\n  }\n\n  renderItem(item: ApprovalLineItem, order: number): TemplateResult {\n    const { type, approver } = item\n    const { name } = approver || {\n      name: [OrgMemberTargetType.Myself, OrgMemberTargetType.MySupervisor, OrgMemberTargetType.MyDepartment].includes(\n        type!\n      )\n        ? i18next.t(`label.${type}`)\n        : ''\n    }\n\n    return html`\n      <li approver ?current=${this.current == order} ?past=${this.current > order} title=${name || ''}>\n        <span>${order + 1}</span>\n        <div>${name}</div>\n      </li>\n    `\n  }\n}\n"]}

package/dist-client/component/approval-line-items-editor-popup.d.ts

@@ -1,3 +1,4 @@
+import '@material/web/icon/icon.js';
 import { LitElement } from 'lit';
 import { ApprovalLineItemsEditor } from './approval-line-items-editor';
 import { ApprovalLineItem } from '../types/approval-line';
@@ -13,7 +14,7 @@ export declare class ApprovalLineItemsEditorPopup extends ApprovalLineItemsEdito
     private changedValue?;
     render(): import("lit-html").TemplateResult<1>;
     firstUpdated(): void;
-    onEmpty(): void;
+    onEmpty(): Promise<void>;
     onCancel(): void;
     onConfirm(): void;
 }

package/dist-client/component/approval-line-items-editor-popup.js

@@ -1,9 +1,11 @@
 import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
 import { css, html, LitElement } from 'lit';
 import { customElement, property, query } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { ButtonContainerStyles } from '@operato/styles';
 import { closePopup } from '@operato/popup';
+import { OxPrompt } from '@operato/popup/ox-prompt.js';
 import { ApprovalLineItemsEditor } from './approval-line-items-editor';
 /**
  * 결재선의 각 결재자 리스트를 편집한다.
@@ -23,19 +25,30 @@ let ApprovalLineItemsEditorPopup = class ApprovalLineItemsEditorPopup extends lo
         }}
       ></approval-line-items-editor>
 
-      <div class="button-container">
-        <mwc-button @click=${this.onEmpty.bind(this)}>${i18next.t('button.empty')}</mwc-button>
-        <mwc-button @click=${this.onCancel.bind(this)}>${i18next.t('button.cancel')}</mwc-button>
-        <mwc-button @click=${this.onConfirm.bind(this)}>${i18next.t('button.confirm')}</mwc-button>
+      <div class="button-container" style="margin-left:unset;">
+        <button @click=${this.onEmpty.bind(this)}>
+          <md-icon>check_box_outline_blank</md-icon>${i18next.t('button.empty')}
+        </button>
+        <div filler></div>
+        <button @click=${this.onCancel.bind(this)}><md-icon>cancel</md-icon>${i18next.t('button.cancel')}</button>
+        <button @click=${this.onConfirm.bind(this)}><md-icon>done</md-icon>${i18next.t('button.confirm')}</button>
       </div>
     `;
     }
     firstUpdated() {
         this.changedValue = this.value;
     }
-    onEmpty() {
-        this.confirmCallback && this.confirmCallback(null);
-        closePopup(this);
+    async onEmpty() {
+        const reaction = await OxPrompt.open({
+            title: i18next.t('text.are_you_sure'),
+            text: i18next.t('prompt.sure to empty approval line ?'),
+            confirmButton: { text: i18next.t('button.confirm') },
+            cancelButton: { text: i18next.t('button.cancel') }
+        });
+        if (reaction) {
+            this.confirmCallback && this.confirmCallback(null);
+            closePopup(this);
+        }
     }
     onCancel() {
         closePopup(this);
@@ -52,7 +65,7 @@ ApprovalLineItemsEditorPopup.styles = [
         display: flex;
         flex-direction: column;
 
-        background-color: #fff;
+        background-color: var(--md-sys-color-surface);
       }
 
       approval-line-items-editor {