@acorex-platform/module-workplacesafety-management-client 0.0.37 → 0.0.46

package/fesm2022/{acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-CQ2xB7Va.mjs → acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-B9lElhxc.mjs}

@@ -1,22 +1,26 @@
+import * as i1$1 from '@acorex/components/button';
+import { AXButtonModule } from '@acorex/components/button';
 import { AXBasePageComponent } from '@acorex/components/page';
+import { AXToastService } from '@acorex/components/toast';
 import * as i2 from '@acorex/core/translation';
 import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+import { AXPEntityService } from '@acorex-platform/framework-client/layout/entity';
 import { AsyncPipe } from '@angular/common';
 import * as i0 from '@angular/core';
-import { input, ChangeDetectionStrategy, Component, inject, signal, computed, effect, ViewEncapsulation } from '@angular/core';
-import { n as normalizeSafetyPlanSectionBuilderValue } from './acorex-platform-module-workplacesafety-management-client-safety-plan-section-builder.types-LaN1NIgc.mjs';
+import { input, ChangeDetectionStrategy, Component, inject, signal, computed, effect, output, ViewEncapsulation } from '@angular/core';
+import { n as normalizeSafetyPlanSectionBuilderValue } from './acorex-platform-module-workplacesafety-management-client-safety-plan-section-builder.types-C0SEJsVM.mjs';
 import { A as AXMControlHierarchyDiagramComponent } from './acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.component-CfxHwZtH.mjs';
 import { A as AXMControlHierarchyDiagramService, r as resolveControlHierarchyDiagramViewType } from './acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.service-tMrUDnCb.mjs';
 import { A as AXMPpeItemViewerService, a as AXMPpeItemViewerComponent } from './acorex-platform-module-workplacesafety-management-client-ppe-item-viewer.service-BxcGph1I.mjs';
-import { r as resolvePpeItemViewerLayout } from './acorex-platform-module-workplacesafety-management-client-ppe-item-viewer.util-2Kl3_3sg.mjs';
+import { r as resolvePpeItemViewerLayout, e as extractPpeItemIds } from './acorex-platform-module-workplacesafety-management-client-ppe-item-viewer.util-2Kl3_3sg.mjs';
 import * as i1 from '@acorex/components/loading';
 import { AXLoadingModule } from '@acorex/components/loading';
 import { AXPLayoutBuilderService, AXPLayoutRendererComponent } from '@acorex-platform/framework-client/layout/builder';
-import { AXPEntityService } from '@acorex-platform/framework-client/layout/entity';
 import { AXPWidgetsList } from '@acorex-platform/framework-shared/core';
-import { isStepTableSectionType, resolveSectionTypeKey, sortStepTableColumns, normalizeStepTableColumns, stepTableColumnTitle, RISK_MANAGEMENT_RISK_MATRIX_CELL_ENTITY, stepTableColumnKey } from '@acorex-platform/module-workplacesafety-management-client/contracts';
+import { isActivitySectionType, resolveSectionTypeKey, RISK_MANAGEMENT_RISK_MATRIX_ENTITY, resolveSectionTypeDisplayTitle, asSafetyPlanDisplayText } from '@acorex-platform/module-workplacesafety-management-client/contracts';
 import { cloneDeep } from 'lodash';
 import { resolveEntityRowDisplayText } from '@acorex-platform/framework-client/common';
+import { n as normalizeSafetyPlanFillValues, s as saveSafetyPlanFillValues } from './acorex-platform-module-workplacesafety-management-client-safety-plan-fill-values.util-RLOdySf7.mjs';
 
 //#region ----- Imports -----
 //#endregion
@@ -115,6 +119,13 @@ class AXMPpeSectionPreviewComponent {
         ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
         this.layout = input(/* @ts-ignore */
         ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
+        this.value = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+        this.editable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Outputs -----
+        this.valueChange = output();
         //#endregion
         //#region ----- State Signals -----
         this.loading = signal(false, /* @ts-ignore */
@@ -127,6 +138,10 @@ class AXMPpeSectionPreviewComponent {
         ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----- Lifecycle -----
+        this.applyStoredValue = effect(() => {
+            this.selectedIds.set(extractPpeItemIds(this.value()));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "applyStoredValue" }] : /* istanbul ignore next */ []));
         this.loadItems = effect((onCleanup) => {
             const catalogItems = this.items();
             let cancelled = false;
@@ -140,7 +155,11 @@ class AXMPpeSectionPreviewComponent {
     //#endregion
     //#region ----- Event Handlers -----
     onSelectedIdsChange(ids) {
+        if (!this.editable()) {
+            return;
+        }
         this.selectedIds.set(ids);
+        this.valueChange.emit(ids);
     }
     //#endregion
     //#region ----- Data Loading -----
@@ -180,14 +199,14 @@ class AXMPpeSectionPreviewComponent {
         };
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMPpeSectionPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXMPpeSectionPreviewComponent, isStandalone: true, selector: "axm-ppe-section-preview", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-ppe-section-preview block" }, ngImport: i0, template: "<!-- ----- PPE Item viewer (same component as Questionnaire; checkboxes can be toggled) ----- -->\n<axm-ppe-item-viewer\n  [items]=\"displayItems()\"\n  [layout]=\"resolvedLayout()\"\n  [selectedIds]=\"selectedIds()\"\n  [loading]=\"loading()\"\n  (selectedIdsChange)=\"onSelectedIdsChange($event)\"\n/>\n", dependencies: [{ kind: "component", type: AXMPpeItemViewerComponent, selector: "axm-ppe-item-viewer", inputs: ["items", "layout", "selectedIds", "loading", "disabled", "readonly", "showControl"], outputs: ["selectedIdsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXMPpeSectionPreviewComponent, isStandalone: true, selector: "axm-ppe-section-preview", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, layout: { classPropertyName: "layout", publicName: "layout", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "axm-ppe-section-preview block" }, ngImport: i0, template: "<!-- ----- PPE Item viewer; checks are workflow fill values, not the section catalog ----- -->\n<axm-ppe-item-viewer\n  [items]=\"displayItems()\"\n  [layout]=\"resolvedLayout()\"\n  [selectedIds]=\"selectedIds()\"\n  [loading]=\"loading()\"\n  [readonly]=\"!editable()\"\n  (selectedIdsChange)=\"onSelectedIdsChange($event)\"\n/>\n", dependencies: [{ kind: "component", type: AXMPpeItemViewerComponent, selector: "axm-ppe-item-viewer", inputs: ["items", "layout", "selectedIds", "loading", "disabled", "readonly", "showControl"], outputs: ["selectedIdsChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMPpeSectionPreviewComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-ppe-section-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXMPpeItemViewerComponent], host: {
                         class: 'axm-ppe-section-preview block',
-                    }, template: "<!-- ----- PPE Item viewer (same component as Questionnaire; checkboxes can be toggled) ----- -->\n<axm-ppe-item-viewer\n  [items]=\"displayItems()\"\n  [layout]=\"resolvedLayout()\"\n  [selectedIds]=\"selectedIds()\"\n  [loading]=\"loading()\"\n  (selectedIdsChange)=\"onSelectedIdsChange($event)\"\n/>\n" }]
-        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }] } });
+                    }, template: "<!-- ----- PPE Item viewer; checks are workflow fill values, not the section catalog ----- -->\n<axm-ppe-item-viewer\n  [items]=\"displayItems()\"\n  [layout]=\"resolvedLayout()\"\n  [selectedIds]=\"selectedIds()\"\n  [loading]=\"loading()\"\n  [readonly]=\"!editable()\"\n  (selectedIdsChange)=\"onSelectedIdsChange($event)\"\n/>\n" }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], layout: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
 
 //#region ----- Imports -----
 //#endregion
