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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/fesm2022/acorex-platform-common.mjs +11 -0
  2. package/fesm2022/acorex-platform-common.mjs.map +1 -1
  3. package/fesm2022/acorex-platform-layout-components.mjs +2 -2
  4. package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
  5. package/fesm2022/acorex-platform-layout-entity.mjs +33 -1
  6. package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
  7. package/fesm2022/acorex-platform-layout-widget-core.mjs +1 -0
  8. package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
  9. package/fesm2022/acorex-platform-layout-widgets.mjs +226 -0
  10. package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
  11. package/fesm2022/acorex-platform-workflow.mjs +35 -3
  12. package/fesm2022/acorex-platform-workflow.mjs.map +1 -1
  13. package/package.json +1 -1
  14. package/types/acorex-platform-common.d.ts +11 -0
  15. package/types/acorex-platform-layout-entity.d.ts +42 -3
  16. package/types/acorex-platform-layout-widget-core.d.ts +1 -0
  17. package/types/acorex-platform-workflow.d.ts +31 -2
package/fesm2022/acorex-platform-layout-components.mjs CHANGED
@@ -4760,11 +4760,11 @@ class AXPLayoutSideDetailPanelComponent {
4760
4760
  return icon?.surfaceVars ?? {};
4761
4761
  }
4762
4762
  static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
4763
- 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 }); }
4763
+ 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 }); }
4764
4764
  }
4765
4765
  i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPLayoutSideDetailPanelComponent, decorators: [{
4766
4766
  type: Component,
4767
- 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"] }]
4767
+ 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"] }]
4768
4768
  }], 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 }] }] } });
4769
4769
 
4770
4770
  class AXPLogoComponent {