@things-factory/worklist 6.2.96 → 6.2.97

package/client/templates/activity-instance-context-template.ts

@@ -23,6 +23,7 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
         background-color: var(--theme-white-color);
         width: 100%;
         min-width: 450px;
+        max-height: 100%;
         overflow: auto;
         --context-ui-padding: 0;
       }
@@ -59,6 +60,16 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+
       [info],
       [assignees] {
         padding: var(--padding-default);
@@ -162,8 +173,7 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
 
   render() {
     const activityInstance = this.context.activityInstance || this.activityInstance || {}
-    const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =
-      activityInstance || {}
+    const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } = activityInstance || {}
     const { startingType } = activity || {}
 
     // const editable = state == 'draft'
@@ -178,23 +188,14 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
                 @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
               ></approval-line-view>
             `
-          : html`<mwc-icon-button
-              icon="group_add"
-              @click=${() => this.onClickApprovalLine(activityInstance)}
-            ></mwc-icon-button>`}
+          : html`<mwc-icon-button icon="group_add" @click=${() => this.onClickApprovalLine(activityInstance)}></mwc-icon-button>`}
       </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.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </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.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>
@@ -211,10 +212,7 @@ class ActivityInstanceContextTemplate extends connect(store)(LitElement) {
                       @change=${e => (activityInstance.assignees = e.currentTarget.value)}
                     ></assignees-view>
                   `
-                : html`<mwc-icon-button
-                    icon="group_add"
-                    @click=${() => this.onClickAssignees(activityInstance)}
-                  ></mwc-icon-button>`}
+                : html`<mwc-icon-button icon="group_add" @click=${() => this.onClickAssignees(activityInstance)}></mwc-icon-button>`}
             </div>
           </div>`
         : html``}

package/client/templates/activity-thread-context-template.ts

@@ -1,5 +1,6 @@
 import '@material/mwc-icon'
 import '@things-factory/organization/dist-client/component/approval-line-view.js'
+import '../components/activity-approval-timeline'
 
 import { html, css, LitElement, nothing } from 'lit'
 import { customElement, property, state } from 'lit/decorators.js'
@@ -10,8 +11,6 @@ import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-
 import { store } from '@operato/shell'
 import { i18next } from '@operato/i18n'
 
-import { ActivityApproval } from '../types/activity-approval'
-
 const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })
 
 @customElement('activity-thread-context-template')
@@ -23,6 +22,7 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         background-color: var(--theme-white-color);
         width: 100%;
         min-width: 450px;
+        max-height: 100%;
         overflow: auto;
         --context-ui-padding: 0;
       }
@@ -59,121 +59,49 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
         --worklist-status-color: #cb3a33;
       }
 
-      div[info],
-      [assignees] {
+      :host:before {
+        content: '';
+        position: absolute;
+        width: 0;
+        height: 0;
+        border: 22px solid transparent;
+        border-left-color: var(--worklist-status-color);
+        border-right: 0;
+      }
+
+      div[info] {
         padding: var(--padding-default);
         border-bottom: var(--border-dark-color);
         color: var(--secondary-color);
-      }
 
-      div[info] div {
-        display: flex;
-        align-items: center;
-        padding: var(--padding-narrow);
-        border-radius: var(--border-radius);
-        text-align: right;
-        clear: both;
-        overflow: hidden;
-      }
-
-      div[info] div:nth-child(odd) {
-        background-color: var(--main-section-background-color);
-      }
-
-      div[info] label {
-        display: inline-block;
-        width: 25%;
-        text-align: right;
-        margin-right: 20px;
-      }
-
-      div[info] span {
-        width: 15px;
-        height: 15px;
-        background-color: var(--worklist-status-color, tomato);
-        display: inline-block;
-        border-radius: 50%;
-      }
-
-      div[timeline] {
-        margin-bottom: var(--margin-default);
-        padding: var(--padding-default);
-      }
-      div[timeline] [subtitle] {
-        padding: var(--padding-narrow) var(--padding-default);
-        background-color: var(--theme-white-color);
-        border: 2px solid var(--secondary-text-color);
-        border-radius: 15px;
-        box-shadow: var(--box-shadow);
-        color: var(--secondary-text-color);
-        font-weight: bold;
-      }
-      div[timeline] ol {
-        list-style: none;
-        margin: var(--margin-default) 0 0 var(--margin-narrow);
-        padding: 0;
-      }
-      [timeline] li {
-        display: flex;
-        border: none;
-      }
-      [timeline] [info] {
-        flex: 1;
-        color: initial;
-      }
-      [timeline] [date] {
-        opacity: 0.7;
-        flex: initial;
-        width: 130px;
-        font-size: var(--fontsize-small);
-        color: var(--primary-text-color);
-      }
-      [timeline] [info] strong {
-        float: right;
-      }
-      [timeline] [status] {
-        margin: 0 var(--margin-narrow);
-        display: block;
-        border-radius: 50%;
-        flex: initial;
-        width: 12px;
-        height: 12px;
-        position: relative;
-        top: 3px;
-        border: 2px solid #fff;
-        background-color: var(--worklist-status-color, tomato);
-        color: var(--primary-text-color);
-      }
-      [timeline] [status]::before {
-        content: '';
-        height: 60px;
-        width: 2px;
-        display: block;
-        position: relative;
-        margin-left: 5px;
-        background-color: var(--worklist-status-color, tomato);
-        opacity: 0.2;
-      }
-      [timeline] [info] mwc-icon {
-        position: relative;
-        top: 3px;
-        font-size: var(--fontsize-large);
-      }
-      [timeline] [info] p {
-        background-color: #f4f4f4;
-        margin: var(--margin-narrow) 0 var(--margin-default) 0;
-        padding: var(--padding-narrow) var(--padding-default);
-        font-size: var(--fontsize-small);
-        text-align: justify;
-      }
-      [timeline] [info] p::before {
-        content: '';
-        float: right;
-        margin-top: -10px;
-        margin-right: 20px;
-        border: 7px solid transparent;
-        border-bottom-color: #f4f4f4;
-        border-top: 0;
+        div {
+          display: flex;
+          align-items: center;
+          padding: var(--padding-narrow);
+          border-radius: var(--border-radius);
+          text-align: right;
+          clear: both;
+          overflow: hidden;
+        }
+
+        div:nth-child(odd) {
+          background-color: var(--main-section-background-color);
+        }
+
+        label {
+          display: inline-block;
+          width: 25%;
+          text-align: right;
+          margin-right: 20px;
+        }
+
+        span {
+          width: 15px;
+          height: 15px;
+          background-color: var(--worklist-status-color, tomato);
+          display: inline-block;
+          border-radius: 50%;
+        }
       }
 
       [thumbnail] {
@@ -197,47 +125,26 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
   render() {
     const activityThread = this.context.activityThread || this.activityThread || {}
 
-    const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } =
-      activityThread || {}
+    const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } = activityThread || {}
     const { name, description, thumbnail, approvalLine } = activityInstance || {}
 
     return html`
       <div flow>
