@things-factory/worklist 10.1.248 → 10.1.249

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

@@ -0,0 +1,105 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '../components/activity-thread-timeline';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
+import { RouteController } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+import { ContextPanelStyles, valueCell, whenCell } from './context-panel.js';
+import { personValue } from '../components/activity-fields.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+/**
+ * Who judged this step.
+ *
+ * An empty approver on a step nobody has reached is a state, not a missing value. The row used to
+ * fall through to the generic 「값 없음」, which covers "there is none, or the screen could not fetch
+ * it" — on a step that is simply waiting, that reads as a defect. Steps chosen by role have no
+ * person until someone acts, so every pending approval showed it.
+ *
+ * The role is not named here. The diagram two inches above already lights up the waiting step and
+ * labels it 역할; repeating it in this row says the same thing twice.
+ *
+ * Once a judgment exists the approver is a real person, and an empty one there would be a genuine
+ * gap — so that case keeps the generic fallback.
+ */
+function approverCell(approver, judgment) {
+    if (approver?.name || judgment) {
+        return personValue(approver);
+    }
+    return html `<span class="none">${i18next.t('text.approver-not-yet')}</span>`;
+}
+let ActivityApprovalContextTemplate = class ActivityApprovalContextTemplate extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._routeCtrl = new RouteController(this);
+    }
+    static { this.styles = [ContextToolbarOverlayStyle, ContextPanelStyles]; }
+    render() {
+        const activityApproval = this._routeCtrl.context.activityApproval || this.activityApproval || {};
+        const { round, order, approver, judgment, createdAt, activityThread } = activityApproval || {};
+        const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread || {};
+        const { name, description, thumbnail, approvalLine } = activityInstance || {};
+        return html `
+      <div flow>
+        <div approval-line>
+          <!-- 이 결재 줄의 순번이 곧 지금 단계다 — ribbon 과 같은 값을 쓴다. -->
+          ${approvalLine
+            ? html `<approval-line-view .model=${approvalLine} .current=${order}></approval-line-view>`
+            : html ``}
+        </div>
+      </div>
+
+      <dl class="given">
+        <!-- 차수는 1일 때 적지 않는다. 2차 이상일 때만 「되돌아왔다」는 사실이 된다. -->
+        ${Number(round) > 1
+            ? html `
+              <dt>${i18next.t('field.round')}</dt>
+              <dd class="strong">${round}</dd>
+            `
+            : nothing}
+
+        <dt>${i18next.t('field.approval-order')}</dt>
+        <dd class="strong">${valueCell(order)}</dd>
+
+        <dt>${i18next.t('field.wl-owner')}</dt>
+        <dd class="strong">${personValue(assignee)}</dd>
+
+        <dt>${i18next.t('field.approver')}</dt>
+        <dd class="strong">${approverCell(approver, judgment)}</dd>
+
+        <dt>${i18next.t('field.assigned-at')}</dt>
+        <dd>${whenCell(assignedAt)}</dd>
+
+        <dt>${i18next.t('field.due-at')}</dt>
+        <dd>${whenCell(dueAt)}</dd>
+
+        <!-- 전에는 라벨이 since 였다 — 다섯 언어를 갖춘 화면에 영문 한 낱말이 박혀 있었다. -->
+        <dt>${i18next.t('field.approval-submitted-at')}</dt>
+        <dd>${whenCell(createdAt)}</dd>
+      </dl>
+
+      ${activityApprovals && activityApprovals.length > 0
+            ? html ` <!--
+        팝업 안에서는 편다. 팝업은 내용에 맞춰지지 않고 60%×60% 로 고정되므로
+        (@operato/popup 의 [hovering=center]), 접어 두면 아래가 흰 여백으로 남는다.
+        그리고 여기서 이력은 보조가 아니다 — 이 패널을 여는 이유의 절반이 「어떻게 여기까지 왔나」다.
+      -->
+      <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline> `
+            : nothing}
+      ${thumbnail
+            ? html ` <div thumbnail>
+            <img src=${thumbnail} />
+          </div>`
+            : html ``}
+    `;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityApprovalContextTemplate.prototype, "activityApproval", void 0);
+ActivityApprovalContextTemplate = __decorate([
+    customElement('activity-approval-context-template')
+], ActivityApprovalContextTemplate);
+//# sourceMappingURL=activity-approval-context-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-approval-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-approval-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { RouteController } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport { ContextPanelStyles, valueCell, whenCell } from './context-panel.js'\nimport { personValue } from '../components/activity-fields.js'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\n/**\n * Who judged this step.\n *\n * An empty approver on a step nobody has reached is a state, not a missing value. The row used to\n * fall through to the generic 「값 없음」, which covers \"there is none, or the screen could not fetch\n * it\" — on a step that is simply waiting, that reads as a defect. Steps chosen by role have no\n * person until someone acts, so every pending approval showed it.\n *\n * The role is not named here. The diagram two inches above already lights up the waiting step and\n * labels it 역할; repeating it in this row says the same thing twice.\n *\n * Once a judgment exists the approver is a real person, and an empty one there would be a genuine\n * gap — so that case keeps the generic fallback.\n */\nfunction approverCell(approver: { name?: string } | undefined, judgment: string | undefined) {\n  if (approver?.name || judgment) {\n    return personValue(approver)\n  }\n\n  return html`<span class=\"none\">${i18next.t('text.approver-not-yet')}</span>`\n}\n\n@customElement('activity-approval-context-template')\nclass ActivityApprovalContextTemplate extends LitElement {\n  static styles = [ContextToolbarOverlayStyle, ContextPanelStyles]\n\n  @property({ type: Object }) private activityApproval\n\n  private _routeCtrl = new RouteController(this)\n\n  render() {\n    const activityApproval = this._routeCtrl.context.activityApproval || this.activityApproval || {}\n\n    const { round, order, approver, judgment, createdAt, activityThread } = activityApproval || {}\n    const { state, dueAt, assignedAt, assignee, activityInstance, activityApprovals } = activityThread || {}\n    const { name, description, thumbnail, approvalLine } = activityInstance || {}\n\n    return html`\n      <div flow>\n        <div approval-line>\n          <!-- 이 결재 줄의 순번이 곧 지금 단계다 — ribbon 과 같은 값을 쓴다. -->\n          ${approvalLine\n            ? html`<approval-line-view .model=${approvalLine} .current=${order}></approval-line-view>`\n            : html``}\n        </div>\n      </div>\n\n      <dl class=\"given\">\n        <!-- 차수는 1일 때 적지 않는다. 2차 이상일 때만 「되돌아왔다」는 사실이 된다. -->\n        ${Number(round) > 1\n          ? html`\n              <dt>${i18next.t('field.round')}</dt>\n              <dd class=\"strong\">${round}</dd>\n            `\n          : nothing}\n\n        <dt>${i18next.t('field.approval-order')}</dt>\n        <dd class=\"strong\">${valueCell(order)}</dd>\n\n        <dt>${i18next.t('field.wl-owner')}</dt>\n        <dd class=\"strong\">${personValue(assignee)}</dd>\n\n        <dt>${i18next.t('field.approver')}</dt>\n        <dd class=\"strong\">${approverCell(approver, judgment)}</dd>\n\n        <dt>${i18next.t('field.assigned-at')}</dt>\n        <dd>${whenCell(assignedAt)}</dd>\n\n        <dt>${i18next.t('field.due-at')}</dt>\n        <dd>${whenCell(dueAt)}</dd>\n\n        <!-- 전에는 라벨이 since 였다 — 다섯 언어를 갖춘 화면에 영문 한 낱말이 박혀 있었다. -->\n        <dt>${i18next.t('field.approval-submitted-at')}</dt>\n        <dd>${whenCell(createdAt)}</dd>\n      </dl>\n\n      ${activityApprovals && activityApprovals.length > 0\n        ? html` <!--\n        팝업 안에서는 편다. 팝업은 내용에 맞춰지지 않고 60%×60% 로 고정되므로\n        (@operato/popup 의 [hovering=center]), 접어 두면 아래가 흰 여백으로 남는다.\n        그리고 여기서 이력은 보조가 아니다 — 이 패널을 여는 이유의 절반이 「어떻게 여기까지 왔나」다.\n      -->\n      <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline> `\n        : nothing}\n      ${thumbnail\n        ? html` <div thumbnail>\n            <img src=${thumbnail} />\n          </div>`\n        : html``}\n    `\n  }\n\n}\n"]}

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

