@acorex-platform/module-workplacesafety-management-client 0.0.30 → 0.0.32

package/fesm2022/{acorex-platform-module-workplacesafety-management-client-index-kF37zgd4.mjs → acorex-platform-module-workplacesafety-management-client-index-yxxC7i6A.mjs}

@@ -1,12 +1,13 @@
-import { AXPWidgetsCatalog, AXPSystemStatusType } from '@acorex-platform/framework-shared/core';
-import { AXPDataGenerator, AXPHookService } from '@acorex-platform/framework-client/core';
+import { AXPWidgetsList, AXPWidgetsCatalog, AXPSystemStatusType } from '@acorex-platform/framework-shared/core';
+import { resolveEntityRowDisplayText } from '@acorex-platform/framework-client/common';
+import { AXPDataGenerator, AXPDeviceService, AXPHookService } from '@acorex-platform/framework-client/core';
 import { AXPEntityDataSelectorService, AXPEntityDefinitionRegistryService, AXPEntityService } from '@acorex-platform/framework-client/layout/entity';
 import { AXPCommandService, AXPRuntimeRemoteHookKeys } from '@acorex-platform/framework-client/runtime';
 import { AXPLayoutBuilderService, resolveLayoutBuilderDialogResult } from '@acorex-platform/framework-client/layout/builder';
 import { AXPPageLayoutBaseComponent, AXPPageLayoutBase } from '@acorex-platform/framework-client/layout/views';
-import { clearDependentItemsOnParentChange, enrichSectionTypeSnapshot, isStepTableSectionType, safetyPlanSectionTypeAlreadyExists, SAFETY_PLAN_SECTION_DUPLICATE_SECTION_TYPE_MESSAGE_KEY, collectBuiltInRepeatableSectionTypeIds, RootConfig, WORKPLACE_SAFETY_SECTION_TYPE_LOOKUP_WIDGET_OPTIONS, normalizeStepTableColumns, resolveSafetyPlanSectionItemFilterAsync, resolveSafetyPlanSectionItemEntityKey, resolveSafetyPlanSectionItemColumns, mapSafetyPlanSectionSelectedItems, dedupeSafetyPlanSectionItemSelection, sortStepTableColumns, stepTableColumnKey, resolveStepTableColumnLookupEntity, isStepTableColumnMultiLookup, stepTableColumnTitle, normalizeStepTableRows, resolveEntityRefId, AXMWorkplaceSafetyManagementCommandKeys, dedupeSafetyPlanSectionStructure, buildSectionStructureFromTypeSections, toBuilderValueFromStructure, SAFETY_PLAN_SECTIONS_PAGE_COMPONENT_KEY } from '@acorex-platform/module-workplacesafety-management-client/contracts';
+import { resolveSectionTypeKey, asSafetyPlanDisplayText, resolveEntityRefId, clearDependentItemsOnParentChange, enrichSectionTypeSnapshot, isStepTableSectionType, WORKPLACE_SAFETY_SECTION_TYPE_LOOKUP_WIDGET_OPTIONS, RootConfig, normalizeStepTableColumns, resolveSafetyPlanSectionItemFilterAsync, resolveSafetyPlanSectionItemEntityKey, resolveSafetyPlanSectionItemColumns, mapSafetyPlanSectionSelectedItems, dedupeSafetyPlanSectionItemSelection, sortStepTableColumns, stepTableColumnKey, resolveStepTableColumnLookupEntity, isStepTableColumnMultiLookup, stepTableColumnTitle, normalizeStepTableRows, AXMWorkplaceSafetyManagementCommandKeys, dedupeSafetyPlanSectionStructure, resolveSectionItemEntityName, collectBuiltInRepeatableSectionTypeIds, buildSectionStructureFromTypeSections, toBuilderValueFromStructure, SAFETY_PLAN_SECTIONS_PAGE_COMPONENT_KEY } from '@acorex-platform/module-workplacesafety-management-client/contracts';
 import * as i0 from '@angular/core';
-import { input, output, viewChild, inject, signal, computed, effect, ChangeDetectionStrategy, Component, untracked, Injectable } from '@angular/core';
+import { inject, Injectable, input, output, viewChild, signal, computed, effect, ChangeDetectionStrategy, Component, untracked } from '@angular/core';
 import { isEqual, cloneDeep } from 'lodash';
 import { AXDialogService } from '@acorex/components/dialog';
 import * as i1 from '@acorex/components/button';
@@ -14,13 +15,215 @@ import { AXButtonModule } from '@acorex/components/button';
 import * as i2 from '@acorex/components/decorators';
 import { AXDecoratorModule } from '@acorex/components/decorators';
 import { AXToastService } from '@acorex/components/toast';
-import * as i3$1 from '@acorex/core/translation';
+import * as i1$1 from '@acorex/core/translation';
 import { AXTranslationService, AXTranslationModule } from '@acorex/core/translation';
