@acorex/platform 21.0.0-next.57 → 21.0.0-next.63

package/fesm2022/acorex-platform-layout-components.mjs

@@ -4760,11 +4760,11 @@ class AXPLayoutSideDetailPanelComponent {
         return icon?.surfaceVars ?? {};
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLayoutSideDetailPanelComponent, isStandalone: true, selector: "axp-layout-side-detail-panel", inputs: { multiSelectLabel: { classPropertyName: "multiSelectLabel", publicName: "multiSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsSectionTitle: { classPropertyName: "rowsSectionTitle", publicName: "rowsSectionTitle", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose" }, queries: [{ propertyName: "projectedSections", predicate: AXPLayoutSideDetailPanelSectionDirective, isSignal: true }], ngImport: i0, template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"ax-text-xs ax-opacity-80 ax-truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"ax-opacity-70 ax-text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"ax-opacity-70 ax-text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["axp-layout-side-detail-panel{display:flex;min-height:0px;flex-direction:column;border-radius:.5rem}@media(min-width:1024px){axp-layout-side-detail-panel{min-width:20rem}}axp-layout-side-detail-panel{border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column}axp-layout-side-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-layout-side-detail-panel>.__content{overflow-y:auto}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPLayoutSideDetailPanelComponent, isStandalone: true, selector: "axp-layout-side-detail-panel", inputs: { multiSelectLabel: { classPropertyName: "multiSelectLabel", publicName: "multiSelectLabel", isSignal: true, isRequired: false, transformFunction: null }, header: { classPropertyName: "header", publicName: "header", isSignal: true, isRequired: false, transformFunction: null }, sections: { classPropertyName: "sections", publicName: "sections", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, rowsSectionTitle: { classPropertyName: "rowsSectionTitle", publicName: "rowsSectionTitle", isSignal: true, isRequired: false, transformFunction: null }, noRowsMessage: { classPropertyName: "noRowsMessage", publicName: "noRowsMessage", isSignal: true, isRequired: false, transformFunction: null }, emptyState: { classPropertyName: "emptyState", publicName: "emptyState", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { panelClose: "panelClose" }, queries: [{ propertyName: "projectedSections", predicate: AXPLayoutSideDetailPanelSectionDirective, isSignal: true }], ngImport: i0, template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"ax-text-xs ax-opacity-80 ax-truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"ax-opacity-70 ax-text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"ax-opacity-70 ax-text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["axp-layout-side-detail-panel{display:flex;height:100%;flex-direction:column;border-radius:.5rem}@media(min-width:1024px){axp-layout-side-detail-panel{min-width:20rem}}axp-layout-side-detail-panel{border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column}axp-layout-side-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-layout-side-detail-panel>.__content{overflow-y:auto}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'axp-layout-side-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXFormatModule], template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"ax-text-xs ax-opacity-80 ax-truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"ax-opacity-70 ax-text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"ax-opacity-70 ax-text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["axp-layout-side-detail-panel{display:flex;min-height:0px;flex-direction:column;border-radius:.5rem}@media(min-width:1024px){axp-layout-side-detail-panel{min-width:20rem}}axp-layout-side-detail-panel{border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column}axp-layout-side-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-layout-side-detail-panel>.__content{overflow-y:auto}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"] }]
+            args: [{ selector: 'axp-layout-side-detail-panel', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXDecoratorModule, AXButtonModule, AXFormatModule], template: "@if (multiSelectLabel(); as multiLabel) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      <span class=\"axp-layout-side-detail-panel__icon\">\n        <i class=\"fa-fw fa-lg fa-solid\"></i>\n      </span>\n      <span>{{ multiLabel }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\"></div>\n} @else if (header(); as h) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (h.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--shortcut]=\"icon.shortcut\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n          @if (icon.shortcut) {\n            <i class=\"fa-light fa-up-right-from-square axp-layout-side-detail-panel__icon-arrow\" aria-hidden=\"true\"></i>\n          }\n        </span>\n      }\n      <div class=\"ax-flex ax-flex-col ax-min-w-0 ax-flex-1\">\n        <span class=\"__heading-primary\">{{ h.primaryTitle }}</span>\n        @if (h.secondaryTitle) {\n          <span class=\"ax-text-xs ax-opacity-80 ax-truncate\">{{ h.secondaryTitle }}</span>\n        }\n      </div>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    @if (sections().length > 0) {\n      @for (section of sections(); track sectionTrack(section, $index)) {\n        <div class=\"__section\">\n          @if (section.title) {\n            <div class=\"__title\">\n              <span>{{ section.title }}</span>\n            </div>\n          }\n          <div class=\"__content\">\n            @if (section.projectionKey; as projectionKey) {\n              @if (templateForProjectionKey(projectionKey); as tpl) {\n                <ng-container *ngTemplateOutlet=\"tpl\" />\n              }\n            } @else {\n              @for (row of section.rows ?? []; track row.label + '-' + $index) {\n                <div class=\"__row\">\n                  <div class=\"__title\">\n                    <span>{{ row.label }}</span>\n                  </div>\n                  <div class=\"__content\">\n                    @if (row.format) {\n                      <span>{{ row.value | format: row.format | async }}</span>\n                    } @else {\n                      <span>{{ row.value ?? '---' }}</span>\n                    }\n                  </div>\n                </div>\n              }\n            }\n          </div>\n        </div>\n      }\n    } @else if (rows().length > 0) {\n      <div class=\"__section\">\n        @if (rowsSectionTitle(); as sectionTitle) {\n          <div class=\"__title\">\n            <span>{{ sectionTitle }}</span>\n          </div>\n        }\n        <div class=\"__content\">\n          @for (row of rows(); track row.label + '-' + $index) {\n            <div class=\"__row\">\n              <div class=\"__title\">\n                <span>{{ row.label }}</span>\n              </div>\n              <div class=\"__content\">\n                @if (row.format) {\n                  <span>{{ row.value | format: row.format | async }}</span>\n                } @else {\n                  <span>{{ row.value ?? '---' }}</span>\n                }\n              </div>\n            </div>\n          }\n        </div>\n      </div>\n    } @else if (noRowsMessage(); as noRows) {\n      <div class=\"__section\">\n        <div class=\"__content\">\n          <span class=\"ax-opacity-70 ax-text-sm\">{{ noRows }}</span>\n        </div>\n      </div>\n    }\n  </div>\n} @else if (emptyState(); as empty) {\n  <div class=\"__header\">\n    <div class=\"__title\">\n      @if (empty.icon; as icon) {\n        <span\n          class=\"axp-layout-side-detail-panel__icon\"\n          [class.axp-layout-side-detail-panel__icon--themed]=\"!!surfaceStyle(icon)['--node-bg-color']\"\n          [style.--node-bg-color]=\"surfaceStyle(icon)['--node-bg-color']\"\n        >\n          <i [class]=\"icon.iconClass\"></i>\n        </span>\n      }\n      <span class=\"__heading-primary\">{{ empty.primaryTitle }}</span>\n    </div>\n    <ax-button [look]=\"'blank'\" class=\"ax-sm ax-rounded-full\" (onClick)=\"onClose()\">\n      <ax-icon icon=\"fa-solid fa-xmark\"></ax-icon>\n    </ax-button>\n  </div>\n  <div class=\"__content\">\n    <div class=\"__section\">\n      <div class=\"__content\">\n        <span class=\"ax-opacity-70 ax-text-sm\">{{ empty.message }}</span>\n      </div>\n    </div>\n  </div>\n}\n", styles: ["axp-layout-side-detail-panel{display:flex;height:100%;flex-direction:column;border-radius:.5rem}@media(min-width:1024px){axp-layout-side-detail-panel{min-width:20rem}}axp-layout-side-detail-panel{border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}axp-layout-side-detail-panel>.__header{display:flex;flex-shrink:0;flex-direction:row;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem}axp-layout-side-detail-panel>.__header>.__title{display:flex;width:90%;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__header>.__title .__heading-primary{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:start;font-weight:600;line-height:1.625}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon{position:relative;display:flex;flex:none;align-items:center;justify-content:center;background:transparent;border:none;box-shadow:none}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--shortcut .axp-layout-side-detail-panel__icon-arrow{position:absolute;bottom:-2px;right:-2px;font-size:.45em;opacity:.9}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon i{line-height:1}axp-layout-side-detail-panel>.__header>.__title .axp-layout-side-detail-panel__icon--themed i{color:rgba(var(--node-bg-color))}axp-layout-side-detail-panel>.__content{display:flex;min-height:0px;flex:1 1 0%;flex-direction:column}axp-layout-side-detail-panel>.__content>:not([hidden])~:not([hidden]){--tw-divide-y-reverse: 0;border-top-width:calc(1px * calc(1 - var(--tw-divide-y-reverse)));border-bottom-width:calc(1px * var(--tw-divide-y-reverse))}axp-layout-side-detail-panel>.__content{overflow-y:auto}axp-layout-side-detail-panel>.__content>.__section{display:flex;flex-direction:column;padding:1rem}axp-layout-side-detail-panel>.__content>.__section>.__title{margin-bottom:1rem;font-size:.875rem;line-height:1.25rem;font-weight:700}axp-layout-side-detail-panel>.__content>.__section>.__content{display:flex;flex-direction:column;gap:1rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row{display:flex;flex-direction:column;gap:.25rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__title{display:flex;font-size:.875rem;line-height:1.25rem;font-weight:600;opacity:.9}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content{display:flex;flex-direction:row;align-items:center;gap:.5rem}axp-layout-side-detail-panel>.__content>.__section>.__content>.__row>.__content span{opacity:.7}\n"] }]
         }], propDecorators: { multiSelectLabel: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiSelectLabel", required: false }] }], header: [{ type: i0.Input, args: [{ isSignal: true, alias: "header", required: false }] }], sections: [{ type: i0.Input, args: [{ isSignal: true, alias: "sections", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], rowsSectionTitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowsSectionTitle", required: false }] }], noRowsMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "noRowsMessage", required: false }] }], emptyState: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyState", required: false }] }], panelClose: [{ type: i0.Output, args: ["panelClose"] }], projectedSections: [{ type: i0.ContentChildren, args: [i0.forwardRef(() => AXPLayoutSideDetailPanelSectionDirective), { isSignal: true }] }] } });
 
 class AXPLogoComponent {
@@ -5601,6 +5601,183 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                     ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: { class: 'axp-menu-customizer' }, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n  <axp-state-message\n    mode=\"loading\"\n    icon=\"fa-light fa-spinner-third fa-spin\"\n    [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n  />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n  <axp-state-message\n    mode=\"error\"\n    icon=\"fa-light fa-circle-exclamation\"\n    [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n  >\n    <ax-button\n      slot=\"actions\"\n      [text]=\"'@general:actions.retry.title' | translate | async\"\n      look=\"outline\"\n      color=\"primary\"\n      (onClick)=\"loadMenuItems()\"\n    >\n      <i class=\"fa-light fa-rotate-left\"></i>\n    </ax-button>\n  </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n  <axp-state-message\n    mode=\"empty\"\n    icon=\"fa-light fa-bars\"\n    [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n    [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n  >\n    @if (allowAddItems()) {\n      <ax-button\n        slot=\"actions\"\n        [text]=\"i18nActions + '.add-root.title' | translate | async\"\n        look=\"solid\"\n        color=\"primary\"\n        (onClick)=\"addRootMenuItem()\"\n      >\n        <i class=\"fa-light fa-plus\"></i>\n      </ax-button>\n    }\n  </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n  <!-- Toolbar -->\n  @if (showToolbar()) {\n    <div class=\"axp-menu-customizer__toolbar\">\n      @if (allowAddItems()) {\n        <ax-button\n          [text]=\"i18nActions + '.add-root.title' | translate | async\"\n          look=\"solid\"\n          color=\"primary\"\n          (onClick)=\"addRootMenuItem()\"\n        >\n          <ax-prefix>\n            <i class=\"fa-light fa-plus\"></i>\n          </ax-prefix>\n        </ax-button>\n      }\n\n      <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n      <!-- \n      <ax-button\n        [text]=\"i18nActions + '.collapse.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"collapseAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-minus-square\"></i>\n        </ax-prefix>\n      </ax-button>\n\n      <ax-button\n        [text]=\"i18nActions + '.expand.title' | translate | async\"\n        look=\"outline\"\n        (onClick)=\"expandAll()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-plus-square\"></i>\n        </ax-prefix>\n      </ax-button> -->\n\n      <ax-button\n        [text]=\"i18nActions + '.reset.title' | translate | async\"\n        look=\"outline\"\n        color=\"danger\"\n        (onClick)=\"resetCustomizations()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-rotate-left\"></i>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  }\n\n  <!-- Menu Tree -->\n  <div class=\"axp-menu-customizer__container\">\n    <div class=\"axp-menu-customizer__tree\">\n      <ax-tree-view\n        [(datasource)]=\"treeNodes\"\n        look=\"default\"\n        [nodeTemplate]=\"itemTemplate\"\n        selectMode=\"none\"\n        [showIcons]=\"false\"\n        [showChildrenBadge]=\"false\"\n        [dragBehavior]=\"dragBehavior()\"\n        [dragArea]=\"dragArea()\"\n        (onBeforeDrop)=\"handleBeforeDrop($event)\"\n        (onOrderChange)=\"handleOrderChange($event)\"\n        (onMoveChange)=\"handleMoveChange($event)\"\n      />\n    </div>\n  </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n  @let nodeData = node['data'];\n  @let item = nodeData.menuItem;\n  @let metadata = nodeData.metadata;\n  @let isGroup = item.type === 'group';\n  @let isBreak = item.type === 'break';\n  @let isMenu = item.type === 'menu' || !item.type;\n  @let canAddChild = !item.path && isMenu && allowAddItems();\n  @let canToggleVisibility = item.name && metadata.isBuiltIn;\n  @let canDelete = item.name && metadata.isCustom;\n  @let i18nStates = '@platform-management:menu-management.states';\n\n  <div\n    class=\"axp-menu-customizer__item\"\n    [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n    [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n    [class.axp-menu-customizer__item--group]=\"isGroup\"\n  >\n    <!-- Icon (hidden for groups) -->\n    @if (item.icon && !isGroup) {\n      <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n    }\n\n    <!-- Content based on item type -->\n    @if (isGroup) {\n      <span class=\"axp-menu-customizer__item-group\">\n        <i class=\"fa-light fa-layer-group\"></i>\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (isBreak) {\n      <span class=\"axp-menu-customizer__item-divider\">\n        <i class=\"fa-light fa-minus\"></i>\n        {{ i18nStates + '.divider' | translate | async }}\n      </span>\n    } @else if (item.text) {\n      <span class=\"axp-menu-customizer__item-text\">\n        {{ item.text | translate | async }}\n      </span>\n    } @else if (item.path) {\n      <span class=\"axp-menu-customizer__item-path\">\n        <i class=\"fa-light fa-link\"></i>\n        {{ item.path }}\n      </span>\n    }\n\n    <!-- Menu Name/Key -->\n    @if (item.name) {\n      <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n    }\n\n    <!-- Status Badges -->\n    @if (metadata.isHidden) {\n      <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n    } @else if (metadata.isCustom) {\n      <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n    } @else if (metadata.isBuiltIn) {\n      <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n    }\n\n    <!-- Actions Dropdown -->\n    <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n      <ax-prefix>\n        <i class=\"fa-light fa-ellipsis-vertical\"></i>\n      </ax-prefix>\n\n      <ax-dropdown-panel #panel>\n        <ax-button-item-list>\n          <!-- Edit (only for items with names) -->\n          @if (item.name) {\n            <ax-button-item\n              [text]=\"('@general:actions.edit.title' | translate | async)!\"\n              (onClick)=\"onAction('edit', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-edit\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Show/Hide (only for built-in items with names) -->\n          @if (canToggleVisibility) {\n            @if (metadata.isHidden) {\n              <ax-button-item\n                [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n                (onClick)=\"onAction('show', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            } @else {\n              <ax-button-item\n                [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n                (onClick)=\"onAction('hide', nodeData); panel.close()\"\n              >\n                <ax-prefix>\n                  <i class=\"fa-light fa-eye-slash\"></i>\n                </ax-prefix>\n              </ax-button-item>\n            }\n          }\n\n          <!-- Add Child -->\n          @if (canAddChild) {\n            <ax-button-item\n              [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n              (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-plus\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Delete (only for custom items with names) -->\n          @if (canDelete) {\n            <ax-divider />\n            <ax-button-item\n              color=\"danger\"\n              [text]=\"('@general:actions.delete.title' | translate | async)!\"\n              (onClick)=\"onAction('delete', nodeData); panel.close()\"\n            >\n              <ax-prefix>\n                <i class=\"fa-light fa-trash\"></i>\n              </ax-prefix>\n            </ax-button-item>\n          }\n\n          <!-- Info message for items without names -->\n          @if (!item.name) {\n            <ax-divider />\n            <div class=\"ax-p-2 ax-text-xs ax-text-neutral-500 ax-italic\">\n              {{ i18nBase + '.messages.info.no-name' | translate | async }}\n            </div>\n          }\n        </ax-button-item-list>\n      </ax-dropdown-panel>\n    </ax-button>\n  </div>\n</ng-template>\n", styles: [".axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer__toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:1rem;border-bottom-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));flex-shrink:0}.axp-menu-customizer__toolbar-spacer{min-width:1rem;flex:1 1 0%}.axp-menu-customizer__container{display:flex;flex-direction:column;gap:1rem;padding:1rem;min-height:0px;flex:1 1 0%;overflow:auto}.axp-menu-customizer__tree{display:flex;flex-direction:column;gap:.5rem}.axp-menu-customizer__tree ax-tree-view{flex:1 1 0%}.axp-menu-customizer__item{display:flex;flex:1 1 0%;align-items:center;gap:.75rem;border-radius:.375rem;padding:.5rem .75rem;border-width:1px;border-style:solid;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(255 255 255 / var(--tw-bg-opacity, 1));transition-property:color,background-color,border-color,text-decoration-color,fill,stroke;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover{--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item--hidden{opacity:.5}.axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer__item--custom{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-primary-200),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-primary-50),.3)}.axp-menu-customizer__item--group{padding-top:.75rem;padding-bottom:.75rem;--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1))}.axp-menu-customizer__item-icon{display:flex;align-items:center;justify-content:center;height:1.5rem;width:1.5rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-600),var(--tw-text-opacity, 1));flex-shrink:0}.axp-menu-customizer__item-text{min-width:0px;flex:1 1 0%;font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-menu-customizer__item-group{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;text-transform:uppercase;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));letter-spacing:.025em}.axp-menu-customizer__item-group i{--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-divider,.axp-menu-customizer__item-path{display:flex;flex:1 1 0%;align-items:center;gap:.5rem;font-size:.75rem;line-height:1rem;font-style:italic;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));min-width:0px}.axp-menu-customizer__item-divider i,.axp-menu-customizer__item-path i{flex-shrink:0;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-menu-customizer__item-name{display:inline-flex;align-items:center;border-radius:.25rem;padding:.25rem .5rem;font-size:.75rem;line-height:1rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1));font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-weight:400;border-width:1px;--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));-webkit-user-select:all;user-select:all;max-width:12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex-shrink:0}.axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:.6;transition-property:opacity;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s;animation-duration:.15s}.axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:1}\n"] }]
         }], propDecorators: { scopeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "scopeKey", required: true }] }], showToolbar: [{ type: i0.Input, args: [{ isSignal: true, alias: "showToolbar", required: false }] }], allowAddItems: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowAddItems", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], saved: [{ type: i0.Output, args: ["saved"] }], cancelled: [{ type: i0.Output, args: ["cancelled"] }], tree: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXTreeViewComponent), { isSignal: true }] }] } });
 
