@things-factory/worklist 6.1.55 → 6.1.57

package/dist-client/templates/activity-approval-context-template.js

@@ -1,39 +1,50 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
 import { html, css, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin';
 import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
 import { store } from '@operato/shell';
+import { i18next } from '@operato/i18n';
 import '@things-factory/organization/dist-client/component/approval-line-view.js';
 const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
 let ActivityApprovalContextTemplate = class ActivityApprovalContextTemplate extends connect(store)(LitElement) {
     render() {
-        const activityApproval = this.context.activityApproval || {};
+        const activityApproval = this.context.activityApproval || this.activityApproval || {};
         const { round, order, approver, createdAt, activityThread } = activityApproval || {};
         const { state, dueAt, assignedAt, assignee, activityInstance } = activityThread || {};
         const { name, description, thumbnail, approvalLine } = activityInstance || {};
         return html `
-      <div>
-        <div>name: ${name}</div>
-        <div>description: ${description}</div>
-        <div>state: ${state}</div>
-        <div>round: ${round}</div>
-        <div>order: ${order}</div>
-        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <div>assignee: ${assignee === null || assignee === void 0 ? void 0 : assignee.name}</div>
-        <div>approver: ${approver === null || approver === void 0 ? void 0 : approver.name}</div>
-        <div>waited since: ${createdAt && formatter.format(new Date(createdAt))}</div>
-      </div>
-      <div>
+      <div flow>
         <div approval-line>
-          ${approvalLine
-            ? html ` <approval-line-view .model=${approvalLine} .current=${order}></approval-line-view> `
-            : html ``}
+          ${approvalLine ? html ` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html ``}
+        </div>
+      </div>
+
+      <div info>
+        <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>
+        <div><label>${i18next.t('field.description')}</label> ${description}</div>
+        <div>
+          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong
+            >${i18next.t('label.activity-state-' + state)}</strong
+          >
+        </div>
+        <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>
+        <div><label>${i18next.t('field.approval-order')}</label> <strong>${order}</strong></div>
+        <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee === null || assignee === void 0 ? void 0 : assignee.name}</strong></div>
+        <div><label>${i18next.t('field.approver')}</label> <strong>${approver === null || approver === void 0 ? void 0 : approver.name}</strong></div>
+        <div>
+          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
         </div>
-        <img src=${thumbnail} />
+        <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
+        <div><label>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>
       </div>
+
+      ${thumbnail
+            ? html ` <div thumbnail>
+            <img src=${thumbnail} />
+          </div>`
+            : html ``}
     `;
     }
     stateChanged(state) {
@@ -44,18 +55,108 @@ ActivityApprovalContextTemplate.styles = [
     ContextToolbarOverlayStyle,
     css `
       :host {
-        background-color: white;
-
+        background-color: var(--theme-white-color);
         width: 100%;
-        padding: 5px;
+        min-width: 450px;
         overflow: auto;
+        --context-ui-padding: 0;
+      }
+
+      :host([state='assigned']) {
+        --worklist-status-color: #5f7184;
+      }
+
+      :host([state='started']) {
+        --worklist-status-color: #56af45;
+      }
+
+      :host([state='delegated']) {
+        --worklist-status-color: #8654b0;
+      }
+
+      :host([state='submitted']) {
+        --worklist-status-color: #428df3;
+      }
+
+      :host([state='escalated']) {
+        --worklist-status-color: #595de5;
+      }
+
+      :host([state='rejected']) {
+        --worklist-status-color: #f27429;
+      }
+
+      :host([state='ended']) {
+        --worklist-status-color: #02acae;
+      }
+
+      :host([state='aborted']) {
+        --worklist-status-color: #cb3a33;
+      }
+
+      [info],
+      [assignees] {
+        padding: var(--padding-default);
+        border-bottom: var(--border-dark-color);
+        color: var(--secondary-color);
+      }
+
+      [info] div {
+        display: flex;
+        align-items: center;
+        padding: var(--padding-narrow);
+        border-radius: var(--border-radius);
+        text-align: right;
+        clear: both;
+        overflow: hidden;
+      }
+
+      [info] div:nth-child(odd) {
+        background-color: var(--main-section-background-color);
+      }
+
+      [info] label {
+        display: inline-block;
+        width: 25%;
+        text-align: right;
+        margin-right: 20px;
+      }
+
+      [info] span {
+        width: 15px;
+        height: 15px;
+        background-color: var(--worklist-status-color, tomato);
+        display: inline-block;
+        border-radius: 50%;
+      }
+
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+
+      [thumbnail] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: var(--margin-default);
       }
 
       img {
-        max-width: 200px;
+        max-width: 85%;
+        height: auto;
       }
     `
 ];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityApprovalContextTemplate.prototype, "activityApproval", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/dist-client/templates/activity-approval-context-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-approval-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-approval-context-template.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAA;AACjG,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AAGtC,OAAO,0EAA0E,CAAA;AAEjF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAGxG,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAoBtE,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAE5D,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QACpF,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,cAAc,IAAI,EAAE,CAAA;QACrF,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE7E,OAAO,IAAI,CAAA;;qBAEM,IAAI;4BACG,WAAW;sBACjB,KAAK;sBACL,KAAK;sBACL,KAAK;4BACC,UAAU,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;uBACzD,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;yBACxC,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;yBACd,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;6BACV,SAAS,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;;;;YAInE,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,aAAa,KAAK,yBAAyB;YAC5F,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAED,SAAS;;KAEvB,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;IACpC,CAAC;;AApDM,sCAAM,GAAG;IACd,0BAA0B;IAC1B,GAAG,CAAA;;;;;;;;;;;;KAYF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;gEAAgB;AAlBpB,+BAA+B;IADpC,aAAa,CAAC,oCAAoC,CAAC;GAC9C,+BAA+B,CAsDpC","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-approval-context-template')\nclass ActivityApprovalContextTemplate extends connect(store)(LitElement) {\n  static styles = [\n    ContextToolbarOverlayStyle,\n    css`\n      :host {\n        background-color: white;\n\n        width: 100%;\n        padding: 5px;\n        overflow: auto;\n      }\n\n      img {\n        max-width: 200px;\n      }\n    `\n  ]\n\n  @state() private context\n\n  render() {\n    const activityApproval = this.context.activityApproval || {}\n\n    const { round, order, approver, createdAt, activityThread } = activityApproval || {}\n    const { state, dueAt, assignedAt, assignee, activityInstance } = activityThread || {}\n    const { name, description, thumbnail, approvalLine } = activityInstance || {}\n\n    return html`\n      <div>\n        <div>name: ${name}</div>\n        <div>description: ${description}</div>\n        <div>state: ${state}</div>\n        <div>round: ${round}</div>\n        <div>order: ${order}</div>\n        <div>assigned at: ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n        <div>due at: ${dueAt && formatter.format(new Date(dueAt))}</div>\n        <div>assignee: ${assignee?.name}</div>\n        <div>approver: ${approver?.name}</div>\n        <div>waited since: ${createdAt && formatter.format(new Date(createdAt))}</div>\n      </div>\n      <div>\n        <div approval-line>\n          ${approvalLine\n            ? html` <approval-line-view .model=${approvalLine} .current=${order}></approval-line-view> `\n            : html``}\n        </div>\n        <img src=${thumbnail} />\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.context = state.route.context\n  }\n}\n"]}