@@ -0,0 +1,3 @@
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';

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

@@ -0,0 +1,118 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@material/web/button/elevated-button.js';
+import { html, LitElement } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
+import { RouteController } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+import { ContextPanelStyles, whenCell } from './context-panel.js';
+import { openPopup } from '@operato/layout';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+let ActivityInstanceContextTemplate = class ActivityInstanceContextTemplate extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._routeCtrl = new RouteController(this);
+    }
+    static { this.styles = [ContextToolbarOverlayStyle, ContextPanelStyles]; }
+    render() {
+        const activityInstance = this._routeCtrl.context.activityInstance || this.activityInstance || {};
+        const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } = activityInstance || {};
+        const { startingType } = activity || {};
+        // const editable = state == 'draft'
+        return html `
+      <div flow>
+        ${approvalLine
+            ? html `
+              <approval-line-view
+                .model=${approvalLine}
+                @click=${() => this.onClickApprovalLine(activityInstance)}
+                @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}
+              ></approval-line-view>
+            `
+            : html `<md-elevated-button @click=${() => this.onClickApprovalLine(activityInstance)}>
+              <md-icon slot="icon">group_add</md-icon>
+            </md-elevated-button>`}
+      </div>
+
+      <dl class="given">
+        <dt>${i18next.t('field.assigned-at')}</dt>
+        <dd>${whenCell(assignedAt)}</dd>
+
+        <dt>${i18next.t('field.due-at')}</dt>
+        <dd>${whenCell(dueAt)}</dd>
+
+        <dt>${i18next.t('field.started-at')}</dt>
+        <dd>${whenCell(startedAt)}</dd>
+      </dl>
+
+      ${startingType == 'issue'
+            ? html `<div assignees>
+            <div>
+              <label>${i18next.t('field.assignees')}</label>
+              ${assignees
+                ? html `
+                    <assignees-view
+                      .value=${assignees}
+                      @click=${() => this.onClickAssignees(activityInstance)}
+                      @change=${e => (activityInstance.assignees = e.currentTarget.value)}
+                    ></assignees-view>
+                  `
+                : html `<md-elevated-button @click=${() => this.onClickAssignees(activityInstance)}>
+                    <md-icon slot="icon">group_add</md-icon>
+                  </md-elevated-button>`}
+            </div>
+          </div>`
+            : html ``}
+      ${thumbnail
+            ? html ` <div thumbnail>
+            <img src=${thumbnail} />
+          </div>`
+            : html ``}
+    `;
+    }
+    onClickAssignees(activityInstance) {
+        const { assignees } = activityInstance || {};
+        const popup = openPopup(html `
+        <assignees-editor-popup
+          .value=${assignees}
+          .confirmCallback=${value => {
+            activityInstance.assignees = value;
+            this.requestUpdate();
+        }}
+        ></assignees-editor-popup>
+      `, {
+            backdrop: true,
+            help: 'organization/assignees-editor',
+            size: 'large',
+            title: i18next.t('title.assignee list')
+        });
+        popup.onclosed = () => { };
+    }
+    onClickApprovalLine(activityInstance) {
+        const { approvalLine } = activityInstance || {};
+        const popup = openPopup(html `
+        <approval-line-items-editor-popup
+          .value=${approvalLine}
+          .confirmCallback=${value => {
+            activityInstance.approvalLine = value;
+            this.requestUpdate();
+        }}
+        ></approval-line-items-editor-popup>
+      `, {
+            backdrop: true,
+            help: 'organization/approval-line-items-editor',
+            size: 'large',
+            title: i18next.t('title.approval-line item list')
+        });
+        popup.onclosed = () => { };
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityInstanceContextTemplate.prototype, "activityInstance", void 0);
+ActivityInstanceContextTemplate = __decorate([
+    customElement('activity-instance-context-template')
+], ActivityInstanceContextTemplate);
+//# sourceMappingURL=activity-instance-context-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-instance-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-instance-context-template.ts"],"names":[],"mappings":"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","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@material/web/button/elevated-button.js'\n\nimport { html, css, LitElement } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { RouteController } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport { ContextPanelStyles, whenCell } from './context-panel.js'\nimport { openPopup } from '@operato/layout'\n\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\n\n@customElement('activity-instance-context-template')\nclass ActivityInstanceContextTemplate extends LitElement {\n  static styles = [ContextToolbarOverlayStyle, ContextPanelStyles]\n\n  @property({ type: Object }) private activityInstance\n\n  private _routeCtrl = new RouteController(this)\n\n  render() {\n    const activityInstance = this._routeCtrl.context.activityInstance || this.activityInstance || {}\n    const { activity, name, description, state, assignees, approvalLine, assignedAt, startedAt, dueAt, thumbnail } =\n      activityInstance || {}\n    const { startingType } = activity || {}\n\n    // const editable = state == 'draft'\n\n    return html`\n      <div flow>\n        ${approvalLine\n          ? html`\n              <approval-line-view\n                .model=${approvalLine}\n                @click=${() => this.onClickApprovalLine(activityInstance)}\n                @change=${e => (activityInstance.approvalLine = e.currentTarget.value)}\n              ></approval-line-view>\n            `\n          : html`<md-elevated-button @click=${() => this.onClickApprovalLine(activityInstance)}>\n              <md-icon slot=\"icon\">group_add</md-icon>\n            </md-elevated-button>`}\n      </div>\n\n      <dl class=\"given\">\n        <dt>${i18next.t('field.assigned-at')}</dt>\n        <dd>${whenCell(assignedAt)}</dd>\n\n        <dt>${i18next.t('field.due-at')}</dt>\n        <dd>${whenCell(dueAt)}</dd>\n\n        <dt>${i18next.t('field.started-at')}</dt>\n        <dd>${whenCell(startedAt)}</dd>\n      </dl>\n\n      ${startingType == 'issue'\n        ? html`<div assignees>\n            <div>\n              <label>${i18next.t('field.assignees')}</label>\n              ${assignees\n                ? html`\n                    <assignees-view\n                      .value=${assignees}\n                      @click=${() => this.onClickAssignees(activityInstance)}\n                      @change=${e => (activityInstance.assignees = e.currentTarget.value)}\n                    ></assignees-view>\n                  `\n                : html`<md-elevated-button @click=${() => this.onClickAssignees(activityInstance)}>\n                    <md-icon slot=\"icon\">group_add</md-icon>\n                  </md-elevated-button>`}\n            </div>\n          </div>`\n        : html``}\n      ${thumbnail\n        ? html` <div thumbnail>\n            <img src=${thumbnail} />\n          </div>`\n        : html``}\n    `\n  }\n\n  onClickAssignees(activityInstance) {\n    const { assignees } = activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <assignees-editor-popup\n          .value=${assignees}\n          .confirmCallback=${value => {\n            activityInstance.assignees = value\n            this.requestUpdate()\n          }}\n        ></assignees-editor-popup>\n      `,\n      {\n        backdrop: true,\n        help: 'organization/assignees-editor',\n        size: 'large',\n        title: i18next.t('title.assignee list')\n      }\n    )\n    popup.onclosed = () => {}\n  }\n\n  onClickApprovalLine(activityInstance) {\n    const { approvalLine } = activityInstance || {}\n\n    const popup = openPopup(\n      html`\n        <approval-line-items-editor-popup\n          .value=${approvalLine}\n          .confirmCallback=${value => {\n            activityInstance.approvalLine = value\n            this.requestUpdate()\n          }}\n        ></approval-line-items-editor-popup>\n      `,\n      {\n        backdrop: true,\n        help: 'organization/approval-line-items-editor',\n        size: 'large',\n        title: i18next.t('title.approval-line item list')\n      }\n    )\n    popup.onclosed = () => {}\n  }\n}\n"]}

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