-import { AXPStandardSectionItemsBuilderComponent } from '@acorex-platform/framework-client/layout/components';
+import { AXPWidgetPropertyViewerService, AXPStandardSectionItemsBuilderComponent } from '@acorex-platform/framework-client/layout/components';
 import * as i3 from '@angular/common';
 import { CommonModule, AsyncPipe } from '@angular/common';
-import { n as normalizeSafetyPlanSectionBuilderValue, s as summarizeStepTableRow, S as SAFETY_PLAN_SECTIONS_SAVE_COMMAND, a as safetyPlanSectionsToBuilderValue, h as hydrateStepTableSectionsWithWorkSteps } from './acorex-platform-module-workplacesafety-management-client-save-safety-plan-sections.command-BJsg3pHZ.mjs';
-export { A as AXMSaveSafetyPlanSectionsCommand } from './acorex-platform-module-workplacesafety-management-client-save-safety-plan-sections.command-BJsg3pHZ.mjs';
+import { n as normalizeSafetyPlanSectionBuilderValue, s as summarizeStepTableRow, S as SAFETY_PLAN_SECTIONS_SAVE_COMMAND, a as safetyPlanSectionsToBuilderValue, h as hydrateStepTableSectionsWithWorkSteps } from './acorex-platform-module-workplacesafety-management-client-save-safety-plan-sections.command-BlPzzCc2.mjs';
+export { A as AXMSaveSafetyPlanSectionsCommand } from './acorex-platform-module-workplacesafety-management-client-save-safety-plan-sections.command-BlPzzCc2.mjs';
+import { P as PPE_ITEM_VIEWER_WIDGET_NAME } from './acorex-platform-module-workplacesafety-management-client-acorex-platform-module-workplacesafety-management-client-isnVDChu.mjs';
+import { AXP_BEHAVIOR_PROPERTY_GROUP } from '@acorex-platform/framework-client/layout/widgets';
+import { createBooleanProperty } from '@acorex-platform/framework-shared/widget-core';
+import { AXPopupService } from '@acorex/components/popup';
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Constants -----
+const SAFETY_PLAN_PPE_WIDGET_PROPERTY_EXCLUDE = [
+    'name',
+    'path',
+    'ppeItems',
+    'readonly',
+    'disabled',
+    'triggers',
+    'requiredValidation',
+];
+const SAFETY_PLAN_HIERARCHY_WIDGET_PROPERTY_EXCLUDE = ['name', 'path'];
+const PPE_OPTION_KEYS = ['layout'];
+const HIERARCHY_OPTION_KEYS = ['viewType', 'showTitle', 'showViewTypeSelector'];
+//#endregion
+//#region ----- Resolve -----
+function resolveSafetyPlanSectionConfigurableWidgetType(sectionTypeId, snapshot, sectionTitle, sectionDescription) {
+    const resolvedKeys = [
+        resolveSectionTypeKey(sectionTypeId, snapshot),
+        resolveSectionTypeKeyFromCode(snapshot?.code),
+        resolveSectionTypeKeyFromTitle(sectionTitle),
+        resolveSectionTypeKeyFromTitle(snapshot?.title),
+        resolveSectionTypeKeyFromDescription(sectionDescription),
+        resolveSectionTypeKeyFromDescription(snapshot?.description),
+    ];
+    if (resolvedKeys.includes('Ppe')) {
+        return PPE_ITEM_VIEWER_WIDGET_NAME;
+    }
+    if (resolvedKeys.includes('HierarchyLevel')) {
+        return AXPWidgetsList.Editors.ControlHierarchyDiagram;
+    }
+    return null;
+}
+function resolveSectionTypeKeyFromCode(code) {
+    const compact = asSafetyPlanDisplayText(code).replace(/\s+/g, '').toLowerCase();
+    if (!compact) {
+        return undefined;
+    }
+    if (compact === 'hierarchylevel' || compact === 'hierarchy') {
+        return 'HierarchyLevel';
+    }
+    if (compact === 'ppe') {
+        return 'Ppe';
+    }
+    return undefined;
+}
+function resolveSectionTypeKeyFromTitle(title) {
+    const compact = asSafetyPlanDisplayText(title).replace(/\s+/g, '').toLowerCase();
+    if (!compact) {
+        return undefined;
+    }
+    if (compact === 'hierarchylevel' || compact.includes('hierarchy')) {
+        return 'HierarchyLevel';
+    }
+    if (compact === 'ppe' || compact === 'ppeitem' || compact === 'ppeitems') {
+        return 'Ppe';
+    }
+    return undefined;
+}
+function resolveSectionTypeKeyFromDescription(description) {
+    const text = asSafetyPlanDisplayText(description).toLowerCase();
+    if (!text) {
+        return undefined;
+    }
+    if (text.includes('control hierarchy')) {
+        return 'HierarchyLevel';
+    }
+    if (text.includes('personal protective equipment')) {
+        return 'Ppe';
+    }
+    return undefined;
+}
+function readBuilderSectionTypeId(section) {
+    return resolveEntityRefId(section['sectionTypeId']) ?? resolveEntityRefId(section['sectionType']) ?? undefined;
+}
+function resolveConfigurableWidgetTypeForSection(section) {
+    return resolveSafetyPlanSectionConfigurableWidgetType(readBuilderSectionTypeId(section), section['sectionType'], section['title'], section['description']);
+}
+function canConfigureSafetyPlanSectionWidget(section) {
+    return resolveConfigurableWidgetTypeForSection(section) != null;
+}
+function widgetTitleKeyForConfigurableType(widgetType) {
+    if (widgetType === PPE_ITEM_VIEWER_WIDGET_NAME) {
+        return '@workplacesafety-management:ppe-items.components.ppe-item-viewer.widget-title';
+    }
+    return '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.widget-title';
+}
+//#endregion
+//#region ----- Options -----
+function readSectionWidgetOptions(section) {
+    const raw = section['widgetOptions'];
+    if (!raw || typeof raw !== 'object' || Array.isArray(raw)) {
+        return {};
+    }
+    return { ...raw };
+}
+function pickSavedWidgetOptions(widgetType, existing, incoming) {
+    const merged = { ...existing, ...incoming };
+    const keys = widgetType === PPE_ITEM_VIEWER_WIDGET_NAME ? PPE_OPTION_KEYS : HIERARCHY_OPTION_KEYS;
+    const next = {};
+    for (const key of keys) {
+        const value = merged[key];
+        if (value !== undefined && value !== null) {
+            next[key] = value;
+        }
+    }
+    return next;
+}
+function buildSafetyPlanSectionWidgetNode(widgetType, options) {
+    return {
+        type: widgetType,
+        options: { ...options },
+    };
+}
+function hierarchyWidgetCustomProperties() {
+    return [
+        {
+            property: createBooleanProperty({
+                name: 'showTitle',
+                title: '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.fields.show-title.title',
+                path: 'options.showTitle',
+                group: AXP_BEHAVIOR_PROPERTY_GROUP,
+                defaultValue: false,
+            }),
+        },
+        {
+            property: createBooleanProperty({
+                name: 'showViewTypeSelector',
+                title: '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.fields.show-view-type-selector.title',
+                path: 'options.showViewTypeSelector',
+                group: AXP_BEHAVIOR_PROPERTY_GROUP,
+                defaultValue: true,
+            }),
+        },
+    ];
+}
+//#endregion
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Service -----
+class AXMSafetyPlanSectionWidgetOptionsService {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.widgetPropertyViewer = inject(AXPWidgetPropertyViewerService);
+        this.translationService = inject(AXTranslationService);
+    }
+    //#endregion
+    //#region ----- Public API -----
+    canConfigure(section) {
+        return canConfigureSafetyPlanSectionWidget(section);
+    }
+    async prompt(section, _value) {
+        const widgetType = resolveConfigurableWidgetTypeForSection(section);
+        if (!widgetType) {
+            return null;
+        }
+        const existing = readSectionWidgetOptions(section);
+        const title = (await this.translationService.translateAsync(widgetTitleKeyForConfigurableType(widgetType))) ||
+            (await this.translationService.translateAsync('@general:actions.edit.title')) ||
+            'Edit';
+        const result = await this.widgetPropertyViewer
+            .create()
+            .dialog((dialog) => {
+            dialog
+                .setTitle(title)
+                .setMode('simple')
+                .setWidget(buildSafetyPlanSectionWidgetNode(widgetType, existing))
+                .setExclude([...this.excludeFor(widgetType)]);
+            if (widgetType !== PPE_ITEM_VIEWER_WIDGET_NAME) {
+                dialog.setCustom({ properties: hierarchyWidgetCustomProperties() });
+            }
+        })
+            .show();
+        if (!result?.values) {
+            return null;
+        }
+        const incoming = result.values.options ?? {};
+        return {
+            widgetOptions: pickSavedWidgetOptions(widgetType, existing, incoming),
+        };
+    }
+    //#endregion
+    //#region ----- Helpers -----
+    excludeFor(widgetType) {
+        return widgetType === PPE_ITEM_VIEWER_WIDGET_NAME
+            ? SAFETY_PLAN_PPE_WIDGET_PROPERTY_EXCLUDE
+            : SAFETY_PLAN_HIERARCHY_WIDGET_PROPERTY_EXCLUDE;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionWidgetOptionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionWidgetOptionsService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionWidgetOptionsService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
 
 //#endregion
 //#region ----- Component -----
@@ -44,19 +247,17 @@ class AXMSafetyPlanSectionBuilderComponent {
         this.entityDataSelector = inject(AXPEntityDataSelectorService);
         this.entityRegistry = inject(AXPEntityDefinitionRegistryService);
         this.entityService = inject(AXPEntityService);
+        this.widgetOptionsService = inject(AXMSafetyPlanSectionWidgetOptionsService);
         //#endregion
         //#region ----- State Signals -----
         this.builderValue = signal({ sections: [] }, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "builderValue" }] : /* istanbul ignore next */ []));
         /** Applied on the next builder commit so section header title survives item add/edit. */
         this.pendingSectionTitles = new Map();