+{"version":3,"file":"activity-approval-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-approval-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-approval-context-template')\nclass ActivityApprovalContextTemplate extends connect(store)(LitElement) {\n  static styles = [\n    ContextToolbarOverlayStyle,\n    css`\n      :host {\n        background-color: var(--theme-white-color);\n        width: 100%;\n        min-width: 450px;\n        overflow: auto;\n        --context-ui-padding: 0;\n      }\n\n      :host([state='assigned']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='started']) {\n        --worklist-status-color: #56af45;\n      }\n\n      :host([state='delegated']) {\n        --worklist-status-color: #8654b0;\n      }\n\n      :host([state='submitted']) {\n        --worklist-status-color: #428df3;\n      }\n\n      :host([state='escalated']) {\n        --worklist-status-color: #595de5;\n      }\n\n      :host([state='rejected']) {\n        --worklist-status-color: #f27429;\n      }\n\n      :host([state='ended']) {\n        --worklist-status-color: #02acae;\n      }\n\n      :host([state='aborted']) {\n        --worklist-status-color: #cb3a33;\n      }\n\n      [info],\n      [assignees] {\n        padding: var(--padding-default);\n        border-bottom: var(--border-dark-color);\n        color: var(--secondary-color);\n      }\n\n      [info] div {\n        display: flex;\n        align-items: center;\n        padding: var(--padding-narrow);\n        border-radius: var(--border-radius);\n        text-align: right;\n        clear: both;\n        overflow: hidden;\n      }\n\n      [info] div:nth-child(odd) {\n        background-color: var(--main-section-background-color);\n      }\n\n      [info] label {\n        display: inline-block;\n        width: 25%;\n        text-align: right;\n        margin-right: 20px;\n      }\n\n      [info] span {\n        width: 15px;\n        height: 15px;\n        background-color: var(--worklist-status-color, tomato);\n        display: inline-block;\n        border-radius: 50%;\n      }\n\n      :host:before {\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0;\n        border: 22px solid transparent;\n        border-left-color: var(--worklist-status-color);\n        border-right: 0;\n      }\n\n      [thumbnail] {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin: var(--margin-default);\n      }\n\n      img {\n        max-width: 85%;\n        height: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) private activityApproval\n\n  @state() private context\n\n  render() {\n    const activityApproval = this.context.activityApproval || this.activityApproval || {}\n\n    const { round, order, approver, createdAt, activityThread } = activityApproval || {}\n    const { state, dueAt, assignedAt, assignee, activityInstance } = activityThread || {}\n    const { name, description, thumbnail, approvalLine } = activityInstance || {}\n\n    return html`\n      <div flow>\n        <div approval-line>\n          ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}\n        </div>\n      </div>\n\n      <div info>\n        <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n        <div><label>${i18next.t('field.description')}</label> ${description}</div>\n        <div>\n          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong\n            >${i18next.t('label.activity-state-' + state)}</strong\n          >\n        </div>\n        <div><label>${i18next.t('field.round')}</label> <strong>${round}</strong></div>\n        <div><label>${i18next.t('field.approval-order')}</label> <strong>${order}</strong></div>\n        <div><label>${i18next.t('field.assignee')}</label> <strong>${assignee?.name}</strong></div>\n        <div><label>${i18next.t('field.approver')}</label> <strong>${approver?.name}</strong></div>\n        <div>\n          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n        </div>\n        <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n        <div><label>since</label> ${createdAt && formatter.format(new Date(createdAt))}</div>\n      </div>\n\n      ${thumbnail\n        ? html` <div thumbnail>\n            <img src=${thumbnail} />\n          </div>`\n        : html``}\n    `\n  }\n\n  stateChanged(state) {\n    this.context = state.route.context\n  }\n}\n"]}