@@ -0,0 +1,3 @@
+import '@material/web/icon/icon.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import '../components/activity-thread-timeline';

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

@@ -0,0 +1,74 @@
+import { __decorate, __metadata } from "tslib";
+import '@material/web/icon/icon.js';
+import '@things-factory/organization/dist-client/component/approval-line-view.js';
+import '../components/activity-thread-timeline';
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js';
+import { RouteController } from '@operato/shell';
+import { i18next } from '@operato/i18n';
+import { currentApprovalOrder } from '../approval-progress.js';
+import { ContextPanelStyles, whenCell } from './context-panel.js';
+import { personValue } from '../components/activity-fields.js';
+let ActivityThreadContextTemplate = class ActivityThreadContextTemplate extends LitElement {
+    constructor() {
+        super(...arguments);
+        this._routeCtrl = new RouteController(this);
+    }
+    static { this.styles = [ContextToolbarOverlayStyle, ContextPanelStyles]; }
+    render() {
+        const activityThread = this._routeCtrl.context.activityThread || this.activityThread || {};
+        const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } = activityThread || {};
+        const { name, description, approvalLine } = activityInstance || {};
+        return html `
+      <div flow>
+        <div approval-line>
+          ${approvalLine
+            ? html `<approval-line-view
+                .model=${approvalLine}
+                .current=${currentApprovalOrder(activityApprovals)}
+              ></approval-line-view>`
+            : html ``}
+        </div>
+      </div>
+
+      <dl class="given">
+        <!-- 차수는 1일 때 적지 않는다 — 거의 모든 건이 1차라 그 줄이 아무것도 알려 주지 않는다. -->
+        ${Number(round) > 1
+            ? html `
+              <dt>${i18next.t('field.round')}</dt>
+              <dd class="strong">${round}</dd>
+            `
+            : nothing}
+
+        <!-- 화면 본문과 같은 낱말을 쓴다 — 목록의 칸도 「담당자」다. -->
+        <dt>${i18next.t('field.wl-owner')}</dt>
+        <dd class="strong">${personValue(assignee)}</dd>
+
+        <dt>${i18next.t('field.assigned-at')}</dt>
+        <dd>${whenCell(assignedAt)}</dd>
+
+        <dt>${i18next.t('field.due-at')}</dt>
+        <dd>${whenCell(dueAt)}</dd>
+
+        <dt>${i18next.t('field.terminated-at')}</dt>
+        <dd>${whenCell(terminatedAt)}</dd>
+      </dl>
+
+      <!--
+        팝업 안에서는 편다. 팝업은 내용에 맞춰지지 않고 60%×60% 로 고정되므로
+        (@operato/popup 의 [hovering=center]), 접어 두면 아래가 흰 여백으로 남는다.
+        그리고 여기서 이력은 보조가 아니다 — 이 패널을 여는 이유의 절반이 「어떻게 여기까지 왔나」다.
+      -->
+      <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>
+    `;
+    }
+};
+__decorate([
+    property({ type: Object }),
+    __metadata("design:type", Object)
+], ActivityThreadContextTemplate.prototype, "activityThread", void 0);
+ActivityThreadContextTemplate = __decorate([
+    customElement('activity-thread-context-template')
+], ActivityThreadContextTemplate);
+//# sourceMappingURL=activity-thread-context-template.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"activity-thread-context-template.js","sourceRoot":"","sources":["../../client/templates/activity-thread-context-template.ts"],"names":[],"mappings":";AAAA,OAAO,4BAA4B,CAAA;AACnC,OAAO,0EAA0E,CAAA;AACjF,OAAO,wCAAwC,CAAA;AAE/C,OAAO,EAAE,IAAI,EAAO,UAAU,EAAE,OAAO,EAAE,MAAM,KAAK,CAAA;AACpD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AAE3D,OAAO,EAAE,0BAA0B,EAAE,MAAM,sDAAsD,CAAA;AACjG,OAAO,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAA;AAChD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAA;AAE9D,OAAO,EAAE,kBAAkB,EAAa,QAAQ,EAAE,MAAM,oBAAoB,CAAA;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,kCAAkC,CAAA;AAG9D,IAAM,6BAA6B,GAAnC,MAAM,6BAA8B,SAAQ,UAAU;IAAtD;;QAKU,eAAU,GAAG,IAAI,eAAe,CAAC,IAAI,CAAC,CAAA;IAqDhD,CAAC;aAzDQ,WAAM,GAAG,CAAC,0BAA0B,EAAE,kBAAkB,CAAC,AAAnD,CAAmD;IAMhE,MAAM;QACJ,MAAM,cAAc,GAAG,IAAI,CAAC,UAAU,CAAC,OAAO,CAAC,cAAc,IAAI,IAAI,CAAC,cAAc,IAAI,EAAE,CAAA;QAE1F,MAAM,EAAE,KAAK,EAAE,KAAK,EAAE,KAAK,EAAE,UAAU,EAAE,YAAY,EAAE,QAAQ,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,GACpG,cAAc,IAAI,EAAE,CAAA;QACtB,MAAM,EAAE,IAAI,EAAE,WAAW,EAAE,YAAY,EAAE,GAAG,gBAAgB,IAAI,EAAE,CAAA;QAElE,OAAO,IAAI,CAAA;;;YAGH,YAAY;YACZ,CAAC,CAAC,IAAI,CAAA;yBACO,YAAY;2BACV,oBAAoB,CAAC,iBAAiB,CAAC;qCAC7B;YACzB,CAAC,CAAC,IAAI,CAAA,EAAE;;;;;;UAMV,MAAM,CAAC,KAAK,CAAC,GAAG,CAAC;YACjB,CAAC,CAAC,IAAI,CAAA;oBACI,OAAO,CAAC,CAAC,CAAC,aAAa,CAAC;mCACT,KAAK;aAC3B;YACH,CAAC,CAAC,OAAO;;;cAGL,OAAO,CAAC,CAAC,CAAC,gBAAgB,CAAC;6BACZ,WAAW,CAAC,QAAQ,CAAC;;cAEpC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC;cAC9B,QAAQ,CAAC,UAAU,CAAC;;cAEpB,OAAO,CAAC,CAAC,CAAC,cAAc,CAAC;cACzB,QAAQ,CAAC,KAAK,CAAC;;cAEf,OAAO,CAAC,CAAC,CAAC,qBAAqB,CAAC;cAChC,QAAQ,CAAC,YAAY,CAAC;;;;;;;;kDAQc,cAAc;KAC3D,CAAA;IACH,CAAC;;AArDmC;IAAnC,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC;;qEAAuB;AAH9C,6BAA6B;IADlC,aAAa,CAAC,kCAAkC,CAAC;GAC5C,6BAA6B,CA0DlC","sourcesContent":["import '@material/web/icon/icon.js'\nimport '@things-factory/organization/dist-client/component/approval-line-view.js'\nimport '../components/activity-thread-timeline'\n\nimport { html, css, LitElement, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport { ContextToolbarOverlayStyle } from '@operato/context/ox-context-toolbar-overlay-style.js'\nimport { RouteController } from '@operato/shell'\nimport { i18next } from '@operato/i18n'\n\nimport { currentApprovalOrder } from '../approval-progress.js'\n\nimport { ContextPanelStyles, valueCell, whenCell } from './context-panel.js'\nimport { personValue } from '../components/activity-fields.js'\n\n@customElement('activity-thread-context-template')\nclass ActivityThreadContextTemplate extends LitElement {\n  static styles = [ContextToolbarOverlayStyle, ContextPanelStyles]\n\n  @property({ type: Object }) private activityThread\n\n  private _routeCtrl = new RouteController(this)\n\n  render() {\n    const activityThread = this._routeCtrl.context.activityThread || this.activityThread || {}\n\n    const { state, round, dueAt, assignedAt, terminatedAt, assignee, activityInstance, activityApprovals } =\n      activityThread || {}\n    const { name, description, approvalLine } = activityInstance || {}\n\n    return html`\n      <div flow>\n        <div approval-line>\n          ${approvalLine\n            ? html`<approval-line-view\n                .model=${approvalLine}\n                .current=${currentApprovalOrder(activityApprovals)}\n              ></approval-line-view>`\n            : html``}\n        </div>\n      </div>\n\n      <dl class=\"given\">\n        <!-- 차수는 1일 때 적지 않는다 — 거의 모든 건이 1차라 그 줄이 아무것도 알려 주지 않는다. -->\n        ${Number(round) > 1\n          ? html`\n              <dt>${i18next.t('field.round')}</dt>\n              <dd class=\"strong\">${round}</dd>\n            `\n          : nothing}\n\n        <!-- 화면 본문과 같은 낱말을 쓴다 — 목록의 칸도 「담당자」다. -->\n        <dt>${i18next.t('field.wl-owner')}</dt>\n        <dd class=\"strong\">${personValue(assignee)}</dd>\n\n        <dt>${i18next.t('field.assigned-at')}</dt>\n        <dd>${whenCell(assignedAt)}</dd>\n\n        <dt>${i18next.t('field.due-at')}</dt>\n        <dd>${whenCell(dueAt)}</dd>\n\n        <dt>${i18next.t('field.terminated-at')}</dt>\n        <dd>${whenCell(terminatedAt)}</dd>\n      </dl>\n\n      <!--\n        팝업 안에서는 편다. 팝업은 내용에 맞춰지지 않고 60%×60% 로 고정되므로\n        (@operato/popup 의 [hovering=center]), 접어 두면 아래가 흰 여백으로 남는다.\n        그리고 여기서 이력은 보조가 아니다 — 이 패널을 여는 이유의 절반이 「어떻게 여기까지 왔나」다.\n      -->\n      <activity-thread-timeline .activityThread=${activityThread} open short-form></activity-thread-timeline>\n    `\n  }\n\n}\n"]}