@@ -205,8 +224,8 @@ function resolveSafetyPlanPreviewSectionTitle(section, locale) {
  * can add cases here without changing the editor.
  */
 function resolveSafetyPlanSectionPreviewKind(section) {
-    if (isStepTableSectionType(section.sectionTypeId, section.sectionType)) {
-        return 'work-step-table';
+    if (isActivitySectionType(section.sectionTypeId, section.sectionType)) {
+        return 'activity';
     }
     if (resolveSectionTypeKey(section.sectionTypeId, section.sectionType) === 'RiskMatrix') {
         return 'risk-matrix';
@@ -219,10 +238,14 @@ function resolveSafetyPlanSectionPreviewKind(section) {
     }
     return 'catalog';
 }
-/** True when the section has at least one previewable item (catalog row or work-step row). */
+/** True when the section has at least one previewable item (catalog row or activity row). */
 function safetyPlanPreviewSectionHasItems(section) {
-    if (isStepTableSectionType(section.sectionTypeId, section.sectionType)) {
-        return (section.items ?? []).some((item) => item.stepTableRow != null);
+    if (isActivitySectionType(section.sectionTypeId, section.sectionType)) {
+        return (section.items ?? []).some((item) => {
+            const row = item.activityRow;
+            const snapshotTitle = item.items?.[0]?.title;
+            return Boolean(row?.title?.trim() || snapshotTitle?.trim());
+        });
     }
     return collectSafetyPlanPreviewCatalogItems(section, '').length > 0;
 }
@@ -240,33 +263,6 @@ function collectSafetyPlanPreviewCatalogItems(section, locale) {
     }
     return linked;
 }
-function resolveSafetyPlanPreviewStepTableColumns(section) {
-    return sortStepTableColumns(normalizeStepTableColumns(section.columns));
-}
-function formatSafetyPlanPreviewStepTableCell(cell, locale) {
-    if (!cell) {
-        return '';
-    }
-    const fromRefs = (cell.refs ?? [])
-        .map((ref) => toSafetyPlanPreviewDisplayText(ref.title, locale) || String(ref.code ?? '').trim())
-        .filter((text) => text.length > 0);
-    if (fromRefs.length) {
-        return fromRefs.join(', ');
-    }
-    const text = cell.textValue?.trim();
-    if (text) {
-        return text;
-    }
-    if (typeof cell.numberValue === 'number' && Number.isFinite(cell.numberValue)) {
-        return String(cell.numberValue);
-    }
-    return '';
-}
-function stepTablePreviewColumnLabel(column, locale) {
-    return (toSafetyPlanPreviewDisplayText(column.title, locale) ||
-        toSafetyPlanPreviewDisplayText(column.sectionType?.title, locale) ||
-        stepTableColumnTitle(column));
-}
 function flattenCatalogSlot(slot, locale) {
     const ids = Array.isArray(slot.itemIds) ? slot.itemIds : [];
     const snapshots = Array.isArray(slot.items) ? slot.items : [];
@@ -371,7 +367,7 @@ class AXMRiskMatrixPreviewComponent {
     }
     async queryByIds(ids) {
         const dataAccessor = this.entityService
-            .withEntity(RISK_MANAGEMENT_RISK_MATRIX_CELL_ENTITY)
+            .withEntity(RISK_MANAGEMENT_RISK_MATRIX_ENTITY)
             .data();
         try {
             const result = await dataAccessor.query({
@@ -418,7 +414,7 @@ class AXMRiskMatrixPreviewComponent {
             flex.mode('view').setDirection('column');
             flex.formField('', (field) => {
                 field
-                    .path('matrix')
+                    .path('cells')
                     .setShowLabel(false)
                     .mode('view')
                     .customWidget(AXPWidgetsList.Editors.RiskMatrix, { readonly: true });
@@ -439,7 +435,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
 //#region ----- Imports -----
 //#endregion
 //#region ----- Component -----
-class AXMWorkStepTablePreviewComponent {
+class AXMActivityPreviewComponent {
     constructor() {
         //#region ----- Services & Dependencies -----
         this.translationService = inject(AXTranslationService);
@@ -449,32 +445,63 @@ class AXMWorkStepTablePreviewComponent {
         ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----- Computed Properties -----
-        this.columns = computed(() => resolveSafetyPlanPreviewStepTableColumns(this.section()), /* @ts-ignore */
-        ...(ngDevMode ? [{ debugName: "columns" }] : /* istanbul ignore next */ []));
-        this.rows = computed(() => (this.section().items ?? [])
-            .map((item) => item.stepTableRow)
-            .filter((row) => !!row)
-            .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0)), /* @ts-ignore */
+        this.rows = computed(() => {
+            const locale = this.translationService.getActiveLang() ?? 'en-US';
+            return (this.section().items ?? [])
+                .map((item, index) => {
+                const row = item.activityRow;
+                if (!row) {
+                    return null;
+                }
+                return {
+                    view: this.toRowView(row, item.id || String(index), locale),
+                    sortOrder: row.sortOrder ?? index + 1,
+                };
+            })
+                .filter((entry) => entry != null)
+                .sort((a, b) => a.sortOrder - b.sortOrder)
+                .map((entry) => entry.view);
+        }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
     }
     //#endregion
     //#region ----- Display -----
-    columnLabel(column) {
-        return stepTablePreviewColumnLabel(column, this.translationService.getActiveLang() ?? 'en-US');
+    toRowView(row, key, locale) {
+        const sections = [...(row.sections ?? [])].sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0));
+        return {
+            key,
+            title: toSafetyPlanPreviewDisplayText(row.title, locale) || 'Row',
+            code: String(row.code ?? '').trim(),
+            description: toSafetyPlanPreviewDisplayText(row.description, locale),
+            sections: sections.map((section, index) => this.toSectionView(section, `${key}__section_${index}`, locale)),
+        };
     }
-    cellText(row, column) {
-        const key = stepTableColumnKey(column);
-        const cell = (row.cells ?? []).find((entry) => entry.columnKey === key);
-        return formatSafetyPlanPreviewStepTableCell(cell, this.translationService.getActiveLang() ?? 'en-US');
+    toSectionView(section, key, locale) {
+        const title = toSafetyPlanPreviewDisplayText(section.title, locale) ||
+            toSafetyPlanPreviewDisplayText(section.sectionType?.title, locale) ||
+            resolveSectionTypeDisplayTitle(section.sectionTypeId, section.sectionType) ||
+            toSafetyPlanPreviewDisplayText(section.sectionType?.code, locale) ||
+            'Section';
+        const items = (section.itemIds ?? []).map((id, index) => {
+            const snapshot = section.items?.find((entry) => entry.id === id) ?? section.items?.[index];
+            return {
+                id,
+                title: toSafetyPlanPreviewDisplayText(snapshot?.title, locale) ||
+                    asSafetyPlanDisplayText(snapshot?.code) ||
+                    id,
+                code: asSafetyPlanDisplayText(snapshot?.code) || undefined,
+            };
+        });
+        return { key, title, items };
     }
-    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMWorkStepTablePreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMWorkStepTablePreviewComponent, isStandalone: true, selector: "axm-work-step-table-preview", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "axm-work-step-table-preview block" }, ngImport: i0, template: "<div class=\"axm-work-step-table-preview\">\n  @if (columns().length > 0 && rows().length > 0) {\n    <!-- ----- Read-only work-step table ----- -->\n    <div class=\"__table-wrap\">\n      <table class=\"__table\">\n        <thead>\n          <tr>\n            @for (column of columns(); track column.sectionTypeId) {\n              <th>{{ columnLabel(column) }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rows(); track $index) {\n            <tr>\n              @for (column of columns(); track column.sectionTypeId) {\n                <td>{{ cellText(row, column) }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  <!-- ----- Empty work-step table ----- -->\n  @else {\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty-items' | translate | async }}\n    </p>\n  }\n</div>\n", styles: ["@layer properties;.axm-work-step-table-preview .__table-wrap{overflow-x:auto}.axm-work-step-table-preview .__table{width:100%;border-collapse:collapse;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axm-work-step-table-preview .__table th,.axm-work-step-table-preview .__table td{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start;vertical-align:top}.axm-work-step-table-preview .__table th{background-color:rgba(var(--ax-sys-color-surface));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-work-step-table-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-work-step-table-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMActivityPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMActivityPreviewComponent, isStandalone: true, selector: "axm-activity-preview", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "axm-activity-preview block" }, ngImport: i0, template: "<div class=\"axm-activity-preview\">\n  @if (rows().length > 0) {\n    <!-- ----- Activity items with nested predefined sections ----- -->\n    <ul class=\"__list\">\n      @for (row of rows(); track row.key) {\n        <li class=\"__item\">\n          <div class=\"__header\">\n            <span class=\"__title\">{{ row.title }}</span>\n            <!--->\n            <!-- ----- Optional business code after the item title ----- -->\n            @if (row.code) {\n              <span class=\"__code\">({{ row.code }})</span>\n            }\n          </div>\n          <!--->\n          <!-- ----- Optional activity description below the title ----- -->\n          @if (row.description) {\n            <p class=\"__description\">{{ row.description }}</p>\n          }\n          <!--->\n          <!-- ----- Predefined SafetyPlanActivity sections (Control, Hazard, \u2026) ----- -->\n          @if (row.sections.length > 0) {\n            <div class=\"__sections\">\n              @for (activitySection of row.sections; track activitySection.key) {\n                <div class=\"__section\">\n                  <h4 class=\"__section-title\">{{ activitySection.title }}</h4>\n                  <axm-catalog-section-preview [items]=\"activitySection.items\" />\n                </div>\n              }\n            </div>\n          }\n        </li>\n      }\n    </ul>\n  }\n  <!-- ----- Empty activity section ----- -->\n  @else {\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty-items' | translate | async }}\n    </p>\n  }\n</div>\n", styles: ["@layer properties;.axm-activity-preview .__list{margin:0;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}.axm-activity-preview .__item{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axm-activity-preview .__header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--spacing, .25rem)}.axm-activity-preview .__code{margin-inline-start:var(--spacing, .25rem);color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-activity-preview .__code{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-activity-preview .__description{margin:0;margin-top:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-activity-preview .__description{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-activity-preview .__sections{margin-inline-start:var(--spacing, .25rem);margin-top:calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.axm-activity-preview .__section-title{margin:0;margin-bottom:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-activity-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-activity-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXMCatalogSectionPreviewComponent, selector: "axm-catalog-section-preview", inputs: ["items"] }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMWorkStepTablePreviewComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMActivityPreviewComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-work-step-table-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslationModule, AsyncPipe], host: {
-                        class: 'axm-work-step-table-preview block',
-                    }, template: "<div class=\"axm-work-step-table-preview\">\n  @if (columns().length > 0 && rows().length > 0) {\n    <!-- ----- Read-only work-step table ----- -->\n    <div class=\"__table-wrap\">\n      <table class=\"__table\">\n        <thead>\n          <tr>\n            @for (column of columns(); track column.sectionTypeId) {\n              <th>{{ columnLabel(column) }}</th>\n            }\n          </tr>\n        </thead>\n        <tbody>\n          @for (row of rows(); track $index) {\n            <tr>\n              @for (column of columns(); track column.sectionTypeId) {\n                <td>{{ cellText(row, column) }}</td>\n              }\n            </tr>\n          }\n        </tbody>\n      </table>\n    </div>\n  }\n  <!-- ----- Empty work-step table ----- -->\n  @else {\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty-items' | translate | async }}\n    </p>\n  }\n</div>\n", styles: ["@layer properties;.axm-work-step-table-preview .__table-wrap{overflow-x:auto}.axm-work-step-table-preview .__table{width:100%;border-collapse:collapse;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.axm-work-step-table-preview .__table th,.axm-work-step-table-preview .__table td{border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start;vertical-align:top}.axm-work-step-table-preview .__table th{background-color:rgba(var(--ax-sys-color-surface));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-work-step-table-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-work-step-table-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+            args: [{ selector: 'axm-activity-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslationModule, AsyncPipe, AXMCatalogSectionPreviewComponent], host: {
+                        class: 'axm-activity-preview block',
+                    }, template: "<div class=\"axm-activity-preview\">\n  @if (rows().length > 0) {\n    <!-- ----- Activity items with nested predefined sections ----- -->\n    <ul class=\"__list\">\n      @for (row of rows(); track row.key) {\n        <li class=\"__item\">\n          <div class=\"__header\">\n            <span class=\"__title\">{{ row.title }}</span>\n            <!--->\n            <!-- ----- Optional business code after the item title ----- -->\n            @if (row.code) {\n              <span class=\"__code\">({{ row.code }})</span>\n            }\n          </div>\n          <!--->\n          <!-- ----- Optional activity description below the title ----- -->\n          @if (row.description) {\n            <p class=\"__description\">{{ row.description }}</p>\n          }\n          <!--->\n          <!-- ----- Predefined SafetyPlanActivity sections (Control, Hazard, \u2026) ----- -->\n          @if (row.sections.length > 0) {\n            <div class=\"__sections\">\n              @for (activitySection of row.sections; track activitySection.key) {\n                <div class=\"__section\">\n                  <h4 class=\"__section-title\">{{ activitySection.title }}</h4>\n                  <axm-catalog-section-preview [items]=\"activitySection.items\" />\n                </div>\n              }\n            </div>\n          }\n        </li>\n      }\n    </ul>\n  }\n  <!-- ----- Empty activity section ----- -->\n  @else {\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty-items' | translate | async }}\n    </p>\n  }\n</div>\n", styles: ["@layer properties;.axm-activity-preview .__list{margin:0;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}.axm-activity-preview .__item{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axm-activity-preview .__header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--spacing, .25rem)}.axm-activity-preview .__code{margin-inline-start:var(--spacing, .25rem);color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-activity-preview .__code{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-activity-preview .__description{margin:0;margin-top:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-activity-preview .__description{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-activity-preview .__sections{margin-inline-start:var(--spacing, .25rem);margin-top:calc(var(--spacing, .25rem) * 3);display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}.axm-activity-preview .__section-title{margin:0;margin-bottom:var(--spacing, .25rem);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-activity-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-activity-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }] } });
 
 //#region ----- Imports -----
@@ -488,6 +515,13 @@ class AXMSafetyPlanSectionPreviewComponent {
         //#region ----- Inputs -----
         this.section = input.required(/* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+        this.fillValue = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fillValue" }] : /* istanbul ignore next */ []));
+        this.editable = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Outputs -----
+        this.fillValueChange = output();
         //#endregion
         //#region ----- Computed Properties -----
         this.locale = computed(() => this.translationService.getActiveLang() ?? 'en-US', /* @ts-ignore */
@@ -501,8 +535,13 @@ class AXMSafetyPlanSectionPreviewComponent {
         this.hasItems = computed(() => safetyPlanPreviewSectionHasItems(this.section()), /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "hasItems" }] : /* istanbul ignore next */ []));
     }
+    //#endregion
+    //#region ----- Event Handlers -----
+    onFillValueChange(value) {
+        this.fillValueChange.emit(value);
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMSafetyPlanSectionPreviewComponent, isStandalone: true, selector: "axm-safety-plan-section-preview", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null } }, host: { properties: { "class.block": "hasItems()", "hidden": "!hasItems()" }, classAttribute: "axm-safety-plan-section-preview" }, ngImport: i0, template: "@if (hasItems()) {\n  <!-- ----- Section with at least one item ----- -->\n  <section class=\"axm-safety-plan-section-preview\">\n    <header class=\"__header\">\n      <h3 class=\"__title\">{{ title() }}</h3>\n    </header>\n\n    @switch (kind()) {\n      @case ('work-step-table') {\n        <axm-work-step-table-preview [section]=\"section()\" />\n      }\n      @case ('risk-matrix') {\n        <axm-risk-matrix-preview [items]=\"catalogItems()\" />\n      }\n      @case ('ppe') {\n        <axm-ppe-section-preview [items]=\"catalogItems()\" [layout]=\"section().widgetOptions?.layout\" />\n      }\n      @case ('hierarchy') {\n        <axm-hierarchy-section-preview\n          [items]=\"catalogItems()\"\n          [viewType]=\"section().widgetOptions?.viewType\"\n          [showTitle]=\"section().widgetOptions?.showTitle\"\n        />\n      }\n      @default {\n        <axm-catalog-section-preview [items]=\"catalogItems()\" />\n      }\n    }\n  </section>\n}\n", styles: ["@layer properties;.axm-safety-plan-section-preview{display:block}.axm-safety-plan-section-preview .__header{margin-bottom:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-bottom:calc(var(--spacing, .25rem) * 2)}.axm-safety-plan-section-preview .__title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXMCatalogSectionPreviewComponent, selector: "axm-catalog-section-preview", inputs: ["items"] }, { kind: "component", type: AXMHierarchySectionPreviewComponent, selector: "axm-hierarchy-section-preview", inputs: ["items", "viewType", "showTitle"] }, { kind: "component", type: AXMPpeSectionPreviewComponent, selector: "axm-ppe-section-preview", inputs: ["items", "layout"] }, { kind: "component", type: AXMRiskMatrixPreviewComponent, selector: "axm-risk-matrix-preview", inputs: ["items"] }, { kind: "component", type: AXMWorkStepTablePreviewComponent, selector: "axm-work-step-table-preview", inputs: ["section"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMSafetyPlanSectionPreviewComponent, isStandalone: true, selector: "axm-safety-plan-section-preview", inputs: { section: { classPropertyName: "section", publicName: "section", isSignal: true, isRequired: true, transformFunction: null }, fillValue: { classPropertyName: "fillValue", publicName: "fillValue", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { fillValueChange: "fillValueChange" }, host: { properties: { "class.block": "hasItems()", "hidden": "!hasItems()" }, classAttribute: "axm-safety-plan-section-preview" }, ngImport: i0, template: "@if (hasItems()) {\n  <!-- ----- Section with at least one item ----- -->\n  <section class=\"axm-safety-plan-section-preview\">\n    <header class=\"__header\">\n      <h3 class=\"__title\">{{ title() }}</h3>\n    </header>\n\n    @switch (kind()) {\n      @case ('activity') {\n        <axm-activity-preview [section]=\"section()\" />\n      }\n      @case ('risk-matrix') {\n        <axm-risk-matrix-preview [items]=\"catalogItems()\" />\n      }\n      @case ('ppe') {\n        <axm-ppe-section-preview\n          [items]=\"catalogItems()\"\n          [layout]=\"section().widgetOptions?.layout\"\n          [value]=\"fillValue()\"\n          [editable]=\"editable()\"\n          (valueChange)=\"onFillValueChange($event)\"\n        />\n      }\n      @case ('hierarchy') {\n        <axm-hierarchy-section-preview\n          [items]=\"catalogItems()\"\n          [viewType]=\"section().widgetOptions?.viewType\"\n          [showTitle]=\"section().widgetOptions?.showTitle\"\n        />\n      }\n      @default {\n        <axm-catalog-section-preview [items]=\"catalogItems()\" />\n      }\n    }\n  </section>\n}\n", styles: ["@layer properties;.axm-safety-plan-section-preview{display:block}.axm-safety-plan-section-preview .__header{margin-bottom:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-bottom:calc(var(--spacing, .25rem) * 2)}.axm-safety-plan-section-preview .__title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXMCatalogSectionPreviewComponent, selector: "axm-catalog-section-preview", inputs: ["items"] }, { kind: "component", type: AXMHierarchySectionPreviewComponent, selector: "axm-hierarchy-section-preview", inputs: ["items", "viewType", "showTitle"] }, { kind: "component", type: AXMPpeSectionPreviewComponent, selector: "axm-ppe-section-preview", inputs: ["items", "layout", "value", "editable"], outputs: ["valueChange"] }, { kind: "component", type: AXMRiskMatrixPreviewComponent, selector: "axm-risk-matrix-preview", inputs: ["items"] }, { kind: "component", type: AXMActivityPreviewComponent, selector: "axm-activity-preview", inputs: ["section"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionPreviewComponent, decorators: [{
             type: Component,
@@ -511,23 +550,45 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
                         AXMHierarchySectionPreviewComponent,
                         AXMPpeSectionPreviewComponent,
                         AXMRiskMatrixPreviewComponent,
-                        AXMWorkStepTablePreviewComponent,
+                        AXMActivityPreviewComponent,
                     ], host: {
                         class: 'axm-safety-plan-section-preview',
                         '[class.block]': 'hasItems()',
                         '[hidden]': '!hasItems()',
-                    }, template: "@if (hasItems()) {\n  <!-- ----- Section with at least one item ----- -->\n  <section class=\"axm-safety-plan-section-preview\">\n    <header class=\"__header\">\n      <h3 class=\"__title\">{{ title() }}</h3>\n    </header>\n\n    @switch (kind()) {\n      @case ('work-step-table') {\n        <axm-work-step-table-preview [section]=\"section()\" />\n      }\n      @case ('risk-matrix') {\n        <axm-risk-matrix-preview [items]=\"catalogItems()\" />\n      }\n      @case ('ppe') {\n        <axm-ppe-section-preview [items]=\"catalogItems()\" [layout]=\"section().widgetOptions?.layout\" />\n      }\n      @case ('hierarchy') {\n        <axm-hierarchy-section-preview\n          [items]=\"catalogItems()\"\n          [viewType]=\"section().widgetOptions?.viewType\"\n          [showTitle]=\"section().widgetOptions?.showTitle\"\n        />\n      }\n      @default {\n        <axm-catalog-section-preview [items]=\"catalogItems()\" />\n      }\n    }\n  </section>\n}\n", styles: ["@layer properties;.axm-safety-plan-section-preview{display:block}.axm-safety-plan-section-preview .__header{margin-bottom:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-bottom:calc(var(--spacing, .25rem) * 2)}.axm-safety-plan-section-preview .__title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }] } });
+                    }, template: "@if (hasItems()) {\n  <!-- ----- Section with at least one item ----- -->\n  <section class=\"axm-safety-plan-section-preview\">\n    <header class=\"__header\">\n      <h3 class=\"__title\">{{ title() }}</h3>\n    </header>\n\n    @switch (kind()) {\n      @case ('activity') {\n        <axm-activity-preview [section]=\"section()\" />\n      }\n      @case ('risk-matrix') {\n        <axm-risk-matrix-preview [items]=\"catalogItems()\" />\n      }\n      @case ('ppe') {\n        <axm-ppe-section-preview\n          [items]=\"catalogItems()\"\n          [layout]=\"section().widgetOptions?.layout\"\n          [value]=\"fillValue()\"\n          [editable]=\"editable()\"\n          (valueChange)=\"onFillValueChange($event)\"\n        />\n      }\n      @case ('hierarchy') {\n        <axm-hierarchy-section-preview\n          [items]=\"catalogItems()\"\n          [viewType]=\"section().widgetOptions?.viewType\"\n          [showTitle]=\"section().widgetOptions?.showTitle\"\n        />\n      }\n      @default {\n        <axm-catalog-section-preview [items]=\"catalogItems()\" />\n      }\n    }\n  </section>\n}\n", styles: ["@layer properties;.axm-safety-plan-section-preview{display:block}.axm-safety-plan-section-preview .__header{margin-bottom:calc(var(--spacing, .25rem) * 3);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;border-color:rgba(var(--ax-sys-color-surface));padding-bottom:calc(var(--spacing, .25rem) * 2)}.axm-safety-plan-section-preview .__title{margin:0;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }], fillValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillValue", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], fillValueChange: [{ type: i0.Output, args: ["fillValueChange"] }] } });
 
-//#region ----- Imports -----
 //#endregion
 //#region ----- Component -----
 class AXMSafetyPlanPreviewModalComponent extends AXBasePageComponent {
     constructor() {
         super(...arguments);
+        //#region ----- Services & Dependencies -----
+        this.entityService = inject(AXPEntityService);
+        this.translationService = inject(AXTranslationService);
+        this.toastService = inject(AXToastService);
+        //#endregion
         //#region ----- Inputs -----
         this.structure = input({ sections: [] }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "structure" }] : /* istanbul ignore next */ []));
+        this.workflowActionSet = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "workflowActionSet" }] : /* istanbul ignore next */ []));
+        /** When true, section values can be edited and are saved when the dialog closes. */
+        this.editable = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "editable" }] : /* istanbul ignore next */ []));
+        this.planId = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "planId" }] : /* istanbul ignore next */ []));
+        this.fillValues = input({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fillValues" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- State Signals -----
+        this.fillDirty = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "fillDirty" }] : /* istanbul ignore next */ []));
+        this.saving = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "saving" }] : /* istanbul ignore next */ []));
+        this.skipClosePersist = false;
+        this.draftValues = signal({}, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "draftValues" }] : /* istanbul ignore next */ []));
         //#endregion
         //#region ----- Computed Properties -----
         this.sections = computed(() => {
@@ -537,6 +598,125 @@ class AXMSafetyPlanPreviewModalComponent extends AXBasePageComponent {
                 .filter((section) => safetyPlanPreviewSectionHasItems(section));
         }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.resolvedActionSet = computed(() => {
+            const raw = this.safeInputValue(this.workflowActionSet);
+            if (raw === 'draft' || raw === 'assigned' || raw === 'locked') {
+                return raw;
+            }
+            return undefined;
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedActionSet" }] : /* istanbul ignore next */ []));
+        this.showDraftActions = computed(() => this.resolvedActionSet() === 'draft', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showDraftActions" }] : /* istanbul ignore next */ []));
+        this.showAssignedActions = computed(() => this.resolvedActionSet() === 'assigned', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showAssignedActions" }] : /* istanbul ignore next */ []));
+        this.showLockedActions = computed(() => this.resolvedActionSet() === 'locked', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showLockedActions" }] : /* istanbul ignore next */ []));
+        this.canEditFill = computed(() => this.resolvedActionSet() === 'draft' || this.resolvedActionSet() === 'assigned' || this.isEditableRequested(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "canEditFill" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Lifecycle -----
+        this.hydrateFillValues = effect(() => {
+            if (this.fillDirty()) {
+                return;
+            }
+            this.draftValues.set(normalizeSafetyPlanFillValues(this.safeInputValue(this.fillValues)));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hydrateFillValues" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    sectionFillValue(sectionId) {
+        return this.draftValues()[sectionId];
+    }
+    onSectionFillValueChange(sectionId, value) {
+        if (!sectionId || !this.canEditFill()) {
+            return;
+        }
+        this.fillDirty.set(true);
+        this.draftValues.update((current) => ({ ...current, [sectionId]: value }));
+    }
+    async onClosing(e) {
+        if (this.skipClosePersist) {
+            this.skipClosePersist = false;
+            return;
+        }
+        if (!this.isEditableRequested()) {
+            return;
+        }
+        if (!(await this.persistFillValues())) {
+            e.cancel = true;
+        }
+    }
+    saveAsDraft() {
+        void this.closeAfterPersist({ saved: true, submitted: false });
+    }
+    submitPlan() {
+        void this.closeAfterPersist({ saved: false, submitted: true });
+    }
+    savePlan() {
+        void this.closeAfterPersist({ saved: true });
+    }
+    lockPlan() {
+        void this.closeAfterPersist({ locked: true });
+    }
+    signOffPlan() {
+        void this.closeAfterPersist({ signOff: true });
+    }
+    //#endregion
+    //#region ----- Persistence -----
+    async closeAfterPersist(result) {
+        if (!(await this.persistFillValues())) {
+            return;
+        }
+        this.skipClosePersist = true;
+        this.close(result);
+    }
+    async persistFillValues() {
+        if (!this.canEditFill()) {
+            return true;
+        }
+        const planId = this.resolvePlanId();
+        if (this.saving()) {
+            return false;
+        }
+        if (!planId) {
+            await this.showSaveError();
+            return false;
+        }
+        this.saving.set(true);
+        try {
+            await saveSafetyPlanFillValues(this.entityService, planId, this.draftValues());
+            return true;
+        }
+        catch {
+            await this.showSaveError();
+            return false;
+        }
+        finally {
+            this.saving.set(false);
+        }
+    }
+    async showSaveError() {
+        this.toastService.show({
+            color: 'danger',
+            title: await this.translationService.translateAsync('@general:messages.generic.error.title'),
+            content: await this.translationService.translateAsync('@general:messages.generic.error.description'),
+            closeButton: true,
+            timeOut: 7000,
+        });
+    }
+    resolvePlanId() {
+        const raw = this.safeInputValue(this.planId);
+        return typeof raw === 'string' && raw.trim().length > 0 ? raw.trim() : undefined;
+    }
+    isEditableRequested() {
+        const raw = this.safeInputValue(this.editable);
+        if (raw === true || raw === 'true') {
+            return true;
+        }
+        const actionSet = this.safeInputValue(this.workflowActionSet);
+        return actionSet === 'draft' || actionSet === 'assigned';
     }
     //#endregion
     //#region ----- Helpers -----
@@ -544,14 +724,14 @@ class AXMSafetyPlanPreviewModalComponent extends AXBasePageComponent {
         return typeof inputOrValue === 'function' ? inputOrValue() : inputOrValue;
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanPreviewModalComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMSafetyPlanPreviewModalComponent, isStandalone: true, selector: "axm-safety-plan-preview-modal", inputs: { structure: { classPropertyName: "structure", publicName: "structure", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-safety-plan-preview-modal-host flex flex-col w-full h-full" }, usesInheritance: true, ngImport: i0, template: "<div class=\"axm-safety-plan-preview-modal __content-area\">\n  @if (sections().length === 0) {\n    <!-- ----- Empty state when the plan has no sections ----- -->\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty' | translate | async }}\n    </p>\n  }\n  <!-- ----- Read-only document blocks in configured section order ----- -->\n  @else {\n    <div class=\"__document\">\n      @for (section of sections(); track section.id) {\n        <axm-safety-plan-section-preview [section]=\"section\" />\n      }\n    </div>\n  }\n</div>\n", styles: ["axm-safety-plan-preview-modal{display:flex;height:100%;max-height:90vh;min-height:0px;width:100%;flex:1;flex-direction:column;overflow:hidden}@media(width>=64rem){axm-safety-plan-preview-modal{max-height:75vh}}.axm-safety-plan-preview-modal{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 6)}.axm-safety-plan-preview-modal .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-safety-plan-preview-modal .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-safety-plan-preview-modal .__document{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 8)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXMSafetyPlanSectionPreviewComponent, selector: "axm-safety-plan-section-preview", inputs: ["section"] }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMSafetyPlanPreviewModalComponent, isStandalone: true, selector: "axm-safety-plan-preview-modal", inputs: { structure: { classPropertyName: "structure", publicName: "structure", isSignal: true, isRequired: false, transformFunction: null }, workflowActionSet: { classPropertyName: "workflowActionSet", publicName: "workflowActionSet", isSignal: true, isRequired: false, transformFunction: null }, editable: { classPropertyName: "editable", publicName: "editable", isSignal: true, isRequired: false, transformFunction: null }, planId: { classPropertyName: "planId", publicName: "planId", isSignal: true, isRequired: false, transformFunction: null }, fillValues: { classPropertyName: "fillValues", publicName: "fillValues", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-safety-plan-preview-modal-host flex flex-col w-full h-full min-h-0" }, usesInheritance: true, ngImport: i0, template: "<div class=\"axm-safety-plan-preview-modal\">\n  <div class=\"__content-area\">\n    @if (sections().length === 0) {\n      <!-- ----- Empty state when the plan has no sections ----- -->\n      <p class=\"__empty\">\n        {{ '@workplacesafety-management:safety-plan-sections.preview.empty' | translate | async }}\n      </p>\n    }\n    <!-- ----- Document blocks in configured section order ----- -->\n    @else {\n      <div class=\"__document\">\n        @for (section of sections(); track section.id) {\n          <axm-safety-plan-section-preview\n            [section]=\"section\"\n            [fillValue]=\"sectionFillValue(section.id)\"\n            [editable]=\"canEditFill()\"\n            (fillValueChange)=\"onSectionFillValueChange(section.id, $event)\"\n          />\n        }\n      </div>\n    }\n  </div>\n\n  @if (showDraftActions()) {\n    <!-- ----- Save as Draft / Submit while the task is Initial or Draft ----- -->\n    <div class=\"__actions\">\n      <ax-button\n        look=\"outline\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.save-draft' | translate | async\"\n        (onClick)=\"saveAsDraft()\"\n      ></ax-button>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.submit' | translate | async\"\n        (onClick)=\"submitPlan()\"\n      ></ax-button>\n    </div>\n  }\n  <!-- ----- Save / Lock while the task is Assigned ----- -->\n  @else if (showAssignedActions()) {\n    <div class=\"__actions\">\n      <ax-button\n        look=\"outline\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.save' | translate | async\"\n        (onClick)=\"savePlan()\"\n      ></ax-button>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.lock' | translate | async\"\n        (onClick)=\"lockPlan()\"\n      ></ax-button>\n    </div>\n  }\n  <!-- ----- Sign Off while the task is Locked ----- -->\n  @else if (showLockedActions()) {\n    <div class=\"__actions\">\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.sign-off' | translate | async\"\n        (onClick)=\"signOffPlan()\"\n      ></ax-button>\n    </div>\n  }\n</div>\n\n", styles: ["@layer properties;.axm-safety-plan-preview-modal-host,.axm-safety-plan-preview-modal{display:flex;height:100%;min-height:0px;width:100%;flex:1;flex-direction:column;overflow:hidden}.axm-safety-plan-preview-modal .__content-area{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 6)}.axm-safety-plan-preview-modal .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-safety-plan-preview-modal .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-safety-plan-preview-modal .__document{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 8)}.axm-safety-plan-preview-modal .__actions{display:flex;flex:none;flex-direction:row;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-surface));padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXMSafetyPlanSectionPreviewComponent, selector: "axm-safety-plan-section-preview", inputs: ["section", "fillValue", "editable"], outputs: ["fillValueChange"] }, { kind: "pipe", type: i2.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanPreviewModalComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axm-safety-plan-preview-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTranslationModule, AsyncPipe, AXMSafetyPlanSectionPreviewComponent], host: {
-                        class: 'axm-safety-plan-preview-modal-host flex flex-col w-full h-full',
-                    }, template: "<div class=\"axm-safety-plan-preview-modal __content-area\">\n  @if (sections().length === 0) {\n    <!-- ----- Empty state when the plan has no sections ----- -->\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty' | translate | async }}\n    </p>\n  }\n  <!-- ----- Read-only document blocks in configured section order ----- -->\n  @else {\n    <div class=\"__document\">\n      @for (section of sections(); track section.id) {\n        <axm-safety-plan-section-preview [section]=\"section\" />\n      }\n    </div>\n  }\n</div>\n", styles: ["axm-safety-plan-preview-modal{display:flex;height:100%;max-height:90vh;min-height:0px;width:100%;flex:1;flex-direction:column;overflow:hidden}@media(width>=64rem){axm-safety-plan-preview-modal{max-height:75vh}}.axm-safety-plan-preview-modal{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 6)}.axm-safety-plan-preview-modal .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-safety-plan-preview-modal .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-safety-plan-preview-modal .__document{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 8)}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
-        }], propDecorators: { structure: [{ type: i0.Input, args: [{ isSignal: true, alias: "structure", required: false }] }] } });
+            args: [{ selector: 'axm-safety-plan-preview-modal', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTranslationModule, AsyncPipe, AXButtonModule, AXMSafetyPlanSectionPreviewComponent], host: {
+                        class: 'axm-safety-plan-preview-modal-host flex flex-col w-full h-full min-h-0',
+                    }, template: "<div class=\"axm-safety-plan-preview-modal\">\n  <div class=\"__content-area\">\n    @if (sections().length === 0) {\n      <!-- ----- Empty state when the plan has no sections ----- -->\n      <p class=\"__empty\">\n        {{ '@workplacesafety-management:safety-plan-sections.preview.empty' | translate | async }}\n      </p>\n    }\n    <!-- ----- Document blocks in configured section order ----- -->\n    @else {\n      <div class=\"__document\">\n        @for (section of sections(); track section.id) {\n          <axm-safety-plan-section-preview\n            [section]=\"section\"\n            [fillValue]=\"sectionFillValue(section.id)\"\n            [editable]=\"canEditFill()\"\n            (fillValueChange)=\"onSectionFillValueChange(section.id, $event)\"\n          />\n        }\n      </div>\n    }\n  </div>\n\n  @if (showDraftActions()) {\n    <!-- ----- Save as Draft / Submit while the task is Initial or Draft ----- -->\n    <div class=\"__actions\">\n      <ax-button\n        look=\"outline\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.save-draft' | translate | async\"\n        (onClick)=\"saveAsDraft()\"\n      ></ax-button>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.submit' | translate | async\"\n        (onClick)=\"submitPlan()\"\n      ></ax-button>\n    </div>\n  }\n  <!-- ----- Save / Lock while the task is Assigned ----- -->\n  @else if (showAssignedActions()) {\n    <div class=\"__actions\">\n      <ax-button\n        look=\"outline\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.save' | translate | async\"\n        (onClick)=\"savePlan()\"\n      ></ax-button>\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.lock' | translate | async\"\n        (onClick)=\"lockPlan()\"\n      ></ax-button>\n    </div>\n  }\n  <!-- ----- Sign Off while the task is Locked ----- -->\n  @else if (showLockedActions()) {\n    <div class=\"__actions\">\n      <ax-button\n        look=\"solid\"\n        color=\"primary\"\n        [text]=\"'@workplacesafety-management:safety-plan-sections.preview.actions.sign-off' | translate | async\"\n        (onClick)=\"signOffPlan()\"\n      ></ax-button>\n    </div>\n  }\n</div>\n\n", styles: ["@layer properties;.axm-safety-plan-preview-modal-host,.axm-safety-plan-preview-modal{display:flex;height:100%;min-height:0px;width:100%;flex:1;flex-direction:column;overflow:hidden}.axm-safety-plan-preview-modal .__content-area{display:flex;min-height:0px;flex:1;flex-direction:column;overflow-y:auto;padding:calc(var(--spacing, .25rem) * 6)}.axm-safety-plan-preview-modal .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-safety-plan-preview-modal .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-safety-plan-preview-modal .__document{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 8)}.axm-safety-plan-preview-modal .__actions{display:flex;flex:none;flex-direction:row;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:var(--color-border-default);background-color:rgba(var(--ax-sys-color-surface));padding-inline:calc(var(--spacing, .25rem) * 6);padding-block:calc(var(--spacing, .25rem) * 4)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { structure: [{ type: i0.Input, args: [{ isSignal: true, alias: "structure", required: false }] }], workflowActionSet: [{ type: i0.Input, args: [{ isSignal: true, alias: "workflowActionSet", required: false }] }], editable: [{ type: i0.Input, args: [{ isSignal: true, alias: "editable", required: false }] }], planId: [{ type: i0.Input, args: [{ isSignal: true, alias: "planId", required: false }] }], fillValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "fillValues", required: false }] }] } });
 
 export { AXMSafetyPlanPreviewModalComponent };
-//# sourceMappingURL=acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-CQ2xB7Va.mjs.map
+//# sourceMappingURL=acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-B9lElhxc.mjs.map