+//#region ----   Imports   ----
+//#endregion
+//#region ----   Component   ----
+/**
+ * Read-only outcome results list (label/value rows with optional section grouping).
+ */
+class AXPOutcomeResultsViewerComponent {
+    constructor() {
+        //#region ----   Inputs   ----
+        this.model = input(null, ...(ngDevMode ? [{ debugName: "model" }] : /* istanbul ignore next */ []));
+        /** Optional heading above the list (overrides {@link AXPOutcomeResultsViewModel.title}). */
+        this.title = input(undefined, ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
+        /** Shown when there are no rows (overrides {@link AXPOutcomeResultsViewModel.emptyMessage}). */
+        this.emptyMessage = input(undefined, ...(ngDevMode ? [{ debugName: "emptyMessage" }] : /* istanbul ignore next */ []));
+        this.resolvedTitle = computed(() => this.title() ?? this.model()?.title, ...(ngDevMode ? [{ debugName: "resolvedTitle" }] : /* istanbul ignore next */ []));
+        this.resolvedEmptyMessage = computed(() => this.emptyMessage() ?? this.model()?.emptyMessage, ...(ngDevMode ? [{ debugName: "resolvedEmptyMessage" }] : /* istanbul ignore next */ []));
+        //#endregion
+        //#region ----   Computed   ----
+        this.sections = computed(() => {
+            const sections = this.model()?.sections;
+            return Array.isArray(sections) ? sections : [];
+        }, ...(ngDevMode ? [{ debugName: "sections" }] : /* istanbul ignore next */ []));
+        this.flatRows = computed(() => {
+            const rows = this.model()?.rows;
+            if (Array.isArray(rows) && rows.length > 0) {
+                return rows;
+            }
+            const groups = this.sections();
+            if (groups.length > 0) {
+                return groups.flatMap((g) => g.items);
+            }
+            return [];
+        }, ...(ngDevMode ? [{ debugName: "flatRows" }] : /* istanbul ignore next */ []));
+        this.showGroupedSections = computed(() => this.sections().length > 1, ...(ngDevMode ? [{ debugName: "showGroupedSections" }] : /* istanbul ignore next */ []));
+        this.hasRows = computed(() => this.flatRows().length > 0, ...(ngDevMode ? [{ debugName: "hasRows" }] : /* istanbul ignore next */ []));
+    }
+    //#endregion
+    //#region ----   Helpers   ----
+    formatValue(value) {
+        if (value == null || value === '')
+            return '—';
+        if (typeof value === 'string')
+            return value;
+        if (typeof value === 'number' || typeof value === 'boolean')
+            return String(value);
+        if (Array.isArray(value)) {
+            return value.map((a) => (typeof a === 'object' ? JSON.stringify(a) : String(a))).join(', ');
+        }
+        if (typeof value === 'object')
+            return JSON.stringify(value);
+        return String(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPOutcomeResultsViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPOutcomeResultsViewerComponent, isStandalone: true, selector: "axp-outcome-results-viewer", inputs: { model: { classPropertyName: "model", publicName: "model", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "axp-outcome-results-viewer ax-block" }, ngImport: i0, template: `
+    <div
+      class="axp-outcome-results-viewer __root ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-8 ax-min-h-[200px] ax-text-on-surface"
+    >
+      @if (hasRows()) {
+        <div class="ax-max-w-2xl ax-w-full">
+          @if (resolvedTitle(); as sectionTitle) {
+            <h3 class="ax-text-base ax-font-semibold ax-mb-3 ax-text-on-surface">{{ sectionTitle }}</h3>
+          }
+          @if (showGroupedSections()) {
+            <div class="ax-flex ax-flex-col ax-gap-5">
+              @for (group of sections(); track group.trackKey) {
+                <section class="ax-flex ax-flex-col ax-gap-2">
+                  @if (group.title) {
+                    <h4 class="ax-text-sm ax-font-semibold ax-text-on-surface">{{ group.title }}</h4>
+                  }
+                  @if (group.description) {
+                    <p class="ax-text-sm __text-muted">{{ group.description }}</p>
+                  }
+                  <ng-container
+                    *ngTemplateOutlet="outcomeList; context: { $implicit: group.items }"
+                  ></ng-container>
+                </section>
+              }
+            </div>
+          } @else {
+            <ng-container *ngTemplateOutlet="outcomeList; context: { $implicit: flatRows() }"></ng-container>
+          }
+        </div>
+      } @else if (resolvedEmptyMessage(); as message) {
+        <p class="ax-text-sm __text-muted">{{ message }}</p>
+      }
+    </div>
+
+    <ng-template #outcomeList let-items>
+      <ul
+        class="__list ax-list-none ax-p-0 ax-m-0 ax-flex ax-flex-col ax-gap-1 ax-rounded-lg ax-border ax-overflow-hidden"
+      >
+        @for (row of items; track row.key) {
+          <li class="__row ax-flex ax-justify-between ax-gap-4 ax-py-3 ax-px-4 ax-border-b last:ax-border-b-0">
+            <span class="ax-text-sm ax-font-medium __text-muted">{{ row.label }}</span>
+            <span
+              class="ax-text-sm ax-text-right ax-break-all"
+              [class]="row.valuePresentation.classes"
+              [style.color]="row.valuePresentation.color"
+              [style.background-color]="row.valuePresentation.backgroundColor"
+              [style.border-color]="row.valuePresentation.borderColor"
+            >
+              @if (row.iconClass) {
+                <i [class]="row.iconClass"></i>
+              }
+              {{ formatValue(row.value) }}
+            </span>
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, isInline: true, styles: [".axp-outcome-results-viewer .__text-muted{color:rgb(var(--ax-sys-color-on-surface-variant))}.axp-outcome-results-viewer .__list{background-color:rgb(var(--ax-sys-color-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-outcome-results-viewer .__row{border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-outcome-results-viewer .__outcome-value{display:inline-flex;align-items:center;gap:.5rem;border-radius:.375rem;padding:.125rem .5rem;border-width:1px;border-style:solid;max-width:min(100%,28rem)}.axp-outcome-results-viewer .__outcome-value.__tone-default{color:rgb(var(--ax-sys-color-on-surface));background-color:rgb(var(--ax-sys-color-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-outcome-results-viewer .__outcome-value.__emphasis-medium{font-weight:500}.axp-outcome-results-viewer .__outcome-value.__emphasis-bold{font-weight:600}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPOutcomeResultsViewerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'axp-outcome-results-viewer', template: `
+    <div
+      class="axp-outcome-results-viewer __root ax-flex ax-flex-col ax-items-center ax-justify-center ax-p-8 ax-min-h-[200px] ax-text-on-surface"
+    >
+      @if (hasRows()) {
+        <div class="ax-max-w-2xl ax-w-full">
+          @if (resolvedTitle(); as sectionTitle) {
+            <h3 class="ax-text-base ax-font-semibold ax-mb-3 ax-text-on-surface">{{ sectionTitle }}</h3>
+          }
+          @if (showGroupedSections()) {
+            <div class="ax-flex ax-flex-col ax-gap-5">
+              @for (group of sections(); track group.trackKey) {
+                <section class="ax-flex ax-flex-col ax-gap-2">
+                  @if (group.title) {
+                    <h4 class="ax-text-sm ax-font-semibold ax-text-on-surface">{{ group.title }}</h4>
+                  }
+                  @if (group.description) {
+                    <p class="ax-text-sm __text-muted">{{ group.description }}</p>
+                  }
+                  <ng-container
+                    *ngTemplateOutlet="outcomeList; context: { $implicit: group.items }"
+                  ></ng-container>
+                </section>
+              }
+            </div>
+          } @else {
+            <ng-container *ngTemplateOutlet="outcomeList; context: { $implicit: flatRows() }"></ng-container>
+          }
+        </div>
+      } @else if (resolvedEmptyMessage(); as message) {
+        <p class="ax-text-sm __text-muted">{{ message }}</p>
+      }
+    </div>
+
+    <ng-template #outcomeList let-items>
+      <ul
+        class="__list ax-list-none ax-p-0 ax-m-0 ax-flex ax-flex-col ax-gap-1 ax-rounded-lg ax-border ax-overflow-hidden"
+      >
+        @for (row of items; track row.key) {
+          <li class="__row ax-flex ax-justify-between ax-gap-4 ax-py-3 ax-px-4 ax-border-b last:ax-border-b-0">
+            <span class="ax-text-sm ax-font-medium __text-muted">{{ row.label }}</span>
+            <span
+              class="ax-text-sm ax-text-right ax-break-all"
+              [class]="row.valuePresentation.classes"
+              [style.color]="row.valuePresentation.color"
+              [style.background-color]="row.valuePresentation.backgroundColor"
+              [style.border-color]="row.valuePresentation.borderColor"
+            >
+              @if (row.iconClass) {
+                <i [class]="row.iconClass"></i>
+              }
+              {{ formatValue(row.value) }}
+            </span>
+          </li>
+        }
+      </ul>
+    </ng-template>
+  `, changeDetection: ChangeDetectionStrategy.OnPush, imports: [NgTemplateOutlet], encapsulation: ViewEncapsulation.None, host: { class: 'axp-outcome-results-viewer ax-block' }, styles: [".axp-outcome-results-viewer .__text-muted{color:rgb(var(--ax-sys-color-on-surface-variant))}.axp-outcome-results-viewer .__list{background-color:rgb(var(--ax-sys-color-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-outcome-results-viewer .__row{border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-outcome-results-viewer .__outcome-value{display:inline-flex;align-items:center;gap:.5rem;border-radius:.375rem;padding:.125rem .5rem;border-width:1px;border-style:solid;max-width:min(100%,28rem)}.axp-outcome-results-viewer .__outcome-value.__tone-default{color:rgb(var(--ax-sys-color-on-surface));background-color:rgb(var(--ax-sys-color-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-outcome-results-viewer .__outcome-value.__emphasis-medium{font-weight:500}.axp-outcome-results-viewer .__outcome-value.__emphasis-bold{font-weight:600}\n"] }]
+        }], propDecorators: { model: [{ type: i0.Input, args: [{ isSignal: true, alias: "model", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }] } });
+
+//#region ----   Outcome results view model   ----
+//#endregion
+
 //#region ----   Injection Token   ----
 /**
  * Injection token for page component providers
@@ -5740,7 +5917,7 @@ class AXPRepeaterRowsLayoutComponent {
         this.removeClick.emit(index);
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRepeaterRowsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRepeaterRowsLayoutComponent, isStandalone: true, selector: "axp-repeater-rows-layout", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasControls: { classPropertyName: "hasControls", publicName: "hasControls", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: true, transformFunction: null }, addItemLabelKey: { classPropertyName: "addItemLabelKey", publicName: "addItemLabelKey", isSignal: true, isRequired: false, transformFunction: null }, emptyTitleKey: { classPropertyName: "emptyTitleKey", publicName: "emptyTitleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyDescriptionKey: { classPropertyName: "emptyDescriptionKey", publicName: "emptyDescriptionKey", isSignal: true, isRequired: false, transformFunction: null }, addFirstItemLabelKey: { classPropertyName: "addFirstItemLabelKey", publicName: "addFirstItemLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", removeClick: "removeClick", drop: "drop" }, ngImport: i0, template: "<div axDropList dropListOrientation=\"vertical\" (dropListDropped)=\"onDrop($event)\">\n  @for (i of rowIndices(); track i) {\n  <div axDrag [dragDisabled]=\"!allowReorder()\" [class]=\"rowRowClass()\">\n    @if (allowReorder()) {\n    <div>\n      <ax-icon class=\"fa-solid fa-grip-vertical\" axDragHandle></ax-icon>\n    </div>\n    }\n\n    <div class=\"ax-min-w-0\">\n      <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ index: i }\"></ng-container>\n    </div>\n\n    @if (hasControls()) {\n    <div class=\"ax-justify-self-end ax-self-start\">\n      <ax-button [disabled]=\"disabled()\" look=\"twotone\" color=\"danger\" (onClick)=\"onRemoveClick(i)\">\n        <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n      </ax-button>\n    </div>\n    }\n  </div>\n  } @empty {\n  <axp-state-message mode=\"empty\" [look]=\"'minimal'\" [title]=\"emptyTitleKey()\" [description]=\"emptyDescriptionKey()\">\n    <div slot=\"actions\" class=\"ax-sm\">\n      <ax-button [text]=\"(addFirstItemLabelKey() | translate | async)!\" look=\"twotone\" color=\"primary\"\n        [disabled]=\"disabled()\" (onClick)=\"onAddClick()\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </axp-state-message>\n  }\n\n  @if (count() > 0) {\n  <div class=\"ax-flex ax-justify-end\">\n    <ax-button [text]=\"(addItemLabelKey() | translate | async)!\" look=\"twotone\" [disabled]=\"disabled()\"\n      (onClick)=\"onAddClick()\">\n      <ax-prefix>\n        <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n</div>", styles: [":host{display:block;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRepeaterRowsLayoutComponent, isStandalone: true, selector: "axp-repeater-rows-layout", inputs: { count: { classPropertyName: "count", publicName: "count", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, hasControls: { classPropertyName: "hasControls", publicName: "hasControls", isSignal: true, isRequired: false, transformFunction: null }, allowReorder: { classPropertyName: "allowReorder", publicName: "allowReorder", isSignal: true, isRequired: false, transformFunction: null }, rowTemplate: { classPropertyName: "rowTemplate", publicName: "rowTemplate", isSignal: true, isRequired: true, transformFunction: null }, addItemLabelKey: { classPropertyName: "addItemLabelKey", publicName: "addItemLabelKey", isSignal: true, isRequired: false, transformFunction: null }, emptyTitleKey: { classPropertyName: "emptyTitleKey", publicName: "emptyTitleKey", isSignal: true, isRequired: false, transformFunction: null }, emptyDescriptionKey: { classPropertyName: "emptyDescriptionKey", publicName: "emptyDescriptionKey", isSignal: true, isRequired: false, transformFunction: null }, addFirstItemLabelKey: { classPropertyName: "addFirstItemLabelKey", publicName: "addFirstItemLabelKey", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { addClick: "addClick", removeClick: "removeClick", drop: "drop" }, ngImport: i0, template: "<div axDropList dropListOrientation=\"vertical\" (dropListDropped)=\"onDrop($event)\">\n  @for (i of rowIndices(); track i) {\n  <div axDrag [dragDisabled]=\"!allowReorder()\" [class]=\"rowRowClass()\">\n    @if (allowReorder()) {\n    <div>\n      <ax-icon class=\"fa-solid fa-grip-vertical\" axDragHandle></ax-icon>\n    </div>\n    }\n\n    <div class=\"ax-min-w-0 ax-w-full\">\n      <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ index: i }\"></ng-container>\n    </div>\n\n    @if (hasControls()) {\n    <div class=\"ax-justify-self-end ax-self-center\">\n      <ax-button [disabled]=\"disabled()\" look=\"twotone\" color=\"danger\" (onClick)=\"onRemoveClick(i)\">\n        <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n      </ax-button>\n    </div>\n    }\n  </div>\n  } @empty {\n  <axp-state-message mode=\"empty\" [look]=\"'minimal'\" [title]=\"emptyTitleKey()\" [description]=\"emptyDescriptionKey()\">\n    <div slot=\"actions\" class=\"ax-sm\">\n      <ax-button [text]=\"(addFirstItemLabelKey() | translate | async)!\" look=\"twotone\" color=\"primary\"\n        [disabled]=\"disabled()\" (onClick)=\"onAddClick()\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </axp-state-message>\n  }\n\n  @if (count() > 0) {\n  <div class=\"ax-flex ax-justify-end\">\n    <ax-button [text]=\"(addItemLabelKey() | translate | async)!\" look=\"twotone\" [disabled]=\"disabled()\"\n      (onClick)=\"onAddClick()\">\n      <ax-prefix>\n        <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n</div>", styles: [":host{display:block;min-width:0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRepeaterRowsLayoutComponent, decorators: [{
             type: Component,
@@ -5754,7 +5931,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXDragHandleDirective,
                         AXDropListDirective,
                         AXDragDirective,
-                    ], template: "<div axDropList dropListOrientation=\"vertical\" (dropListDropped)=\"onDrop($event)\">\n  @for (i of rowIndices(); track i) {\n  <div axDrag [dragDisabled]=\"!allowReorder()\" [class]=\"rowRowClass()\">\n    @if (allowReorder()) {\n    <div>\n      <ax-icon class=\"fa-solid fa-grip-vertical\" axDragHandle></ax-icon>\n    </div>\n    }\n\n    <div class=\"ax-min-w-0\">\n      <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ index: i }\"></ng-container>\n    </div>\n\n    @if (hasControls()) {\n    <div class=\"ax-justify-self-end ax-self-start\">\n      <ax-button [disabled]=\"disabled()\" look=\"twotone\" color=\"danger\" (onClick)=\"onRemoveClick(i)\">\n        <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n      </ax-button>\n    </div>\n    }\n  </div>\n  } @empty {\n  <axp-state-message mode=\"empty\" [look]=\"'minimal'\" [title]=\"emptyTitleKey()\" [description]=\"emptyDescriptionKey()\">\n    <div slot=\"actions\" class=\"ax-sm\">\n      <ax-button [text]=\"(addFirstItemLabelKey() | translate | async)!\" look=\"twotone\" color=\"primary\"\n        [disabled]=\"disabled()\" (onClick)=\"onAddClick()\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </axp-state-message>\n  }\n\n  @if (count() > 0) {\n  <div class=\"ax-flex ax-justify-end\">\n    <ax-button [text]=\"(addItemLabelKey() | translate | async)!\" look=\"twotone\" [disabled]=\"disabled()\"\n      (onClick)=\"onAddClick()\">\n      <ax-prefix>\n        <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n</div>", styles: [":host{display:block;min-width:0}\n"] }]
+                    ], template: "<div axDropList dropListOrientation=\"vertical\" (dropListDropped)=\"onDrop($event)\">\n  @for (i of rowIndices(); track i) {\n  <div axDrag [dragDisabled]=\"!allowReorder()\" [class]=\"rowRowClass()\">\n    @if (allowReorder()) {\n    <div>\n      <ax-icon class=\"fa-solid fa-grip-vertical\" axDragHandle></ax-icon>\n    </div>\n    }\n\n    <div class=\"ax-min-w-0 ax-w-full\">\n      <ng-container [ngTemplateOutlet]=\"rowTemplate()\" [ngTemplateOutletContext]=\"{ index: i }\"></ng-container>\n    </div>\n\n    @if (hasControls()) {\n    <div class=\"ax-justify-self-end ax-self-center\">\n      <ax-button [disabled]=\"disabled()\" look=\"twotone\" color=\"danger\" (onClick)=\"onRemoveClick(i)\">\n        <ax-icon icon=\"fa-regular fa-xmark\"></ax-icon>\n      </ax-button>\n    </div>\n    }\n  </div>\n  } @empty {\n  <axp-state-message mode=\"empty\" [look]=\"'minimal'\" [title]=\"emptyTitleKey()\" [description]=\"emptyDescriptionKey()\">\n    <div slot=\"actions\" class=\"ax-sm\">\n      <ax-button [text]=\"(addFirstItemLabelKey() | translate | async)!\" look=\"twotone\" color=\"primary\"\n        [disabled]=\"disabled()\" (onClick)=\"onAddClick()\">\n        <ax-prefix>\n          <ax-icon class=\"fa-light fa-add\"></ax-icon>\n        </ax-prefix>\n      </ax-button>\n    </div>\n  </axp-state-message>\n  }\n\n  @if (count() > 0) {\n  <div class=\"ax-flex ax-justify-end\">\n    <ax-button [text]=\"(addItemLabelKey() | translate | async)!\" look=\"twotone\" [disabled]=\"disabled()\"\n      (onClick)=\"onAddClick()\">\n      <ax-prefix>\n        <ax-icon class=\"fa-solid fa-add\"></ax-icon>\n      </ax-prefix>\n    </ax-button>\n  </div>\n  }\n</div>", styles: [":host{display:block;min-width:0}\n"] }]
         }], propDecorators: { count: [{ type: i0.Input, args: [{ isSignal: true, alias: "count", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], hasControls: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasControls", required: false }] }], allowReorder: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowReorder", required: false }] }], rowTemplate: [{ type: i0.Input, args: [{ isSignal: true, alias: "rowTemplate", required: true }] }], addItemLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "addItemLabelKey", required: false }] }], emptyTitleKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyTitleKey", required: false }] }], emptyDescriptionKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyDescriptionKey", required: false }] }], addFirstItemLabelKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "addFirstItemLabelKey", required: false }] }], addClick: [{ type: i0.Output, args: ["addClick"] }], removeClick: [{ type: i0.Output, args: ["removeClick"] }], drop: [{ type: i0.Output, args: ["drop"] }] } });
 
 //#region ---- Imports ----
@@ -9002,5 +9179,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLogoComponent, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
+export { AXPActivityLogComponent, AXPAvatarComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPConditionBuilderComponent, AXPConditionBuilderConditionComponent, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPExpressionFieldDefinitions, AXPImageEditorPopupComponent, AXPImageEditorService, AXPItemConfiguratorComponent, AXPLayoutFloatingZoomBarComponent, AXPLayoutSideDetailPanelComponent, AXPLayoutSideDetailPanelSectionDirective, AXPLogoComponent, AXPMarkdownTemplateDirective, AXPMarkdownViewerComponent, AXPMenuBadgeHelper, AXPMenuCustomizerComponent, AXPMenuCustomizerService, AXPOutcomeResultsViewerComponent, AXPPageComponentRegistryService, AXPPreloadFiltersComponent, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPRepeaterRowsLayoutComponent, AXPResourceAppointmentBoardProvider, AXPResourceAppointmentComponent, AXPResourceAppointmentService, AXPSectionItemsBuilderComponent, AXPSpreadsheetComponent, AXPStandardSectionItemsBuilderComponent, AXPStateMessageComponent, AXPStopwatchComponent, AXPTableColumnsEditorComponent, AXPTableColumnsEditorPopupComponent, AXPTableColumnsEditorService, AXPTableDataEditorComponent, AXPTableDataEditorPopupComponent, AXPTableDataEditorService, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXPRESSION_LOGIC_DEFINITIONS, AXP_EXPRESSION_OPERATION_DEFINITIONS, AXP_MENU_CUSTOMIZER_SERVICE, AXP_PAGE_COMPONENT_PROVIDER, AXP_RESOURCE_APPOINTMENT_PROVIDER, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, STANDARD_SECTION_ITEMS_SECTION_TABS, buildPropertyViewerInitialContextFromProperties, buildPropertyViewerTabsFromProperties, buildTableColumnsEditorLayout, getFieldDefinitions, getLogicDefinition, getOperationDefinition, isPropertyBindingExpressionFormValue, preparePropertyForViewer, preparePropertyViewerTabs, registerFieldDefinitions, withValidationsOnEditorNode };
 //# sourceMappingURL=acorex-platform-layout-components.mjs.map