package/dist-client/templates/context-panel.d.ts

@@ -0,0 +1,26 @@
+/**
+ * 문서 아이콘이 여는 곁 패널 — **세 템플릿이 한 모양을 쓴다.**
+ *
+ * activity-thread · activity-approval · activity-instance 의 context template 셋이 같은 것을 보인다
+ * (결재선 · 이름 · 설명 · 상태 · 차수 · 담당자 · 시각 셋). 그런데 셋이 각자 스타일을 갖고 있었고,
+ * 상태색 여덟 개와 자체 시각 formatter 가 세 벌로 복사되어 있었다.
+ *
+ * ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────────────
+ * 1. 시각이 Monday, August 31, 2026 at 11:09 PM 이었다. 세 템플릿이 각자
+ *    Intl.DateTimeFormat(navigator.language, dateStyle full) 을 들고 있었다. 이 패널을 여는 화면은
+ *    바로 뒤에서 2026. 8. 31. 오후 11:09 로 적고 있다 — 같은 값이 두 뼘 사이에서 두 말로 나왔다.
+ * 2. 왼쪽에 상태색 삼각형이 붙어 있었다. 하드코딩된 hex 여덟 개 중 하나를 골라 칠하는 장식인데,
+ *    상태는 이미 패널 안에 점과 글자로 적혀 있다. 같은 것을 두 번 말하면서 앱 팔레트를 따르지도
+ *    않았다.
+ * 3. 줄마다 배경색이 번갈아 깔렸다(nth-child odd). 여덟 줄짜리 표에 얼룩이 지고, 라벨 폭이 25% 로
+ *    고정이라 좁은 화면에서는 값이 밀렸다.
+ * 4. 값이 없으면 빈 칸이었다. 만기 시간과 완료 시간이 비어 있었는데, 값이 없는 것인지 화면이 못 낸
+ *    것인지 구별되지 않는다.
+ */
+export declare const ContextPanelStyles: import("lit").CSSResult[];
+/** 상태 한 칸 — 점과 이름. 색만으로 뜻을 전하지 않는다. */
+export declare function stateCell(state?: string): import("lit-html").TemplateResult<1>;
+/** 시각 한 칸 — 화면 본문과 같은 표기(when.ts). 없으면 없다고 말한다. */
+export declare function whenCell(at?: string | number | Date): unknown;
+/** 값 한 칸 — 없으면 빈 칸으로 두지 않는다. */
+export declare function valueCell(value?: any): unknown;

