@things-factory/worklist 6.1.68 → 6.1.70

package/client/components/activity-approval-ribon.ts

@@ -97,19 +97,19 @@ export class ActivityApprovalRibon extends localize(i18next)(LitElement) {
       }
 
       @media only screen and (max-width: 460px) {
-        :host {
-          flex-direction: column;
-        }
         div {
           border-left: none;
-          border-bottom: var(--border-dark-color);
         }
+
         [assignee] {
           display: none;
         }
         mwc-icon {
           padding: 0;
         }
+        approval-line-brief {
+          display: none;
+        }
       }
     `
   ]
@@ -156,7 +156,7 @@ export class ActivityApprovalRibon extends localize(i18next)(LitElement) {
   }
 
   updated(changes) {
-    if (changes.has('activityApproval')) {
+    if (changes.has('activityApproval') && this.activityApproval) {
       const { state } = this.activityApproval.activityThread
 
       this.setAttribute('state', state)

package/client/components/activity-instance-ribon.ts

@@ -94,16 +94,12 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
       [state] {
         text-align: right;
         font-size: var(--fontsize-small);
-        font-weight:bold;
+        font-weight: bold;
       }
 
       @media only screen and (max-width: 460px) {
-        :host {
-          flex-direction: column;
-        }
         div {
           border-left: none;
-          border-bottom: var(--border-dark-color);
         }
         [assignee] {
           display: none;
@@ -111,6 +107,9 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
         mwc-icon {
           padding: 0;
         }
+        approval-line-brief {
+          display: none;
+        }
       }
     `
   ]
@@ -132,7 +131,8 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
               ></activity-instance-context-template>`
             })
           }}
-          >description</mwc-icon>
+          >description</mwc-icon
+        >
         ${description}
       </div>
       ${startingType == 'issue' && assignee
@@ -150,7 +150,7 @@ export class ActivityInstanceRibon extends localize(i18next)(LitElement) {
   }
 
   updated(changes) {
-    if (changes.has('activityInstance')) {
+    if (changes.has('activityInstance') && this.activityInstance) {
       const { state } = this.activityInstance
 
       this.setAttribute('state', state)

package/client/components/activity-thread-ribon.ts

@@ -97,12 +97,8 @@ export class ActivityThreadRibon extends localize(i18next)(LitElement) {
       }
 
       @media only screen and (max-width: 460px) {
-        :host {
-          flex-direction: column;
-        }
         div {
           border-left: none;
-          border-bottom: var(--border-dark-color);
         }
         [assignee] {
           display: none;
@@ -110,6 +106,9 @@ export class ActivityThreadRibon extends localize(i18next)(LitElement) {
         mwc-icon {
           padding: 0;
         }
+        approval-line-brief {
+          display: none;
+        }
       }
     `
   ]