-        <div approval-line>
-          ${approvalLine ? html` <approval-line-view .model=${approvalLine}></approval-line-view> ` : html``}
-        </div>
+        <div approval-line>${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.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.assignee')}</label> <strong>${assignee?.name}</strong></div>
-        <div>
-          <label>${i18next.t('field.assigned-at')}</label> ${assignedAt && formatter.format(new Date(assignedAt))}
-        </div>
+        <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.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}
-        </div>
+        <div><label>${i18next.t('field.terminated-at')}</label> ${terminatedAt && formatter.format(new Date(terminatedAt))}</div>
       </div>
 
-      ${activityApprovals && activityApprovals.length > 0
-        ? html`
-            <div timeline>
-              <span subtitle>${i18next.t('label.review-and-approval')}</span>
-
-              <ol>
-                ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
-              </ol>
-            </div>
-          `
-        : nothing}
+      ${activityApprovals && activityApprovals.length > 0 ? html` <activity-approval-timeline .activityThread=${activityThread}></activity-approval-timeline> ` : nothing}
       ${thumbnail
         ? html` <div thumbnail>
             <img src=${thumbnail} />
@@ -246,23 +153,6 @@ class ActivityThreadContextTemplate extends connect(store)(LitElement) {
     `
   }
 
-  renderActivityApproval(activityApproval: ActivityApproval) {
-    const { judgment, approver, comment, round, order, createdAt, terminatedAt } = activityApproval
-    const { name, email } = approver || {}
-
-    return html`
-      <li>
-        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>
-        <span status></span>
-        <span info>
-          ${i18next.t('label.activity-state-' + (judgment || 'started'))}
-          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>
-          <p>${comment}</p>
-        </span>
-      </li>
-    `
-  }
-
   stateChanged(state) {
     this.context = state.route.context
   }

