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

package/fesm2022/acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.component-BI9VkzNw.mjs

@@ -0,0 +1,117 @@
+import { AXLookupComponent } from '@acorex/components/lookup';
+import * as i1$1 from '@acorex/core/translation';
+import { AXTranslationModule } from '@acorex/core/translation';
+import { AsyncPipe } from '@angular/common';
+import * as i0 from '@angular/core';
+import { inject, input, output, signal, computed, effect, ChangeDetectionStrategy, ViewEncapsulation, Component } from '@angular/core';
+import * as i1 from '@angular/forms';
+import { FormsModule } from '@angular/forms';
+import { orderBy, defaultTo, isEmpty } from 'lodash';
+import { A as AXMControlHierarchyDiagramService } from './acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.service-tMrUDnCb.mjs';
+
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Component   ----
+class AXMControlHierarchyDiagramComponent {
+    //#endregion
+    //#region ----   Lifecycle   ----
+    ngOnInit() {
+        this.selectedViewType.set(this.viewType());
+    }
+    constructor() {
+        //#region ----   Services & Dependencies   ----
+        this.diagramService = inject(AXMControlHierarchyDiagramService);
+        //#endregion
+        //#region ----   Inputs / Outputs   ----
+        this.viewType = input('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewType" }] : /* istanbul ignore next */ []));
+        this.items = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "items" }] : /* istanbul ignore next */ []));
+        this.highlightLevelId = input(null, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "highlightLevelId" }] : /* istanbul ignore next */ []));
+        this.showViewTypeSelector = input(true, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showViewTypeSelector" }] : /* istanbul ignore next */ []));
+        this.showTitle = input(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "showTitle" }] : /* istanbul ignore next */ []));
+        this.viewTypeChange = output();
+        //#endregion
+        //#region ----   State   ----
+        this.loading = signal(false, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loading" }] : /* istanbul ignore next */ []));
+        this.loadedItems = signal([], /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "loadedItems" }] : /* istanbul ignore next */ []));
+        this.selectedViewType = signal('horizontal', /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "selectedViewType" }] : /* istanbul ignore next */ []));
+        this.viewTypeOptions = computed(() => this.diagramService.getViewTypeOptions(), /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "viewTypeOptions" }] : /* istanbul ignore next */ []));
+        this.displayItems = computed(() => {
+            const external = this.items();
+            const items = external ?? this.loadedItems();
+            return orderBy(items, ['order'], ['asc']);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "displayItems" }] : /* istanbul ignore next */ []));
+        this.pyramidWidths = computed(() => {
+            const count = this.displayItems().length;
+            if (count <= 1) {
+                return [100];
+            }
+            const step = 70 / (count - 1);
+            return this.displayItems().map((_item, index) => 100 - index * step);
+        }, /* @ts-ignore */
+        ...(ngDevMode ? [{ debugName: "pyramidWidths" }] : /* istanbul ignore next */ []));
+        effect(() => {
+            this.selectedViewType.set(this.viewType());
+        });
+        effect(() => {
+            if (this.items() != null) {
+                return;
+            }
+            void this.loadItems();
+        });
+    }
+    //#endregion
+    //#region ----   UI Handlers   ----
+    resolveTitle(item) {
+        return this.diagramService.resolveText(item.title);
+    }
+    resolveDescription(item) {
+        return defaultTo(this.diagramService.resolveText(item.description ?? ''), '');
+    }
+    resolveTextColor(item) {
+        return this.diagramService.getContrastTextColor(item.color);
+    }
+    isHighlighted(item) {
+        const highlightId = this.highlightLevelId();
+        return !isEmpty(highlightId) && item.id === highlightId;
+    }
+    onViewTypeChanged(value) {
+        if (!value) {
+            return;
+        }
+        this.selectedViewType.set(value);
+        this.viewTypeChange.emit(value);
+    }
+    //#endregion
+    //#region ----   Data Loading   ----
+    async loadItems() {
+        this.loading.set(true);
+        try {
+            const levels = await this.diagramService.loadActiveLevels();
+            this.loadedItems.set(levels);
+        }
+        finally {
+            this.loading.set(false);
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMControlHierarchyDiagramComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXMControlHierarchyDiagramComponent, isStandalone: true, selector: "axm-control-hierarchy-diagram", inputs: { viewType: { classPropertyName: "viewType", publicName: "viewType", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, highlightLevelId: { classPropertyName: "highlightLevelId", publicName: "highlightLevelId", isSignal: true, isRequired: false, transformFunction: null }, showViewTypeSelector: { classPropertyName: "showViewTypeSelector", publicName: "showViewTypeSelector", isSignal: true, isRequired: false, transformFunction: null }, showTitle: { classPropertyName: "showTitle", publicName: "showTitle", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { viewTypeChange: "viewTypeChange" }, host: { classAttribute: "axm-control-hierarchy-diagram block w-full" }, ngImport: i0, template: "@if (showViewTypeSelector()) {\n  <div class=\"axm-control-hierarchy-diagram__header gap-4\">\n    <ax-lookup\n      class=\"axm-control-hierarchy-diagram__view-type\"\n      mode=\"drop-down-list\"\n      [dataSource]=\"viewTypeOptions()\"\n      [ngModel]=\"selectedViewType()\"\n      (ngModelChange)=\"onViewTypeChanged($event)\"\n      valueField=\"id\"\n      textField=\"title\"\n      [searchable]=\"false\"\n    />\n  </div>\n}\n\n@if (loading()) {\n  <div class=\"axm-control-hierarchy-diagram__loading\">\n    {{ '@general:terms.interface.loading' | translate | async }}\n  </div>\n} @else if (!displayItems().length) {\n  <div class=\"axm-control-hierarchy-diagram__empty\">\n    {{ '@general:terms.interface.no-data' | translate | async }}\n  </div>\n} @else {\n  <div\n    class=\"axm-control-hierarchy-diagram__body\"\n    [class.axm-control-hierarchy-diagram__body--offset-top]=\"!showViewTypeSelector()\"\n  >\n  @switch (selectedViewType()) {\n    @case ('horizontal') {\n      <div class=\"axm-control-hierarchy-diagram__horizontal flex flex-col gap-5\">\n        <div class=\"axm-control-hierarchy-diagram__effectiveness-bar gap-4\">\n          <span>{{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}</span>\n          <div class=\"axm-control-hierarchy-diagram__gradient\"></div>\n          <span>{{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}</span>\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__cards gap-5!\">\n          @for (item of displayItems(); track item.id; let index = $index) {\n            <article\n              class=\"axm-control-hierarchy-diagram__card\"\n              [class.axm-control-hierarchy-diagram__card--highlighted]=\"isHighlighted(item)\"\n              [style.border-top-color]=\"item.color\"\n            >\n              <header\n                class=\"axm-control-hierarchy-diagram__card-header px-4 py-3\"\n                [style.background]=\"item.color\"\n                [style.color]=\"resolveTextColor(item)\"\n              >\n                ({{ item.order }}) {{ resolveTitle(item) }}\n              </header>\n              <p class=\"axm-control-hierarchy-diagram__card-body p-4\">\n                {{ resolveDescription(item) }}\n              </p>\n            </article>\n          }\n        </div>\n      </div>\n    }\n    @case ('vertical') {\n      <div class=\"axm-control-hierarchy-diagram__vertical gap-5!\">\n        <div class=\"axm-control-hierarchy-diagram__vertical-label axm-control-hierarchy-diagram__vertical-label--top\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__pyramid gap-2!\">\n          @for (item of displayItems(); track item.id; let index = $index) {\n            <div\n              class=\"axm-control-hierarchy-diagram__pyramid-row\"\n              [class.axm-control-hierarchy-diagram__pyramid-row--highlighted]=\"isHighlighted(item)\"\n              [style.background]=\"item.color\"\n              [style.color]=\"resolveTextColor(item)\"\n              [style.width.%]=\"pyramidWidths()[index]\"\n            >\n              {{ resolveTitle(item) }}\n            </div>\n          }\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__vertical-label axm-control-hierarchy-diagram__vertical-label--bottom\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}\n        </div>\n      </div>\n    }\n    @case ('horizontal-chevron') {\n      <div class=\"axm-control-hierarchy-diagram__chevron gap-3!\">\n        <div class=\"axm-control-hierarchy-diagram__chevron-effective\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__chevron-track\">\n          @for (item of displayItems(); track item.id) {\n            <div\n              class=\"axm-control-hierarchy-diagram__chevron-segment\"\n              [class.axm-control-hierarchy-diagram__chevron-segment--highlighted]=\"isHighlighted(item)\"\n              [style.background]=\"item.color\"\n              [style.color]=\"resolveTextColor(item)\"\n            >\n              {{ resolveTitle(item) }}\n            </div>\n          }\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__chevron-effective axm-control-hierarchy-diagram__chevron-effective--end\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}\n        </div>\n      </div>\n    }\n  }\n  </div>\n}\n", styles: ["@layer properties;.axm-control-hierarchy-diagram{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 3)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__view-type{min-width:calc(var(--spacing, .25rem) * 52)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__body--offset-top{margin-top:calc(var(--spacing, .25rem) * 5)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__loading,.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__empty{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 8);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:rgb(var(--ax-sys-color-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface));color:rgb(var(--ax-sys-color-on-light-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__effectiveness-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--spacing, .25rem) * 3);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);text-transform:uppercase;color:rgb(var(--ax-sys-color-on-light-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__gradient{height:calc(var(--spacing, .25rem) * 2);border-radius:calc(infinity * 1px);background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-500)),rgb(var(--ax-sys-color-success-500)) 35%,rgb(var(--ax-sys-color-warning-500)) 65%,rgb(var(--ax-sys-color-danger-500)))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__cards{display:grid;gap:calc(var(--spacing, .25rem) * 3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card{overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:4px;background:rgb(var(--ax-sys-color-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card--highlighted{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgb(var(--ax-sys-color-primary-500))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card-header{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card-body{margin:0;padding:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical-label{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-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);text-transform:uppercase;color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical-label--top{margin-bottom:var(--spacing, .25rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical-label--bottom{margin-top:var(--spacing, .25rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__pyramid{display:flex;width:100%;max-width:var(--container-3xl, 48rem);flex-direction:column;align-items:center;gap:var(--spacing, .25rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__pyramid-row{display:flex;min-height:calc(var(--spacing, .25rem) * 11);align-items:center;justify-content:center;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__pyramid-row--highlighted{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgb(var(--ax-sys-color-primary-500))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron{display:flex;width:100%;flex-wrap:wrap;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-title{display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:calc(var(--spacing, .25rem) * 40);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;background:rgb(var(--ax-sys-color-primary-700));color:rgb(var(--ax-sys-color-on-primary-700))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-effective{display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;background:rgb(var(--ax-sys-color-surface));border-color:rgb(var(--ax-sys-color-border-surface));color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-effective--end{margin-left:auto}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-track{display:flex;min-height:calc(var(--spacing, .25rem) * 14);flex:1;flex-wrap:wrap;align-items:stretch;gap:0px;overflow:hidden;border-radius:var(--radius-md, .375rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:calc(var(--spacing, .25rem) * 24);flex:1;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment--highlighted{z-index:10;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgb(var(--ax-sys-color-primary-500))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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;--tw-border-style: solid;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i1$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXMControlHierarchyDiagramComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axm-control-hierarchy-diagram', host: {
+                        class: 'axm-control-hierarchy-diagram block w-full',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [AsyncPipe, FormsModule, AXLookupComponent, AXTranslationModule], template: "@if (showViewTypeSelector()) {\n  <div class=\"axm-control-hierarchy-diagram__header gap-4\">\n    <ax-lookup\n      class=\"axm-control-hierarchy-diagram__view-type\"\n      mode=\"drop-down-list\"\n      [dataSource]=\"viewTypeOptions()\"\n      [ngModel]=\"selectedViewType()\"\n      (ngModelChange)=\"onViewTypeChanged($event)\"\n      valueField=\"id\"\n      textField=\"title\"\n      [searchable]=\"false\"\n    />\n  </div>\n}\n\n@if (loading()) {\n  <div class=\"axm-control-hierarchy-diagram__loading\">\n    {{ '@general:terms.interface.loading' | translate | async }}\n  </div>\n} @else if (!displayItems().length) {\n  <div class=\"axm-control-hierarchy-diagram__empty\">\n    {{ '@general:terms.interface.no-data' | translate | async }}\n  </div>\n} @else {\n  <div\n    class=\"axm-control-hierarchy-diagram__body\"\n    [class.axm-control-hierarchy-diagram__body--offset-top]=\"!showViewTypeSelector()\"\n  >\n  @switch (selectedViewType()) {\n    @case ('horizontal') {\n      <div class=\"axm-control-hierarchy-diagram__horizontal flex flex-col gap-5\">\n        <div class=\"axm-control-hierarchy-diagram__effectiveness-bar gap-4\">\n          <span>{{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}</span>\n          <div class=\"axm-control-hierarchy-diagram__gradient\"></div>\n          <span>{{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}</span>\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__cards gap-5!\">\n          @for (item of displayItems(); track item.id; let index = $index) {\n            <article\n              class=\"axm-control-hierarchy-diagram__card\"\n              [class.axm-control-hierarchy-diagram__card--highlighted]=\"isHighlighted(item)\"\n              [style.border-top-color]=\"item.color\"\n            >\n              <header\n                class=\"axm-control-hierarchy-diagram__card-header px-4 py-3\"\n                [style.background]=\"item.color\"\n                [style.color]=\"resolveTextColor(item)\"\n              >\n                ({{ item.order }}) {{ resolveTitle(item) }}\n              </header>\n              <p class=\"axm-control-hierarchy-diagram__card-body p-4\">\n                {{ resolveDescription(item) }}\n              </p>\n            </article>\n          }\n        </div>\n      </div>\n    }\n    @case ('vertical') {\n      <div class=\"axm-control-hierarchy-diagram__vertical gap-5!\">\n        <div class=\"axm-control-hierarchy-diagram__vertical-label axm-control-hierarchy-diagram__vertical-label--top\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__pyramid gap-2!\">\n          @for (item of displayItems(); track item.id; let index = $index) {\n            <div\n              class=\"axm-control-hierarchy-diagram__pyramid-row\"\n              [class.axm-control-hierarchy-diagram__pyramid-row--highlighted]=\"isHighlighted(item)\"\n              [style.background]=\"item.color\"\n              [style.color]=\"resolveTextColor(item)\"\n              [style.width.%]=\"pyramidWidths()[index]\"\n            >\n              {{ resolveTitle(item) }}\n            </div>\n          }\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__vertical-label axm-control-hierarchy-diagram__vertical-label--bottom\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}\n        </div>\n      </div>\n    }\n    @case ('horizontal-chevron') {\n      <div class=\"axm-control-hierarchy-diagram__chevron gap-3!\">\n        <div class=\"axm-control-hierarchy-diagram__chevron-effective\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__chevron-track\">\n          @for (item of displayItems(); track item.id) {\n            <div\n              class=\"axm-control-hierarchy-diagram__chevron-segment\"\n              [class.axm-control-hierarchy-diagram__chevron-segment--highlighted]=\"isHighlighted(item)\"\n              [style.background]=\"item.color\"\n              [style.color]=\"resolveTextColor(item)\"\n            >\n              {{ resolveTitle(item) }}\n            </div>\n          }\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__chevron-effective axm-control-hierarchy-diagram__chevron-effective--end\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}\n        </div>\n      </div>\n    }\n  }\n  </div>\n}\n", styles: ["@layer properties;.axm-control-hierarchy-diagram{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__header{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 3)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__title{margin:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__view-type{min-width:calc(var(--spacing, .25rem) * 52)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__body--offset-top{margin-top:calc(var(--spacing, .25rem) * 5)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__loading,.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__empty{display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;padding:calc(var(--spacing, .25rem) * 8);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));background:rgb(var(--ax-sys-color-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface));color:rgb(var(--ax-sys-color-on-light-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__effectiveness-bar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:calc(var(--spacing, .25rem) * 3);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);text-transform:uppercase;color:rgb(var(--ax-sys-color-on-light-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__gradient{height:calc(var(--spacing, .25rem) * 2);border-radius:calc(infinity * 1px);background:linear-gradient(90deg,rgb(var(--ax-sys-color-primary-500)),rgb(var(--ax-sys-color-success-500)) 35%,rgb(var(--ax-sys-color-warning-500)) 65%,rgb(var(--ax-sys-color-danger-500)))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__cards{display:grid;gap:calc(var(--spacing, .25rem) * 3);grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card{overflow:hidden;border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;border-top-style:var(--tw-border-style);border-top-width:4px;background:rgb(var(--ax-sys-color-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card--highlighted{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgb(var(--ax-sys-color-primary-500))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card-header{padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__card-body{margin:0;padding:calc(var(--spacing, .25rem) * 3);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical{display:flex;flex-direction:column;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical-label{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-bold, 700);font-weight:var(--font-weight-bold, 700);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);text-transform:uppercase;color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical-label--top{margin-bottom:var(--spacing, .25rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__vertical-label--bottom{margin-top:var(--spacing, .25rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__pyramid{display:flex;width:100%;max-width:var(--container-3xl, 48rem);flex-direction:column;align-items:center;gap:var(--spacing, .25rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__pyramid-row{display:flex;min-height:calc(var(--spacing, .25rem) * 11);align-items:center;justify-content:center;border-radius:var(--radius-sm, .25rem);padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__pyramid-row--highlighted{--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 2px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgb(var(--ax-sys-color-primary-500))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron{display:flex;width:100%;flex-wrap:wrap;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-title{display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:calc(var(--spacing, .25rem) * 40);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;background:rgb(var(--ax-sys-color-primary-700));color:rgb(var(--ax-sys-color-on-primary-700))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-effective{display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:calc(var(--spacing, .25rem) * 28);align-items:center;justify-content:center;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700);text-transform:uppercase;background:rgb(var(--ax-sys-color-surface));border-color:rgb(var(--ax-sys-color-border-surface));color:rgb(var(--ax-sys-color-on-surface))}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-effective--end{margin-left:auto}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-track{display:flex;min-height:calc(var(--spacing, .25rem) * 14);flex:1;flex-wrap:wrap;align-items:stretch;gap:0px;overflow:hidden;border-radius:var(--radius-md, .375rem)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 14);min-width:calc(var(--spacing, .25rem) * 24);flex:1;align-items:center;justify-content:center;padding-inline:calc(var(--spacing, .25rem) * 4);text-align:center;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%,14px 50%)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment:first-child{clip-path:polygon(0 0,calc(100% - 14px) 0,100% 50%,calc(100% - 14px) 100%,0 100%)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment:last-child{clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%)}.axm-control-hierarchy-diagram .axm-control-hierarchy-diagram__chevron-segment--highlighted{z-index:10;--tw-ring-shadow: var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color, currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);--tw-ring-offset-width: 1px;--tw-ring-offset-shadow: var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);ring-color:rgb(var(--ax-sys-color-primary-500))}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@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;--tw-border-style: solid;--tw-tracking: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
+        }], ctorParameters: () => [], propDecorators: { viewType: [{ type: i0.Input, args: [{ isSignal: true, alias: "viewType", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], highlightLevelId: [{ type: i0.Input, args: [{ isSignal: true, alias: "highlightLevelId", required: false }] }], showViewTypeSelector: [{ type: i0.Input, args: [{ isSignal: true, alias: "showViewTypeSelector", required: false }] }], showTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "showTitle", required: false }] }], viewTypeChange: [{ type: i0.Output, args: ["viewTypeChange"] }] } });
+
+export { AXMControlHierarchyDiagramComponent as A };
+//# sourceMappingURL=acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.component-BI9VkzNw.mjs.map

package/fesm2022/acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.component-BI9VkzNw.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"acorex-platform-module-workplacesafety-management-client-control-hierarchy-diagram.component-BI9VkzNw.mjs","sources":["../../../../libs/modules/workplacesafety-management/client/src/lib/features/control-hierarchy-diagram/control-hierarchy-diagram.component.ts","../../../../libs/modules/workplacesafety-management/client/src/lib/features/control-hierarchy-diagram/control-hierarchy-diagram.component.html"],"sourcesContent":["//#region ----   Imports   ----\n\nimport { AXLookupComponent } from '@acorex/components/lookup';\nimport { AXTranslationModule } from '@acorex/core/translation';\nimport { AsyncPipe } from '@angular/common';\nimport {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  effect,\n  inject,\n  input,\n  OnInit,\n  output,\n  signal,\n  ViewEncapsulation,\n} from '@angular/core';\nimport { FormsModule } from '@angular/forms';\nimport { defaultTo, isEmpty, orderBy } from 'lodash';\n\nimport {\n  type AXMControlHierarchyDiagramItem,\n  type AXMControlHierarchyDiagramViewType,\n} from './control-hierarchy-diagram.types';\nimport { AXMControlHierarchyDiagramService } from './control-hierarchy-diagram.service';\n\n//#endregion\n\n//#region ----   Component   ----\n\n@Component({\n  selector: 'axm-control-hierarchy-diagram',\n  templateUrl: './control-hierarchy-diagram.component.html',\n  styleUrl: './control-hierarchy-diagram.component.css',\n  host: {\n    class: 'axm-control-hierarchy-diagram block w-full',\n  },\n  encapsulation: ViewEncapsulation.None,\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  imports: [AsyncPipe, FormsModule, AXLookupComponent, AXTranslationModule],\n})\nexport class AXMControlHierarchyDiagramComponent implements OnInit {\n  //#region ----   Services & Dependencies   ----\n\n  protected readonly diagramService = inject(AXMControlHierarchyDiagramService);\n\n  //#endregion\n\n  //#region ----   Inputs / Outputs   ----\n\n  viewType = input<AXMControlHierarchyDiagramViewType>('horizontal');\n  items = input<AXMControlHierarchyDiagramItem[] | null>(null);\n  highlightLevelId = input<string | null>(null);\n  showViewTypeSelector = input(true);\n  showTitle = input(false);\n\n  viewTypeChange = output<AXMControlHierarchyDiagramViewType>();\n\n  //#endregion\n\n  //#region ----   State   ----\n\n  protected readonly loading = signal(false);\n  protected readonly loadedItems = signal<AXMControlHierarchyDiagramItem[]>([]);\n  protected readonly selectedViewType = signal<AXMControlHierarchyDiagramViewType>('horizontal');\n\n  protected readonly viewTypeOptions = computed(() => this.diagramService.getViewTypeOptions());\n\n  protected readonly displayItems = computed(() => {\n    const external = this.items();\n    const items = external ?? this.loadedItems();\n    return orderBy(items, ['order'], ['asc']);\n  });\n\n  protected readonly pyramidWidths = computed(() => {\n    const count = this.displayItems().length;\n    if (count <= 1) {\n      return [100];\n    }\n    const step = 70 / (count - 1);\n    return this.displayItems().map((_item, index) => 100 - index * step);\n  });\n\n  //#endregion\n\n  //#region ----   Lifecycle   ----\n\n  ngOnInit(): void {\n    this.selectedViewType.set(this.viewType());\n  }\n\n  constructor() {\n    effect(() => {\n      this.selectedViewType.set(this.viewType());\n    });\n\n    effect(() => {\n      if (this.items() != null) {\n        return;\n      }\n      void this.loadItems();\n    });\n  }\n\n  //#endregion\n\n  //#region ----   UI Handlers   ----\n\n  protected resolveTitle(item: AXMControlHierarchyDiagramItem): string {\n    return this.diagramService.resolveText(item.title);\n  }\n\n  protected resolveDescription(item: AXMControlHierarchyDiagramItem): string {\n    return defaultTo(this.diagramService.resolveText(item.description ?? ''), '');\n  }\n\n  protected resolveTextColor(item: AXMControlHierarchyDiagramItem): string {\n    return this.diagramService.getContrastTextColor(item.color);\n  }\n\n  protected isHighlighted(item: AXMControlHierarchyDiagramItem): boolean {\n    const highlightId = this.highlightLevelId();\n    return !isEmpty(highlightId) && item.id === highlightId;\n  }\n\n  protected onViewTypeChanged(value: AXMControlHierarchyDiagramViewType | null): void {\n    if (!value) {\n      return;\n    }\n    this.selectedViewType.set(value);\n    this.viewTypeChange.emit(value);\n  }\n\n  //#endregion\n\n  //#region ----   Data Loading   ----\n\n  private async loadItems(): Promise<void> {\n    this.loading.set(true);\n    try {\n      const levels = await this.diagramService.loadActiveLevels();\n      this.loadedItems.set(levels);\n    } finally {\n      this.loading.set(false);\n    }\n  }\n\n  //#endregion\n}\n\n//#endregion\n","@if (showViewTypeSelector()) {\n  <div class=\"axm-control-hierarchy-diagram__header gap-4\">\n    <ax-lookup\n      class=\"axm-control-hierarchy-diagram__view-type\"\n      mode=\"drop-down-list\"\n      [dataSource]=\"viewTypeOptions()\"\n      [ngModel]=\"selectedViewType()\"\n      (ngModelChange)=\"onViewTypeChanged($event)\"\n      valueField=\"id\"\n      textField=\"title\"\n      [searchable]=\"false\"\n    />\n  </div>\n}\n\n@if (loading()) {\n  <div class=\"axm-control-hierarchy-diagram__loading\">\n    {{ '@general:terms.interface.loading' | translate | async }}\n  </div>\n} @else if (!displayItems().length) {\n  <div class=\"axm-control-hierarchy-diagram__empty\">\n    {{ '@general:terms.interface.no-data' | translate | async }}\n  </div>\n} @else {\n  <div\n    class=\"axm-control-hierarchy-diagram__body\"\n    [class.axm-control-hierarchy-diagram__body--offset-top]=\"!showViewTypeSelector()\"\n  >\n  @switch (selectedViewType()) {\n    @case ('horizontal') {\n      <div class=\"axm-control-hierarchy-diagram__horizontal flex flex-col gap-5\">\n        <div class=\"axm-control-hierarchy-diagram__effectiveness-bar gap-4\">\n          <span>{{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}</span>\n          <div class=\"axm-control-hierarchy-diagram__gradient\"></div>\n          <span>{{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}</span>\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__cards gap-5!\">\n          @for (item of displayItems(); track item.id; let index = $index) {\n            <article\n              class=\"axm-control-hierarchy-diagram__card\"\n              [class.axm-control-hierarchy-diagram__card--highlighted]=\"isHighlighted(item)\"\n              [style.border-top-color]=\"item.color\"\n            >\n              <header\n                class=\"axm-control-hierarchy-diagram__card-header px-4 py-3\"\n                [style.background]=\"item.color\"\n                [style.color]=\"resolveTextColor(item)\"\n              >\n                ({{ item.order }}) {{ resolveTitle(item) }}\n              </header>\n              <p class=\"axm-control-hierarchy-diagram__card-body p-4\">\n                {{ resolveDescription(item) }}\n              </p>\n            </article>\n          }\n        </div>\n      </div>\n    }\n    @case ('vertical') {\n      <div class=\"axm-control-hierarchy-diagram__vertical gap-5!\">\n        <div class=\"axm-control-hierarchy-diagram__vertical-label axm-control-hierarchy-diagram__vertical-label--top\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__pyramid gap-2!\">\n          @for (item of displayItems(); track item.id; let index = $index) {\n            <div\n              class=\"axm-control-hierarchy-diagram__pyramid-row\"\n              [class.axm-control-hierarchy-diagram__pyramid-row--highlighted]=\"isHighlighted(item)\"\n              [style.background]=\"item.color\"\n              [style.color]=\"resolveTextColor(item)\"\n              [style.width.%]=\"pyramidWidths()[index]\"\n            >\n              {{ resolveTitle(item) }}\n            </div>\n          }\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__vertical-label axm-control-hierarchy-diagram__vertical-label--bottom\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}\n        </div>\n      </div>\n    }\n    @case ('horizontal-chevron') {\n      <div class=\"axm-control-hierarchy-diagram__chevron gap-3!\">\n        <div class=\"axm-control-hierarchy-diagram__chevron-effective\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.most-effective' | translate | async }}\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__chevron-track\">\n          @for (item of displayItems(); track item.id) {\n            <div\n              class=\"axm-control-hierarchy-diagram__chevron-segment\"\n              [class.axm-control-hierarchy-diagram__chevron-segment--highlighted]=\"isHighlighted(item)\"\n              [style.background]=\"item.color\"\n              [style.color]=\"resolveTextColor(item)\"\n            >\n              {{ resolveTitle(item) }}\n            </div>\n          }\n        </div>\n        <div class=\"axm-control-hierarchy-diagram__chevron-effective axm-control-hierarchy-diagram__chevron-effective--end\">\n          {{ '@workplacesafety-management:control-measure-types.components.control-hierarchy-diagram.least-effective' | translate | async }}\n        </div>\n      </div>\n    }\n  }\n  </div>\n}\n"],"names":["i2"],"mappings":"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"}

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

@@ -22,7 +22,7 @@ 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-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 { P as PPE_ITEM_VIEWER_WIDGET_NAME } from './acorex-platform-module-workplacesafety-management-client-acorex-platform-module-workplacesafety-management-client-mzaaZ6T3.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';
@@ -1277,7 +1277,7 @@ class AXMSafetyPlanPreviewService {
     //#endregion
     //#region ----- Public API -----
     async open(options) {
-        const { AXMSafetyPlanPreviewModalComponent } = await import('./acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-C7IojUT9.mjs');
+        const { AXMSafetyPlanPreviewModalComponent } = await import('./acorex-platform-module-workplacesafety-management-client-safety-plan-preview-modal.component-6i0RkG3L.mjs');
         await this.popupService.open(AXMSafetyPlanPreviewModalComponent, {
             title: options.title,
             size: this.deviceService.isSmall() ? 'full' : 'lg',
@@ -2196,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-yxxC7i6A.mjs.map
+//# sourceMappingURL=acorex-platform-module-workplacesafety-management-client-index-LxP1eZLY.mjs.map