@@ -151,7 +150,7 @@ export class ActivityThreadRibon extends localize(i18next)(LitElement) {
   }
 
   updated(changes) {
-    if (changes.has('activityThread')) {
+    if (changes.has('activityThread') && this.activityThread) {
       const { state } = this.activityThread
 
       this.setAttribute('state', state)

package/client/pages/activity/starter-list-page.ts

@@ -52,9 +52,6 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
     `
   ]
 
-  @property({ type: Object }) gristConfig?: any
-  @property({ type: String }) mode: 'GRID' | 'LIST' | 'CARD' = isMobileDevice() ? 'CARD' : 'GRID'
-
   get context() {
     return {
       search: {
@@ -73,34 +70,16 @@ export class StarterListPage extends connect(store)(localize(i18next)(PageView))
     }
   }
 
+  @property({ type: Object }) gristConfig?: any
+
   @query('#sorter-control') sorterControl?: any
   @query('ox-grist') grist!: DataGrist
 
   @state() filters?: string[]
 
   render() {
-    const mode = this.mode
-
     return html`
-      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
-        <div slot="headroom">
-          <div id="filters">
-            <!-- <ox-input-select-buttons
-              .value=${this.filters}
-              .options=${FILTERS}
-              @change=${(e: CustomEvent) => {
-              this.filters = (e.currentTarget as any)?.value
-            }}
-            ></ox-input-select-buttons> -->
-          </div>
-
-          <div id="modes">
-            <mwc-icon @click=${() => (this.mode = 'GRID')} ?active=${mode == 'GRID'}>grid_on</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'LIST')} ?active=${mode == 'LIST'}>format_list_bulleted</mwc-icon>
-            <mwc-icon @click=${() => (this.mode = 'CARD')} ?active=${mode == 'CARD'}>apps</mwc-icon>
-          </div>
-        </div>
-      </ox-grist>
+      <ox-grist .mode=${'CARD'} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}> </ox-grist>
     `
   }
 

package/client/pages/activity-approval/activity-approval-list-page.ts

@@ -5,12 +5,7 @@ import { PageView, store } from '@operato/shell'
 import { css, html } from 'lit'
 import { customElement, property, query } from 'lit/decorators.js'
 import { ScopedElementsMixin } from '@open-wc/scoped-elements'
-import {
-  ColumnConfig,
-  DataGrist,
-  FetchOption,
-  SortersControl
-} from '@operato/data-grist'
+import { ColumnConfig, DataGrist, FetchOption, SortersControl } from '@operato/data-grist'
 import { client } from '@operato/graphql'
 import { i18next, localize } from '@operato/i18n'
 import { notify, openPopup } from '@operato/layout'
@@ -24,7 +19,6 @@ import { ActivityApprovalImporter } from './activity-approval-importer'
 
 @customElement('activity-approval-list-page')
 export class ActivityApprovalListPage extends connect(store)(localize(i18next)(ScopedElementsMixin(PageView))) {
-
   static styles = [
     ScrollbarStyles,
     CommonGristStyles,
@@ -58,7 +52,7 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
         handler: (search: string) => {
           this.grist.searchText = search
         },
-        placeholder: i18next.t('title.activity-approval list'),
+        placeholder: i18next.t('title.activity approval list'),
         value: this.grist.searchText
       },
       filter: {
@@ -80,7 +74,7 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
         }
       ],
       exportable: {
-        name: i18next.t('title.activity-approval list'),
+        name: i18next.t('title.activity approval list'),
         data: this.exportHandler.bind(this)
       },
       importable: {
@@ -93,11 +87,7 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
     const mode = this.mode || (isMobileDevice() ? 'CARD' : 'GRID')
 
     return html`
-      <ox-grist
-        .mode=${mode}
-        .config=${this.gristConfig}
-        .fetchHandler=${this.fetchHandler.bind(this)}
-      >
+      <ox-grist .mode=${mode} .config=${this.gristConfig} .fetchHandler=${this.fetchHandler.bind(this)}>
         <div slot="headroom">
           <div id="filters">
             <ox-filters-form autofocus></ox-filters-form>