package/dist-client/components/activity-approval-timeline.d.ts

@@ -0,0 +1,18 @@
+import '@material/mwc-icon';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import { LitElement } from 'lit';
+import { ActivityApproval } from '../types/activity-approval';
+declare const ActivityApprovalTimeline_base: (new (...args: any[]) => {
+    _storeUnsubscribe: import("redux").Unsubscribe;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    stateChanged(_state: unknown): void;
+    readonly isConnected: boolean;
+}) & typeof LitElement;
+export declare class ActivityApprovalTimeline extends ActivityApprovalTimeline_base {
+    static styles: import("lit").CSSResult[];
+    private activityThread;
+    render(): import("lit-html").TemplateResult<1>;
+    renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
+}
+export {};

package/dist-client/components/activity-approval-timeline.js

@@ -0,0 +1,145 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/mwc-icon';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import { html, css, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { connect } from 'pwa-helpers/connect-mixin';
+import { store } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+const formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
+let ActivityApprovalTimeline = class ActivityApprovalTimeline extends connect(store)(LitElement) {
+    render() {
+        const { activityApprovals = [] } = this.activityThread || {};
+        return html ` ${activityApprovals.length > 0
+            ? html `
+          <span subtitle>${i18next.t('label.review-and-approval')}</span>
+
+          <ol>
+            ${activityApprovals.map(approval => this.renderActivityApproval(approval))}
+          </ol>
+        `
+            : nothing}`;
+    }
+    renderActivityApproval(activityApproval) {
+        const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval;
+        const { name } = approver || {};
+        return html `
+      <li>
+        <span date>${formatter.format(new Date(terminatedAt || createdAt))}</span>
+        <span status></span>
+        <span info>
+          ${i18next.t('label.activity-state-' + (judgment || 'started'))}
+          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>
+          <p>${comment}</p>
+        </span>
+      </li>
+    `;
+    }
+};
+ActivityApprovalTimeline.styles = [
+    css `
+      :host {
+        display: block;
+        margin-bottom: var(--margin-default);
+        padding: var(--padding-default);
+      }
+
+      [subtitle] {
+        padding: var(--padding-narrow) var(--padding-default);
+        background-color: var(--theme-white-color);
+        border: 2px solid var(--secondary-text-color);
+        border-radius: 15px;
+        box-shadow: var(--box-shadow);
+        color: var(--secondary-text-color);
+        font-weight: bold;
+      }
+
+      ol {
+        list-style: none;
+        margin: var(--margin-default) 0 0 var(--margin-narrow);
+        padding: 0;
+      }
+
+      li {
+        display: flex;
+        border: none;
+      }
+
+      [info] {
+        flex: 1;
+        color: var(--secondary-color);
+
+        strong {
+          float: right;
+        }
+
+        mwc-icon {
+          position: relative;
+          top: 3px;
+          font-size: var(--fontsize-large);
+        }
+
+        p {
+          background-color: #f4f4f4;
+          margin: var(--margin-narrow) 0 var(--margin-default) 0;
+          padding: var(--padding-narrow) var(--padding-default);
+          font-size: var(--fontsize-small);
+          text-align: justify;
+          min-height: 20px;
+        }
+
+        p::before {
+          content: '';
+          float: right;
+          margin-top: -10px;
+          margin-right: 20px;
+          border: 7px solid transparent;
+          border-bottom-color: #f4f4f4;
+          border-top: 0;
+        }
+      }
+
+      [date] {
+        opacity: 0.7;
+        flex: initial;
+        width: 200px;
+        max-width: 30%;
+        font-size: var(--fontsize-small);
+        color: var(--primary-text-color);
+      }
+
+      [status] {
+        margin: 0 var(--margin-narrow);
+        display: block;
+        border-radius: 50%;
+        flex: initial;
+        width: 12px;
+        height: 12px;
+        position: relative;
+        top: 3px;
+        border: 2px solid #fff;
+        background-color: var(--worklist-status-color, tomato);
+        color: var(--primary-text-color);
+      }
+
+      [status]::before {
+        content: '';
+        height: 60px;
+        width: 2px;
+        display: block;
+        position: relative;
+        margin-left: 5px;
+        background-color: var(--worklist-status-color, tomato);
+        opacity: 0.2;
+      }
+    `
+];
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityApprovalTimeline.prototype, "activityThread", void 0);
+ActivityApprovalTimeline = __decorate([
+    customElement('activity-approval-timeline')
+], ActivityApprovalTimeline);
+export { ActivityApprovalTimeline };
+//# sourceMappingURL=activity-approval-timeline.js.map

