npm - @things-factory/worklist - Versions diffs - 9.0.0-beta.79 → 9.0.0-beta.80 - Mend

@things-factory/worklist 9.0.0-beta.79 → 9.0.0-beta.80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (159) hide show

package/dist-client/components/activity-intro-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-intro-view.js","sourceRoot":"","sources":["../../client/components/activity-intro-view.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QAC8B,uBAAkB,GAAW,EAAE,CAAA;QAE/B,qBAAgB,GAAQ,EAAE,CAAA;IAgFxD,CAAC;~~IArDC~~,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAEpE,OAAO,IAAI,CAAA;;;uBAGQ,IAAI;8BACG,WAAW;;;;qBAIpB,SAAS;;;KAGzB,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;IAC7C,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,EAAU;QAC5B,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;OAsBT;YACD,SAAS,EAAE;gBACT,EAAE;aACH;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAA;IACxD,CAAC;;~~AA7EM,wBAAM,GAAG~~;~~IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;CACF,AAvBY,CAuBZ;AA3B2B;~~IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAA2B;AAHlD,iBAAiB;IADtB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CAmFtB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-intro-view')\nclass ActivityIntroView extends localize(i18next)(LitElement) {\n @property({ type: String }) activityTemplateId: string = ''\n @property({ type: Object }) activityTemplate: any\n @property({ type: Object }) activityInstance: any = {}\n\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--spacing-medium);\n overflow: auto;\n }\n\n section {\n display: flex;\n flex-direction: column;\n }\n `\n ]\n\n render() {\n const { name, description, thumbnail } = this.activityTemplate \|\| {}\n\n return html`\n <content>\n <section>\n <div>name: ${name}</div>\n <div>description: ${description}</div>\n </section>\n\n <section>\n <img src=${thumbnail} />\n </section>\n </content>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityTemplateId)\n }\n\n async fetchActivity(id: string) {\n const response = await client.query({\n query: gql`\n query activityTemplate($id: String!) {\n activityTemplate(id: $id) {\n id\n name\n description\n state\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activityTemplate = response.data.activityTemplate\n }\n}\n"]}
1	+ {"version":3,"file":"activity-intro-view.js","sourceRoot":"","sources":["../../client/components/activity-intro-view.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,iBAAiB,GAAvB,MAAM,iBAAkB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAA7D;;QAC8B,uBAAkB,GAAW,EAAE,CAAA;QAE/B,qBAAgB,GAAQ,EAAE,CAAA;IAgFxD,CAAC;aA9EQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;KACF,AAvBY,CAuBZ;IAED,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,gBAAgB,IAAI,EAAE,CAAA;QAEpE,OAAO,IAAI,CAAA;;;uBAGQ,IAAI;8BACG,WAAW;;;;qBAIpB,SAAS;;;KAGzB,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,kBAAkB,CAAC,CAAA;IAC7C,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,EAAU;QAC5B,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;OAsBT;YACD,SAAS,EAAE;gBACT,EAAE;aACH;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,gBAAgB,GAAG,QAAQ,CAAC,IAAI,CAAC,gBAAgB,CAAA;IACxD,CAAC;;AAjF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;6DAAgC;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAsB;AACrB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAA2B;AAHlD,iBAAiB;IADtB,aAAa,CAAC,qBAAqB,CAAC;GAC/B,iBAAiB,CAmFtB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-intro-view')\nclass ActivityIntroView extends localize(i18next)(LitElement) {\n @property({ type: String }) activityTemplateId: string = ''\n @property({ type: Object }) activityTemplate: any\n @property({ type: Object }) activityInstance: any = {}\n\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--spacing-medium);\n overflow: auto;\n }\n\n section {\n display: flex;\n flex-direction: column;\n }\n `\n ]\n\n render() {\n const { name, description, thumbnail } = this.activityTemplate \|\| {}\n\n return html`\n <content>\n <section>\n <div>name: ${name}</div>\n <div>description: ${description}</div>\n </section>\n\n <section>\n <img src=${thumbnail} />\n </section>\n </content>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityTemplateId)\n }\n\n async fetchActivity(id: string) {\n const response = await client.query({\n query: gql`\n query activityTemplate($id: String!) {\n activityTemplate(id: $id) {\n id\n name\n description\n state\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activityTemplate = response.data.activityTemplate\n }\n}\n"]}

package/dist-client/components/activity-reporter-view.js CHANGED Viewed

@@ -11,6 +11,30 @@ let ActivityReporterView = class ActivityReporterView extends localize(i18next)(
         super(...arguments);
         this.activityInstance = {};
     }
+    static { this.styles = [
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--md-sys-color-surface);
+      }
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-medium);
+        overflow: auto;
+      }
+      section {
+        display: flex;
+        flex-direction: column;
+      }
+    `
+    ]; }
     render() {
         const { name, description, thumbnail } = this.activity || {};
         return html `
@@ -61,30 +85,6 @@ let ActivityReporterView = class ActivityReporterView extends localize(i18next)(
         this.activity = response.data.activity;
     }
 };