package/dist-client/templates/context-panel.js

@@ -0,0 +1,182 @@
+import { css, html } from 'lit';
+import { ScrollbarStyles } from '@operato/styles';
+import { i18next } from '@operato/i18n';
+import { whenText } from '../when.js';
+import { fieldValue } from '../components/activity-fields.js';
+/**
+ * 문서 아이콘이 여는 곁 패널 — **세 템플릿이 한 모양을 쓴다.**
+ *
+ * activity-thread · activity-approval · activity-instance 의 context template 셋이 같은 것을 보인다
+ * (결재선 · 이름 · 설명 · 상태 · 차수 · 담당자 · 시각 셋). 그런데 셋이 각자 스타일을 갖고 있었고,
+ * 상태색 여덟 개와 자체 시각 formatter 가 세 벌로 복사되어 있었다.
+ *
+ * ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────────────
+ * 1. 시각이 Monday, August 31, 2026 at 11:09 PM 이었다. 세 템플릿이 각자
+ *    Intl.DateTimeFormat(navigator.language, dateStyle full) 을 들고 있었다. 이 패널을 여는 화면은
+ *    바로 뒤에서 2026. 8. 31. 오후 11:09 로 적고 있다 — 같은 값이 두 뼘 사이에서 두 말로 나왔다.
+ * 2. 왼쪽에 상태색 삼각형이 붙어 있었다. 하드코딩된 hex 여덟 개 중 하나를 골라 칠하는 장식인데,
+ *    상태는 이미 패널 안에 점과 글자로 적혀 있다. 같은 것을 두 번 말하면서 앱 팔레트를 따르지도
+ *    않았다.
+ * 3. 줄마다 배경색이 번갈아 깔렸다(nth-child odd). 여덟 줄짜리 표에 얼룩이 지고, 라벨 폭이 25% 로
+ *    고정이라 좁은 화면에서는 값이 밀렸다.
+ * 4. 값이 없으면 빈 칸이었다. 만기 시간과 완료 시간이 비어 있었는데, 값이 없는 것인지 화면이 못 낸
+ *    것인지 구별되지 않는다.
+ */
+/*
+ * 스크롤바는 제품 표준을 따른다(@operato/styles 의 ScrollbarStyles — 5px · 투명 트랙).
+ * 이 패널은 반드시 스크롤한다(팝업이 고정 높이라 내용이 길면 안에서 넘긴다). 그런데 스타일을 안
+ * 넣어 두어 좁은 화면에서 브라우저 기본 스크롤바가 그대로 나왔다 — 이 앱의 다른 스크롤 영역과
+ * 굵기가 달랐다.
+ */
+export const ContextPanelStyles = [
+    ScrollbarStyles,
+    css `
+  /*
+   * ── 크기는 팝업이 정한다 ──────────────────────────────────────────────
+   * openPopup 이 만드는 상자 안에 들어간다. 그 상자가 폭과 높이를 정하고
+   * ([hovering=center] 의 60%×60%), 슬롯에 들어온 것을 width/height 100% 로 늘린다.
+   *
+   * 여기서 min-width / max-width / max-height 를 또 정했다가 **패널이 상자보다 작아졌다** —
+   * 실측: 상자 598px · 패널 560px, 오른쪽 38px 이 빈 채로 남았다. 상자를 그대로 채운다.
+   *
+   * 면·테두리·모서리·그림자도 팝업의 것을 쓴다 — 여기서 또 그리면 상자가 두 겹이 된다.
+   */
+  :host {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+
+    background: var(--ui-panel, #ffffff);
+    color: var(--ui-ink, #17242c);
+    font-size: var(--ui-t-body, 13px);
+    --context-ui-padding: 0;
+  }
+
+  /*
+   * 결재선 — 패널의 머리. 아래로 한 줄 그어 정보와 나눈다.
+   *
+   * 회색으로 채우지 않는다(SurfaceStyles 가 정한 규칙). 전에는 결재선 컴포넌트가 자기 회색 면을
+   * 칠해서 흰 패널 위에 띠 하나가 얹혀 있었다.
+   */
+  div[flow] {
+    padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px) 0;
+    border-bottom: 1px solid var(--ui-line, #d5dce0);
+    /*
+     * 결재선이 판보다 넓을 수 있다 — 4단계짜리(나 · 품질팀장 · 공장장 · 생산팀장)가 좁은 화면의
+     * 팝업에서 오른쪽으로 잘렸다. 줄바꿈은 안 된다(단계 사이 이음선이 절대 위치라 줄이 바뀌면
+     * 허공에 그려진다). 그래서 이 띠 안에서만 가로로 넘긴다 — 패널의 나머지는 그대로다.
+     */
+    overflow-x: auto;
+  }
+
+  /*
+   * 이름과 값 — **본문 화면과 같은 구조다**(activity-fields 의 dl.given).
+   *
+   * ── 가운데로 밀었다가 되돌렸다 (2026-09-06) ──────────────────────────
+   * 값이 짧아 오른쪽이 비는 것을 결함으로 보고 묶음을 가운데 정렬했다. 그것이 틀렸다.
+   *
+   *   왼쪽 기준선이 사라진다   라벨을 세로로 훑어 읽는 목록인데, 항목 수와 글자 길이에 따라
+   *                          블록이 좌우로 움직인다
+   *   패널 안에 축이 둘이 된다   아래 타임라인은 왼쪽 정박이라 두 기준선이 어긋난다
+   *   화면과 달라진다         상세 · 완료 조회의 같은 구조는 왼쪽 정박이다
+   *
+   * label/value 목록은 값이 짧으면 오른쪽이 남는다. 그것이 정상이다.
+   */
+  dl.given {
+    display: grid;
+    grid-template-columns: minmax(80px, max-content) 1fr;
+    gap: 8px var(--spacing-large, 16px);
+    margin: 0;
+    padding: var(--spacing-large, 16px);
+  }
+
+  dl.given dt {
+    text-align: right;
+    color: var(--ui-muted, #57676f);
+    word-break: keep-all;
+  }
+
+  dl.given dd {
+    margin: 0;
+    color: var(--ui-ink, #17242c);
+    word-break: break-word;
+  }
+
+  dl.given dd.strong {
+    font-weight: 600;
+  }
+
+  dl.given .none {
+    color: var(--ui-faint, #8a959c);
+  }
+
+  /* 상태 — 화면의 머리 띠와 같은 모양이다(state-ribon 의 .state). */
+  .state {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    font-weight: 600;
+  }
+
+  .state .dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    background: var(--worklist-state-color, var(--ui-muted, #57676f));
+  }
+
+  :host([state='unassigned']),
+  :host([state='assigned']),
+  :host([state='draft']) {
+    --worklist-state-color: var(--ui-muted, #57676f);
+  }
+
+  :host([state='started']),
+  :host([state='issued']),
+  :host([state='posted']) {
+    --worklist-state-color: var(--ui-accent, #00727e);
+  }
+
+  :host([state='submitted']),
+  :host([state='escalated']),
+  :host([state='delegated']),
+  :host([state='pending']) {
+    --worklist-state-color: var(--ui-info, #2b72ad);
+  }
+
+  :host([state='rejected']) {
+    --worklist-state-color: var(--ui-warn, #9f5e02);
+  }
+
+  :host([state='ended']),
+  :host([state='approved']) {
+    --worklist-state-color: var(--ui-good, #297d39);
+  }
+
+  :host([state='aborted']),
+  :host([state='deprecated']) {
+    --worklist-state-color: var(--ui-crit, #d14946);
+  }
+
+  activity-thread-timeline {
+    margin: 0 var(--spacing-large, 16px) var(--spacing-large, 16px);
+  }
+
+
+`
+];
+/** 상태 한 칸 — 점과 이름. 색만으로 뜻을 전하지 않는다. */
+export function stateCell(state) {
+    return html `<span class="state"><i class="dot"></i>${i18next.t('label.activity-state-' + state)}</span>`;
+}
+/** 시각 한 칸 — 화면 본문과 같은 표기(when.ts). 없으면 없다고 말한다. */
+export function whenCell(at) {
+    return fieldValue(whenText(at));
+}
+/** 값 한 칸 — 없으면 빈 칸으로 두지 않는다. */
+export function valueCell(value) {
+    return fieldValue(value);
+}
+//# sourceMappingURL=context-panel.js.map