package/dist-client/components/activity-approval-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"activity-approval-timeline.js","sourceRoot":"","sources":["../../client/components/activity-approval-timeline.ts"],"names":[],"mappings":";AAAA,OAAO,oBAAoB,CAAA;AAC3B,OAAO,0EAA0E,CAAA;AAEjF,OAAO,EAAE,IAAI,EAAE,GAAG,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,OAAO,EAAE,MAAM,2BAA2B,CAAA;AAEnD,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAA;AACtC,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAIvC,MAAM,SAAS,GAAG,IAAI,IAAI,CAAC,cAAc,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAGjG,IAAM,wBAAwB,GAA9B,MAAM,wBAAyB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAsGtE,MAAM;QACJ,MAAM,EAAE,iBAAiB,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,CAAA;QAE5D,OAAO,IAAI,CAAA,IAAI,iBAAiB,CAAC,MAAM,GAAG,CAAC;YACzC,CAAC,CAAC,IAAI,CAAA;2BACe,OAAO,CAAC,CAAC,CAAC,2BAA2B,CAAC;;;cAGnD,iBAAiB,CAAC,GAAG,CAAC,QAAQ,CAAC,EAAE,CAAC,IAAI,CAAC,sBAAsB,CAAC,QAAQ,CAAC,CAAC;;SAE7E;YACH,CAAC,CAAC,OAAO,EAAE,CAAA;IACf,CAAC;IAED,sBAAsB,CAAC,gBAAkC;QACvD,MAAM,EAAE,QAAQ,EAAE,QAAQ,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,GAAG,gBAAgB,CAAA;QACjF,MAAM,EAAE,IAAI,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAE/B,OAAO,IAAI,CAAA;;qBAEM,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,YAAY,IAAI,SAAU,CAAC,CAAC;;;YAG/D,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,CAAC,QAAQ,IAAI,SAAS,CAAC,CAAC;uDACjB,IAAI;eAC5C,OAAO;;;KAGjB,CAAA;IACH,CAAC;;AAlIM,+BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;gEAAuB;AApGvC,wBAAwB;IADpC,aAAa,CAAC,4BAA4B,CAAC;GAC/B,wBAAwB,CAoIpC;SApIY,wBAAwB","sourcesContent":["import '@material/mwc-icon'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { connect } from 'pwa-helpers/connect-mixin'\n\nimport { store } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport { ActivityApproval } from '../types/activity-approval'\n\nconst formatter = new Intl.DateTimeFormat(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-approval-timeline')\nexport class ActivityApprovalTimeline extends connect(store)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: block;\n        margin-bottom: var(--margin-default);\n        padding: var(--padding-default);\n      }\n\n      [subtitle] {\n        padding: var(--padding-narrow) var(--padding-default);\n        background-color: var(--theme-white-color);\n        border: 2px solid var(--secondary-text-color);\n        border-radius: 15px;\n        box-shadow: var(--box-shadow);\n        color: var(--secondary-text-color);\n        font-weight: bold;\n      }\n\n      ol {\n        list-style: none;\n        margin: var(--margin-default) 0 0 var(--margin-narrow);\n        padding: 0;\n      }\n\n      li {\n        display: flex;\n        border: none;\n      }\n\n      [info] {\n        flex: 1;\n        color: var(--secondary-color);\n\n        strong {\n          float: right;\n        }\n\n        mwc-icon {\n          position: relative;\n          top: 3px;\n          font-size: var(--fontsize-large);\n        }\n\n        p {\n          background-color: #f4f4f4;\n          margin: var(--margin-narrow) 0 var(--margin-default) 0;\n          padding: var(--padding-narrow) var(--padding-default);\n          font-size: var(--fontsize-small);\n          text-align: justify;\n          min-height: 20px;\n        }\n\n        p::before {\n          content: '';\n          float: right;\n          margin-top: -10px;\n          margin-right: 20px;\n          border: 7px solid transparent;\n          border-bottom-color: #f4f4f4;\n          border-top: 0;\n        }\n      }\n\n      [date] {\n        opacity: 0.7;\n        flex: initial;\n        width: 200px;\n        max-width: 30%;\n        font-size: var(--fontsize-small);\n        color: var(--primary-text-color);\n      }\n\n      [status] {\n        margin: 0 var(--margin-narrow);\n        display: block;\n        border-radius: 50%;\n        flex: initial;\n        width: 12px;\n        height: 12px;\n        position: relative;\n        top: 3px;\n        border: 2px solid #fff;\n        background-color: var(--worklist-status-color, tomato);\n        color: var(--primary-text-color);\n      }\n\n      [status]::before {\n        content: '';\n        height: 60px;\n        width: 2px;\n        display: block;\n        position: relative;\n        margin-left: 5px;\n        background-color: var(--worklist-status-color, tomato);\n        opacity: 0.2;\n      }\n    `\n  ]\n\n  @property({ type: Object }) private activityThread\n\n  render() {\n    const { activityApprovals = [] } = this.activityThread || {}\n\n    return html` ${activityApprovals.length > 0\n      ? html`\n          <span subtitle>${i18next.t('label.review-and-approval')}</span>\n\n          <ol>\n            ${activityApprovals.map(approval => this.renderActivityApproval(approval))}\n          </ol>\n        `\n      : nothing}`\n  }\n\n  renderActivityApproval(activityApproval: ActivityApproval) {\n    const { judgment, approver, comment, createdAt, terminatedAt } = activityApproval\n    const { name } = approver || {}\n\n    return html`\n      <li>\n        <span date>${formatter.format(new Date(terminatedAt || createdAt!))}</span>\n        <span status></span>\n        <span info>\n          ${i18next.t('label.activity-state-' + (judgment || 'started'))}\n          <strong><mwc-icon>account_circle</mwc-icon>${name}</strong>\n          <p>${comment}</p>\n        </span>\n      </li>\n    `\n  }\n}\n"]}

package/dist-client/pages/activity-approval/activity-approval-page.d.ts

@@ -1,8 +1,8 @@
 import '@operato/property-editor/ox-properties-dynamic-view.js';
 import '@operato/board/ox-board-viewer.js';
 import '../../components/activity-approval-ribon.js';
+import '../../components/activity-approval-timeline.js';
 import { PageView } from '@operato/shell';
-import { ActivityApproval } from '../../types/activity-approval.js';
 export declare const ActivityThreadStatus: {
     Assigned: string;
     Started: string;
@@ -39,7 +39,6 @@ export declare class ActivityApprovalPage extends ActivityApprovalPage_base {
         }[];
     };
     render(): import("lit-html").TemplateResult<1>;
-    renderActivityApproval(activityApproval: ActivityApproval): import("lit-html").TemplateResult<1>;
     activityContent(): any;
     templateContent(): import("lit-html/directive.js").DirectiveResult<typeof import("lit-html/directives/unsafe-html.js").UnsafeHTMLDirective>;
     getInputSpec(): any;