-ActivityReporterView.styles = [
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        background-color: var(--md-sys-color-surface);
-      }
-      content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: var(--spacing-medium);
-        overflow: auto;
-      }
-      section {
-        display: flex;
-        flex-direction: column;
-      }
-    `
-];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/components/activity-reporter-view.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-reporter-view.js","sourceRoot":"","sources":["../../client/components/activity-reporter-view.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAhE;;QA4B8B,qBAAgB,GAAQ,EAAE,CAAA;IAuDxD,CAAC;~~IArDC~~,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAE5D,OAAO,IAAI,CAAA;;;uBAGQ,IAAI;8BACG,WAAW;;;;qBAIpB,SAAS;;;KAGzB,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACrC,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,EAAE;QACpB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;OAsBT;YACD,SAAS,EAAE;gBACT,EAAE;aACH;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAA;IACxC,CAAC;;~~AAjFM,2BAAM,GAAG~~;~~IACd,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;CACF,AAvBY,CAuBZ;AAE2B;~~IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA2B;AA5BlD,oBAAoB;IADzB,aAAa,CAAC,wBAAwB,CAAC;GAClC,oBAAoB,CAmFzB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-reporter-view')\nclass ActivityReporterView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--spacing-medium);\n overflow: auto;\n }\n\n section {\n display: flex;\n flex-direction: column;\n }\n `\n ]\n\n @property({ type: String }) activityId?: string\n @property({ type: Object }) activity: any\n @property({ type: Object }) activityInstance: any = {}\n\n render() {\n const { name, description, thumbnail } = this.activity \|\| {}\n\n return html`\n <content>\n <section>\n <div>name: ${name}</div>\n <div>description: ${description}</div>\n </section>\n\n <section>\n <img src=${thumbnail} />\n </section>\n </content>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityId)\n }\n\n async fetchActivity(id) {\n const response = await client.query({\n query: gql`\n query activity($id: String!) {\n activity(id: $id) {\n id\n name\n description\n state\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activity = response.data.activity\n }\n}\n"]}
1	+ {"version":3,"file":"activity-reporter-view.js","sourceRoot":"","sources":["../../client/components/activity-reporter-view.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAEhD,OAAO,GAAG,MAAM,aAAa,CAAA;AAC7B,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAA;AAC3C,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAA;AACzC,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAA;AACjD,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAGjD,IAAM,oBAAoB,GAA1B,MAAM,oBAAqB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;IAAhE;;QA4B8B,qBAAgB,GAAQ,EAAE,CAAA;IAuDxD,CAAC;aAlFQ,WAAM,GAAG;QACd,eAAe;QACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;KAoBF;KACF,AAvBY,CAuBZ;IAMD,MAAM;QACJ,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,SAAS,EAAE,GAAG,IAAI,CAAC,QAAQ,IAAI,EAAE,CAAA;QAE5D,OAAO,IAAI,CAAA;;;uBAGQ,IAAI;8BACG,WAAW;;;;qBAIpB,SAAS;;;KAGzB,CAAA;IACH,CAAC;IAED,YAAY;QACV,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,UAAU,CAAC,CAAA;IACrC,CAAC;IAED,KAAK,CAAC,aAAa,CAAC,EAAE;QACpB,MAAM,QAAQ,GAAG,MAAM,MAAM,CAAC,KAAK,CAAC;YAClC,KAAK,EAAE,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;OAsBT;YACD,SAAS,EAAE;gBACT,EAAE;aACH;SACF,CAAC,CAAA;QAEF,IAAI,CAAC,QAAQ,GAAG,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAA;IACxC,CAAC;;AAxD2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAoB;AACnB;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;sDAAc;AACb;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;8DAA2B;AA5BlD,oBAAoB;IADzB,aAAa,CAAC,wBAAwB,CAAC;GAClC,oBAAoB,CAmFzB","sourcesContent":["import '@material/web/button/elevated-button.js'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-reporter-view')\nclass ActivityReporterView extends localize(i18next)(LitElement) {\n static styles = [\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n background-color: var(--md-sys-color-surface);\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--spacing-medium);\n overflow: auto;\n }\n\n section {\n display: flex;\n flex-direction: column;\n }\n `\n ]\n\n @property({ type: String }) activityId?: string\n @property({ type: Object }) activity: any\n @property({ type: Object }) activityInstance: any = {}\n\n render() {\n const { name, description, thumbnail } = this.activity \|\| {}\n\n return html`\n <content>\n <section>\n <div>name: ${name}</div>\n <div>description: ${description}</div>\n </section>\n\n <section>\n <img src=${thumbnail} />\n </section>\n </content>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityId)\n }\n\n async fetchActivity(id) {\n const response = await client.query({\n query: gql`\n query activity($id: String!) {\n activity(id: $id) {\n id\n name\n description\n state\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activity = response.data.activity\n }\n}\n"]}

package/dist-client/components/activity-starter-form.js CHANGED Viewed

@@ -18,8 +18,54 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
         this.activity = {};
         this.activityInstance = {};
     }
+    static { this.styles = [
+        CommonHeaderStyles,
+        ScrollbarStyles,
+        css `
+      :host {
+        display: flex;
+        flex-direction: column;
+        color: var(--md-sys-color-on-s);
+        background-color: var(--md-sys-color-surface);
+      }
+      content {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        padding: var(--spacing-medium);
+        gap: var(--spacing-medium);
+        overflow: auto;
+      }
+      content > div {
+        display: flex;
+        flex-direction: column;
+      }
+      content label {
+        font: var(--label-font);
+      }
+      content input,
+      content textarea {
+        border-radius: var(--border-radius);
+        border: var(--border-dim-color);
+        padding: var(--input-padding);
+        margin: var(--input-margin);
+        font: var(--input-font);
+      }
+      content [desc] {
+        font-size: 0.9em;
+      }
+      #description {
+        flex: 1;
+      }
+    `
+    ]; }
     render() {
-        var _a, _b;
         var { thumbnail, startingType } = this.activity || {};
         var { name, description } = this.activityInstance;
         return html `
@@ -40,7 +86,7 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
           id="name"
           type="text"
           label=${String(i18next.t('label.title'))}
-          .value=${name || ((_a = this.activity) === null || _a === void 0 ? void 0 : _a.name) || ''}
+          .value=${name || this.activity?.name || ''}
           @change=${e => (this.activityInstance.name = e.currentTarget.value)}
         >
         </md-outlined-text-field>
@@ -50,7 +96,7 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
           type="textarea"
           label=${String(i18next.t('label.description'))}
           resize="none"
-          .value=${description || ((_b = this.activity) === null || _b === void 0 ? void 0 : _b.description) || ''}
+          .value=${description || this.activity?.description || ''}
           @change=${e => {
             this.activityInstance.description = e.currentTarget.value;
         }}
@@ -126,10 +172,10 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
     async draftActivityInstance() {
         var { id: activityId } = this.activity;
         var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } = this.activityInstance;
-        name || (name = this.activity.name);
-        description || (description = this.activity.description);
-        assignees || (assignees = this.activity.assignees);
-        approvalLine || (approvalLine = this.activity.approvalLine);
+        name ||= this.activity.name;
+        description ||= this.activity.description;
+        assignees ||= this.activity.assignees;
+        approvalLine ||= this.activity.approvalLine;
         var activityInstance = {
             id,
             activityId,
@@ -196,53 +242,6 @@ let ActivityStarterForm = class ActivityStarterForm extends localize(i18next)(Li
         navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`);
     }
 };