package/dist-client/templates/activity-instance-context-template.js

@@ -1,7 +1,7 @@
 import { __decorate, __metadata } from "tslib";
 import '@material/mwc-icon';
 import { html, css, LitElement } from 'lit';
-import { customElement, state } from 'lit/decorators.js';
+import { customElement, property, state } from 'lit/decorators.js';
 import { connect } from 'pwa-helpers/connect-mixin';
 import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
 import { store } from '@operato/shell';
@@ -11,9 +11,10 @@ import '@things-factory/organization/dist-client/component/approval-line-view.js
 const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
 let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
     render() {
-        const activityInstance = this.context.activityInstance || {};
-        const { name, description, state, thumbnail, assignees, approvalLine, assignedAt, startedAt, dueAt, threadsMin, threadsMax } = activityInstance || {};
-        const editable = state == 'draft';
+        const activityInstance = this.context.activityInstance || this.activityInstance || {};
+        const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } = activityInstance || {};
+        const { startingType } = activity || {};
+        // const editable = state == 'draft'
         return html `
       <div flow>
         ${approvalLine
@@ -29,55 +30,46 @@ let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate exte
               @click=${() => this.onClickApprovalLine(activityInstance)}
             ></mwc-icon-button>`}
       </div>
-    
-      <div info>
-        <div><label>name</label> <strong>${name}</strong></div>
-        <div><label>description</label> ${description}</div>
-        <div><label>state</label> <span></span> <strong>${state}</strong></div>
-        <div><label>assigned at</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>
-        <div><label>due at</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
-        <div><label>started at</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
-      </div>
 
-      <div>
-        <div assignees>
-          <label>Assignees</label>
-          ${assignees
-            ? html `
-                <assignees-view
-                  .value=${assignees}
-                  @click=${() => this.onClickAssignees(activityInstance)}
-                  @change=${e => (activityInstance.assignees = e.currentTarget.value)}
-                ></assignees-view>
-              `
-            : html `<mwc-icon-button
-                icon="group_add"
-                @click=${() => this.onClickAssignees(activityInstance)}
-              ></mwc-icon-button>`}
+      <div info>
+        <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>
+        <div><label>${i18next.t('field.description')}</label> ${description}</div>
+        <div>
+          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong
+            >${i18next.t('label.activity-state-' + state)}</strong
+          >
         </div>