-        this.disabledSectionPrompt = false;
         this.standardConfig = computed(() => ({
             mapItemToView: (item) => this.mapItemToView(item),
             promptAddSection: this.allowAddSection() ? (value) => this.promptAddSection(value) : async () => null,
-            promptEditSection: this.allowEditSection()
-                ? (section, value) => this.promptEditSection(section, value)
-                : this.disabledSectionPrompt,
+            promptEditSection: (section, value) => this.promptSectionHeaderEdit(section, value),
             promptAddItems: this.allowAddItems() ? (sectionId, value) => this.promptAddItems(sectionId, value) : undefined,
             promptEditItem: (item, sectionId, value) => this.promptEditItem(item, sectionId, value),
             showSectionTechnicalName: false,
@@ -139,11 +340,6 @@ class AXMSafetyPlanSectionBuilderComponent {
         });
         if (!dialogValue)
             return null;
-        if (await this.blockIfSectionTypeExists(value, dialogValue.sectionTypeId, {
-            sectionType: dialogValue.sectionType,
-        })) {
-            return null;
-        }
         const sectionId = AXPDataGenerator.uuid();
         return {
             id: sectionId,
@@ -157,6 +353,15 @@ class AXMSafetyPlanSectionBuilderComponent {
             items: [],
         };
     }
+    async promptSectionHeaderEdit(section, value) {
+        if (this.widgetOptionsService.canConfigure(section)) {
+            return this.widgetOptionsService.prompt(section, value);
+        }
+        if (!this.allowEditSection()) {
+            return null;
+        }
+        return this.promptEditSection(section, value);
+    }
     async promptEditSection(section, value) {
         const previousSectionTypeId = String(section['sectionTypeId'] ?? '');
         const sectionTypeSnapshot = section['sectionType'];
@@ -170,12 +375,6 @@ class AXMSafetyPlanSectionBuilderComponent {
         });
         if (!dialogValue)
             return null;
-        if (await this.blockIfSectionTypeExists(value, dialogValue.sectionTypeId, {
-            excludeSectionId: String(section.id ?? ''),
-            sectionType: dialogValue.sectionType,
-        })) {
-            return null;
-        }
         const sectionTypeChanged = previousSectionTypeId !== dialogValue.sectionTypeId;
         const isStepTable = isStepTableSectionType(dialogValue.sectionTypeId, dialogValue.sectionType);
         const keepWorkStep = isStepTable && !sectionTypeChanged
@@ -199,48 +398,6 @@ class AXMSafetyPlanSectionBuilderComponent {
             ...(sectionTypeChanged ? { items: [] } : {}),
         };
     }
-    async blockIfSectionTypeExists(value, sectionTypeId, options) {
-        const repeatableSectionTypeIds = await this.loadRepeatableSectionTypeIds();
-        const sections = value.sections.map((section) => ({
-            id: String(section.id ?? ''),
-            sectionTypeId: section['sectionTypeId'],
-            sectionType: section['sectionType'],
-        }));
-        if (!safetyPlanSectionTypeAlreadyExists(sections, sectionTypeId, {
-            ...options,
-            repeatableSectionTypeIds,
-            sectionType: options?.sectionType,
-        })) {
-            return false;
-        }
-        this.toastService.show({
-            color: 'danger',
-            title: await this.translationService.translateAsync('@general:messages.generic.error.title'),
-            content: await this.translationService.translateAsync(SAFETY_PLAN_SECTION_DUPLICATE_SECTION_TYPE_MESSAGE_KEY),
-        });
-        return true;
-    }
-    async loadRepeatableSectionTypeIds() {
-        const builtIn = collectBuiltInRepeatableSectionTypeIds();
-        try {
-            const entityKey = `${RootConfig.module.name}.${RootConfig.entities.sectionType.name}`;
-            const result = await this.entityService.withEntity(entityKey).data().query({
-                skip: 0,
-                take: 1000,
-            });
-            const fromQuery = (result.items ?? [])
-                .filter((row) => row.isRepeatable === true)
-                .map((row) => {
-                const id = row.id;
-                return typeof id === 'string' ? id.trim() : '';
-            })
-                .filter(Boolean);
-            return [...new Set([...fromQuery, ...builtIn])];
-        }
-        catch {
-            return builtIn;
-        }
-    }
     async promptSectionForm(mode, seed) {
         const titleKey = mode === 'create'
             ? '@workplacesafety-management:safety-plan-sections.entities.safety-plan-section.actions.add-section.title'
@@ -655,8 +812,8 @@ class AXMSafetyPlanSectionBuilderComponent {
         const snapshot = Array.isArray(item['items'])
             ? item['items'][0]
             : undefined;
-        const title = String(item['title'] ?? snapshot?.title ?? '').trim();
-        const code = String(item['name'] ?? snapshot?.code ?? '').trim();
+        const title = asSafetyPlanDisplayText(item['title']) || asSafetyPlanDisplayText(snapshot?.title);
+        const code = asSafetyPlanDisplayText(item['name']) || asSafetyPlanDisplayText(snapshot?.code);
         return {
             icon: 'fa-light fa-list-check',
             title,
@@ -682,6 +839,7 @@ class AXMSafetyPlanSectionBuilderComponent {
                 workStepTypeId: section.workStepTypeId,
                 workStepType: section.workStepType,
                 columns: normalizeStepTableColumns(section.columns),
+                widgetOptions: section.widgetOptions,
                 items: this.expandSectionItemsToBuilderRows(section.id, section.items, section),
             })),
         };
@@ -704,6 +862,9 @@ class AXMSafetyPlanSectionBuilderComponent {
                 workStepTypeId: typeof section['workStepTypeId'] === 'string' ? section['workStepTypeId'] : undefined,
                 workStepType: section['workStepType'],
                 columns: normalizeStepTableColumns(section['columns']),
+                widgetOptions: section['widgetOptions'] && typeof section['widgetOptions'] === 'object' && !Array.isArray(section['widgetOptions'])
+                    ? { ...section['widgetOptions'] }
+                    : undefined,
                 items: this.collapseBuilderRowsToStorageItems(section.id, section.items, section),
             })),
         });