-ActivityStarterForm.styles = [
-    CommonHeaderStyles,
-    ScrollbarStyles,
-    css `
-      :host {
-        display: flex;
-        flex-direction: column;
-        color: var(--md-sys-color-on-s);
-        background-color: var(--md-sys-color-surface);
-      }
-      content {
-        flex: 1;
-        display: flex;
-        flex-direction: column;
-        padding: var(--spacing-medium);
-        gap: var(--spacing-medium);
-        overflow: auto;
-      }
-      content > div {
-        display: flex;
-        flex-direction: column;
-      }
-      content label {
-        font: var(--label-font);
-      }
-      content input,
-      content textarea {
-        border-radius: var(--border-radius);
-        border: var(--border-dim-color);
-        padding: var(--input-padding);
-        margin: var(--input-margin);
-        font: var(--input-font);
-      }
-      content [desc] {
-        font-size: 0.9em;
-      }
-      #description {
-        flex: 1;
-      }
-    `
-];
 __decorate([
     property({ type: String }),
     __metadata("design:type", String)

package/dist-client/components/activity-starter-form.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-starter-form.js","sourceRoot":"","sources":["../../client/components/activity-starter-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n color: var(--md-sys-color-on-s);\n background-color: var(--md-sys-color-surface);\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--spacing-medium);\n gap: var(--spacing-medium);\n overflow: auto;\n }\n\n content > div {\n display: flex;\n flex-direction: column;\n }\n\n content label {\n font: var(--label-font);\n }\n content input,\n content textarea {\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n padding: var(--input-padding);\n margin: var(--input-margin);\n font: var(--input-font);\n }\n\n content [desc] {\n font-size: 0.9em;\n }\n\n #description {\n flex: 1;\n }\n `\n ]\n\n @property({ type: String }) activityId?: string\n\n @state() activity: any = {}\n @state() activityInstance: any = {}\n\n render() {\n var { thumbnail, startingType } = this.activity \|\| {}\n var { name, description } = this.activityInstance\n\n return html`\n <content>\n <div desc>\n <span\n >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로\n 이동합니다.</span\n >\n\n <span\n >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,\n '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수 있습니다.</span\n >\n </div>\n\n <md-outlined-text-field\n id=\"name\"\n type=\"text\"\n label=${String(i18next.t('label.title'))}\n .value=${name \|\| this.activity?.name \|\| ''}\n @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n >\n </md-outlined-text-field>\n\n <md-filled-text-field\n id=\"description\"\n type=\"textarea\"\n label=${String(i18next.t('label.description'))}\n resize=\"none\"\n .value=${description \|\| this.activity?.description \|\| ''}\n @change=${e => {\n this.activityInstance.description = e.currentTarget.value\n }}\n >\n </md-filled-text-field>\n </content>\n\n <div class=\"footer\">\n <div filler></div>\n <button @click=${e => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>\n <button @click=${this.draftActivityInstance.bind(this)} done>\n <md-icon>save</md-icon>${i18next.t('button.draft')}\n </button>\n </div>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityId)\n }\n\n async fetchActivity(id) {\n const response = await client.query({\n query: gql`\n query activity($id: String!) {\n activity(id: $id) {\n id\n name\n description\n state\n multiple\n startingType\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activity = response.data.activity\n }\n\n async draftActivityInstance() {\n var { id: activityId } = this.activity\n var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =\n this.activityInstance\n\n name \|\|= this.activity.name\n description \|\|= this.activity.description\n assignees \|\|= this.activity.assignees\n approvalLine \|\|= this.activity.approvalLine\n\n var activityInstance = {\n id,\n activityId,\n name,\n description,\n priority,\n threadsMax,\n threadsMin,\n dueAt,\n input,\n assignees,\n approvalLine\n }\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($activityInstance: ActivityInstanceDraft!) {\n draftActivityInstance(activityInstance: $activityInstance) {\n id\n name\n description\n input\n output\n state\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n threadsMin\n threadsMax\n }\n }\n `,\n variables: {\n activityInstance\n }\n })\n\n if (!response.errors) {\n this.activityInstance = response.data.draftActivityInstance\n notify({\n message: i18next.t('text.info_x_successfully', {\n x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`\n })\n })\n\n this.openActivityInstanceStart(this.activityInstance)\n }\n }\n\n openActivityInstanceStart(activityInstance) {\n navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`)\n }\n}\n"]}
1	+ {"version":3,"file":"activity-starter-form.js","sourceRoot":"","sources":["../../client/components/activity-starter-form.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/textfield/outlined-text-field.js'\nimport '@material/web/textfield/filled-text-field.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization'\n\nimport gql from 'graphql-tag'\nimport { css, html, LitElement } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport { navigate } from '@operato/shell'\nimport { client } from '@operato/graphql'\nimport { i18next, localize } from '@operato/i18n'\nimport { notify } from '@operato/layout'\nimport { CommonHeaderStyles, ScrollbarStyles } from '@operato/styles'\n\n@customElement('activity-starter-form')\nexport class ActivityStarterForm extends localize(i18next)(LitElement) {\n static styles = [\n CommonHeaderStyles,\n ScrollbarStyles,\n css`\n :host {\n display: flex;\n flex-direction: column;\n\n color: var(--md-sys-color-on-s);\n background-color: var(--md-sys-color-surface);\n }\n\n content {\n flex: 1;\n display: flex;\n flex-direction: column;\n padding: var(--spacing-medium);\n gap: var(--spacing-medium);\n overflow: auto;\n }\n\n content > div {\n display: flex;\n flex-direction: column;\n }\n\n content label {\n font: var(--label-font);\n }\n content input,\n content textarea {\n border-radius: var(--border-radius);\n border: var(--border-dim-color);\n padding: var(--input-padding);\n margin: var(--input-margin);\n font: var(--input-font);\n }\n\n content [desc] {\n font-size: 0.9em;\n }\n\n #description {\n flex: 1;\n }\n `\n ]\n\n @property({ type: String }) activityId?: string\n\n @state() activity: any = {}\n @state() activityInstance: any = {}\n\n render() {\n var { thumbnail, startingType } = this.activity \|\| {}\n var { name, description } = this.activityInstance\n\n return html`\n <content>\n <div desc>\n <span\n >업무의 타이틀과 설명을 작성해서 초안저장을 클릭하시면, 업무 초안이 생성되고 편집할 수 있는 페이지로\n 이동합니다.</span\n >\n\n <span\n >이렇게 생성된 업무 초안은 '작성중인 업무' 리스트에서 찾아볼 수 있으며,\n '${startingType == 'issue' ? '이슈' : '게시'}' 전까지 언제든지 수정할 수 있습니다.</span\n >\n </div>\n\n <md-outlined-text-field\n id=\"name\"\n type=\"text\"\n label=${String(i18next.t('label.title'))}\n .value=${name \|\| this.activity?.name \|\| ''}\n @change=${e => (this.activityInstance.name = e.currentTarget.value)}\n >\n </md-outlined-text-field>\n\n <md-filled-text-field\n id=\"description\"\n type=\"textarea\"\n label=${String(i18next.t('label.description'))}\n resize=\"none\"\n .value=${description \|\| this.activity?.description \|\| ''}\n @change=${e => {\n this.activityInstance.description = e.currentTarget.value\n }}\n >\n </md-filled-text-field>\n </content>\n\n <div class=\"footer\">\n <div filler></div>\n <button @click=${e => history.back()}><md-icon>close</md-icon>${i18next.t('button.close')}</button>\n <button @click=${this.draftActivityInstance.bind(this)} done>\n <md-icon>save</md-icon>${i18next.t('button.draft')}\n </button>\n </div>\n `\n }\n\n firstUpdated() {\n this.fetchActivity(this.activityId)\n }\n\n async fetchActivity(id) {\n const response = await client.query({\n query: gql`\n query activity($id: String!) {\n activity(id: $id) {\n id\n name\n description\n state\n multiple\n startingType\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n thumbnail\n model {\n name\n description\n active\n tag\n inout\n type\n unit\n options\n quantifier\n spec\n }\n }\n }\n `,\n variables: {\n id\n }\n })\n\n this.activity = response.data.activity\n }\n\n async draftActivityInstance() {\n var { id: activityId } = this.activity\n var { id, name, description, priority, threadsMin, threadsMax, dueAt, input, assignees, approvalLine } =\n this.activityInstance\n\n name \|\|= this.activity.name\n description \|\|= this.activity.description\n assignees \|\|= this.activity.assignees\n approvalLine \|\|= this.activity.approvalLine\n\n var activityInstance = {\n id,\n activityId,\n name,\n description,\n priority,\n threadsMax,\n threadsMin,\n dueAt,\n input,\n assignees,\n approvalLine\n }\n\n const response = await client.mutate({\n mutation: gql`\n mutation ($activityInstance: ActivityInstanceDraft!) {\n draftActivityInstance(activityInstance: $activityInstance) {\n id\n name\n description\n input\n output\n state\n assignees {\n type\n value\n assignee {\n id\n name\n description\n controlNo\n }\n }\n approvalLine {\n type\n value\n approver {\n id\n name\n description\n controlNo\n }\n }\n threadsMin\n threadsMax\n }\n }\n `,\n variables: {\n activityInstance\n }\n })\n\n if (!response.errors) {\n this.activityInstance = response.data.draftActivityInstance\n notify({\n message: i18next.t('text.info_x_successfully', {\n x: `${i18next.t('label.activity-instance')} ${i18next.t('text.draft')}`\n })\n })\n\n this.openActivityInstanceStart(this.activityInstance)\n }\n }\n\n openActivityInstanceStart(activityInstance) {\n navigate(`activity-instance-start/${activityInstance.id}?title=${activityInstance.name}`)\n }\n}\n"]}