package/dist-client/templates/context-panel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"context-panel.js","sourceRoot":"","sources":["../../client/templates/context-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,MAAM,KAAK,CAAA;AAE/B,OAAO,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAA;AAEjD,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA;AAEvC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAA;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,kCAAkC,CAAA;AAE7D;;;;;;;;;;;;;;;;;;GAkBG;AACH;;;;;GAKG;AACH,MAAM,CAAC,MAAM,kBAAkB,GAAG;IAChC,eAAe;IACf,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuIJ;CACA,CAAA;AAED,uCAAuC;AACvC,MAAM,UAAU,SAAS,CAAC,KAAc;IACtC,OAAO,IAAI,CAAA,0CAA0C,OAAO,CAAC,CAAC,CAAC,uBAAuB,GAAG,KAAK,CAAC,SAAS,CAAA;AAC1G,CAAC;AAED,mDAAmD;AACnD,MAAM,UAAU,QAAQ,CAAC,EAA2B;IAClD,OAAO,UAAU,CAAC,QAAQ,CAAC,EAAE,CAAC,CAAC,CAAA;AACjC,CAAC;AAED,gCAAgC;AAChC,MAAM,UAAU,SAAS,CAAC,KAAW;IACnC,OAAO,UAAU,CAAC,KAAK,CAAC,CAAA;AAC1B,CAAC","sourcesContent":["import { css, html } from 'lit'\n\nimport { ScrollbarStyles } from '@operato/styles'\n\nimport { i18next } from '@operato/i18n'\n\nimport { whenText } from '../when.js'\nimport { fieldValue } from '../components/activity-fields.js'\n\n/**\n * 문서 아이콘이 여는 곁 패널 — **세 템플릿이 한 모양을 쓴다.**\n *\n * activity-thread · activity-approval · activity-instance 의 context template 셋이 같은 것을 보인다\n * (결재선 · 이름 · 설명 · 상태 · 차수 · 담당자 · 시각 셋). 그런데 셋이 각자 스타일을 갖고 있었고,\n * 상태색 여덟 개와 자체 시각 formatter 가 세 벌로 복사되어 있었다.\n *\n * ── 무엇을 고쳤나 (2026-09-06) ─────────────────────────────────────────────\n * 1. 시각이 Monday, August 31, 2026 at 11:09 PM 이었다. 세 템플릿이 각자\n *    Intl.DateTimeFormat(navigator.language, dateStyle full) 을 들고 있었다. 이 패널을 여는 화면은\n *    바로 뒤에서 2026. 8. 31. 오후 11:09 로 적고 있다 — 같은 값이 두 뼘 사이에서 두 말로 나왔다.\n * 2. 왼쪽에 상태색 삼각형이 붙어 있었다. 하드코딩된 hex 여덟 개 중 하나를 골라 칠하는 장식인데,\n *    상태는 이미 패널 안에 점과 글자로 적혀 있다. 같은 것을 두 번 말하면서 앱 팔레트를 따르지도\n *    않았다.\n * 3. 줄마다 배경색이 번갈아 깔렸다(nth-child odd). 여덟 줄짜리 표에 얼룩이 지고, 라벨 폭이 25% 로\n *    고정이라 좁은 화면에서는 값이 밀렸다.\n * 4. 값이 없으면 빈 칸이었다. 만기 시간과 완료 시간이 비어 있었는데, 값이 없는 것인지 화면이 못 낸\n *    것인지 구별되지 않는다.\n */\n/*\n * 스크롤바는 제품 표준을 따른다(@operato/styles 의 ScrollbarStyles — 5px · 투명 트랙).\n * 이 패널은 반드시 스크롤한다(팝업이 고정 높이라 내용이 길면 안에서 넘긴다). 그런데 스타일을 안\n * 넣어 두어 좁은 화면에서 브라우저 기본 스크롤바가 그대로 나왔다 — 이 앱의 다른 스크롤 영역과\n * 굵기가 달랐다.\n */\nexport const ContextPanelStyles = [\n  ScrollbarStyles,\n  css`\n  /*\n   * ── 크기는 팝업이 정한다 ──────────────────────────────────────────────\n   * openPopup 이 만드는 상자 안에 들어간다. 그 상자가 폭과 높이를 정하고\n   * ([hovering=center] 의 60%×60%), 슬롯에 들어온 것을 width/height 100% 로 늘린다.\n   *\n   * 여기서 min-width / max-width / max-height 를 또 정했다가 **패널이 상자보다 작아졌다** —\n   * 실측: 상자 598px · 패널 560px, 오른쪽 38px 이 빈 채로 남았다. 상자를 그대로 채운다.\n   *\n   * 면·테두리·모서리·그림자도 팝업의 것을 쓴다 — 여기서 또 그리면 상자가 두 겹이 된다.\n   */\n  :host {\n    display: block;\n    box-sizing: border-box;\n    width: 100%;\n    height: 100%;\n    overflow: auto;\n\n    background: var(--ui-panel, #ffffff);\n    color: var(--ui-ink, #17242c);\n    font-size: var(--ui-t-body, 13px);\n    --context-ui-padding: 0;\n  }\n\n  /*\n   * 결재선 — 패널의 머리. 아래로 한 줄 그어 정보와 나눈다.\n   *\n   * 회색으로 채우지 않는다(SurfaceStyles 가 정한 규칙). 전에는 결재선 컴포넌트가 자기 회색 면을\n   * 칠해서 흰 패널 위에 띠 하나가 얹혀 있었다.\n   */\n  div[flow] {\n    padding: var(--spacing-medium, 8px) var(--spacing-medium, 8px) 0;\n    border-bottom: 1px solid var(--ui-line, #d5dce0);\n    /*\n     * 결재선이 판보다 넓을 수 있다 — 4단계짜리(나 · 품질팀장 · 공장장 · 생산팀장)가 좁은 화면의\n     * 팝업에서 오른쪽으로 잘렸다. 줄바꿈은 안 된다(단계 사이 이음선이 절대 위치라 줄이 바뀌면\n     * 허공에 그려진다). 그래서 이 띠 안에서만 가로로 넘긴다 — 패널의 나머지는 그대로다.\n     */\n    overflow-x: auto;\n  }\n\n  /*\n   * 이름과 값 — **본문 화면과 같은 구조다**(activity-fields 의 dl.given).\n   *\n   * ── 가운데로 밀었다가 되돌렸다 (2026-09-06) ──────────────────────────\n   * 값이 짧아 오른쪽이 비는 것을 결함으로 보고 묶음을 가운데 정렬했다. 그것이 틀렸다.\n   *\n   *   왼쪽 기준선이 사라진다   라벨을 세로로 훑어 읽는 목록인데, 항목 수와 글자 길이에 따라\n   *                          블록이 좌우로 움직인다\n   *   패널 안에 축이 둘이 된다   아래 타임라인은 왼쪽 정박이라 두 기준선이 어긋난다\n   *   화면과 달라진다         상세 · 완료 조회의 같은 구조는 왼쪽 정박이다\n   *\n   * label/value 목록은 값이 짧으면 오른쪽이 남는다. 그것이 정상이다.\n   */\n  dl.given {\n    display: grid;\n    grid-template-columns: minmax(80px, max-content) 1fr;\n    gap: 8px var(--spacing-large, 16px);\n    margin: 0;\n    padding: var(--spacing-large, 16px);\n  }\n\n  dl.given dt {\n    text-align: right;\n    color: var(--ui-muted, #57676f);\n    word-break: keep-all;\n  }\n\n  dl.given dd {\n    margin: 0;\n    color: var(--ui-ink, #17242c);\n    word-break: break-word;\n  }\n\n  dl.given dd.strong {\n    font-weight: 600;\n  }\n\n  dl.given .none {\n    color: var(--ui-faint, #8a959c);\n  }\n\n  /* 상태 — 화면의 머리 띠와 같은 모양이다(state-ribon 의 .state). */\n  .state {\n    display: inline-flex;\n    align-items: center;\n    gap: 6px;\n    font-weight: 600;\n  }\n\n  .state .dot {\n    width: 8px;\n    height: 8px;\n    border-radius: 50%;\n    background: var(--worklist-state-color, var(--ui-muted, #57676f));\n  }\n\n  :host([state='unassigned']),\n  :host([state='assigned']),\n  :host([state='draft']) {\n    --worklist-state-color: var(--ui-muted, #57676f);\n  }\n\n  :host([state='started']),\n  :host([state='issued']),\n  :host([state='posted']) {\n    --worklist-state-color: var(--ui-accent, #00727e);\n  }\n\n  :host([state='submitted']),\n  :host([state='escalated']),\n  :host([state='delegated']),\n  :host([state='pending']) {\n    --worklist-state-color: var(--ui-info, #2b72ad);\n  }\n\n  :host([state='rejected']) {\n    --worklist-state-color: var(--ui-warn, #9f5e02);\n  }\n\n  :host([state='ended']),\n  :host([state='approved']) {\n    --worklist-state-color: var(--ui-good, #297d39);\n  }\n\n  :host([state='aborted']),\n  :host([state='deprecated']) {\n    --worklist-state-color: var(--ui-crit, #d14946);\n  }\n\n  activity-thread-timeline {\n    margin: 0 var(--spacing-large, 16px) var(--spacing-large, 16px);\n  }\n\n\n`\n]\n\n/** 상태 한 칸 — 점과 이름. 색만으로 뜻을 전하지 않는다. */\nexport function stateCell(state?: string) {\n  return html`<span class=\"state\"><i class=\"dot\"></i>${i18next.t('label.activity-state-' + state)}</span>`\n}\n\n/** 시각 한 칸 — 화면 본문과 같은 표기(when.ts). 없으면 없다고 말한다. */\nexport function whenCell(at?: string | number | Date) {\n  return fieldValue(whenText(at))\n}\n\n/** 값 한 칸 — 없으면 빈 칸으로 두지 않는다. */\nexport function valueCell(value?: any) {\n  return fieldValue(value)\n}\n"]}