@@ -767,10 +928,12 @@ class AXMSafetyPlanSectionBuilderComponent {
                 : undefined;
             snapshots.push({
                 id: entityId,
-                title: (typeof snapshot?.title === 'string' && snapshot.title) ||
-                    (typeof item['title'] === 'string' ? item['title'] : undefined),
-                code: (typeof snapshot?.code === 'string' && snapshot.code) ||
-                    (typeof item['name'] === 'string' ? item['name'] : undefined),
+                title: asSafetyPlanDisplayText(snapshot?.title) ||
+                    asSafetyPlanDisplayText(item['title']) ||
+                    undefined,
+                code: asSafetyPlanDisplayText(snapshot?.code) ||
+                    asSafetyPlanDisplayText(item['name']) ||
+                    undefined,
             });
         }
         if (!itemIds.length) {
@@ -799,8 +962,8 @@ class AXMSafetyPlanSectionBuilderComponent {
                 const snapshot = snapshots.find((entry) => entry?.id === id) ?? snapshots[index];
                 linked.push({
                     id,
-                    title: snapshot?.title,
-                    code: snapshot?.code,
+                    title: asSafetyPlanDisplayText(snapshot?.title) || undefined,
+                    code: asSafetyPlanDisplayText(snapshot?.code) || undefined,
                 });
             }
         }
