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

package/fesm2022/acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-6i0RkG3L.mjs

@@ -0,0 +1,557 @@
+import { AXBasePageComponent } from '@acorex/components/page';
+import * as i1 from '@acorex/core/translation';
+import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
+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-save-safety-plan-sections.command-BlPzzCc2.mjs';
+import { A as AXMControlHierarchyDiagramComponent } from './acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.component-BI9VkzNw.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-YS8FHiRu.mjs';
+import { r as resolvePpeItemViewerLayout } from './acorex-platform-module-workplacesafety-management-client-ppe-item-viewer.util-2Kl3_3sg.mjs';
+import * as i1$1 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 { cloneDeep } from 'lodash';
+import { resolveEntityRowDisplayText } from '@acorex-platform/framework-client/common';
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMCatalogSectionPreviewComponent {
+    constructor() {
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMCatalogSectionPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMCatalogSectionPreviewComponent, isStandalone: true, selector: "axm-catalog-section-preview", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-catalog-section-preview block" }, ngImport: i0, template: "<div class=\"axm-catalog-section-preview\">\n  @if (items().length > 0) {\n    <!-- ----- Linked catalog items as a document bullet list ----- -->\n    <ul class=\"__list\">\n      @for (item of items(); track item.id) {\n        <li class=\"__item\">\n          <span class=\"__title\">{{ item.title }}</span>\n          <!--->\n          <!-- ----- Optional business code after the item title ----- -->\n          @if (item.code) {\n            <span class=\"__code\">({{ item.code }})</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n  <!-- ----- Empty catalog 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: [".axm-catalog-section-preview .__list{margin:0;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}.axm-catalog-section-preview .__item{margin-bottom:var(--spacing, .25rem)}.axm-catalog-section-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-catalog-section-preview .__code{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-catalog-section-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-catalog-section-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.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: AXMCatalogSectionPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-catalog-section-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXTranslationModule, AsyncPipe], host: {
+                        class: 'axm-catalog-section-preview block',
+                    }, template: "<div class=\"axm-catalog-section-preview\">\n  @if (items().length > 0) {\n    <!-- ----- Linked catalog items as a document bullet list ----- -->\n    <ul class=\"__list\">\n      @for (item of items(); track item.id) {\n        <li class=\"__item\">\n          <span class=\"__title\">{{ item.title }}</span>\n          <!--->\n          <!-- ----- Optional business code after the item title ----- -->\n          @if (item.code) {\n            <span class=\"__code\">({{ item.code }})</span>\n          }\n        </li>\n      }\n    </ul>\n  }\n  <!-- ----- Empty catalog 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: [".axm-catalog-section-preview .__list{margin:0;list-style-type:disc;padding-inline-start:calc(var(--spacing, .25rem) * 5)}.axm-catalog-section-preview .__item{margin-bottom:var(--spacing, .25rem)}.axm-catalog-section-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-catalog-section-preview .__code{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-catalog-section-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-catalog-section-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMHierarchySectionPreviewComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.diagramService = inject(AXMControlHierarchyDiagramService);
+        //#endregion
+        //#region ----- Inputs -----
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.viewType = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "viewType" }] : /* istanbul ignore next */ []));
+        this.showTitle = input(undefined, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTitle" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- State Signals -----
+        this.diagramItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "diagramItems" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.resolvedViewType = computed(() => resolveControlHierarchyDiagramViewType(this.viewType()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedViewType" }] : /* istanbul ignore next */ []));
+        this.resolvedShowTitle = computed(() => this.showTitle() === true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedShowTitle" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Lifecycle -----
+        this.loadItems = effect((onCleanup) => {
+            const catalogItems = this.items();
+            let cancelled = false;
+            onCleanup(() => {
+                cancelled = true;
+            });
+            void this.refresh(catalogItems, () => cancelled);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadItems" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    async refresh(catalogItems, isCancelled) {
+        if (catalogItems.length === 0) {
+            this.diagramItems.set([]);
+            return;
+        }
+        try {
+            const loaded = await this.diagramService.loadDiagramItemsByLevelIds(catalogItems.map((item) => item.id));
+            if (!isCancelled()) {
+                this.diagramItems.set(loaded);
+            }
+        }
+        catch {
+            if (!isCancelled()) {
+                this.diagramItems.set([]);
+            }
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMHierarchySectionPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.8", type: AXMHierarchySectionPreviewComponent, isStandalone: true, selector: "axm-hierarchy-section-preview", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-hierarchy-section-preview block" }, ngImport: i0, template: "<!-- ----- Control hierarchy diagram using saved section widget options ----- -->\n<axm-control-hierarchy-diagram\n  [viewType]=\"resolvedViewType()\"\n  [items]=\"diagramItems()\"\n  [showTitle]=\"resolvedShowTitle()\"\n  [showViewTypeSelector]=\"false\"\n/>\n", styles: [".axm-hierarchy-section-preview{display:block;width:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXMControlHierarchyDiagramComponent, selector: "axm-control-hierarchy-diagram", inputs: ["viewType", "items", "highlightLevelId", "showViewTypeSelector", "showTitle"], outputs: ["viewTypeChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMHierarchySectionPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-hierarchy-section-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXMControlHierarchyDiagramComponent], host: {
+                        class: 'axm-hierarchy-section-preview block',
+                    }, template: "<!-- ----- Control hierarchy diagram using saved section widget options ----- -->\n<axm-control-hierarchy-diagram\n  [viewType]=\"resolvedViewType()\"\n  [items]=\"diagramItems()\"\n  [showTitle]=\"resolvedShowTitle()\"\n  [showViewTypeSelector]=\"false\"\n/>\n", styles: [".axm-hierarchy-section-preview{display:block;width:100%}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMPpeSectionPreviewComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.ppeItemViewerService = inject(AXMPpeItemViewerService);
+        //#endregion
+        //#region ----- Inputs -----
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.layout = input(/* @ts-ignore */
+        ...(ngDevMode ? [undefined, { debugName: "layout" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- State Signals -----
+        this.loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.displayItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
+        this.selectedIds = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedIds" }] : /* istanbul ignore next */ []));
+        this.resolvedLayout = computed(() => resolvePpeItemViewerLayout(this.layout()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "resolvedLayout" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Lifecycle -----
+        this.loadItems = effect((onCleanup) => {
+            const catalogItems = this.items();
+            let cancelled = false;
+            onCleanup(() => {
+                cancelled = true;
+            });
+            void this.refresh(catalogItems, () => cancelled);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadItems" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Event Handlers -----
+    onSelectedIdsChange(ids) {
+        this.selectedIds.set(ids);
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    async refresh(catalogItems, isCancelled) {
+        if (catalogItems.length === 0) {
+            this.displayItems.set([]);
+            this.loading.set(false);
+            return;
+        }
+        this.loading.set(true);
+        const fallback = catalogItems.map((item) => this.toDisplayItem(item));
+        try {
+            const loaded = await this.ppeItemViewerService.loadDisplayItems(catalogItems.map((item) => item.id));
+            if (isCancelled()) {
+                return;
+            }
+            const byId = new Map(loaded.map((row) => [row.id, row]));
+            this.displayItems.set(fallback.map((item) => byId.get(item.id) ?? item));
+        }
+        catch {
+            if (!isCancelled()) {
+                this.displayItems.set(fallback);
+            }
+        }
+        finally {
+            if (!isCancelled()) {
+                this.loading.set(false);
+            }
+        }
+    }
+    toDisplayItem(item) {
+        return {
+            id: item.id,
+            title: item.title,
+            code: item.code,
+            imageUrl: null,
+        };
+    }
+    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 }); }
+}
+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 }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Display helpers -----
+function toSafetyPlanPreviewDisplayText(value, locale) {
+    return resolveEntityRowDisplayText(value, locale).trim();
+}
+function resolveSafetyPlanPreviewSectionTitle(section, locale) {
+    return (toSafetyPlanPreviewDisplayText(section.title, locale) ||
+        toSafetyPlanPreviewDisplayText(section.sectionType?.title, locale) ||
+        toSafetyPlanPreviewDisplayText(section.sectionType?.code, locale));
+}
+/**
+ * Maps a section type to a preview renderer. New document kinds (SWMS, JSA, SOP, Permit)
+ * can add cases here without changing the editor.
+ */
+function resolveSafetyPlanSectionPreviewKind(section) {
+    if (isStepTableSectionType(section.sectionTypeId, section.sectionType)) {
+        return 'work-step-table';
+    }
+    if (resolveSectionTypeKey(section.sectionTypeId, section.sectionType) === 'RiskMatrix') {
+        return 'risk-matrix';
+    }
+    if (resolveSectionTypeKey(section.sectionTypeId, section.sectionType) === 'Ppe') {
+        return 'ppe';
+    }
+    if (resolveSectionTypeKey(section.sectionTypeId, section.sectionType) === 'HierarchyLevel') {
+        return 'hierarchy';
+    }
+    return 'catalog';
+}
+/** True when the section has at least one previewable item (catalog row or work-step row). */
+function safetyPlanPreviewSectionHasItems(section) {
+    if (isStepTableSectionType(section.sectionTypeId, section.sectionType)) {
+        return (section.items ?? []).some((item) => item.stepTableRow != null);
+    }
+    return collectSafetyPlanPreviewCatalogItems(section, '').length > 0;
+}
+function collectSafetyPlanPreviewCatalogItems(section, locale) {
+    const linked = [];
+    const seen = new Set();
+    for (const slot of section.items ?? []) {
+        for (const item of flattenCatalogSlot(slot, locale)) {
+            if (!item.id || seen.has(item.id)) {
+                continue;
+            }
+            seen.add(item.id);
+            linked.push(item);
+        }
+    }
+    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 : [];
+    const items = [];
+    for (let index = 0; index < ids.length; index += 1) {
+        const id = String(ids[index] ?? '').trim();
+        if (!id) {
+            continue;
+        }
+        const snapshot = snapshots.find((entry) => entry?.id === id) ?? snapshots[index];
+        const title = toSafetyPlanPreviewDisplayText(snapshot?.title, locale) ||
+            String(snapshot?.code ?? '').trim() ||
+            id;
+        items.push({
+            id,
+            title,
+            code: snapshot?.code,
+        });
+    }
+    if (items.length === 0 && snapshots.length > 0) {
+        for (const snapshot of snapshots) {
+            const id = String(snapshot?.id ?? '').trim();
+            if (!id) {
+                continue;
+            }
+            items.push({
+                id,
+                title: toSafetyPlanPreviewDisplayText(snapshot.title, locale) || String(snapshot.code ?? '').trim() || id,
+                code: snapshot.code,
+            });
+        }
+    }
+    return items;
+}
+//#endregion
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMRiskMatrixPreviewComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.entityService = inject(AXPEntityService);
+        this.layoutBuilder = inject(AXPLayoutBuilderService);
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----- Inputs -----
+        this.items = input([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- State Signals -----
+        this.loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.matrices = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "matrices" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Lifecycle -----
+        this.loadItems = effect((onCleanup) => {
+            const catalogItems = this.items();
+            let cancelled = false;
+            onCleanup(() => {
+                cancelled = true;
+            });
+            void this.refresh(catalogItems, () => cancelled);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadItems" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Data Loading -----
+    async refresh(catalogItems, isCancelled) {
+        if (catalogItems.length === 0) {
+            this.matrices.set([]);
+            this.loading.set(false);
+            return;
+        }
+        this.loading.set(true);
+        try {
+            const loaded = await this.queryByIds(catalogItems.map((item) => item.id));
+            if (isCancelled()) {
+                return;
+            }
+            const byId = new Map(loaded.map((row) => [row.id, row]));
+            const locale = this.translationService.getActiveLang() ?? 'en-US';
+            this.matrices.set(catalogItems.flatMap((item) => {
+                const row = byId.get(item.id);
+                if (!row) {
+                    return [];
+                }
+                return [this.toPreviewItem(item, row, locale)];
+            }));
+        }
+        catch {
+            if (!isCancelled()) {
+                this.matrices.set([]);
+            }
+        }
+        finally {
+            if (!isCancelled()) {
+                this.loading.set(false);
+            }
+        }
+    }
+    async queryByIds(ids) {
+        const dataAccessor = this.entityService
+            .withEntity(RISK_MANAGEMENT_RISK_MATRIX_CELL_ENTITY)
+            .data();
+        try {
+            const result = await dataAccessor.query({
+                skip: 0,
+                take: Math.max(ids.length, 100),
+                filter: ids.length === 1
+                    ? { field: 'id', operator: { type: 'equal' }, value: ids[0] }
+                    : { field: 'id', operator: { type: 'in' }, value: ids },
+            });
+            return result?.items ?? [];
+        }
+        catch {
+            const loaded = [];
+            for (const id of ids) {
+                try {
+                    const row = await dataAccessor.byKey(id);
+                    if (row) {
+                        loaded.push(row);
+                    }
+                }
+                catch {
+                    /* skip missing rows */
+                }
+            }
+            return loaded;
+        }
+    }
+    toPreviewItem(catalogItem, row, locale) {
+        const code = typeof row.code === 'string' ? row.code.trim() : catalogItem.code;
+        return {
+            id: catalogItem.id,
+            title: toSafetyPlanPreviewDisplayText(row.title, locale) || catalogItem.title,
+            code: code && code.length > 0 ? code : undefined,
+            context: { ...row },
+            layout: cloneDeep(this.buildMatrixLayout()),
+        };
+    }
+    //#endregion
+    //#region ----- Layout -----
+    buildMatrixLayout() {
+        return this.layoutBuilder
+            .create()
+            .flex((flex) => {
+            flex.mode('view').setDirection('column');
+            flex.formField('', (field) => {
+                field
+                    .path('matrix')
+                    .setShowLabel(false)
+                    .mode('view')
+                    .customWidget(AXPWidgetsList.Editors.RiskMatrix, { readonly: true });
+            });
+        })
+            .build();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMRiskMatrixPreviewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMRiskMatrixPreviewComponent, isStandalone: true, selector: "axm-risk-matrix-preview", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axm-risk-matrix-preview block" }, ngImport: i0, template: "<div class=\"axm-risk-matrix-preview\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while risk matrix records are fetched ----- -->\n    <ax-loading></ax-loading>\n  }\n  <!-- ----- Empty state when no risk matrices are selected ----- -->\n  @else if (matrices().length === 0) {\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty-items' | translate | async }}\n    </p>\n  }\n  <!-- ----- Selected risk matrices rendered with the RiskMatrix widget ----- -->\n  @else {\n    <div class=\"__items\">\n      @for (item of matrices(); track item.id) {\n        <article class=\"__item\">\n          <header class=\"__item-header\">\n            <h4 class=\"__item-title\">{{ item.title }}</h4>\n            <!--->\n            <!-- ----- Optional business code after the matrix title ----- -->\n            @if (item.code) {\n              <span class=\"__code\">({{ item.code }})</span>\n            }\n          </header>\n          <div class=\"__matrix\">\n            <axp-layout-renderer [layout]=\"item.layout\" [context]=\"item.context\" mode=\"view\" look=\"container\" />\n          </div>\n        </article>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axm-risk-matrix-preview{display:block;width:100%}.axm-risk-matrix-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-risk-matrix-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-risk-matrix-preview .__items{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 6)}.axm-risk-matrix-preview .__item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-risk-matrix-preview .__item-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--spacing, .25rem)}.axm-risk-matrix-preview .__item-title{margin:0;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-medium, 500);font-weight:var(--font-weight-medium, 500)}.axm-risk-matrix-preview .__code{color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-risk-matrix-preview .__code{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-risk-matrix-preview .__matrix{width:100%;overflow-x:auto}@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: AXLoadingModule }, { kind: "component", type: i1$1.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMRiskMatrixPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-risk-matrix-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, AXLoadingModule, AXTranslationModule, AXPLayoutRendererComponent], host: {
+                        class: 'axm-risk-matrix-preview block',
+                    }, template: "<div class=\"axm-risk-matrix-preview\">\n  @if (loading()) {\n    <!-- ----- Loading indicator while risk matrix records are fetched ----- -->\n    <ax-loading></ax-loading>\n  }\n  <!-- ----- Empty state when no risk matrices are selected ----- -->\n  @else if (matrices().length === 0) {\n    <p class=\"__empty\">\n      {{ '@workplacesafety-management:safety-plan-sections.preview.empty-items' | translate | async }}\n    </p>\n  }\n  <!-- ----- Selected risk matrices rendered with the RiskMatrix widget ----- -->\n  @else {\n    <div class=\"__items\">\n      @for (item of matrices(); track item.id) {\n        <article class=\"__item\">\n          <header class=\"__item-header\">\n            <h4 class=\"__item-title\">{{ item.title }}</h4>\n            <!--->\n            <!-- ----- Optional business code after the matrix title ----- -->\n            @if (item.code) {\n              <span class=\"__code\">({{ item.code }})</span>\n            }\n          </header>\n          <div class=\"__matrix\">\n            <axp-layout-renderer [layout]=\"item.layout\" [context]=\"item.context\" mode=\"view\" look=\"container\" />\n          </div>\n        </article>\n      }\n    </div>\n  }\n</div>\n", styles: ["@layer properties;.axm-risk-matrix-preview{display:block;width:100%}.axm-risk-matrix-preview .__empty{margin:0;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-risk-matrix-preview .__empty{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-risk-matrix-preview .__items{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 6)}.axm-risk-matrix-preview .__item{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axm-risk-matrix-preview .__item-header{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--spacing, .25rem)}.axm-risk-matrix-preview .__item-title{margin:0;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-medium, 500);font-weight:var(--font-weight-medium, 500)}.axm-risk-matrix-preview .__code{color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axm-risk-matrix-preview .__code{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axm-risk-matrix-preview .__matrix{width:100%;overflow-x:auto}@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: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMWorkStepTablePreviewComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----- Inputs -----
+        this.section = input.required(/* @ts-ignore */
+        ...(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 */
+        ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Display -----
+    columnLabel(column) {
+        return stepTablePreviewColumnLabel(column, this.translationService.getActiveLang() ?? 'en-US');
+    }
+    cellText(row, column) {
+        const key = stepTableColumnKey(column);
+        const cell = (row.cells ?? []).find((entry) => entry.columnKey === key);
+        return formatSafetyPlanPreviewStepTableCell(cell, this.translationService.getActiveLang() ?? 'en-US');
+    }
+    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: i1.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: [{
+            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"] }]
+        }], propDecorators: { section: [{ type: i0.Input, args: [{ isSignal: true, alias: "section", required: true }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMSafetyPlanSectionPreviewComponent {
+    constructor() {
+        //#region ----- Services & Dependencies -----
+        this.translationService = inject(AXTranslationService);
+        //#endregion
+        //#region ----- Inputs -----
+        this.section = input.required(/* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "section" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.locale = computed(() => this.translationService.getActiveLang() ?? 'en-US', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "locale" }] : /* istanbul ignore next */ []));
+        this.kind = computed(() => resolveSafetyPlanSectionPreviewKind(this.section()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "kind" }] : /* istanbul ignore next */ []));
+        this.title = computed(() => resolveSafetyPlanPreviewSectionTitle(this.section(), this.locale()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        this.catalogItems = computed(() => collectSafetyPlanPreviewCatalogItems(this.section(), this.locale()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "catalogItems" }] : /* istanbul ignore next */ []));
+        this.hasItems = computed(() => safetyPlanPreviewSectionHasItems(this.section()), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "hasItems" }] : /* istanbul ignore next */ []));
+    }
+    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 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMSafetyPlanSectionPreviewComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-safety-plan-section-preview', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
+                        AXMCatalogSectionPreviewComponent,
+                        AXMHierarchySectionPreviewComponent,
+                        AXMPpeSectionPreviewComponent,
+                        AXMRiskMatrixPreviewComponent,
+                        AXMWorkStepTablePreviewComponent,
+                    ], 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 }] }] } });
+
+//#region ----- Imports -----
+//#endregion
+//#region ----- Component -----
+class AXMSafetyPlanPreviewModalComponent extends AXBasePageComponent {
+    constructor() {
+        super(...arguments);
+        //#region ----- Inputs -----
+        this.structure = input({ sections: [] }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "structure" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----- Computed Properties -----
+        this.sections = computed(() => {
+            const raw = this.safeInputValue(this.structure);
+            return [...normalizeSafetyPlanSectionBuilderValue(raw).sections]
+                .sort((a, b) => (a.sortOrder ?? 0) - (b.sortOrder ?? 0))
+                .filter((section) => safetyPlanPreviewSectionHasItems(section));
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----- Helpers -----
+    safeInputValue(inputOrValue) {
+        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: i1.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 }] }] } });
+
+export { AXMSafetyPlanPreviewModalComponent };
+//# sourceMappingURL=acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-6i0RkG3L.mjs.map