@@ -305,12 +295,7 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
 
   async exportHandler() {
     const exportTargets = this.grist.selected.length ? this.grist.selected : this.grist.dirtyData.records
-    const targetFieldSet = new Set([
-      'id',
-      'name',
-      'description',
-      'active'
-    ])
+    const targetFieldSet = new Set(['id', 'name', 'description', 'active'])
 
     return exportTargets.map(activityApproval => {
       let tempObj = {}
@@ -339,10 +324,9 @@ export class ActivityApprovalListPage extends connect(store)(localize(i18next)(S
         title: i18next.t('title.import activity-approval')
       }
     )
-    
+
     popup.onclosed = () => {
       this.grist.fetch()
     }
   }
 }
-

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

@@ -142,7 +142,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
     const judgment = this.activityApproval?.judgment
 
     return {
-      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity-approval'),
+      title: this.lifecycle?.params?.['title'] || i18next.t('title.activity approval'),
       help: 'worklist/activity-approval',
       actions: judgment
         ? []
@@ -204,6 +204,10 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   templateContent() {
+    if (!this.activityApproval) {
+      return html``
+    }
+
     const { viewSource: template } = this.activityThread?.activityInstance
     return unsafeHTML(template)
   }
@@ -239,6 +243,10 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   generatedContent() {
+    if (!this.activityApproval) {
+      return html``
+    }
+
     var { output, activityInstance } = this.activityThread || {}
     var { input } = activityInstance || {}
 
@@ -280,6 +288,10 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   boardContent() {
+    if (!this.activityApproval) {
+      return html``
+    }
+
     const { output, activityInstance } = this.activityThread
     const { viewSource: boardId, input } = activityInstance || {}
 
@@ -305,6 +317,10 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   customElementContent() {
+    if (!this.activityApproval) {
+      return html``
+    }
+
     const { output, activityInstance } = this.activityThread
     const { viewSource: tagName, input } = activityInstance || {}
 
@@ -336,7 +352,7 @@ export class ActivityApprovalPage extends connect(store)(localize(i18next)(PageV
   }
 
   async pageUpdated(changes, lifecycle, changedBefore) {
-    if (this.active) {
+    if (this.active && lifecycle.resourceId) {
       this.fetchActivityApproval(lifecycle.resourceId)
     }
   }

package/client/pages/activity-instance/activity-instance-search-page.ts

@@ -165,7 +165,7 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
     this.gristConfig = {
       list: {
         fields: ['name', 'description'],
-        details: ['input', 'updatedAt']
+        details: ['updatedAt', 'updater', 'createdAt', 'creator']
       },
       columns: [
         { type: 'gutter', gutterName: 'sequence' },
@@ -208,7 +208,6 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
         {
           type: 'string',
           name: 'description',
-          label: true,
           header: i18next.t('field.description'),
           record: {
             editable: false
@@ -238,11 +237,30 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
           hidden: true,
           imex: true
         },
+        {
+          type: 'resource-object',
+          name: 'creator',
+          header: i18next.t('field.creator'),
+          sortable: true,
+          label: true,
+          width: 100,
+          imex: true
+        },
+        {
+          type: 'datetime',
+          name: 'createdAt',
+          header: i18next.t('field.created_at'),
+          sortable: true,
+          label: true,
+          width: 180,
+          imex: true
+        },
         {
           type: 'resource-object',
           name: 'updater',
           header: i18next.t('field.updater'),
           sortable: true,
+          label: true,
           width: 100,
           imex: true
         },
@@ -251,6 +269,7 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
           name: 'updatedAt',
           header: i18next.t('field.updated_at'),
           sortable: true,
+          label: true,
           width: 180,
           imex: true
         }
@@ -300,6 +319,11 @@ export class ActivityInstanceSearchPage extends connect(store)(localize(i18next)
                 name
               }
               updatedAt
+              creator {
+                id
+                name
+              }
+              createdAt
             }
             total
           }

package/client/pages/activity-instance/activity-instance-start-page.ts

@@ -97,6 +97,10 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
   }
 
   templateContent() {
+    if (!this.activityInstance) {
+      return html``
+    }
+
     const { uiSource: template } = this.activityInstance
     return unsafeHTML(template)
   }
@@ -132,6 +136,10 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
   }
 
   generatedContent() {
+    if (!this.activityInstance) {
+      return html``
+    }
+
     var { input, output } = this.activityInstance || {}
 
     const inputSpec = this.getInputSpec()
@@ -173,6 +181,10 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
   }
 
   boardContent() {
+    if (!this.activityInstance) {
+      return html``
+    }
+
     const { uiSource: boardId, input, output } = this.activityInstance
 
     if (!this.board || this.board.id !== boardId) {
@@ -202,6 +214,10 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
   }
 
   customElementContent() {
+    if (!this.activityInstance) {
+      return html``
+    }
+
     const { uiSource: tagName, input, output } = this.activityInstance
 
     if (!this.customHtmlElement) {
@@ -254,7 +270,7 @@ export class ActivityInstanceStartPage extends connect(store)(localize(i18next)(
   }
 
   async pageUpdated(changes, lifecycle, changedBefore) {
-    if (this.active) {
+    if (this.active && lifecycle.resourceId) {
       this.fetchActivityInstance(lifecycle.resourceId)
     } else {
       this.customHtmlElement = undefined

package/client/pages/activity-thread/activity-thread-list-page.ts

@@ -40,7 +40,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
         handler: (search: string) => {
           this.grist.searchText = search
         },
-        placeholder: i18next.t('title.activity-thread list'),
+        placeholder: i18next.t('title.activity thread list'),
         value: this.grist.searchText
       },
       filter: {
@@ -62,7 +62,7 @@ export class ActivityThreadListPage extends connect(store)(localize(i18next)(Pag
         }
       ],
       exportable: {
-        name: i18next.t('title.activity-thread list'),
+        name: i18next.t('title.activity thread list'),
         data: this.exportHandler.bind(this)
       },
       importable: {

package/client/pages/activity-thread/activity-thread-page.ts

@@ -179,6 +179,10 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
   }
 
   templateContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     const { uiSource: template } = this.activityThread?.activityInstance
     return unsafeHTML(template)
   }
@@ -214,6 +218,10 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
   }
 
   generatedContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     var { output, activityInstance } = this.activityThread || {}
     var { input } = activityInstance || {}
 
@@ -230,7 +238,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
     }
 
     return keyed(
-      this.activityThread.id,
+      this.activityThread?.id,
       html`
         <fieldset>
           <legend>Input</legend>
@@ -255,6 +263,10 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
   }
 
   boardContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     const { output, activityInstance } = this.activityThread
     const { uiSource: boardId, input } = activityInstance || {}
 
@@ -285,6 +297,10 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
   }
 
   customElementContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     const { output, activityInstance } = this.activityThread
     const { uiSource: tagName, input } = activityInstance || {}
 
@@ -319,7 +335,7 @@ export class ActivityThreadPage extends connect(store)(localize(i18next)(PageVie
   }
 
   async pageUpdated(changes, lifecycle, changedBefore) {
-    if (this.active) {
+    if (this.active && lifecycle.resourceId) {
       this.fetchActivityThread(lifecycle.resourceId)
     }
   }

package/client/pages/activity-thread/activity-thread-view-page.ts

@@ -145,6 +145,10 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
   }
 
   templateContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     const { viewSource: template } = this.activityThread?.activityInstance
     return unsafeHTML(template)
   }
@@ -180,6 +184,10 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
   }
 
   generatedContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     return keyed(
       this.activityThread.id,
       html` <activity-thread-view .activityThreadId=${this.activityThread.id}></activity-thread-view> `
@@ -187,6 +195,10 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
   }
 
   boardContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     const { output, activityInstance } = this.activityThread
     const { viewSource: boardId, input } = activityInstance || {}
 
@@ -217,6 +229,10 @@ export class ActivityThreadViewPage extends connect(store)(localize(i18next)(Pag
   }
 
   customElementContent() {
+    if (!this.activityThread) {
+      return html``
+    }
+
     const { output, activityInstance } = this.activityThread
     const { viewSource: tagName, input } = activityInstance || {}
 

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

@@ -47,7 +47,7 @@ let ActivityApprovalRibon = class ActivityApprovalRibon extends localize(i18next
     `;
     }
     updated(changes) {
-        if (changes.has('activityApproval')) {
+        if (changes.has('activityApproval') && this.activityApproval) {
             const { state } = this.activityApproval.activityThread;
             this.setAttribute('state', state);
         }
@@ -139,19 +139,19 @@ ActivityApprovalRibon.styles = [
       }
 
       @media only screen and (max-width: 460px) {
-        :host {
-          flex-direction: column;
-        }
         div {
           border-left: none;
-          border-bottom: var(--border-dark-color);
         }
+
         [assignee] {
           display: none;
         }
         mwc-icon {
           padding: 0;
         }
+        approval-line-brief {
+          display: none;
+        }
       }
     `
 ];

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

@@ -1 +1 @@
-{"version":3,"file":"activity-approval-ribon.js","sourceRoot":"","sources":["../../client/components/activity-approval-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA0GtE,MAAM;;QACJ,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,cAAc,KAAI,EAAE,CAAA;QAC/E,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAChF,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;oCACQ,IAAI,CAAC,gBAAgB;wBACjC,KAAK;qDACwB;aACxC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA;;gBAEE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;sBACrB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;;WAEzB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK;kCAChB;YAC1B,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAEG,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,EAAE;YACnC,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAA;YAEtD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AAtJM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAAsB;AAxGtC,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAwJjC;SAxJY,qBAAqB","sourcesContent":["import '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-approval-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-approval-ribon')\nexport class ActivityApprovalRibon extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: var(--worklist-status-color);\n        color: var(--theme-white-color);\n        align-items: center;\n        min-height: 44px;\n        --fontsize-small: 12px;\n      }\n\n      div {\n        border-left: var(--border-dark-color);\n        padding: var(--padding-narrow) var(--padding-default);\n        align-self: center;\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      mwc-icon {\n        font-size: 24px;\n      }\n\n      [desc] {\n        flex: 2;\n        font-size: var(--fontsize-small);\n      }\n\n      [desc] * {\n        vertical-align: middle;\n      }\n\n      [assignee] {\n        text-align: center;\n        font-size: var(--fontsize-small);\n        line-height: 1.3;\n      }\n\n      [assignee] span {\n        display: block;\n        font-size: var(--fontsize-large);\n        font-weight: bold;\n      }\n\n      approval-line-brief {\n        background-color: var(--worklist-status-color);\n        flex: 2;\n        font-size: var(--fontsize-small);\n      }\n\n      [state] {\n        text-align: right;\n        font-size: var(--fontsize-small);\n      }\n\n      @media only screen and (max-width: 460px) {\n        :host {\n          flex-direction: column;\n        }\n        div {\n          border-left: none;\n          border-bottom: var(--border-dark-color);\n        }\n        [assignee] {\n          display: none;\n        }\n        mwc-icon {\n          padding: 0;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) activityApproval: any\n\n  render() {\n    const { activityInstance, state } = this.activityApproval?.activityThread || {}\n    const { description, assignee, approvalLine, activity } = activityInstance || {}\n    const { startingType } = activity || {}\n\n    return html`\n      <div desc>\n        <mwc-icon\n          @click=${() => {\n            toggleOverlay('activity-info-overlay', {\n              template: html`<activity-approval-context-template\n                .activityApproval=${this.activityApproval}\n                state=${state}\n              ></activity-approval-context-template>`\n            })\n          }}\n          >description</mwc-icon\n        >\n        ${description}\n      </div>\n      ${startingType == 'issue' && assignee\n        ? html`\n            <div assignee>\n              ${i18next.t('field.assignee')}\n              <span>${assignee?.name}&nbsp;</span>\n            </div>\n          `\n        : html``}\n      ${approvalLine\n        ? html`<approval-line-brief\n            .model=${approvalLine}\n            .current=${this.activityApproval.order}\n          ></approval-line-brief>`\n        : html``}\n\n      <div state>${i18next.t('label.activity-state-' + state)}</div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityApproval')) {\n      const { state } = this.activityApproval.activityThread\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}
+{"version":3,"file":"activity-approval-ribon.js","sourceRoot":"","sources":["../../client/components/activity-approval-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,sBAAsB,CAAA;AAC7B,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,oDAAoD,CAAA;AAE3D,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAS,MAAM,mBAAmB,CAAA;AAElE,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAGxC,IAAM,qBAAqB,GAA3B,MAAM,qBAAsB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IA0GtE,MAAM;;QACJ,MAAM,EAAE,gBAAgB,EAAE,KAAK,EAAE,GAAG,CAAA,MAAA,IAAI,CAAC,gBAAgB,0CAAE,cAAc,KAAI,EAAE,CAAA;QAC/E,MAAM,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAChF,MAAM,EAAE,YAAY,EAAE,GAAG,QAAQ,IAAI,EAAE,CAAA;QAEvC,OAAO,IAAI,CAAA;;;mBAGI,GAAG,EAAE;YACZ,aAAa,CAAC,uBAAuB,EAAE;gBACrC,QAAQ,EAAE,IAAI,CAAA;oCACQ,IAAI,CAAC,gBAAgB;wBACjC,KAAK;qDACwB;aACxC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY,IAAI,OAAO,IAAI,QAAQ;YACnC,CAAC,CAAC,IAAI,CAAA;;gBAEE,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;sBACrB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,IAAI;;WAEzB;YACH,CAAC,CAAC,IAAI,CAAA,EAAE;QACR,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;qBACO,YAAY;uBACV,IAAI,CAAC,gBAAgB,CAAC,KAAK;kCAChB;YAC1B,CAAC,CAAC,IAAI,CAAA,EAAE;;mBAEG,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACxD,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,kBAAkB,CAAC,IAAI,IAAI,CAAC,gBAAgB,EAAE;YAC5D,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,gBAAgB,CAAC,cAAc,CAAA;YAEtD,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;SAClC;IACH,CAAC;;AAtJM,4BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAmGF;CACF,CAAA;AAED;IAAC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;+DAAsB;AAxGtC,qBAAqB;IADjC,aAAa,CAAC,yBAAyB,CAAC;GAC5B,qBAAqB,CAwJjC;SAxJY,qBAAqB","sourcesContent":["import '@material/mwc-button'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-approval-context-template.js'\n\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { i18next, localize } from '@operato/i18n'\nimport { toggleOverlay } from '@operato/layout'\n\n@customElement('activity-approval-ribon')\nexport class ActivityApprovalRibon extends localize(i18next)(LitElement) {\n  static styles = [\n    css`\n      :host {\n        display: flex;\n        background-color: var(--worklist-status-color);\n        color: var(--theme-white-color);\n        align-items: center;\n        min-height: 44px;\n        --fontsize-small: 12px;\n      }\n\n      div {\n        border-left: var(--border-dark-color);\n        padding: var(--padding-narrow) var(--padding-default);\n        align-self: center;\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      mwc-icon {\n        font-size: 24px;\n      }\n\n      [desc] {\n        flex: 2;\n        font-size: var(--fontsize-small);\n      }\n\n      [desc] * {\n        vertical-align: middle;\n      }\n\n      [assignee] {\n        text-align: center;\n        font-size: var(--fontsize-small);\n        line-height: 1.3;\n      }\n\n      [assignee] span {\n        display: block;\n        font-size: var(--fontsize-large);\n        font-weight: bold;\n      }\n\n      approval-line-brief {\n        background-color: var(--worklist-status-color);\n        flex: 2;\n        font-size: var(--fontsize-small);\n      }\n\n      [state] {\n        text-align: right;\n        font-size: var(--fontsize-small);\n      }\n\n      @media only screen and (max-width: 460px) {\n        div {\n          border-left: none;\n        }\n\n        [assignee] {\n          display: none;\n        }\n        mwc-icon {\n          padding: 0;\n        }\n        approval-line-brief {\n          display: none;\n        }\n      }\n    `\n  ]\n\n  @property({ type: Object }) activityApproval: any\n\n  render() {\n    const { activityInstance, state } = this.activityApproval?.activityThread || {}\n    const { description, assignee, approvalLine, activity } = activityInstance || {}\n    const { startingType } = activity || {}\n\n    return html`\n      <div desc>\n        <mwc-icon\n          @click=${() => {\n            toggleOverlay('activity-info-overlay', {\n              template: html`<activity-approval-context-template\n                .activityApproval=${this.activityApproval}\n                state=${state}\n              ></activity-approval-context-template>`\n            })\n          }}\n          >description</mwc-icon\n        >\n        ${description}\n      </div>\n      ${startingType == 'issue' && assignee\n        ? html`\n            <div assignee>\n              ${i18next.t('field.assignee')}\n              <span>${assignee?.name}&nbsp;</span>\n            </div>\n          `\n        : html``}\n      ${approvalLine\n        ? html`<approval-line-brief\n            .model=${approvalLine}\n            .current=${this.activityApproval.order}\n          ></approval-line-brief>`\n        : html``}\n\n      <div state>${i18next.t('label.activity-state-' + state)}</div>\n    `\n  }\n\n  updated(changes) {\n    if (changes.has('activityApproval') && this.activityApproval) {\n      const { state } = this.activityApproval.activityThread\n\n      this.setAttribute('state', state)\n    }\n  }\n}\n"]}

package/dist-client/components/activity-instance-ribon.js

@@ -26,7 +26,8 @@ let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next
               ></activity-instance-context-template>`
             });
         }}
-          >description</mwc-icon>
+          >description</mwc-icon
+        >
         ${description}
       </div>
       ${startingType == 'issue' && assignee
@@ -43,7 +44,7 @@ let ActivityInstanceRibon = class ActivityInstanceRibon extends localize(i18next
     `;
     }
     updated(changes) {
-        if (changes.has('activityInstance')) {
+        if (changes.has('activityInstance') && this.activityInstance) {
             const { state } = this.activityInstance;
             this.setAttribute('state', state);
         }
@@ -132,16 +133,12 @@ ActivityInstanceRibon.styles = [
       [state] {
         text-align: right;
         font-size: var(--fontsize-small);
-        font-weight:bold;
+        font-weight: bold;
       }
 
       @media only screen and (max-width: 460px) {
-        :host {
-          flex-direction: column;
-        }
         div {
           border-left: none;
-          border-bottom: var(--border-dark-color);
         }
         [assignee] {
           display: none;
@@ -149,6 +146,9 @@ ActivityInstanceRibon.styles = [
         mwc-icon {
           padding: 0;
         }
+        approval-line-brief {
+          display: none;
+        }
       }
     `
 ];