-
-        
-
-        <section>
-          <label for="threads-min">Threads Min</label>
-          <input
-            id="threadsMin"
-            type="number"
-            .value=${threadsMin || 0}
-            @change=${e => (activityInstance.threadsMin = e.currentTarget.valueAsNumber)}
-          />
-
-          <label for="threads-max">Threads Max</label>
-          <input
-            id="threads-max"
-            type="number"
-            .value=${threadsMax || 0}
-            @change=${e => (activityInstance.threadsMax = e.currentTarget.valueAsNumber)}
-          />
-        </section>
-
-        <img src=${thumbnail} />
+        <div>
+          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
+        </div>
+        <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>
+        <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>
       </div>
+
+      ${startingType == 'issue'
+            ? html `<div assignees>
+            <div>
+              <label>${i18next.t('field.assignees')}</label>
+              ${assignees
+                ? html `
+                    <assignees-view
+                      .value=${assignees}
+                      @click=${() => this.onClickAssignees(activityInstance)}
+                      @change=${e => (activityInstance.assignees = e.currentTarget.value)}
+                    ></assignees-view>
+                  `
+                : html `<mwc-icon-button
+                    icon="group_add"
+                    @click=${() => this.onClickAssignees(activityInstance)}
+                  ></mwc-icon-button>`}
+            </div>
+          </div>`
+            : html ``}
+      ${thumbnail
+            ? html ` <div thumbnail>
+            <img src=${thumbnail} />
+          </div>`
+            : html ``}
     `;
     }
     stateChanged(state) {
@@ -126,11 +118,11 @@ ActivityInstanceContextTemplate.styles = [
       :host {
         background-color: var(--theme-white-color);
         width: 100%;
-        min-width:450px;
+        min-width: 450px;
         overflow: auto;
-        --context-ui-padding:0;
+        --context-ui-padding: 0;
       }
-      
+
       :host([state='draft']) {
         --worklist-status-color: #5f7184;
       }
@@ -162,36 +154,41 @@ ActivityInstanceContextTemplate.styles = [
       :host([state='aborted']) {
         --worklist-status-color: #cb3a33;
       }
-      [info], [assignees]{
-        padding:var(--padding-default);
-        border-bottom:var(--border-dark-color);
-        color:var(--secondary-color)
+
+      [info],
+      [assignees] {
+        padding: var(--padding-default);
+        border-bottom: var(--border-dark-color);
+        color: var(--secondary-color);
       }
-      [info] div{
-        padding:var(--padding-narrow);
-        border-radius:var(--border-radius);
-        text-align:right;
-        clear:both;
+
+      [info] div {
+        display: flex;
+        align-items: center;
+        padding: var(--padding-narrow);
+        border-radius: var(--border-radius);
+        text-align: right;
+        clear: both;
         overflow: hidden;
       }
-      [info] div *{
-        vertical-align:middle;
-      }
-      [info] div:nth-child(odd){
-        background-color:var(--main-section-background-color);
+
+      [info] div:nth-child(odd) {
+        background-color: var(--main-section-background-color);
       }
-      [info] label{
-        display:inline-block;
-        width:25%;
-        float:left;
-        text-align:left;
+
+      [info] label {
+        display: inline-block;
+        width: 25%;
+        text-align: right;
+        margin-right: 20px;
       }
-      [info] span{
-        width:15px;
-        height:15px;
-        background-color:var(--worklist-status-color, tomato);
-        display:inline-block;
-        border-radius:50%;
+
+      [info] span {
+        width: 15px;
+        height: 15px;
+        background-color: var(--worklist-status-color, tomato);
+        display: inline-block;
+        border-radius: 50%;
       }
 
       :host:before {
@@ -203,44 +200,61 @@ ActivityInstanceContextTemplate.styles = [
         border-left-color: var(--worklist-status-color);
         border-right: 0;
       }
-      section{
-        padding:var(--padding-default);
-        color:var(--secondary-color)
+
+      section {
+        padding: var(--padding-default);
+        color: var(--secondary-color);
       }
-      section label{
-        display:inline-block;
-        width:25%;
-        margin-top:var(--margin-default);
+
+      section label {
+        display: inline-block;
+        width: 25%;
+        margin-top: var(--margin-default);
       }
-      [assignees]{
-        text-align:right;
-        clear:both;
+
+      [assignees] {
+        text-align: right;
+        clear: both;
         overflow: hidden;
       }
-      [assignees] label{
-        display:inline-block;
+
+      [assignees] label {
+        display: inline-block;
         padding-left: var(--padding-narrow);
-        width:25%;
-        float:left;
-        text-align:left;
+        width: 25%;
+        text-align: left;
       }
-      [assignees] mwc-icon-button{
-        float:right
+
+      [assignees] mwc-icon-button {
+        float: right;
+      }
+
+      section input {
+        display: inline-block;
+        width: 70%;
+        border: var(--border-dark-color);
+        border-width: 0 0 1px 0;
+        margin-top: var(--margin-default);
+        font-size: var(--fontsize-large);
       }
-      section input{
-        display:inline-block;
-        width:70%;
-        border:var(--border-dark-color);
-        border-width:0 0 1px 0;
-        margin-top:var(--margin-default);
-        font-size:var(--fontsize-large);
+
+      [thumbnail] {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        margin: var(--margin-default);
       }
 
       img {
         max-width: 85%;
+        height: auto;
       }
     `
 ];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityInstanceContextTemplate.prototype, "activityInstance", void 0);
 __decorate([
     state(),
     __metadata("design:type", Object)

package/dist-client/templates/activity-instance-context-template.js.map

@@ -1 +1 @@
-{"version":3,"file":"activity-instance-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-instance-context-template.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAE3B,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAA;AAExD,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAA;AACjG,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AACvC,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAA;AAE3C,OAAO,0EAA0E,CAAA;AAEjF,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAGxG,IAAM,+BAA+B,GAArC,MAAM,+BAAgC,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IA6HtE,MAAM;QACJ,MAAM,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAC5D,MAAM,EACJ,IAAI,EACJ,WAAW,EACX,KAAK,EACL,SAAS,EACT,SAAS,EACT,YAAY,EACZ,UAAU,EACV,SAAS,EACT,KAAK,EACL,UAAU,EACV,UAAU,EACX,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE1B,MAAM,QAAQ,GAAG,KAAK,IAAI,OAAO,CAAA;QAEjC,OAAO,IAAI,CAAA;;UAEL,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;;yBAES,YAAY;yBACZ,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;0BAC/C,CAAC,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,YAAY,GAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;;aAEzE;YACH,CAAC,CAAC,IAAI,CAAA;;uBAEO,GAAG,EAAE,CAAC,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC;gCACvC;;;;2CAIW,IAAI;0CACL,WAAW;0DACK,KAAK;0CACrB,UAAU,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,UAAU,CAAC,CAAC;qCACzD,KAAK,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,KAAK,CAAC,CAAC;yCACtC,SAAS,IAAI,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAS,CAAC,CAAC;;;;;;YAM/E,SAAS;YACT,CAAC,CAAC,IAAI,CAAA;;2BAES,SAAS;2BACT,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;4BAC5C,CAAC,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,SAAS,GAAG,CAAC,CAAC,aAAa,CAAC,KAAK,CAAC;;eAEtE;YACH,CAAC,CAAC,IAAI,CAAA;;yBAEO,GAAG,EAAE,CAAC,IAAI,CAAC,gBAAgB,CAAC,gBAAgB,CAAC;kCACpC;;;;;;;;;;qBAUb,UAAU,IAAI,CAAC;sBACd,CAAC,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC;;;;;;;qBAOnE,UAAU,IAAI,CAAC;sBACd,CAAC,CAAC,EAAE,CAAC,CAAC,gBAAgB,CAAC,UAAU,GAAG,CAAC,CAAC,aAAa,CAAC,aAAa,CAAC;;;;mBAIrE,SAAS;;KAEvB,CAAA;IACH,CAAC;IAED,YAAY,CAAC,KAAK;QAChB,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC,KAAK,CAAC,OAAO,CAAA;IACpC,CAAC;IAED,gBAAgB,CAAC,gBAAgB;QAC/B,MAAM,EAAE,SAAS,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE5C,MAAM,KAAK,GAAG,SAAS,CACrB,IAAI,CAAA;;mBAES,SAAS;6BACC,KAAK,CAAC,EAAE;YACzB,gBAAgB,CAAC,SAAS,GAAG,KAAK,CAAA;YAClC,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;;OAEJ,EACD;YACE,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,+BAA+B;YACrC,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;SACxC,CACF,CAAA;QACD,KAAK,CAAC,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;IAC3B,CAAC;IAED,mBAAmB,CAAC,gBAAgB;QAClC,MAAM,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAE/C,MAAM,KAAK,GAAG,SAAS,CACrB,IAAI,CAAA;;mBAES,YAAY;6BACF,KAAK,CAAC,EAAE;YACzB,gBAAgB,CAAC,YAAY,GAAG,KAAK,CAAA;YACrC,IAAI,CAAC,aAAa,EAAE,CAAA;QACtB,CAAC;;OAEJ,EACD;YACE,QAAQ,EAAE,IAAI;YACd,IAAI,EAAE,yCAAyC;YAC/C,IAAI,EAAE,OAAO;YACb,KAAK,EAAE,OAAO,CAAC,CAAC,CAAC,+BAA+B,CAAC;SAClD,CACF,CAAA;QACD,KAAK,CAAC,QAAQ,GAAG,GAAG,EAAE,GAAE,CAAC,CAAA;IAC3B,CAAC;;AAjQM,sCAAM,GAAG;IACd,0BAA0B;IAC1B,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAqHF;CACF,CAAA;AAED;IAAC,KAAK,EAAE;;gEAAgB;AA3HpB,+BAA+B;IADpC,aAAa,CAAC,oCAAoC,CAAC;GAC9C,+BAA+B,CAmQpC","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends connect(store)(LitElement) {\n  static styles = [\n    ContextToolbarOverlayStyle,\n    css`\n      :host {\n        background-color: var(--theme-white-color);\n        width: 100%;\n        min-width:450px;\n        overflow: auto;\n        --context-ui-padding:0;\n      }\n      \n      :host([state='draft']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='issued']) {\n        --worklist-status-color: #56af45;\n      }\n\n      :host([state='pending-assignment']) {\n        --worklist-status-color: #8654b0;\n      }\n\n      :host([state='assigned']) {\n        --worklist-status-color: #428df3;\n      }\n\n      :host([state='started']) {\n        --worklist-status-color: #595de5;\n      }\n\n      :host([state='pending']) {\n        --worklist-status-color: #f27429;\n      }\n\n      :host([state='ended']) {\n        --worklist-status-color: #02acae;\n      }\n\n      :host([state='aborted']) {\n        --worklist-status-color: #cb3a33;\n      }\n      [info], [assignees]{\n        padding:var(--padding-default);\n        border-bottom:var(--border-dark-color);\n        color:var(--secondary-color)\n      }\n      [info] div{\n        padding:var(--padding-narrow);\n        border-radius:var(--border-radius);\n        text-align:right;\n        clear:both;\n        overflow: hidden;\n      }\n      [info] div *{\n        vertical-align:middle;\n      }\n      [info] div:nth-child(odd){\n        background-color:var(--main-section-background-color);\n      }\n      [info] label{\n        display:inline-block;\n        width:25%;\n        float:left;\n        text-align:left;\n      }\n      [info] span{\n        width:15px;\n        height:15px;\n        background-color:var(--worklist-status-color, tomato);\n        display:inline-block;\n        border-radius:50%;\n      }\n\n      :host:before {\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0;\n        border: 22px solid transparent;\n        border-left-color: var(--worklist-status-color);\n        border-right: 0;\n      }\n      section{\n        padding:var(--padding-default);\n        color:var(--secondary-color)\n      }\n      section label{\n        display:inline-block;\n        width:25%;\n        margin-top:var(--margin-default);\n      }\n      [assignees]{\n        text-align:right;\n        clear:both;\n        overflow: hidden;\n      }\n      [assignees] label{\n        display:inline-block;\n        padding-left: var(--padding-narrow);\n        width:25%;\n        float:left;\n        text-align:left;\n      }\n      [assignees] mwc-icon-button{\n        float:right\n      }\n      section input{\n        display:inline-block;\n        width:70%;\n        border:var(--border-dark-color);\n        border-width:0 0 1px 0;\n        margin-top:var(--margin-default);\n        font-size:var(--fontsize-large);\n      }\n\n      img {\n        max-width: 85%;\n      }\n    `\n  ]\n\n  @state() private context\n\n  render() {\n    const activityInstance = this.context.activityInstance || {}\n    const {\n      name,\n      description,\n      state,\n      thumbnail,\n      assignees,\n      approvalLine,\n      assignedAt,\n      startedAt,\n      dueAt,\n      threadsMin,\n      threadsMax\n    } = activityInstance || {}\n\n    const editable = state == 'draft'\n\n    return html`\n      <div flow>\n        ${approvalLine\n          ? html`\n              <approval-line-view\n                .model=${approvalLine}\n                @click=${() => this.onClickApprovalLine(activityInstance)}\n                @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}\n              ></approval-line-view>\n            `\n          : html`<mwc-icon-button\n              icon=\"group_add\"\n              @click=${() => this.onClickApprovalLine(activityInstance)}\n            ></mwc-icon-button>`}\n      </div>\n    \n      <div info>\n        <div><label>name</label> <strong>${name}</strong></div>\n        <div><label>description</label> ${description}</div>\n        <div><label>state</label> <span></span> <strong>${state}</strong></div>\n        <div><label>assigned at</label> ${assignedAt && formatter.format(new Date(assignedAt))}</div>\n        <div><label>due at</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n        <div><label>started at</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n      </div>\n\n      <div>\n        <div assignees>\n          <label>Assignees</label>\n          ${assignees\n            ? html`\n                <assignees-view\n                  .value=${assignees}\n                  @click=${() => this.onClickAssignees(activityInstance)}\n                  @change=${e => (activityInstance.assignees = e.currentTarget.value)}\n                ></assignees-view>\n              `\n            : html`<mwc-icon-button\n                icon=\"group_add\"\n                @click=${() => this.onClickAssignees(activityInstance)}\n              ></mwc-icon-button>`}\n        </div>\n\n        \n\n        <section>\n          <label for=\"threads-min\">Threads Min</label>\n          <input\n            id=\"threadsMin\"\n            type=\"number\"\n            .value=${threadsMin || 0}\n            @change=${e => (activityInstance.threadsMin = e.currentTarget.valueAsNumber)}\n          />\n\n          <label for=\"threads-max\">Threads Max</label>\n          <input\n            id=\"threads-max\"\n            type=\"number\"\n            .value=${threadsMax || 0}\n            @change=${e => (activityInstance.threadsMax = e.currentTarget.valueAsNumber)}\n          />\n        </section>\n\n        <img src=${thumbnail} />\n      </div>\n    `\n  }\n\n  stateChanged(state) {\n    this.context = state.route.context\n  }\n\n  onClickAssignees(activityInstance) {\n    const { assignees } = activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <assignees-editor-popup\n          .value=${assignees}\n          .confirmCallback=${value => {\n            activityInstance.assignees = value\n            this.requestUpdate()\n          }}\n        ></assignees-editor-popup>\n      `,\n      {\n        backdrop: true,\n        help: 'organization/assignees-editor',\n        size: 'large',\n        title: i18next.t('title.assignee list')\n      }\n    )\n    popup.onclosed = () => {}\n  }\n\n  onClickApprovalLine(activityInstance) {\n    const { approvalLine } = activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <approval-line-items-editor-popup\n          .value=${approvalLine}\n          .confirmCallback=${value => {\n            activityInstance.approvalLine = value\n            this.requestUpdate()\n          }}\n        ></approval-line-items-editor-popup>\n      `,\n      {\n        backdrop: true,\n        help: 'organization/approval-line-items-editor',\n        size: 'large',\n        title: i18next.t('title.approval-line item list')\n      }\n    )\n    popup.onclosed = () => {}\n  }\n}\n"]}
+{"version":3,"file":"activity-instance-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-instance-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/mwc-icon'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\nimport { openPopup } from '@operato/layout'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends connect(store)(LitElement) {\n  static styles = [\n    ContextToolbarOverlayStyle,\n    css`\n      :host {\n        background-color: var(--theme-white-color);\n        width: 100%;\n        min-width: 450px;\n        overflow: auto;\n        --context-ui-padding: 0;\n      }\n\n      :host([state='draft']) {\n        --worklist-status-color: #5f7184;\n      }\n\n      :host([state='issued']) {\n        --worklist-status-color: #56af45;\n      }\n\n      :host([state='pending-assignment']) {\n        --worklist-status-color: #8654b0;\n      }\n\n      :host([state='assigned']) {\n        --worklist-status-color: #428df3;\n      }\n\n      :host([state='started']) {\n        --worklist-status-color: #595de5;\n      }\n\n      :host([state='pending']) {\n        --worklist-status-color: #f27429;\n      }\n\n      :host([state='ended']) {\n        --worklist-status-color: #02acae;\n      }\n\n      :host([state='aborted']) {\n        --worklist-status-color: #cb3a33;\n      }\n\n      [info],\n      [assignees] {\n        padding: var(--padding-default);\n        border-bottom: var(--border-dark-color);\n        color: var(--secondary-color);\n      }\n\n      [info] div {\n        display: flex;\n        align-items: center;\n        padding: var(--padding-narrow);\n        border-radius: var(--border-radius);\n        text-align: right;\n        clear: both;\n        overflow: hidden;\n      }\n\n      [info] div:nth-child(odd) {\n        background-color: var(--main-section-background-color);\n      }\n\n      [info] label {\n        display: inline-block;\n        width: 25%;\n        text-align: right;\n        margin-right: 20px;\n      }\n\n      [info] span {\n        width: 15px;\n        height: 15px;\n        background-color: var(--worklist-status-color, tomato);\n        display: inline-block;\n        border-radius: 50%;\n      }\n\n      :host:before {\n        content: '';\n        position: absolute;\n        width: 0;\n        height: 0;\n        border: 22px solid transparent;\n        border-left-color: var(--worklist-status-color);\n        border-right: 0;\n      }\n\n      section {\n        padding: var(--padding-default);\n        color: var(--secondary-color);\n      }\n\n      section label {\n        display: inline-block;\n        width: 25%;\n        margin-top: var(--margin-default);\n      }\n\n      [assignees] {\n        text-align: right;\n        clear: both;\n        overflow: hidden;\n      }\n\n      [assignees] label {\n        display: inline-block;\n        padding-left: var(--padding-narrow);\n        width: 25%;\n        text-align: left;\n      }\n\n      [assignees] mwc-icon-button {\n        float: right;\n      }\n\n      section input {\n        display: inline-block;\n        width: 70%;\n        border: var(--border-dark-color);\n        border-width: 0 0 1px 0;\n        margin-top: var(--margin-default);\n        font-size: var(--fontsize-large);\n      }\n\n      [thumbnail] {\n        display: flex;\n        justify-content: center;\n        align-items: center;\n        margin: var(--margin-default);\n      }\n\n      img {\n        max-width: 85%;\n        height: auto;\n      }\n    `\n  ]\n\n  @property({ type: Object }) private activityInstance\n\n  @state() private context\n\n  render() {\n    const activityInstance = this.context.activityInstance || this.activityInstance || {}\n    const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =\n      activityInstance || {}\n    const { startingType } = activity || {}\n\n    // const editable = state == 'draft'\n\n    return html`\n      <div flow>\n        ${approvalLine\n          ? html`\n              <approval-line-view\n                .model=${approvalLine}\n                @click=${() => this.onClickApprovalLine(activityInstance)}\n                @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}\n              ></approval-line-view>\n            `\n          : html`<mwc-icon-button\n              icon=\"group_add\"\n              @click=${() => this.onClickApprovalLine(activityInstance)}\n            ></mwc-icon-button>`}\n      </div>\n\n      <div info>\n        <div><label>${i18next.t('field.name')}</label> <strong>${name}</strong></div>\n        <div><label>${i18next.t('field.description')}</label> ${description}</div>\n        <div>\n          <label>${i18next.t('field.status')}</label> <span></span>&nbsp;<strong\n            >${i18next.t('label.activity-state-' + state)}</strong\n          >\n        </div>\n        <div>\n          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}\n        </div>\n        <div><label>${i18next.t('field.due-at')}</label> ${dueAt && formatter.format(new Date(dueAt))}</div>\n        <div><label>${i18next.t('field.started-at')}</label> ${startedAt && formatter.format(new Date(startedAt))}</div>\n      </div>\n\n      ${startingType == 'issue'\n        ? html`<div assignees>\n            <div>\n              <label>${i18next.t('field.assignees')}</label>\n              ${assignees\n                ? html`\n                    <assignees-view\n                      .value=${assignees}\n                      @click=${() => this.onClickAssignees(activityInstance)}\n                      @change=${e => (activityInstance.assignees = e.currentTarget.value)}\n                    ></assignees-view>\n                  `\n                : html`<mwc-icon-button\n                    icon=\"group_add\"\n                    @click=${() => this.onClickAssignees(activityInstance)}\n                  ></mwc-icon-button>`}\n            </div>\n          </div>`\n        : html``}\n      ${thumbnail\n        ? html` <div thumbnail>\n            <img src=${thumbnail} />\n          </div>`\n        : html``}\n    `\n  }\n\n  stateChanged(state) {\n    this.context = state.route.context\n  }\n\n  onClickAssignees(activityInstance) {\n    const { assignees } = activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <assignees-editor-popup\n          .value=${assignees}\n          .confirmCallback=${value => {\n            activityInstance.assignees = value\n            this.requestUpdate()\n          }}\n        ></assignees-editor-popup>\n      `,\n      {\n        backdrop: true,\n        help: 'organization/assignees-editor',\n        size: 'large',\n        title: i18next.t('title.assignee list')\n      }\n    )\n    popup.onclosed = () => {}\n  }\n\n  onClickApprovalLine(activityInstance) {\n    const { approvalLine } = activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <approval-line-items-editor-popup\n          .value=${approvalLine}\n          .confirmCallback=${value => {\n            activityInstance.approvalLine = value\n            this.requestUpdate()\n          }}\n        ></approval-line-items-editor-popup>\n      `,\n      {\n        backdrop: true,\n        help: 'organization/approval-line-items-editor',\n        size: 'large',\n        title: i18next.t('title.approval-line item list')\n      }\n    )\n    popup.onclosed = () => {}\n  }\n}\n"]}