package/dist-client/components/activity-thread-ribon.js CHANGED Viewed

@@ -8,43 +8,8 @@ import { customElement, property } from 'lit/decorators.js';
 import { i18next, localize } from '@operato/i18n';
 import { toggleOverlay } from '@operato/layout';
 let ActivityThreadRibon = class ActivityThreadRibon extends localize(i18next)(LitElement) {
-    render() {
-        const { state, assignee, activityInstance } = this.activityThread;
-        const { description, approvalLine, activity } = activityInstance || {};
-        const { startingType } = activity || {};
-        return html `
-      <div desc>
-        <md-icon
-          @click=${() => {
-            toggleOverlay('activity-info-overlay', {
-                template: html `<activity-thread-context-template
-                .activityThread=${this.activityThread}
-                state=${state}
-              ></activity-thread-context-template>`
-            });
-        }}
-          >description</md-icon
-        >
-        ${description}
-      </div>
-      ${approvalLine
-            ? html `<approval-line-brief .model=${approvalLine}></approval-line-brief>`
-            : assignee
-                ? html ` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee === null || assignee === void 0 ? void 0 : assignee.name}&nbsp;</div> `
-                : html ``}
-      <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>
-    `;
-    }
-    updated(changes) {
-        if (changes.has('activityThread') && this.activityThread) {
-            const { state } = this.activityThread;
-            this.setAttribute('state', state);
-        }
-    }
-};
-ActivityThreadRibon.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: flex;
         background-color: var(--worklist-status-color);