@@ -841,8 +1004,8 @@ class AXMSafetyPlanSectionBuilderComponent {
         return null;
     }
     toBuilderItemFromEntity(sectionId, entry, order) {
-        const title = String(entry.title ?? '').trim();
-        const code = String(entry.code ?? '').trim();
+        const title = asSafetyPlanDisplayText(entry.title);
+        const code = asSafetyPlanDisplayText(entry.code);
         return {
             id: `${sectionId}__entity_${entry.id}`,
             order,
@@ -1095,17 +1258,47 @@ class AXMSafetyPlanSectionBuilderComponent {
         }
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMSafetyPlanSectionBuilderComponent, isStandalone: true, selector: "axm-safety-plan-section-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, safetyPlanId: { classPropertyName: "safetyPlanId", publicName: "safetyPlanId", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "standardRef", first: true, predicate: AXPStandardSectionItemsBuilderComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axm-safety-plan-section-builder\">\n  @if (!readonly() && !hideHeaderActions() && allowAddSection()) {\n    <div class=\"__header\">\n      <div class=\"__header-left\"></div>\n      <div class=\"__header-right\">\n        <ax-button\n          class=\"ax-sm\"\n          [text]=\"\n            '@workplacesafety-management:safety-plan-sections.entities.safety-plan-section.actions.add-section.title'\n              | translate\n              | async\n          \"\n          [color]=\"'primary'\"\n          (onClick)=\"addSection()\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  }\n\n  <axp-standard-section-items-builder\n    class=\"block min-h-[200px]\"\n    [value]=\"builderValue()\"\n    [config]=\"standardConfig()\"\n    [readonly]=\"readonly()\"\n    (valueChange)=\"onBuilderValueChange($event)\"\n  />\n</div>\n", styles: [".axm-safety-plan-section-builder .__header{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStandardSectionItemsBuilderComponent, selector: "axp-standard-section-items-builder", inputs: ["value", "config", "readonly"], outputs: ["valueChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMSafetyPlanSectionBuilderComponent, isStandalone: true, selector: "axm-safety-plan-section-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, safetyPlanId: { classPropertyName: "safetyPlanId", publicName: "safetyPlanId", isSignal: true, isRequired: false, transformFunction: null }, options: { classPropertyName: "options", publicName: "options", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, viewQueries: [{ propertyName: "standardRef", first: true, predicate: AXPStandardSectionItemsBuilderComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axm-safety-plan-section-builder\">\n  @if (!readonly() && !hideHeaderActions() && allowAddSection()) {\n    <div class=\"__header\">\n      <div class=\"__header-left\"></div>\n      <div class=\"__header-right\">\n        <ax-button\n          class=\"ax-sm\"\n          [text]=\"\n            '@workplacesafety-management:safety-plan-sections.entities.safety-plan-section.actions.add-section.title'\n              | translate\n              | async\n          \"\n          [color]=\"'primary'\"\n          (onClick)=\"addSection()\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  }\n\n  <axp-standard-section-items-builder\n    class=\"block min-h-[200px]\"\n    [value]=\"builderValue()\"\n    [config]=\"standardConfig()\"\n    [readonly]=\"readonly()\"\n    (valueChange)=\"onBuilderValueChange($event)\"\n  />\n</div>\n", styles: [".axm-safety-plan-section-builder .__header{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStandardSectionItemsBuilderComponent, selector: "axp-standard-section-items-builder", inputs: ["value", "config", "readonly"], outputs: ["valueChange"] }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionBuilderComponent, decorators: [{
             type: Component,
             args: [{ selector: 'axm-safety-plan-section-builder', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXPStandardSectionItemsBuilderComponent], template: "<div class=\"axm-safety-plan-section-builder\">\n  @if (!readonly() && !hideHeaderActions() && allowAddSection()) {\n    <div class=\"__header\">\n      <div class=\"__header-left\"></div>\n      <div class=\"__header-right\">\n        <ax-button\n          class=\"ax-sm\"\n          [text]=\"\n            '@workplacesafety-management:safety-plan-sections.entities.safety-plan-section.actions.add-section.title'\n              | translate\n              | async\n          \"\n          [color]=\"'primary'\"\n          (onClick)=\"addSection()\"\n        >\n          <ax-prefix>\n            <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n          </ax-prefix>\n        </ax-button>\n      </div>\n    </div>\n  }\n\n  <axp-standard-section-items-builder\n    class=\"block min-h-[200px]\"\n    [value]=\"builderValue()\"\n    [config]=\"standardConfig()\"\n    [readonly]=\"readonly()\"\n    (valueChange)=\"onBuilderValueChange($event)\"\n  />\n</div>\n", styles: [".axm-safety-plan-section-builder .__header{margin-bottom:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:space-between}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
         }], propDecorators: { value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }], safetyPlanId: [{ type: i0.Input, args: [{ isSignal: true, alias: "safetyPlanId", required: false }] }], options: [{ type: i0.Input, args: [{ isSignal: true, alias: "options", required: false }] }], valueChange: [{ type: i0.Output, args: ["valueChange"] }], standardRef: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPStandardSectionItemsBuilderComponent), { isSignal: true }] }] } });
 