@@ -140,7 +105,42 @@ ActivityThreadRibon.styles = [
         }
       }
     `
-];
+    ]; }
+    render() {
+        const { state, assignee, activityInstance } = this.activityThread;
+        const { description, approvalLine, activity } = activityInstance || {};
+        const { startingType } = activity || {};
+        return html `
+      <div desc>
+        <md-icon
+          @click=${() => {
+            toggleOverlay('activity-info-overlay', {
+                template: html `<activity-thread-context-template
+                .activityThread=${this.activityThread}
+                state=${state}
+              ></activity-thread-context-template>`
+            });
+        }}
+          >description</md-icon
+        >
+        ${description}
+      </div>
+      ${approvalLine
+            ? html `<approval-line-brief .model=${approvalLine}></approval-line-brief>`
+            : assignee
+                ? html ` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee?.name}&nbsp;</div> `
+                : html ``}
+      <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>
+    `;
+    }
+    updated(changes) {
+        if (changes.has('activityThread') && this.activityThread) {
+            const { state } = this.activityThread;
+            this.setAttribute('state', state);
+        }
+    }
+};
 __decorate([
     property({ type: Object }),
     __metadata("design:type", Object)

package/dist-client/components/activity-thread-ribon.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,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,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;~~IAsGpE~~,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACjE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QACtE,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;kCACM,IAAI,CAAC,cAAc;wBAC7B,KAAK;mDACsB;aACtC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB;YAC1E,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,QAAQ,~~aAAR~~,~~QAAQ,uBAAR,QAAQ,CAAE,~~IAAI,eAAe;gBAClG,CAAC,CAAC,IAAI,CAAA,EAAE;;yBAEO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACnG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;~~AAzIM,0BAAM,GAAG~~;~~IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FF;CACF,AAjGY,CAiGZ;AAE2B;~~IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AApGpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA2I/B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-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-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--md-sys-color-on-primary);\n align-items: center;\n min-height: 44px;\n --fontsize-small: 12px;\n }\n\n div {\n border-left: var(--border-dim-color);\n padding: var(--spacing-small) var(--spacing-medium);\n align-self: center;\n }\n\n :host([state='unassigned']) {\n --worklist-status-color: #5f7184;\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 md-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 div[assignee] {\n display: flex;\n align-items: center;\n text-align: center;\n }\n\n approval-line-brief {\n background-color: var(--worklist-status-color);\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 [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread: any\n\n render() {\n const { state, assignee, activityInstance } = this.activityThread\n const { description, approvalLine, activity } = activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <md-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-thread-context-template\n .activityThread=${this.activityThread}\n state=${state}\n ></activity-thread-context-template>`\n })\n }}\n >description</md-icon\n >\n ${description}\n </div>\n ${approvalLine\n ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>`\n : assignee\n ? html` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee?.name} </div> `\n : html``}\n\n <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityThread') && this.activityThread) {\n const { state } = this.activityThread\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-ribon.js","sourceRoot":"","sources":["../../client/components/activity-thread-ribon.ts"],"names":[],"mappings":";AAAA,OAAO,yCAAyC,CAAA;AAChD,OAAO,wDAAwD,CAAA;AAC/D,OAAO,2EAA2E,CAAA;AAClF,OAAO,kDAAkD,CAAA;AAEzD,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,mBAAmB,GAAzB,MAAM,mBAAoB,SAAQ,QAAQ,CAAC,OAAO,CAAC,CAAC,UAAU,CAAC;aAC7D,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA+FF;KACF,AAjGY,CAiGZ;IAID,MAAM;QACJ,MAAM,EAAE,KAAK,EAAE,QAAQ,EAAE,gBAAgB,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;QACjE,MAAM,EAAE,WAAW,EAAE,YAAY,EAAE,QAAQ,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QACtE,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;kCACM,IAAI,CAAC,cAAc;wBAC7B,KAAK;mDACsB;aACtC,CAAC,CAAA;QACJ,CAAC;;;UAGD,WAAW;;QAEb,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA,+BAA+B,YAAY,yBAAyB;YAC1E,CAAC,CAAC,QAAQ;gBACR,CAAC,CAAC,IAAI,CAAA,wBAAwB,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC,CAAC,IAAI,QAAQ,EAAE,IAAI,eAAe;gBAClG,CAAC,CAAC,IAAI,CAAA,EAAE;;yBAEO,MAAM,CAAC,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,IAAI,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC;KACnG,CAAA;IACH,CAAC;IAED,OAAO,CAAC,OAAO;QACb,IAAI,OAAO,CAAC,GAAG,CAAC,gBAAgB,CAAC,IAAI,IAAI,CAAC,cAAc,EAAE,CAAC;YACzD,MAAM,EAAE,KAAK,EAAE,GAAG,IAAI,CAAC,cAAc,CAAA;YAErC,IAAI,CAAC,YAAY,CAAC,OAAO,EAAE,KAAK,CAAC,CAAA;QACnC,CAAC;IACH,CAAC;;AAtC2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;2DAAoB;AApGpC,mBAAmB;IAD/B,aAAa,CAAC,uBAAuB,CAAC;GAC1B,mBAAmB,CA2I/B","sourcesContent":["import '@material/web/button/elevated-button.js'\nimport '@operato/property-editor/ox-properties-dynamic-view.js'\nimport '@things-factory/organization/dist-client/component/approval-line-brief.js'\nimport '../templates/activity-thread-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-thread-ribon')\nexport class ActivityThreadRibon extends localize(i18next)(LitElement) {\n static styles = [\n css`\n :host {\n display: flex;\n background-color: var(--worklist-status-color);\n color: var(--md-sys-color-on-primary);\n align-items: center;\n min-height: 44px;\n --fontsize-small: 12px;\n }\n\n div {\n border-left: var(--border-dim-color);\n padding: var(--spacing-small) var(--spacing-medium);\n align-self: center;\n }\n\n :host([state='unassigned']) {\n --worklist-status-color: #5f7184;\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 md-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 div[assignee] {\n display: flex;\n align-items: center;\n text-align: center;\n }\n\n approval-line-brief {\n background-color: var(--worklist-status-color);\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 [assignee] {\n display: none;\n }\n md-icon {\n padding: 0;\n }\n approval-line-brief {\n display: none;\n }\n }\n `\n ]\n\n @property({ type: Object }) activityThread: any\n\n render() {\n const { state, assignee, activityInstance } = this.activityThread\n const { description, approvalLine, activity } = activityInstance \|\| {}\n const { startingType } = activity \|\| {}\n\n return html`\n <div desc>\n <md-icon\n @click=${() => {\n toggleOverlay('activity-info-overlay', {\n template: html`<activity-thread-context-template\n .activityThread=${this.activityThread}\n state=${state}\n ></activity-thread-context-template>`\n })\n }}\n >description</md-icon\n >\n ${description}\n </div>\n ${approvalLine\n ? html`<approval-line-brief .model=${approvalLine}></approval-line-brief>`\n : assignee\n ? html` <div assignee title=${String(i18next.t('field.assignee'))}>${assignee?.name} </div> `\n : html``}\n\n <div state title=${String(i18next.t('field.status'))}>${i18next.t('label.activity-state-' + state)}</div>\n `\n }\n\n updated(changes) {\n if (changes.has('activityThread') && this.activityThread) {\n const { state } = this.activityThread\n\n this.setAttribute('state', state)\n }\n }\n}\n"]}

package/dist-client/components/activity-thread-timeline.js CHANGED Viewed

@@ -19,79 +19,8 @@ function getSafeFormatter(locale, options) {
 }
 const formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' });
 let ActivityThreadTimeline = class ActivityThreadTimeline extends connect(store)(LitElement) {
-    render() {
-        const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {};
-        const timeline = [
-            ...activityThreadHistories.filter(item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))),
-            ...activityApprovals.filter(item => item.judgment)
-        ].sort((a, b) => ((a.updatedAt || 0) > (b.updatedAt || 0) ? 1 : -1));
-        return html ` ${timeline.length > 0
-            ? html `
-          <span subtitle>${this.subtitle || i18next.t('label.timeline')}</span>
-          <ol>
-            ${timeline.map(item => 'reason' in item
-                ? this.renderActivityThreadHistory(item)
-                : this.renderActivityApproval(item))}
-          </ol>
-        `
-            : nothing}`;
-    }
-    renderActivityThreadHistory(activityThreadHistory) {
-        const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory;
-        const { name } = updater || {};
-        return html `
-      <li>
-        <span date>${formatter.format(new Date(updatedAt))}</span>
-        <span status></span>
-        <span info>
-          ${i18next.t('label.activity-transaction-' + transaction)}
-          <div><md-icon>account_circle</md-icon>${name}</div>
-          <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>
-        </span>
-      </li>
-    `;
-    }
-    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)}
-          <div><md-icon>account_circle</md-icon>${name}</div>
-          <p>${comment}</p>
-        </span>
-      </li>
-    `;
-    }
-    renderOutput(output) {
-        const keys = Object.keys(output);
-        if (keys.length === 0) {
-            return '';
-        }
-        const firstKey = keys[0];
-        let value = output[firstKey];
-        // 값이 객체이거나 긴 문자열인 경우 처리
-        if (typeof value === 'object') {
-            value = Array.isArray(value) ? '[...]' : '{...}';
-        }
-        else if (typeof value === 'string' && value.length > 50) {
-            value = value.substring(0, 47) + '...';
-        }
-        let result = `${firstKey}: ${value}`;
-        // 추가 속성이 있는 경우 표시
-        if (keys.length > 1) {
-            result += ` (외 ${keys.length - 1}개 항목)`;
-        }
-        return result;
-    }
-};
-ActivityThreadTimeline.styles = [
-    css `
+    static { this.styles = [
+        css `
       :host {
         display: block;
       }
@@ -199,7 +128,78 @@ ActivityThreadTimeline.styles = [
         padding: 10px;
       }
     `
-];
+    ]; }
+    render() {
+        const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread || {};
+        const timeline = [
+            ...activityThreadHistories.filter(item => item.transaction && (!this.shortForm || !/^.*(reject|approve|save|restart).*$/.test(item.transaction))),
+            ...activityApprovals.filter(item => item.judgment)
+        ].sort((a, b) => ((a.updatedAt || 0) > (b.updatedAt || 0) ? 1 : -1));
+        return html ` ${timeline.length > 0
+            ? html `
+          <span subtitle>${this.subtitle || i18next.t('label.timeline')}</span>
+          <ol>
+            ${timeline.map(item => 'reason' in item
+                ? this.renderActivityThreadHistory(item)
+                : this.renderActivityApproval(item))}
+          </ol>
+        `
+            : nothing}`;
+    }
+    renderActivityThreadHistory(activityThreadHistory) {
+        const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory;
+        const { name } = updater || {};
+        return html `
+      <li>
+        <span date>${formatter.format(new Date(updatedAt))}</span>
+        <span status></span>
+        <span info>
+          ${i18next.t('label.activity-transaction-' + transaction)}
+          <div><md-icon>account_circle</md-icon>${name}</div>
+          <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>
+        </span>
+      </li>
+    `;
+    }
+    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)}
+          <div><md-icon>account_circle</md-icon>${name}</div>
+          <p>${comment}</p>
+        </span>
+      </li>
+    `;
+    }
+    renderOutput(output) {
+        const keys = Object.keys(output);
+        if (keys.length === 0) {
+            return '';
+        }
+        const firstKey = keys[0];
+        let value = output[firstKey];
+        // 값이 객체이거나 긴 문자열인 경우 처리
+        if (typeof value === 'object') {
+            value = Array.isArray(value) ? '[...]' : '{...}';
+        }
+        else if (typeof value === 'string' && value.length > 50) {
+            value = value.substring(0, 47) + '...';
+        }
+        let result = `${firstKey}: ${value}`;
+        // 추가 속성이 있는 경우 표시
+        if (keys.length > 1) {
+            result += ` (외 ${keys.length - 1}개 항목)`;
+        }
+        return result;
+    }
+};
 __decorate([
     property({ type: Object }),
     __metadata("design:type", ActivityThread)

package/dist-client/components/activity-thread-timeline.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"activity-thread-timeline.js","sourceRoot":"","sources":["../../client/components/activity-thread-timeline.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,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;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAI5D,SAAS,gBAAgB,CAAC,MAAc,EAAE,OAAmC;IAC3E,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,MAAM,IAAI,OAAO,CAAA;QACpC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;IACrD,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,uCAAuC,MAAM,kCAAkC,EAAE,CAAC,CAAC,CAAA;QAChG,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAClD,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,gBAAgB,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAG1F,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;IAoHpE,MAAM;QACJ,MAAM,EAAE,iBAAiB,GAAG,EAAE,EAAE,uBAAuB,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,CAAA;QAE1F,MAAM,QAAQ,GAAG;YACf,GAAG,uBAAuB,CAAC,MAAM,CAC/B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAC/G;YACD,GAAG,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;SACnD,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;YAChC,CAAC,CAAC,IAAI,CAAA;2BACe,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;;cAGzD,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACpB,QAAQ,IAAI,IAAI;gBACd,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,IAA6B,CAAC;gBACjE,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAwB,CAAC,CAC1D;;SAEJ;YACH,CAAC,CAAC,OAAO,EAAE,CAAA;IACf,CAAC;IAED,2BAA2B,CAAC,qBAA4C;QACtE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,qBAAqB,CAAA;QACxF,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;qBAEM,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAU,CAAC,CAAC;;;;YAI/C,OAAO,CAAC,CAAC,CAAC,6BAA6B,GAAG,WAAW,CAAC;kDAChB,IAAI;eACvC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO;;;KAGxE,CAAA;IACH,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,QAAQ,CAAC;kDACP,IAAI;eACvC,OAAO;;;KAGjB,CAAA;IACH,CAAC;IAED,YAAY,CAAC,MAAW;QACtB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAChC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtB,OAAO,EAAE,CAAA;QACX,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACxB,IAAI,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;QAE5B,wBAAwB;QACxB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QAClD,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC;YAC1D,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,CAAA;QACxC,CAAC;QAED,IAAI,MAAM,GAAG,GAAG,QAAQ,KAAK,KAAK,EAAE,CAAA;QAEpC,kBAAkB;QAClB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpB,MAAM,IAAI,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,OAAO,CAAA;QACzC,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;;AAvMM,6BAAM,GAAG;IACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2GF;CACF,AA7GY,CA6GZ;AAE2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAkB,cAAc;8DAAA;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAkB;AACS;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;;yDAAoB;AAlH9D,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAyMlC","sourcesContent":["import '@material/web/icon/icon.js'\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 { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n try {\n const safeLocale = locale \|\| 'en-US'\n return new Intl.DateTimeFormat(safeLocale, options)\n } catch (e) {\n console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e)\n return new Intl.DateTimeFormat('en-US', options)\n }\n}\n\nconst formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n [subtitle] {\n padding: var(--spacing-small) var(--spacing-medium);\n background-color: var(--md-sys-color-surface-variant);\n border: 2px solid var(--md-sys-color-outline);\n border-radius: 15px;\n color: var(--md-sys-color-on-surface);\n font-weight: bold;\n }\n\n ol {\n list-style: none;\n margin: var(--spacing-medium) 0 0 var(--spacing-small);\n padding: 0;\n }\n\n li {\n display: flex;\n border: none;\n }\n\n [info] {\n flex: 1;\n color: var(--md-sys-color-on-surface);\n background: var(--md-sys-color-surface);\n\n div {\n float: right;\n opacity: 0.7;\n }\n\n md-icon {\n position: relative;\n top: 3px;\n font-size: var(--fontsize-large);\n }\n\n p {\n color: var(--md-sys-color-on-surface);\n background: var(--md-sys-color-surface-variant);\n\n margin: var(--spacing-small) 0 var(--spacing-medium) 0;\n padding: var(--spacing-small) var(--spacing-medium);\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 }\n\n [status] {\n margin: 0 var(--spacing-small);\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 table,\n th,\n td {\n border: 1px solid lightgray;\n border-collapse: collapse;\n }\n\n th,\n td {\n padding: 10px;\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n @property({ type: String }) subtitle?: string\n @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean\n\n render() {\n const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread \|\| {}\n\n const timeline = [\n ...activityThreadHistories.filter(\n item => item.transaction && (!this.shortForm \|\| !/^.(reject\|approve\|save\|restart).$/.test(item.transaction))\n ),\n ...activityApprovals.filter(item => item.judgment)\n ].sort((a, b) => ((a.updatedAt \|\| 0) > (b.updatedAt \|\| 0) ? 1 : -1))\n\n return html` ${timeline.length > 0\n ? html`\n <span subtitle>${this.subtitle \|\| i18next.t('label.timeline')}</span>\n\n <ol>\n ${timeline.map(item =>\n 'reason' in item\n ? this.renderActivityThreadHistory(item as ActivityThreadHistory)\n : this.renderActivityApproval(item as ActivityApproval)\n )}\n </ol>\n `\n : nothing}`\n }\n\n renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n const { name } = updater \|\| {}\n\n return html`\n <li>\n <span date>${formatter.format(new Date(updatedAt!))}</span>\n <span status></span>\n\n <span info>\n ${i18next.t('label.activity-transaction-' + transaction)}\n <div><md-icon>account_circle</md-icon>${name}</div>\n <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>\n </span>\n </li>\n `\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)}\n <div><md-icon>account_circle</md-icon>${name}</div>\n <p>${comment}</p>\n </span>\n </li>\n `\n }\n\n renderOutput(output: any) {\n const keys = Object.keys(output)\n if (keys.length === 0) {\n return ''\n }\n\n const firstKey = keys[0]\n let value = output[firstKey]\n\n // 값이 객체이거나 긴 문자열인 경우 처리\n if (typeof value === 'object') {\n value = Array.isArray(value) ? '[...]' : '{...}'\n } else if (typeof value === 'string' && value.length > 50) {\n value = value.substring(0, 47) + '...'\n }\n\n let result = `${firstKey}: ${value}`\n\n // 추가 속성이 있는 경우 표시\n if (keys.length > 1) {\n result += ` (외 ${keys.length - 1}개 항목)`\n }\n\n return result\n }\n}\n"]}
1	+ {"version":3,"file":"activity-thread-timeline.js","sourceRoot":"","sources":["../../client/components/activity-thread-timeline.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,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;AAEvC,OAAO,EAAE,cAAc,EAAE,MAAM,6BAA6B,CAAA;AAI5D,SAAS,gBAAgB,CAAC,MAAc,EAAE,OAAmC;IAC3E,IAAI,CAAC;QACH,MAAM,UAAU,GAAG,MAAM,IAAI,OAAO,CAAA;QACpC,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,UAAU,EAAE,OAAO,CAAC,CAAA;IACrD,CAAC;IAAC,OAAO,CAAC,EAAE,CAAC;QACX,OAAO,CAAC,IAAI,CAAC,uCAAuC,MAAM,kCAAkC,EAAE,CAAC,CAAC,CAAA;QAChG,OAAO,IAAI,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,OAAO,CAAC,CAAA;IAClD,CAAC;AACH,CAAC;AAED,MAAM,SAAS,GAAG,gBAAgB,CAAC,SAAS,CAAC,QAAQ,EAAE,EAAE,SAAS,EAAE,MAAM,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,CAAA;AAG1F,IAAM,sBAAsB,GAA5B,MAAM,sBAAuB,SAAQ,OAAO,CAAC,KAAK,CAAC,CAAC,UAAU,CAAC;aAC7D,WAAM,GAAG;QACd,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KA2GF;KACF,AA7GY,CA6GZ;IAMD,MAAM;QACJ,MAAM,EAAE,iBAAiB,GAAG,EAAE,EAAE,uBAAuB,GAAG,EAAE,EAAE,GAAG,IAAI,CAAC,cAAc,IAAI,EAAE,CAAA;QAE1F,MAAM,QAAQ,GAAG;YACf,GAAG,uBAAuB,CAAC,MAAM,CAC/B,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,WAAW,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,IAAI,CAAC,qCAAqC,CAAC,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC,CAC/G;YACD,GAAG,iBAAiB,CAAC,MAAM,CAAC,IAAI,CAAC,EAAE,CAAC,IAAI,CAAC,QAAQ,CAAC;SACnD,CAAC,IAAI,CAAC,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC,CAAC,SAAS,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;QAEpE,OAAO,IAAI,CAAA,IAAI,QAAQ,CAAC,MAAM,GAAG,CAAC;YAChC,CAAC,CAAC,IAAI,CAAA;2BACe,IAAI,CAAC,QAAQ,IAAI,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;;;cAGzD,QAAQ,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CACpB,QAAQ,IAAI,IAAI;gBACd,CAAC,CAAC,IAAI,CAAC,2BAA2B,CAAC,IAA6B,CAAC;gBACjE,CAAC,CAAC,IAAI,CAAC,sBAAsB,CAAC,IAAwB,CAAC,CAC1D;;SAEJ;YACH,CAAC,CAAC,OAAO,EAAE,CAAA;IACf,CAAC;IAED,2BAA2B,CAAC,qBAA4C;QACtE,MAAM,EAAE,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,MAAM,EAAE,MAAM,EAAE,WAAW,EAAE,GAAG,qBAAqB,CAAA;QACxF,MAAM,EAAE,IAAI,EAAE,GAAG,OAAO,IAAI,EAAE,CAAA;QAE9B,OAAO,IAAI,CAAA;;qBAEM,SAAS,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,SAAU,CAAC,CAAC;;;;YAI/C,OAAO,CAAC,CAAC,CAAC,6BAA6B,GAAG,WAAW,CAAC;kDAChB,IAAI;eACvC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,CAAC,CAAC,CAAC,OAAO;;;KAGxE,CAAA;IACH,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,QAAQ,CAAC;kDACP,IAAI;eACvC,OAAO;;;KAGjB,CAAA;IACH,CAAC;IAED,YAAY,CAAC,MAAW;QACtB,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAC,CAAA;QAChC,IAAI,IAAI,CAAC,MAAM,KAAK,CAAC,EAAE,CAAC;YACtB,OAAO,EAAE,CAAA;QACX,CAAC;QAED,MAAM,QAAQ,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;QACxB,IAAI,KAAK,GAAG,MAAM,CAAC,QAAQ,CAAC,CAAA;QAE5B,wBAAwB;QACxB,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE,CAAC;YAC9B,KAAK,GAAG,KAAK,CAAC,OAAO,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,OAAO,CAAA;QAClD,CAAC;aAAM,IAAI,OAAO,KAAK,KAAK,QAAQ,IAAI,KAAK,CAAC,MAAM,GAAG,EAAE,EAAE,CAAC;YAC1D,KAAK,GAAG,KAAK,CAAC,SAAS,CAAC,CAAC,EAAE,EAAE,CAAC,GAAG,KAAK,CAAA;QACxC,CAAC;QAED,IAAI,MAAM,GAAG,GAAG,QAAQ,KAAK,KAAK,EAAE,CAAA;QAEpC,kBAAkB;QAClB,IAAI,IAAI,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACpB,MAAM,IAAI,OAAO,IAAI,CAAC,MAAM,GAAG,CAAC,OAAO,CAAA;QACzC,CAAC;QAED,OAAO,MAAM,CAAA;IACf,CAAC;;AAxF2B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;8BAAkB,cAAc;8DAAA;AAC/B;IAA3B,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;wDAAkB;AACS;IAArD,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,CAAC;;yDAAoB;AAlH9D,sBAAsB;IADlC,aAAa,CAAC,0BAA0B,CAAC;GAC7B,sBAAsB,CAyMlC","sourcesContent":["import '@material/web/icon/icon.js'\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 { ActivityThread } from '../types/activity-thread.js'\nimport { ActivityThreadHistory } from '../types/activity-thread-history.js'\nimport { ActivityApproval } from '../types/activity-approval.js'\n\nfunction getSafeFormatter(locale: string, options: Intl.DateTimeFormatOptions): Intl.DateTimeFormat {\n try {\n const safeLocale = locale \|\| 'en-US'\n return new Intl.DateTimeFormat(safeLocale, options)\n } catch (e) {\n console.warn(`Invalid locale or options provided: ${locale}, falling back to default en-US.`, e)\n return new Intl.DateTimeFormat('en-US', options)\n }\n}\n\nconst formatter = getSafeFormatter(navigator.language, { dateStyle: 'full', timeStyle: 'short' })\n\n@customElement('activity-thread-timeline')\nexport class ActivityThreadTimeline extends connect(store)(LitElement) {\n static styles = [\n css`\n :host {\n display: block;\n }\n\n [subtitle] {\n padding: var(--spacing-small) var(--spacing-medium);\n background-color: var(--md-sys-color-surface-variant);\n border: 2px solid var(--md-sys-color-outline);\n border-radius: 15px;\n color: var(--md-sys-color-on-surface);\n font-weight: bold;\n }\n\n ol {\n list-style: none;\n margin: var(--spacing-medium) 0 0 var(--spacing-small);\n padding: 0;\n }\n\n li {\n display: flex;\n border: none;\n }\n\n [info] {\n flex: 1;\n color: var(--md-sys-color-on-surface);\n background: var(--md-sys-color-surface);\n\n div {\n float: right;\n opacity: 0.7;\n }\n\n md-icon {\n position: relative;\n top: 3px;\n font-size: var(--fontsize-large);\n }\n\n p {\n color: var(--md-sys-color-on-surface);\n background: var(--md-sys-color-surface-variant);\n\n margin: var(--spacing-small) 0 var(--spacing-medium) 0;\n padding: var(--spacing-small) var(--spacing-medium);\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 }\n\n [status] {\n margin: 0 var(--spacing-small);\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 table,\n th,\n td {\n border: 1px solid lightgray;\n border-collapse: collapse;\n }\n\n th,\n td {\n padding: 10px;\n }\n `\n ]\n\n @property({ type: Object }) activityThread?: ActivityThread\n @property({ type: String }) subtitle?: string\n @property({ type: Boolean, attribute: 'short-form' }) shortForm?: boolean\n\n render() {\n const { activityApprovals = [], activityThreadHistories = [] } = this.activityThread \|\| {}\n\n const timeline = [\n ...activityThreadHistories.filter(\n item => item.transaction && (!this.shortForm \|\| !/^.(reject\|approve\|save\|restart).$/.test(item.transaction))\n ),\n ...activityApprovals.filter(item => item.judgment)\n ].sort((a, b) => ((a.updatedAt \|\| 0) > (b.updatedAt \|\| 0) ? 1 : -1))\n\n return html` ${timeline.length > 0\n ? html`\n <span subtitle>${this.subtitle \|\| i18next.t('label.timeline')}</span>\n\n <ol>\n ${timeline.map(item =>\n 'reason' in item\n ? this.renderActivityThreadHistory(item as ActivityThreadHistory)\n : this.renderActivityApproval(item as ActivityApproval)\n )}\n </ol>\n `\n : nothing}`\n }\n\n renderActivityThreadHistory(activityThreadHistory: ActivityThreadHistory) {\n const { updater, updatedAt, state, reason, output, transaction } = activityThreadHistory\n const { name } = updater \|\| {}\n\n return html`\n <li>\n <span date>${formatter.format(new Date(updatedAt!))}</span>\n <span status></span>\n\n <span info>\n ${i18next.t('label.activity-transaction-' + transaction)}\n <div><md-icon>account_circle</md-icon>${name}</div>\n <p>${reason ? reason : output ? this.renderOutput(output) : nothing}</p>\n </span>\n </li>\n `\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)}\n <div><md-icon>account_circle</md-icon>${name}</div>\n <p>${comment}</p>\n </span>\n </li>\n `\n }\n\n renderOutput(output: any) {\n const keys = Object.keys(output)\n if (keys.length === 0) {\n return ''\n }\n\n const firstKey = keys[0]\n let value = output[firstKey]\n\n // 값이 객체이거나 긴 문자열인 경우 처리\n if (typeof value === 'object') {\n value = Array.isArray(value) ? '[...]' : '{...}'\n } else if (typeof value === 'string' && value.length > 50) {\n value = value.substring(0, 47) + '...'\n }\n\n let result = `${firstKey}: ${value}`\n\n // 추가 속성이 있는 경우 표시\n if (keys.length > 1) {\n result += ` (외 ${keys.length - 1}개 항목)`\n }\n\n return result\n }\n}\n"]}