+//#region ----- Imports -----
+//#endregion
+//#region ----- Service -----
+class AXMSafetyPlanPreviewService {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.popupService = inject(AXPopupService);
+        this.deviceService = inject(AXPDeviceService);
+    }
+    //#endregion
+    //#region ----- Public API -----
+    async open(options) {
+        const { AXMSafetyPlanPreviewModalComponent } = await import('./acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-C7IojUT9.mjs');
+        await this.popupService.open(AXMSafetyPlanPreviewModalComponent, {
+            title: options.title,
+            size: this.deviceService.isSmall() ? 'full' : 'lg',
+            data: {
+                structure: options.structure,
+            },
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanPreviewService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanPreviewService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanPreviewService, decorators: [{
+            type: Injectable,
+            args: [{ providedIn: 'root' }]
+        }] });
+
 //#region ----   Imports   ----
 //#endregion
 //#region ----   Constants   ----
 const SAFETY_PLAN_SECTIONS_ADD_SECTION_COMMAND = 'SafetyPlan:Sections:AddSection';
+const SAFETY_PLAN_SECTIONS_PREVIEW_COMMAND = 'SafetyPlan:Sections:Preview';
 const SAFETY_PLAN_SECTIONS_DISCARD_COMMAND = 'SafetyPlan:Sections:Discard';
 const SAFETY_PLAN_SECTIONS_CHANGE_PLAN_TYPE_COMMAND = 'SafetyPlan:Sections:ChangePlanType';
 const SAFETY_PLAN_SECTION_ENTITY = `${RootConfig.module.name}.${RootConfig.entities.safetyPlanSection.name}`;
@@ -1132,6 +1325,7 @@ class AXMSafetyPlanSectionsPageComponent extends AXPPageLayoutBaseComponent {
         this.layoutBuilder = inject(AXPLayoutBuilderService);
         this.hooks = inject(AXPHookService);
         this.hostPageLayout = inject(AXPPageLayoutBase, { optional: true, skipSelf: true });
+        this.previewService = inject(AXMSafetyPlanPreviewService);
         this.baselineValue = signal(null, /* @ts-ignore */
         ...(ngDevMode ? [{ debugName: "baselineValue" }] : /* istanbul ignore next */ []));
         this.committedValue = signal(null, /* @ts-ignore */
@@ -1322,28 +1516,41 @@ class AXMSafetyPlanSectionsPageComponent extends AXPPageLayoutBaseComponent {
         return this.isDirty();
     }
     async getPrimaryMenuItems() {
-        if (!this.isDraftPlan() || this.isLoadingStructure()) {
-            return [];
-        }
-        const actions = [
-            {
+        const actions = [];
+        const canPreview = !this.isLoadingStructure() &&
+            (!!this.hasPlanType() || !!this.safetyPlanId() || (this.committedValue()?.sections.length ?? 0) > 0);
+        if (this.isDraftPlan() && !this.isLoadingStructure()) {
+            actions.push({
                 title: '@workplacesafety-management:safety-plan-sections.entities.safety-plan-section.actions.add-section.title',
                 icon: 'fa-light fa-layer-group',
                 zone: 'header',
                 priority: 'primary',
                 color: 'primary',
                 command: { name: SAFETY_PLAN_SECTIONS_ADD_SECTION_COMMAND, options: {} },
-            },
-            {
-                title: '@workplacesafety-management:safety-plans.actions.change-plan-type.title',
-                icon: 'fa-light fa-arrow-right-arrow-left',
+            });
+        }
+        if (canPreview) {
+            actions.push({
+                title: '@workplacesafety-management:safety-plan-sections.entities.safety-plan-section.actions.preview.title',
+                icon: 'fa-light fa-eye',
                 zone: 'header',
                 priority: 'secondary',
                 color: 'default',
-                visible: this.isDraftPlan() && (!!this.planTypeId() || !!this.safetyPlanId()),
-                command: { name: SAFETY_PLAN_SECTIONS_CHANGE_PLAN_TYPE_COMMAND, options: {} },
-            },
-        ];
+                command: { name: SAFETY_PLAN_SECTIONS_PREVIEW_COMMAND, options: {} },
+            });
+        }
+        if (!this.isDraftPlan() || this.isLoadingStructure()) {
+            return actions;
+        }
+        actions.push({
+            title: '@workplacesafety-management:safety-plans.actions.change-plan-type.title',
+            icon: 'fa-light fa-arrow-right-arrow-left',
+            zone: 'header',
+            priority: 'secondary',
+            color: 'default',
+            visible: this.isDraftPlan() && (!!this.planTypeId() || !!this.safetyPlanId()),
+            command: { name: SAFETY_PLAN_SECTIONS_CHANGE_PLAN_TYPE_COMMAND, options: {} },
+        });
         if (this.safetyPlanId()) {
             actions.push({
                 title: '@general:actions.discard.title',
@@ -1370,6 +1577,10 @@ class AXMSafetyPlanSectionsPageComponent extends AXPPageLayoutBaseComponent {
             await this.builderRef()?.addSection();
             return;
         }
+        if (command.name === SAFETY_PLAN_SECTIONS_PREVIEW_COMMAND) {
+            await this.handlePreview();
+            return;
+        }
         if (command.name === SAFETY_PLAN_SECTIONS_CHANGE_PLAN_TYPE_COMMAND) {
             await this.handleChangePlanType();
             return;
@@ -1382,6 +1593,16 @@ class AXMSafetyPlanSectionsPageComponent extends AXPPageLayoutBaseComponent {
             return;
         await this.handleSave({ silent: false });
     }
+    async handlePreview() {
+        const previewLabel = (await this.translateService.translateAsync('@general:actions.preview.title')) || 'Preview';
+        const locale = this.translateService.getActiveLang?.() ?? 'en-US';
+        const planTitle = resolveEntityRowDisplayText(this.rootContext()?.['title'], locale);
+        const title = planTitle ? `${previewLabel}: ${planTitle}` : previewLabel;
+        await this.previewService.open({
+            title,
+            structure: cloneDeep(this.committedValue() ?? { sections: [] }),
+        });
+    }
     async handleChangePlanType() {
         if (!this.isDraftPlan()) {
             this.toastService.show({
@@ -1653,7 +1874,85 @@ class AXMSafetyPlanSectionsPageComponent extends AXPPageLayoutBaseComponent {
         const columnsByWorkStepTypeId = await this.loadWorkStepTypeColumns(deduped.sections
             .map((section) => section.workStepTypeId)
             .filter((id) => typeof id === 'string' && id.length > 0));
-        return hydrateStepTableSectionsWithWorkSteps(deduped, (workStepsResult.items ?? []), columnsByWorkStepTypeId);
+        return this.hydrateCatalogItemSnapshots(hydrateStepTableSectionsWithWorkSteps(deduped, (workStepsResult.items ?? []), columnsByWorkStepTypeId));
+    }
+    /**
+     * Repeater lookups are not joined on query. Fill missing catalog item titles from
+     * Hazard / HazardRisk / PPE / Control records so seeded item cards are not blank.
+     */
+    async hydrateCatalogItemSnapshots(value) {
+        const locale = this.translateService.getActiveLang?.() ?? 'en-US';
+        const missingByEntity = new Map();
+        for (const section of value.sections) {
+            if (isStepTableSectionType(section.sectionTypeId, section.sectionType)) {
+                continue;
+            }
+            const entityName = resolveSectionItemEntityName(section.sectionTypeId, section.sectionType);
+            if (!entityName) {
+                continue;
+            }
+            for (const slot of section.items) {
+                for (const id of slot.itemIds ?? []) {
+                    const snapshot = slot.items?.find((entry) => entry.id === id);
+                    if (asSafetyPlanDisplayText(snapshot?.title) || asSafetyPlanDisplayText(snapshot?.code)) {
+                        continue;
+                    }
+                    const ids = missingByEntity.get(entityName) ?? new Set();
+                    ids.add(id);
+                    missingByEntity.set(entityName, ids);
+                }
+            }
+        }
+        if (missingByEntity.size === 0) {
+            return value;
+        }
+        const loadedById = new Map();
+        await Promise.all([...missingByEntity.entries()].map(async ([entityName, ids]) => {
+            const idList = [...ids];
+            try {
+                const result = await this.entityService.withEntity(entityName).data().query({
+                    skip: 0,
+                    take: Math.max(idList.length, 1),
+                    filter: idList.length === 1
+                        ? { field: 'id', operator: { type: 'equal' }, value: idList[0] }
+                        : { field: 'id', operator: { type: 'in' }, value: idList },
+                });
+                for (const row of result.items ?? []) {
+                    const record = row;
+                    const id = resolveEntityRefId(record['id']);
+                    if (!id) {
+                        continue;
+                    }
+                    loadedById.set(id, {
+                        title: resolveEntityRowDisplayText(record['title'], locale) || undefined,
+                        code: asSafetyPlanDisplayText(record['code']) || undefined,
+                    });
+                }
+            }
+            catch {
+                /* skip entities the session cannot read */
+            }
+        }));
+        if (loadedById.size === 0) {
+            return value;
+        }
+        return {
+            sections: value.sections.map((section) => ({
+                ...section,
+                items: section.items.map((slot) => ({
+                    ...slot,
+                    items: (slot.itemIds ?? []).map((id, index) => {
+                        const existing = slot.items?.find((entry) => entry.id === id) ?? slot.items?.[index];
+                        const loaded = loadedById.get(id);
+                        return {
+                            id,
+                            title: asSafetyPlanDisplayText(existing?.title) || loaded?.title,
+                            code: asSafetyPlanDisplayText(existing?.code) || loaded?.code,
+                        };
+                    }),
+                })),
+            })),
+        };
     }
     async loadWorkStepTypeColumns(workStepTypeIds) {
         const uniqueIds = [...new Set(workStepTypeIds)];
@@ -1825,7 +2124,7 @@ class AXMSafetyPlanSectionsPageComponent extends AXPPageLayoutBaseComponent {
         }}
       </p>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: AXMSafetyPlanSectionBuilderComponent, selector: "axm-safety-plan-section-builder", inputs: ["value", "safetyPlanId", "options"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+  `, isInline: true, dependencies: [{ kind: "component", type: AXMSafetyPlanSectionBuilderComponent, selector: "axm-safety-plan-section-builder", inputs: ["value", "safetyPlanId", "options"], outputs: ["valueChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1$1.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: AXMSafetyPlanSectionsPageComponent, decorators: [{
             type: Component,
@@ -1897,4 +2196,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
         }] });
 
 export { AXMSafetyPlanSectionBuilderComponent, AXMSafetyPlanSectionsPageComponent, AXMSafetyPlanSectionsPageComponentProvider, SAFETY_PLAN_SECTIONS_SAVE_COMMAND };
-//# sourceMappingURL=acorex-platform-module-workplacesafety-management-client-index-kF37zgd4.mjs.map
+//# sourceMappingURL=acorex-platform-module-workplacesafety-management-client-index-yxxC7i6A.mjs.map