@acorex/platform 21.0.0-next.85 → 21.0.0-next.89
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.
- package/fesm2022/acorex-platform-auth.mjs +9 -3
- package/fesm2022/acorex-platform-auth.mjs.map +1 -1
- package/fesm2022/{acorex-platform-common-common-settings.provider-Ytey9uhY.mjs → acorex-platform-common-common-settings.provider-DilV4dql.mjs} +16 -3
- package/fesm2022/acorex-platform-common-common-settings.provider-DilV4dql.mjs.map +1 -0
- package/fesm2022/acorex-platform-common.mjs +3426 -2488
- package/fesm2022/acorex-platform-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-contracts.mjs +1160 -9
- package/fesm2022/acorex-platform-contracts.mjs.map +1 -1
- package/fesm2022/acorex-platform-core.mjs +826 -152
- package/fesm2022/acorex-platform-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-domain-contracts.mjs +58 -0
- package/fesm2022/acorex-platform-domain-contracts.mjs.map +1 -0
- package/fesm2022/acorex-platform-domain.mjs +2 -50
- package/fesm2022/acorex-platform-domain.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-builder.mjs +98 -189
- package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
- package/fesm2022/{acorex-platform-layout-components-binding-expression-editor-popup.component-CXEdvDTf.mjs → acorex-platform-layout-components-binding-expression-editor-popup.component-RttFwaw9.mjs} +17 -4
- package/fesm2022/acorex-platform-layout-components-binding-expression-editor-popup.component-RttFwaw9.mjs.map +1 -0
- package/fesm2022/acorex-platform-layout-components.mjs +181 -46
- package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-designer.mjs +7 -6
- package/fesm2022/acorex-platform-layout-designer.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-entity-attachments-page.component-CwG6n_Yb.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-entity-contracts.mjs +1208 -0
- package/fesm2022/acorex-platform-layout-entity-contracts.mjs.map +1 -0
- package/fesm2022/acorex-platform-layout-entity-file-list-popup.component--IeMZLIr.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-entity.mjs +1080 -889
- package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-views.mjs +1150 -247
- package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-widget-core.mjs +388 -207
- package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-CFyfix31.mjs +513 -0
- package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-CFyfix31.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-edit-popup.component-DjpZU6gz.mjs → acorex-platform-layout-widgets-tabular-data-edit-popup.component-CZc2zFlg.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-CZc2zFlg.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-view-popup.component-gX-3Kx9I.mjs → acorex-platform-layout-widgets-tabular-data-view-popup.component-XWRUVoL4.mjs} +2 -2
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-view-popup.component-gX-3Kx9I.mjs.map → acorex-platform-layout-widgets-tabular-data-view-popup.component-XWRUVoL4.mjs.map} +1 -1
- package/fesm2022/acorex-platform-layout-widgets.mjs +1541 -394
- package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
- package/fesm2022/acorex-platform-runtime.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-default-entity-master-single-view.component-Br9p5aXT.mjs → acorex-platform-themes-default-entity-master-single-view.component-DrUwqKKA.mjs} +2 -3
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-DrUwqKKA.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default.mjs +956 -115
- package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs → acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs} +50 -3
- package/fesm2022/acorex-platform-themes-shared-settings.provider-UyKdkeyk.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-shared.mjs +104 -24
- package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
- package/fesm2022/acorex-platform-workflow.mjs +6 -8
- package/fesm2022/acorex-platform-workflow.mjs.map +1 -1
- package/package.json +9 -5
- package/types/acorex-platform-auth.d.ts +3 -1
- package/types/acorex-platform-common.d.ts +655 -1268
- package/types/acorex-platform-contracts.d.ts +1791 -260
- package/types/acorex-platform-core.d.ts +2302 -2800
- package/types/acorex-platform-domain-contracts.d.ts +416 -0
- package/types/acorex-platform-domain.d.ts +4 -415
- package/types/acorex-platform-layout-builder.d.ts +11 -20
- package/types/acorex-platform-layout-components.d.ts +29 -5
- package/types/acorex-platform-layout-designer.d.ts +2 -1
- package/types/acorex-platform-layout-entity-contracts.d.ts +889 -0
- package/types/acorex-platform-layout-entity.d.ts +143 -275
- package/types/acorex-platform-layout-views.d.ts +147 -31
- package/types/acorex-platform-layout-widget-core.d.ts +74 -14
- package/types/acorex-platform-layout-widgets.d.ts +136 -38
- package/types/acorex-platform-runtime.d.ts +1 -1
- package/types/acorex-platform-themes-default.d.ts +227 -73
- package/types/acorex-platform-themes-shared.d.ts +4 -0
- package/types/acorex-platform-workflow.d.ts +5 -18
- package/fesm2022/acorex-platform-common-common-settings.provider-Ytey9uhY.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-components-binding-expression-editor-popup.component-CXEdvDTf.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-J0zcGKBX.mjs +0 -116
- package/fesm2022/acorex-platform-layout-widgets-repeater-widget-column.component-J0zcGKBX.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-DjpZU6gz.mjs.map +0 -1
- package/fesm2022/acorex-platform-native.mjs +0 -155
- package/fesm2022/acorex-platform-native.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-Br9p5aXT.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-shared-settings.provider-BjuzSe0T.mjs.map +0 -1
- package/native/README.md +0 -4
- package/types/acorex-platform-native.d.ts +0 -28
|
@@ -10,7 +10,7 @@ import * as i2 from '@acorex/components/skeleton';
|
|
|
10
10
|
import { AXSkeletonModule } from '@acorex/components/skeleton';
|
|
11
11
|
import * as i4 from '@acorex/core/format';
|
|
12
12
|
import { AXFormatModule, AXFormatService } from '@acorex/core/format';
|
|
13
|
-
import { getSystemActions, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPKeyboardShortcutPriority, compareMultiLanguageStrings, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig, containsHtmlMarkup, isFormValueEqual,
|
|
13
|
+
import { getSystemActions, setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPKeyboardShortcutPriority, compareMultiLanguageStrings, AXPDeviceService, AXPImageUrlLogoConfig, AXPComponentLogoConfig, AXPIconLogoConfig, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml } from '@acorex/platform/core';
|
|
14
14
|
import { AXPWorkflowService } from '@acorex/platform/workflow';
|
|
15
15
|
import { AXPLayoutRendererComponent, AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
|
|
16
16
|
import * as i1 from '@angular/common';
|
|
@@ -49,7 +49,7 @@ import { AXCheckBoxModule } from '@acorex/components/check-box';
|
|
|
49
49
|
import * as i1$5 from '@acorex/components/label';
|
|
50
50
|
import { AXLabelModule } from '@acorex/components/label';
|
|
51
51
|
import * as i3$3 from '@acorex/platform/layout/widget-core';
|
|
52
|
-
import { AXPWidgetCoreModule, AXPWidgetRegistryService,
|
|
52
|
+
import { AXPWidgetCoreModule, AXPWidgetRegistryService, createBooleanProperty, AXPWidgetGroupEnum } from '@acorex/platform/layout/widget-core';
|
|
53
53
|
import * as i4$1 from '@acorex/components/data-table';
|
|
54
54
|
import { AXDataTableModule } from '@acorex/components/data-table';
|
|
55
55
|
import * as i3$4 from '@acorex/components/dropdown-button';
|
|
@@ -67,6 +67,7 @@ import * as i5$1 from '@acorex/components/tag-box';
|
|
|
67
67
|
import { AXTagBoxModule } from '@acorex/components/tag-box';
|
|
68
68
|
import { AXCalendarService } from '@acorex/core/date-time';
|
|
69
69
|
import { AXPFilterOperatorMiddlewareService, AXPSettingsService, ALL_DEFAULT_OPERATORS, AXPFileStorageService, withDefaultMultiLanguageOnWidgetProperty, AXPDefaultMultiLanguageConfigService, AXP_PLATFORM_CONFIG_TOKEN } from '@acorex/platform/common';
|
|
70
|
+
import { resolveEntityListFilterQueryField, resolveEntityListFilterContextField } from '@acorex/platform/layout/entity-contracts';
|
|
70
71
|
import { Subject, filter, BehaviorSubject, timer, takeUntil } from 'rxjs';
|
|
71
72
|
import * as i1$7 from '@acorex/components/image-editor';
|
|
72
73
|
import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
|
|
@@ -89,8 +90,8 @@ import * as i1$8 from '@acorex/components/menu';
|
|
|
89
90
|
import { AXMenuModule } from '@acorex/components/menu';
|
|
90
91
|
import { AXSchedulerComponent } from '@acorex/components/scheduler';
|
|
91
92
|
import { AXSafePipe } from '@acorex/core/pipes';
|
|
93
|
+
import { AXPDataGenerator, AXPWidgetsCatalog, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/contracts';
|
|
92
94
|
import { tap } from 'rxjs/operators';
|
|
93
|
-
import { AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex/platform/contracts';
|
|
94
95
|
|
|
95
96
|
//#endregion
|
|
96
97
|
//#region ---- Component Definition ----
|
|
@@ -103,16 +104,18 @@ class AXPStateMessageComponent {
|
|
|
103
104
|
this.icon = input('', ...(ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []));
|
|
104
105
|
this.title = input('', ...(ngDevMode ? [{ debugName: "title" }] : /* istanbul ignore next */ []));
|
|
105
106
|
this.description = input('', ...(ngDevMode ? [{ debugName: "description" }] : /* istanbul ignore next */ []));
|
|
107
|
+
this.titleParams = input({}, ...(ngDevMode ? [{ debugName: "titleParams" }] : /* istanbul ignore next */ []));
|
|
108
|
+
this.descriptionParams = input({}, ...(ngDevMode ? [{ debugName: "descriptionParams" }] : /* istanbul ignore next */ []));
|
|
106
109
|
// Optional styling
|
|
107
110
|
this.look = input('default', ...(ngDevMode ? [{ debugName: "look" }] : /* istanbul ignore next */ []));
|
|
108
111
|
}
|
|
109
112
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStateMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
110
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPStateMessageComponent, isStandalone: true, selector: "axp-state-message", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-look]=\"look()\">\n @if (icon()) {\n <div class=\"__icon\">\n <i [class]=\"icon()\"></i>\n </div>\n }\n <div class=\"__content\">\n @if (title()) {\n <h3 class=\"__title\">{{ title() | translate | async }}</h3>\n }\n @if (description()) {\n <p class=\"__description\">{{ description() | translate | async }}</p>\n }\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-look=compact]{padding:1.5rem .75rem}.axp-state-message[data-look=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-look=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-look=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-look=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-look=minimal]{padding:1rem .5rem}.axp-state-message[data-look=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-look=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-look=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-look=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
113
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPStateMessageComponent, isStandalone: true, selector: "axp-state-message", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, titleParams: { classPropertyName: "titleParams", publicName: "titleParams", isSignal: true, isRequired: false, transformFunction: null }, descriptionParams: { classPropertyName: "descriptionParams", publicName: "descriptionParams", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-look]=\"look()\">\n @if (icon()) {\n <div class=\"__icon\">\n <i [class]=\"icon()\"></i>\n </div>\n }\n <div class=\"__content\">\n @if (title()) {\n <h3 class=\"__title\">{{ title() | translate: { params: titleParams() } | async }}</h3>\n }\n @if (description()) {\n <p class=\"__description\">{{ description() | translate: { params: descriptionParams() } | async }}</p>\n }\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-look=compact]{padding:1.5rem .75rem}.axp-state-message[data-look=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-look=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-look=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-look=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-look=minimal]{padding:1rem .5rem}.axp-state-message[data-look=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-look=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-look=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-look=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
111
114
|
}
|
|
112
115
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPStateMessageComponent, decorators: [{
|
|
113
116
|
type: Component,
|
|
114
|
-
args: [{ selector: 'axp-state-message', standalone: true, imports: [CommonModule, AXTranslationModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-look]=\"look()\">\n @if (icon()) {\n <div class=\"__icon\">\n <i [class]=\"icon()\"></i>\n </div>\n }\n <div class=\"__content\">\n @if (title()) {\n <h3 class=\"__title\">{{ title() | translate | async }}</h3>\n }\n @if (description()) {\n <p class=\"__description\">{{ description() | translate | async }}</p>\n }\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-look=compact]{padding:1.5rem .75rem}.axp-state-message[data-look=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-look=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-look=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-look=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-look=minimal]{padding:1rem .5rem}.axp-state-message[data-look=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-look=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-look=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-look=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"] }]
|
|
115
|
-
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }] } });
|
|
117
|
+
args: [{ selector: 'axp-state-message', standalone: true, imports: [CommonModule, AXTranslationModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-look]=\"look()\">\n @if (icon()) {\n <div class=\"__icon\">\n <i [class]=\"icon()\"></i>\n </div>\n }\n <div class=\"__content\">\n @if (title()) {\n <h3 class=\"__title\">{{ title() | translate: { params: titleParams() } | async }}</h3>\n }\n @if (description()) {\n <p class=\"__description\">{{ description() | translate: { params: descriptionParams() } | async }}</p>\n }\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-look=compact]{padding:1.5rem .75rem}.axp-state-message[data-look=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-look=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-look=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-look=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-look=minimal]{padding:1rem .5rem}.axp-state-message[data-look=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-look=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-look=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-look=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"] }]
|
|
118
|
+
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], titleParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "titleParams", required: false }] }], descriptionParams: [{ type: i0.Input, args: [{ isSignal: true, alias: "descriptionParams", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }] } });
|
|
116
119
|
|
|
117
120
|
//#region ---- Component Definition ----
|
|
118
121
|
class AXPActivityLogComponent {
|
|
@@ -244,7 +247,7 @@ class AXPActivityLogComponent {
|
|
|
244
247
|
return currentIndex > 0; // Can compare if not the first activity
|
|
245
248
|
}
|
|
246
249
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
247
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n <!-- Activity Log Content -->\n <div class=\"__content\">\n <!-- Loading State -->\n @if (loading()) {\n <div class=\"__loading\">\n @for (item of [1, 2, 3, 4]; track $index) {\n <div class=\"__item\">\n <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n <div class=\"__content\">\n <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Activity Feed -->\n @if (!loading() && activities().length > 0) {\n <div class=\"__feed\">\n @for (activity of activities(); track activity.id) {\n @let changeClasses = getChangeClasses(activity.changeType);\n @let isItemExpanded = isExpanded(activity.id);\n @let hasExpandableContentItem = hasExpandableContent(activity);\n <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n <div class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }} fa-solid\"></i>\n </div>\n\n <!-- Activity Content -->\n <div class=\"__content\">\n <!-- Main Activity Info -->\n <div class=\"__main-info\">\n <!-- User and Action with Toggle Button -->\n <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n <span class=\"__user-name\">{{ activity.user.title }}</span>\n <span class=\"__action-type\">\n {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n </span>\n <span class=\"__action-text\">\n {{ activity.title | translate | async }}\n </span>\n\n <!-- Compare Button -->\n @if (canCompare(activity)) {\n <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n <i class=\"fa-solid fa-code-compare\"></i>\n </button>\n }\n\n <!-- Toggle Button (only show if there's expandable content) -->\n @if (hasExpandableContentItem) {\n <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n [class.fa-chevron-up]=\"isItemExpanded\"></i>\n </button>\n }\n </div>\n\n <!-- Expandable Description/Changes -->\n @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n @for (change of activity.changes; track $index) {\n @let changeClasses = getChangeClasses(change.type);\n <div class=\"__action-line\">\n @if (change.layout) {\n <axp-layout-renderer\n [layout]=\"$any(change.layout)\"\n [context]=\"{ change }\"\n mode=\"view\"\n class=\"__history-layout\"\n />\n } @else {\n <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n </div>\n @if (change.summary) {\n <span class=\"__action-text\">{{ change.summary }}</span>\n } @else if (change.fieldKey && change.actionKey) {\n <span class=\"__action-text\">\n {{ change.fieldKey | translate:(change.fieldKeyParams ?? {}) | async }}: {{ change.actionKey | translate | async }}\n </span>\n } @else {\n <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Time -->\n <div class=\"__time\">\n {{ activity.date | format: 'datetime' : 'short' | async }}\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty State -->\n @if (!loading() && activities().length === 0) {\n <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n </axp-state-message>\n }\n </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media(min-width:640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
250
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n <!-- Activity Log Content -->\n <div class=\"__content\">\n <!-- Loading State -->\n @if (loading()) {\n <div class=\"__loading\">\n @for (item of [1, 2, 3, 4]; track $index) {\n <div class=\"__item\">\n <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n <div class=\"__content\">\n <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Activity Feed -->\n @if (!loading() && activities().length > 0) {\n <div class=\"__feed\">\n @for (activity of activities(); track activity.id) {\n @let changeClasses = getChangeClasses(activity.changeType);\n @let isItemExpanded = isExpanded(activity.id);\n @let hasExpandableContentItem = hasExpandableContent(activity);\n <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n <div class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }} fa-solid\"></i>\n </div>\n\n <!-- Activity Content -->\n <div class=\"__content\">\n <!-- Main Activity Info -->\n <div class=\"__main-info\">\n <!-- User and Action with Toggle Button -->\n <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n <span class=\"__user-name\">{{ activity.user.title }}</span>\n <span class=\"__action-type\">\n {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n </span>\n <span class=\"__action-text\">\n {{ activity.title | translate | async }}\n </span>\n\n <!-- Compare Button -->\n @if (canCompare(activity)) {\n <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n <i class=\"fa-solid fa-code-compare\"></i>\n </button>\n }\n\n <!-- Toggle Button (only show if there's expandable content) -->\n @if (hasExpandableContentItem) {\n <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n [class.fa-chevron-up]=\"isItemExpanded\"></i>\n </button>\n }\n </div>\n\n <!-- Expandable Description/Changes -->\n @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n @for (change of activity.changes; track $index) {\n @let changeClasses = getChangeClasses(change.type);\n <div class=\"__action-line\">\n @if (change.layout) {\n <axp-layout-renderer\n [layout]=\"$any(change.layout)\"\n [context]=\"{ change }\"\n mode=\"view\"\n class=\"__history-layout\"\n />\n } @else {\n <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n </div>\n @if (change.summary) {\n <span class=\"__action-text\">{{ change.summary }}</span>\n } @else if (change.fieldKey && change.actionKey) {\n <span class=\"__action-text\">\n {{ change.fieldKey | translate:(change.fieldKeyParams ?? {}) | async }}: {{ change.actionKey | translate | async }}\n </span>\n } @else {\n <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n }\n }\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Time -->\n <div class=\"__time\">\n {{ activity.date | format: 'datetime' : 'short' | async }}\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty State -->\n @if (!loading() && activities().length === 0) {\n <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n </axp-state-message>\n }\n </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media(min-width:640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "component", type: AXPLayoutRendererComponent, selector: "axp-layout-renderer", inputs: ["layout", "context", "look", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
248
251
|
}
|
|
249
252
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
|
|
250
253
|
type: Component,
|
|
@@ -921,6 +924,7 @@ class AXPCategoryTreeComponent {
|
|
|
921
924
|
const description = this.config().emptyStateDescription || '';
|
|
922
925
|
return description;
|
|
923
926
|
}, ...(ngDevMode ? [{ debugName: "emptyStateDescription" }] : /* istanbul ignore next */ []));
|
|
927
|
+
this.emptyStateTitleParams = computed(() => ({ term: this.searchValue() }), ...(ngDevMode ? [{ debugName: "emptyStateTitleParams" }] : /* istanbul ignore next */ []));
|
|
924
928
|
}
|
|
925
929
|
//#endregion
|
|
926
930
|
//#region ---- Lifecycle Methods ----
|
|
@@ -1142,7 +1146,7 @@ class AXPCategoryTreeComponent {
|
|
|
1142
1146
|
this.isLoading.set(false);
|
|
1143
1147
|
}
|
|
1144
1148
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1145
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n <axp-layout-toolbar>\n @if (config().searchable) {\n <ax-search-box\n (onValueChanged)=\"handleSearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"config().searchPlaceholder! | translate | async\"\n >\n </ax-search-box>\n }\n </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div class=\"ax-px-4 ax-flex-1 ax-min-h-0 ax-min-w-0 ax-overflow-y-auto ax-overflow-x-hidden\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view-legacy\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"config().showCheckbox || false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"config().textField || 'title'\"\n [valueField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view-legacy>\n </div>\n } @else {\n <axp-state-message\n [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n [title]=\"emptyStateTitle()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\n @let textField = config().textField || 'title';\n @let rawTitle = item[textField] ?? item.title;\n <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n <span class=\"ax-truncate\">\n @if (item.id === 'root') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ rawTitle | translate | async }}\n }\n </span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\n (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n \"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canDelete) {\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(item, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n } @else if (item.id === 'root' && actions().canCreate) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden}axp-layout-content{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n axp-page-content, \n axp-page-footer-container,\n axp-page-footer,\n axp-page-header,\n axp-page-header-container,\n axp-page-toolbar,\n\n axp-layout-content, \n axp-layout-page-content, \n\n axp-layout-sections,\n axp-layout-body,\n axp-layout-page-body,\n axp-layout-prefix,\n axp-layout-suffix,\n axp-layout-title-bar,\n axp-layout-title, \n axp-layout-title-actions, \n axp-layout-nav-button, \n axp-layout-description, \n axp-layout-breadcrumbs,\n axp-layout-list-action,\n " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1149
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPCategoryTreeComponent, isStandalone: true, selector: "axp-category-tree", inputs: { dataSource: { classPropertyName: "dataSource", publicName: "dataSource", isSignal: true, isRequired: true, transformFunction: null }, config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: false, transformFunction: null }, actions: { classPropertyName: "actions", publicName: "actions", isSignal: true, isRequired: false, transformFunction: null }, events: { classPropertyName: "events", publicName: "events", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { nodeClick: "nodeClick", nodeSelect: "nodeSelect", nodeCreate: "nodeCreate", nodeUpdate: "nodeUpdate", nodeDelete: "nodeDelete", searchChange: "searchChange", collapseChange: "collapseChange" }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n <axp-layout-toolbar>\n @if (config().searchable) {\n <ax-search-box\n (onValueChanged)=\"handleSearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"config().searchPlaceholder! | translate | async\"\n >\n </ax-search-box>\n }\n </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div class=\"ax-px-4 ax-flex-1 ax-min-h-0 ax-min-w-0 ax-overflow-y-auto ax-overflow-x-hidden\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view-legacy\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"config().showCheckbox || false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"config().textField || 'title'\"\n [valueField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view-legacy>\n </div>\n } @else {\n <axp-state-message\n [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n [title]=\"emptyStateTitle()\"\n [titleParams]=\"emptyStateTitleParams()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\n @let textField = config().textField || 'title';\n @let rawTitle = item[textField] ?? item.title;\n <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n <span class=\"ax-truncate\">\n @if (item.id === 'root') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ rawTitle | translate | async }}\n }\n </span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\n (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n \"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canDelete) {\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(item, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n } @else if (item.id === 'root' && actions().canCreate) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden}axp-layout-content{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n axp-page-content, \n axp-page-footer-container,\n axp-page-footer,\n axp-page-header,\n axp-page-header-container,\n axp-page-toolbar,\n\n axp-layout-content, \n axp-layout-page-content, \n\n axp-layout-sections,\n axp-layout-body,\n axp-layout-page-body,\n axp-layout-prefix,\n axp-layout-suffix,\n axp-layout-title-bar,\n axp-layout-title, \n axp-layout-title-actions, \n axp-layout-nav-button, \n axp-layout-description, \n axp-layout-breadcrumbs,\n axp-layout-list-action,\n " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { 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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1146
1150
|
}
|
|
1147
1151
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
|
|
1148
1152
|
type: Component,
|
|
@@ -1159,7 +1163,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1159
1163
|
AXButtonModule,
|
|
1160
1164
|
AXDropdownModule,
|
|
1161
1165
|
AXPStateMessageComponent,
|
|
1162
|
-
], template: "<axp-layout-header>\n <axp-layout-toolbar>\n @if (config().searchable) {\n <ax-search-box\n (onValueChanged)=\"handleSearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"config().searchPlaceholder! | translate | async\"\n >\n </ax-search-box>\n }\n </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div class=\"ax-px-4 ax-flex-1 ax-min-h-0 ax-min-w-0 ax-overflow-y-auto ax-overflow-x-hidden\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view-legacy\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"config().showCheckbox || false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"config().textField || 'title'\"\n [valueField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view-legacy>\n </div>\n } @else {\n <axp-state-message\n [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n [title]=\"emptyStateTitle()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\n @let textField = config().textField || 'title';\n @let rawTitle = item[textField] ?? item.title;\n <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n <span class=\"ax-truncate\">\n @if (item.id === 'root') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ rawTitle | translate | async }}\n }\n </span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\n (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n \"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canDelete) {\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(item, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n } @else if (item.id === 'root' && actions().canCreate) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden}axp-layout-content{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}\n"] }]
|
|
1166
|
+
], template: "<axp-layout-header>\n <axp-layout-toolbar>\n @if (config().searchable) {\n <ax-search-box\n (onValueChanged)=\"handleSearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"config().searchPlaceholder! | translate | async\"\n >\n </ax-search-box>\n }\n </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div class=\"ax-px-4 ax-flex-1 ax-min-h-0 ax-min-w-0 ax-overflow-y-auto ax-overflow-x-hidden\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view-legacy\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"config().showCheckbox || false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"config().textField || 'title'\"\n [valueField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view-legacy>\n </div>\n } @else {\n <axp-state-message\n [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n [title]=\"emptyStateTitle()\"\n [titleParams]=\"emptyStateTitleParams()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"(actions().createLabel || '@general:actions.add-new.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\n @let textField = config().textField || 'title';\n @let rawTitle = item[textField] ?? item.title;\n <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n <span class=\"ax-truncate\">\n @if (item.id === 'root') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ rawTitle | translate | async }}\n }\n </span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\n (actions().createChildLabel || '@general:actions.add-new-child.title' | translate | async)!\n \"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"(actions().updateLabel || '@general:actions.edit.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canDelete) {\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(item, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"(actions().deleteLabel || '@general:actions.delete.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n } @else if (item.id === 'root' && actions().canCreate) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: [":host{display:flex;flex-direction:column;height:100%;min-height:0;min-width:0;overflow:hidden}axp-layout-content{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}\n"] }]
|
|
1163
1167
|
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeCreate: [{ type: i0.Output, args: ["nodeCreate"] }], nodeUpdate: [{ type: i0.Output, args: ["nodeUpdate"] }], nodeDelete: [{ type: i0.Output, args: ["nodeDelete"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
|
|
1164
1168
|
|
|
1165
1169
|
//#region ---- Tree Node Interface ----
|
|
@@ -1676,6 +1680,19 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1676
1680
|
queueMicrotask(() => this.applySearchFilter(initialTerm));
|
|
1677
1681
|
}
|
|
1678
1682
|
});
|
|
1683
|
+
setupPopupFooterKeyboardShortcuts(() => [
|
|
1684
|
+
{
|
|
1685
|
+
title: '@general:actions.cancel.title',
|
|
1686
|
+
command: 'cancel',
|
|
1687
|
+
handler: () => this.handleCloseClick(),
|
|
1688
|
+
},
|
|
1689
|
+
{
|
|
1690
|
+
title: '@general:actions.select.title',
|
|
1691
|
+
command: 'select',
|
|
1692
|
+
disabled: () => !this.allowSelect(),
|
|
1693
|
+
handler: () => this.handleSelectClick(),
|
|
1694
|
+
},
|
|
1695
|
+
], { id: 'data-selector-popup' });
|
|
1679
1696
|
}
|
|
1680
1697
|
//#endregion
|
|
1681
1698
|
//#region ---- Lifecycle Methods ----
|
|
@@ -2117,7 +2134,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
2117
2134
|
}
|
|
2118
2135
|
}
|
|
2119
2136
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2120
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n <!-- Main Content Area -->\n <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n <!-- Category Filter Side Panel -->\n @if (categoryEnabled()) {\n <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n </axp-category-tree>\n </div>\n }\n\n <!-- Main Data Area -->\n <div class=\"axp-main-data-area\">\n @if (hasSearch()) {\n <div class=\"ax-w-full ax-mb-2\">\n <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1 ax-min-h-0\" [paging]=\"true\"\n [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\">\n <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n @for (col of config().grid.columns; track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n path: col.dataPath || col.name,\n type: col.widget.type,\n options: col.widget.options\n }\">\n </axp-widget-column-renderer>\n }\n }\n @if (hasRowActionPrimary()) {\n <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-command-column>\n }\n @if (hasRowActionDropdown()) {\n <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-dropdown-command-column>\n }\n </ax-data-table>\n </div>\n </div>\n</div>\n\n<ax-footer>\n <ax-prefix>\n @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n <ax-prefix>\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n </ax-prefix>\n <ax-suffix>\n <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n (onClick)=\"handleCloseClick()\">\n </ax-button>\n <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n } -->\n </ax-button>\n </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { 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: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n <!-- Main Content Area -->\n <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n <!-- Category Filter Side Panel -->\n @if (categoryEnabled()) {\n <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n </axp-category-tree>\n </div>\n }\n\n <!-- Main Data Area -->\n <div class=\"axp-main-data-area\">\n @if (hasSearch()) {\n <div class=\"ax-w-full ax-mb-2\">\n <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ax-data-table #grid [showFooter]=\"false\" class=\"ax-flex-1 ax-min-h-0\" [paging]=\"true\"\n [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\">\n <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n @for (col of config().grid.columns; track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n path: col.dataPath || col.name,\n type: col.widget.type,\n options: col.widget.options\n }\">\n </axp-widget-column-renderer>\n }\n }\n @if (hasRowActionPrimary()) {\n <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-command-column>\n }\n @if (hasRowActionDropdown()) {\n <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-dropdown-command-column>\n }\n </ax-data-table>\n </div>\n </div>\n</div>\n\n<ax-footer>\n <ax-prefix>\n @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n <ax-prefix>\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n </ax-prefix>\n <ax-suffix>\n <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n (onClick)=\"handleCloseClick()\">\n </ax-button>\n <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n class=\"ax-absolute ax-end-[2px] ax-top-[2px]\"></ax-badge>\n } -->\n </ax-button>\n </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;height:100%;overflow:hidden}.ax-expand-handler{cursor:pointer;display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.ax-expand-handler:hover{opacity:.8}.ax-expand-handler.ax-invisible{visibility:hidden}.ax-overflow-hidden{overflow:hidden}.ax-flex{display:flex}.ax-flex-col{flex-direction:column}.ax-gap-4{gap:1rem}.ax-p-4{padding:1rem}.ax-w-full{width:100%}.axp-data-selector{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content{display:flex;flex:1;min-height:0;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;flex-direction:column;border-right:1px solid var(--border-color);padding:1rem;background:var(--surface-color);flex-shrink:0;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;flex:1;flex-direction:column;min-height:0;min-width:0;overflow:hidden}.axp-data-selector .axp-main-data-area{flex:1;min-width:0;min-height:0;overflow:hidden;padding:1rem;display:flex;flex-direction:column;gap:1rem}.axp-data-selector .axp-main-data-area ax-data-table{flex:1;min-height:0;height:100%;display:flex;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;height:90vh;max-height:90vh;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { 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: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", 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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowColor", "rowColorField", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2121
2138
|
}
|
|
2122
2139
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
|
|
2123
2140
|
type: Component,
|
|
@@ -2893,7 +2910,8 @@ class AXPQueryFiltersComponent {
|
|
|
2893
2910
|
!this.filterOperatorMiddleware
|
|
2894
2911
|
.transformFilters(this.selectedFilters())
|
|
2895
2912
|
.some((sf) => sf.field === f.field &&
|
|
2896
|
-
sf.operator?.type ===
|
|
2913
|
+
sf.operator?.type ===
|
|
2914
|
+
(this.context()[this.resolveFilterContextField(sf)]?.operation?.type || f.operator?.type)));
|
|
2897
2915
|
};
|
|
2898
2916
|
this.getDisplayValue = async (filter, val) => {
|
|
2899
2917
|
if (filter.widget?.type === 'document-file-type-filter') {
|
|
@@ -2974,12 +2992,14 @@ class AXPQueryFiltersComponent {
|
|
|
2974
2992
|
let convertedFilters = [];
|
|
2975
2993
|
// 2. Convert regular filters
|
|
2976
2994
|
otherFilters.forEach((f) => {
|
|
2995
|
+
const contextField = this.resolveFilterContextField(f);
|
|
2996
|
+
const operator = context[contextField]?.operation ?? f.operator;
|
|
2977
2997
|
convertedFilters.push({
|
|
2978
|
-
field: f
|
|
2979
|
-
value: context[
|
|
2998
|
+
field: this.resolveFilterQueryField(f, operator),
|
|
2999
|
+
value: context[contextField]?.value ?? f.value,
|
|
2980
3000
|
hidden: f.hidden,
|
|
2981
|
-
operator
|
|
2982
|
-
displayText: context[
|
|
3001
|
+
operator,
|
|
3002
|
+
displayText: context[contextField]?.displayText,
|
|
2983
3003
|
});
|
|
2984
3004
|
});
|
|
2985
3005
|
// 3. If "all" filter exists, create a nested filter with OR logic
|
|
@@ -2988,7 +3008,7 @@ class AXPQueryFiltersComponent {
|
|
|
2988
3008
|
const inlineFieldsFilters = this.filtersDefinitions()
|
|
2989
3009
|
.filter((f) => f.filterType.inline)
|
|
2990
3010
|
.map((f) => ({
|
|
2991
|
-
field: f
|
|
3011
|
+
field: this.resolveFilterQueryField(f, { type: 'contains' }),
|
|
2992
3012
|
operator: { type: 'contains' },
|
|
2993
3013
|
value: allValue,
|
|
2994
3014
|
}));
|
|
@@ -3009,10 +3029,11 @@ class AXPQueryFiltersComponent {
|
|
|
3009
3029
|
const newContext = {};
|
|
3010
3030
|
// Add context for regular filters
|
|
3011
3031
|
otherFilters.forEach((f) => {
|
|
3012
|
-
|
|
3013
|
-
|
|
3014
|
-
|
|
3015
|
-
|
|
3032
|
+
const contextField = this.resolveFilterContextField(f);
|
|
3033
|
+
newContext[contextField] = {
|
|
3034
|
+
value: context[contextField]?.value ?? f.value,
|
|
3035
|
+
operation: context[contextField]?.operation || f.operator,
|
|
3036
|
+
displayText: context[contextField]?.displayText,
|
|
3016
3037
|
};
|
|
3017
3038
|
});
|
|
3018
3039
|
// Add context for "all" filter
|
|
@@ -3055,8 +3076,9 @@ class AXPQueryFiltersComponent {
|
|
|
3055
3076
|
const filters = this.selectedFilters();
|
|
3056
3077
|
const context = this.context();
|
|
3057
3078
|
Promise.all(filters.map(async (filter) => {
|
|
3058
|
-
const
|
|
3059
|
-
const
|
|
3079
|
+
const contextField = this.resolveFilterContextField(filter);
|
|
3080
|
+
const val = context[contextField]?.value;
|
|
3081
|
+
const displayText = context[contextField]?.displayText;
|
|
3060
3082
|
const rawDisplay = displayText != null && displayText !== '' ? displayText : await this.getDisplayValue(filter, val);
|
|
3061
3083
|
const displayValue = this.formatFilterDisplayValue(rawDisplay);
|
|
3062
3084
|
return {
|
|
@@ -3198,6 +3220,17 @@ class AXPQueryFiltersComponent {
|
|
|
3198
3220
|
convertQueriesToDefinitions(queries) {
|
|
3199
3221
|
const definitions = this.filtersDefinitions();
|
|
3200
3222
|
return queries.map((q) => {
|
|
3223
|
+
if (q.field === 'all') {
|
|
3224
|
+
return {
|
|
3225
|
+
field: 'all',
|
|
3226
|
+
title: 'All',
|
|
3227
|
+
operator: q.operator ?? { type: 'contains' },
|
|
3228
|
+
value: q.value,
|
|
3229
|
+
widget: { type: 'text-box' },
|
|
3230
|
+
filterType: { inline: true, advance: false },
|
|
3231
|
+
hidden: q.hidden,
|
|
3232
|
+
};
|
|
3233
|
+
}
|
|
3201
3234
|
const definition = definitions.find((p) => p.field === q.field);
|
|
3202
3235
|
const readOnly = q.readOnly === true;
|
|
3203
3236
|
return {
|
|
@@ -3214,7 +3247,9 @@ class AXPQueryFiltersComponent {
|
|
|
3214
3247
|
}
|
|
3215
3248
|
convertQueriesToContext(queries) {
|
|
3216
3249
|
return queries.reduce((acc, q) => {
|
|
3217
|
-
|
|
3250
|
+
const definition = this.filtersDefinitions().find((p) => p.field === q.field);
|
|
3251
|
+
const contextField = this.resolveFilterContextField(definition ?? { field: q.field });
|
|
3252
|
+
acc[contextField] = { value: q.value, operation: q.operator, displayText: q.displayText };
|
|
3218
3253
|
return acc;
|
|
3219
3254
|
}, {});
|
|
3220
3255
|
}
|
|
@@ -3239,10 +3274,11 @@ class AXPQueryFiltersComponent {
|
|
|
3239
3274
|
if (e.key === 'Enter') {
|
|
3240
3275
|
this.handleSelectField(field);
|
|
3241
3276
|
if (this.tagBoxInput && (field.widget.type === 'string-filter' || field.widget.type === 'number-filter')) {
|
|
3277
|
+
const contextField = this.resolveFilterContextField(field);
|
|
3242
3278
|
this.context.update((prev) => {
|
|
3243
3279
|
return {
|
|
3244
3280
|
...prev,
|
|
3245
|
-
[
|
|
3281
|
+
[contextField]: {
|
|
3246
3282
|
value: this.tagBoxInput?.value,
|
|
3247
3283
|
operation: { type: 'contains' },
|
|
3248
3284
|
},
|
|
@@ -3258,13 +3294,15 @@ class AXPQueryFiltersComponent {
|
|
|
3258
3294
|
const reservedFitler = this.activeFilter();
|
|
3259
3295
|
if (reservedFitler) {
|
|
3260
3296
|
const { field } = reservedFitler;
|
|
3297
|
+
const contextField = this.resolveFilterContextField(reservedFitler);
|
|
3261
3298
|
const selectedFiltersFields = this.selectedFilters().map((f) => f.field);
|
|
3262
3299
|
const context = this.context();
|
|
3300
|
+
const appliedValue = context[contextField]?.value ?? context[contextField];
|
|
3263
3301
|
if (selectedFiltersFields.includes(field)) {
|
|
3264
|
-
this.selectedFilters.update((prev) => prev.map((f) => (f.field === field ? { ...f, value:
|
|
3302
|
+
this.selectedFilters.update((prev) => prev.map((f) => (f.field === field ? { ...f, value: appliedValue } : f)));
|
|
3265
3303
|
}
|
|
3266
3304
|
else {
|
|
3267
|
-
this.selectedFilters.update((prev) => [...prev, reservedFitler]);
|
|
3305
|
+
this.selectedFilters.update((prev) => [...prev, { ...reservedFitler, value: appliedValue }]);
|
|
3268
3306
|
}
|
|
3269
3307
|
this.activeFilter.set(null);
|
|
3270
3308
|
this.popover()?.close();
|
|
@@ -3323,6 +3361,19 @@ class AXPQueryFiltersComponent {
|
|
|
3323
3361
|
* When filter context entries change, notify `events.context` subscribers (same semantics as `widget-renderer`).
|
|
3324
3362
|
*/
|
|
3325
3363
|
#emitFilterContextPathEffect;
|
|
3364
|
+
/**
|
|
3365
|
+
* Maps filter definition to the storage query field.
|
|
3366
|
+
* Inline `contains` filters on lookup/select use `inlineQueryField` (display text path).
|
|
3367
|
+
*/
|
|
3368
|
+
resolveFilterQueryField(filter, operator) {
|
|
3369
|
+
return resolveEntityListFilterQueryField(filter, operator);
|
|
3370
|
+
}
|
|
3371
|
+
/**
|
|
3372
|
+
* Flat context key for widget binding (avoids lodash nested paths when `field` contains dots).
|
|
3373
|
+
*/
|
|
3374
|
+
resolveFilterContextField(filter) {
|
|
3375
|
+
return resolveEntityListFilterContextField(filter);
|
|
3376
|
+
}
|
|
3326
3377
|
handleSelectFilters(e) {
|
|
3327
3378
|
if (e.value?.length < this.selectedFilters().length) {
|
|
3328
3379
|
const hiddenFilters = this.selectedFilters().filter((f) => f.hidden);
|
|
@@ -3359,7 +3410,7 @@ class AXPQueryFiltersComponent {
|
|
|
3359
3410
|
if (!filter) {
|
|
3360
3411
|
return undefined;
|
|
3361
3412
|
}
|
|
3362
|
-
const contextOperation = this.context()?.[filter
|
|
3413
|
+
const contextOperation = this.context()?.[this.resolveFilterContextField(filter)]?.operation?.type;
|
|
3363
3414
|
const operatorType = contextOperation || filter.operator?.type;
|
|
3364
3415
|
return ALL_DEFAULT_OPERATORS.find((o) => o.name === operatorType)?.title;
|
|
3365
3416
|
}
|
|
@@ -3505,13 +3556,14 @@ class AXPQueryFiltersComponent {
|
|
|
3505
3556
|
}
|
|
3506
3557
|
getFilterWidgetScopeForDefinition(def) {
|
|
3507
3558
|
const field = def.field;
|
|
3559
|
+
const contextField = this.resolveFilterContextField(def);
|
|
3508
3560
|
return {
|
|
3509
3561
|
call: () => undefined,
|
|
3510
3562
|
setValue: (...args) => {
|
|
3511
3563
|
const value = args[0];
|
|
3512
3564
|
this.context.update((prev) => ({
|
|
3513
3565
|
...prev,
|
|
3514
|
-
[
|
|
3566
|
+
[contextField]: { ...prev[contextField], value },
|
|
3515
3567
|
}));
|
|
3516
3568
|
},
|
|
3517
3569
|
clear: () => {
|
|
@@ -3539,7 +3591,7 @@ class AXPQueryFiltersComponent {
|
|
|
3539
3591
|
*/
|
|
3540
3592
|
#focusEffect;
|
|
3541
3593
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3542
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n </ax-button>\n <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n [placeholder]=\"\n (filtersDefinitions().length === 0\n ? '@general:terms.interface.filter.no-filter-definitions'\n : '@general:terms.interface.filter.placeholder'\n )\n | translate\n | async\n \" #tagBox>\n <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n <ax-kbd class=\"look-text\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item)\">\n <span>{{ item.query }}</span>\n @if (!item.readOnly) {\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover\n [offsetY]=\"activeFilter() ? -30 : 0\"\n [target]=\"tagBoxInput\"\n [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\"\n [closeOn]=\"'clickOut'\"\n (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\"\n #popover\n>\n <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n @if (activeFilter()) {\n <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n activeFilter()?.title! | translate | async\n }}</ax-header>\n <ax-content class=\"ax-p-4\">\n <div class=\"ax-mb-2\">\n <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n </div>\n <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n type: activeFilter()?.widget?.type || 'text-editor',\n path: activeFilter()?.field,\n options: activeFilter()?.widget?.options,\n }\" [mode]=\"'edit'\">\n </ng-container>\n </ax-content>\n <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"></ax-button>\n </ax-footer>\n </div>\n } @else {\n <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n <!-- @if (tagBox.inputValue()) {\n @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n tabindex=\"0\"\n (click)=\"handleSelectInlineFilter(inlineFilter)\"\n (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n >\n {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n tagBox.inputValue()\n }}'\n </div>\n }\n <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n } -->\n @for (field of filterFields(); track field.field) {\n <div axListNavigationItem #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\" (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\">\n <div class=\"ax-flex ax-items-end ax-gap-2\">\n <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n {{ field.title | translate | async }}\n </div>\n </div>\n }\n </div>\n }\n </axp-widgets-container>\n </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n </ax-button>\n <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n [placeholder]=\"\n (filtersDefinitions().length === 0\n ? '@general:terms.interface.filter.no-filter-definitions'\n : '@general:terms.interface.filter.placeholder'\n )\n | translate\n | async\n \" #tagBox>\n <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n <ax-kbd class=\"look-text\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item)\">\n <span>{{ item.query }}</span>\n @if (!item.readOnly) {\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [target]=\"tagBoxInput\" [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\" #popover>\n <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n @if (activeFilter()) {\n <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n activeFilter()?.title! | translate | async\n }}</ax-header>\n <ax-content class=\"ax-p-4\">\n <div class=\"ax-mb-2\">\n <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n </div>\n <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n type: activeFilter()?.widget?.type || 'text-editor',\n path: resolveFilterContextField(activeFilter()!),\n options: activeFilter()?.widget?.options,\n }\" [mode]=\"'edit'\">\n </ng-container>\n </ax-content>\n <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"></ax-button>\n </ax-footer>\n </div>\n } @else {\n <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items ax-border-none\">\n <!-- @if (tagBox.inputValue()) {\n @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n tabindex=\"0\"\n (click)=\"handleSelectInlineFilter(inlineFilter)\"\n (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n >\n {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n tagBox.inputValue()\n }}'\n </div>\n }\n <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n } -->\n @for (field of filterFields(); track field.field) {\n <div axListNavigationItem #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\" (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\">\n <div class=\"ax-flex ax-items-end ax-gap-2\">\n <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n {{ field.title | translate | async }}\n </div>\n </div>\n }\n </div>\n }\n </axp-widgets-container>\n </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3543
3595
|
}
|
|
3544
3596
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
|
|
3545
3597
|
type: Component,
|
|
@@ -3557,7 +3609,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3557
3609
|
AXPWidgetCoreModule,
|
|
3558
3610
|
AXListNavigationModule,
|
|
3559
3611
|
AXBadgeModule,
|
|
3560
|
-
], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n </ax-button>\n <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n [placeholder]=\"\n (filtersDefinitions().length === 0\n ? '@general:terms.interface.filter.no-filter-definitions'\n : '@general:terms.interface.filter.placeholder'\n )\n | translate\n | async\n \" #tagBox>\n <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n <ax-kbd class=\"look-text\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item)\">\n <span>{{ item.query }}</span>\n @if (!item.readOnly) {\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover
|
|
3612
|
+
], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\" (keydown.control.space)=\"popover.open()\">\n <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n </ax-button>\n <ax-tag-box #tagBoxComponent [ngModel]=\"asyncTags()\" (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\" [valueField]=\"'id'\" [readonly]=\"filtersDefinitions().length === 0\" [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\" [tagTemplate]=\"tagTemplate\" (onKeyDown)=\"handleKeyDown($event)\" [addOnEnter]=\"false\"\n [placeholder]=\"\n (filtersDefinitions().length === 0\n ? '@general:terms.interface.filter.no-filter-definitions'\n : '@general:terms.interface.filter.placeholder'\n )\n | translate\n | async\n \" #tagBox>\n <ax-suffix class=\"ax-hidden ax-shrink-0 ax-whitespace-nowrap md:ax-block ax-text-gray-500\">\n <ax-kbd class=\"look-text\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n [class.!ax-bg-primary]=\"item.field === 'all'\" [class.!ax-text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item)\">\n <span>{{ item.query }}</span>\n @if (!item.readOnly) {\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [target]=\"tagBoxInput\" [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\" #popover>\n <div class=\"md:ax-min-w-72 ax-w-full ax-rounded-md md:ax-max-h-96 lg:ax-w-[450px] md:ax-overflow-auto\">\n <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n @if (activeFilter()) {\n <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n activeFilter()?.title! | translate | async\n }}</ax-header>\n <ax-content class=\"ax-p-4\">\n <div class=\"ax-mb-2\">\n <ax-badge [text]=\"(getActiveOperator(activeFilter())! | translate | async) || ''\"></ax-badge>\n </div>\n <ng-container #widgetRenderer=\"widgetRenderer\" axp-widget-renderer [node]=\"{\n type: activeFilter()?.widget?.type || 'text-editor',\n path: resolveFilterContextField(activeFilter()!),\n options: activeFilter()?.widget?.options,\n }\" [mode]=\"'edit'\">\n </ng-container>\n </ax-content>\n <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n <ax-button class=\"ax-xs\" [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"></ax-button>\n </ax-footer>\n </div>\n } @else {\n <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items ax-border-none\">\n <!-- @if (tagBox.inputValue()) {\n @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n tabindex=\"0\"\n (click)=\"handleSelectInlineFilter(inlineFilter)\"\n (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n >\n {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n tagBox.inputValue()\n }}'\n </div>\n }\n <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n } -->\n @for (field of filterFields(); track field.field) {\n <div axListNavigationItem #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\" (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\">\n <div class=\"ax-flex ax-items-end ax-gap-2\">\n <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n {{ field.title | translate | async }}\n </div>\n </div>\n }\n </div>\n }\n </axp-widgets-container>\n </div>\n</ax-popover>", styles: ["axp-query-filters{width:100%}axp-query-filters ax-tag-box .ax-editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:.5}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}\n"] }]
|
|
3561
3613
|
}], ctorParameters: () => [], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
|
|
3562
3614
|
type: ViewChildren,
|
|
3563
3615
|
args: ['caseItem']
|
|
@@ -3657,7 +3709,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3657
3709
|
|
|
3658
3710
|
class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
3659
3711
|
constructor() {
|
|
3660
|
-
super(
|
|
3712
|
+
super();
|
|
3661
3713
|
this.fileStorage = inject(AXPFileStorageService);
|
|
3662
3714
|
this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : /* istanbul ignore next */ []));
|
|
3663
3715
|
this.showHistory = input(true, ...(ngDevMode ? [{ debugName: "showHistory" }] : /* istanbul ignore next */ []));
|
|
@@ -3667,6 +3719,18 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
3667
3719
|
this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : /* istanbul ignore next */ []));
|
|
3668
3720
|
this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : /* istanbul ignore next */ []));
|
|
3669
3721
|
this.context = linkedSignal(() => ({ image: this.image() }), ...(ngDevMode ? [{ debugName: "context" }] : /* istanbul ignore next */ []));
|
|
3722
|
+
setupPopupFooterKeyboardShortcuts(() => [
|
|
3723
|
+
{
|
|
3724
|
+
title: '@general:actions.cancel.title',
|
|
3725
|
+
command: 'cancel',
|
|
3726
|
+
handler: () => this.handleCancel(),
|
|
3727
|
+
},
|
|
3728
|
+
{
|
|
3729
|
+
title: '@general:actions.save.title',
|
|
3730
|
+
command: 'submit',
|
|
3731
|
+
handler: () => this.handleSave(),
|
|
3732
|
+
},
|
|
3733
|
+
], { id: 'image-editor-popup' });
|
|
3670
3734
|
}
|
|
3671
3735
|
async ngOnInit() {
|
|
3672
3736
|
const value = this.image();
|
|
@@ -3703,7 +3767,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
3703
3767
|
URL.revokeObjectURL(prev);
|
|
3704
3768
|
}
|
|
3705
3769
|
}
|
|
3706
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPImageEditorPopupComponent, deps:
|
|
3770
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPImageEditorPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3707
3771
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
3708
3772
|
<ax-form class="ax-flex ax-justify-center">
|
|
3709
3773
|
<ax-form-field class="ax-p-2">
|
|
@@ -3787,7 +3851,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3787
3851
|
</ax-suffix>
|
|
3788
3852
|
</ax-footer>
|
|
3789
3853
|
`, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"] }]
|
|
3790
|
-
}], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
|
|
3854
|
+
}], ctorParameters: () => [], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
|
|
3791
3855
|
|
|
3792
3856
|
var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
|
|
3793
3857
|
__proto__: null,
|
|
@@ -4352,7 +4416,7 @@ class AXPPropertyViewerComponent {
|
|
|
4352
4416
|
const expressionPath = this.getExpressionPath(prop);
|
|
4353
4417
|
const raw = get(this.context(), expressionPath);
|
|
4354
4418
|
const currentValue = typeof raw === 'string' ? raw : '';
|
|
4355
|
-
const { AXPBindingExpressionEditorPopupComponent } = await import('./acorex-platform-layout-components-binding-expression-editor-popup.component-
|
|
4419
|
+
const { AXPBindingExpressionEditorPopupComponent } = await import('./acorex-platform-layout-components-binding-expression-editor-popup.component-RttFwaw9.mjs');
|
|
4356
4420
|
const result = await this.popupService.open(AXPBindingExpressionEditorPopupComponent, {
|
|
4357
4421
|
title: '@general:widgets.triggers.edit-binding-expression',
|
|
4358
4422
|
size: 'lg',
|
|
@@ -4414,11 +4478,27 @@ class AXPPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
|
4414
4478
|
}
|
|
4415
4479
|
viewer.initializeContext(this.context() ?? {});
|
|
4416
4480
|
});
|
|
4481
|
+
setupPopupFooterKeyboardShortcuts(() => [
|
|
4482
|
+
{
|
|
4483
|
+
title: '@general:actions.cancel.title',
|
|
4484
|
+
command: 'cancel',
|
|
4485
|
+
handler: () => this.handleCloseClick(),
|
|
4486
|
+
},
|
|
4487
|
+
{
|
|
4488
|
+
title: '@general:actions.save.title',
|
|
4489
|
+
command: 'submit',
|
|
4490
|
+
disabled: () => this.isApplying(),
|
|
4491
|
+
handler: () => this.handleApplyClick(),
|
|
4492
|
+
},
|
|
4493
|
+
], { id: 'property-viewer-popup' });
|
|
4417
4494
|
}
|
|
4418
4495
|
//#region ---- Event Handlers ----
|
|
4419
4496
|
handlePropertyChanged(event) {
|
|
4420
4497
|
this.currentValues.set(event.values ?? {});
|
|
4421
4498
|
this.currentMode = event.mode;
|
|
4499
|
+
if (event.mode === 'update') {
|
|
4500
|
+
this.onChange?.(event);
|
|
4501
|
+
}
|
|
4422
4502
|
}
|
|
4423
4503
|
handleCloseClick() {
|
|
4424
4504
|
this.close();
|
|
@@ -4571,6 +4651,10 @@ class PropertyViewerDialogBuilder {
|
|
|
4571
4651
|
this.onActionHandler = handler;
|
|
4572
4652
|
return this;
|
|
4573
4653
|
}
|
|
4654
|
+
onChange(handler) {
|
|
4655
|
+
this.onChangeHandler = handler;
|
|
4656
|
+
return this;
|
|
4657
|
+
}
|
|
4574
4658
|
async show() {
|
|
4575
4659
|
if (!this.tabsValue?.length) {
|
|
4576
4660
|
throw new Error('Property viewer dialog: call setTabs([...]) before show().');
|
|
@@ -4600,6 +4684,7 @@ class PropertyViewerDialogBuilder {
|
|
|
4600
4684
|
mode: signal(this.modeValue),
|
|
4601
4685
|
context: signal(this.contextValue ?? {}),
|
|
4602
4686
|
onApply,
|
|
4687
|
+
onChange: this.onChangeHandler,
|
|
4603
4688
|
},
|
|
4604
4689
|
});
|
|
4605
4690
|
return result?.data ?? null;
|
|
@@ -4826,6 +4911,7 @@ class AXPItemConfiguratorComponent {
|
|
|
4826
4911
|
const title = (await this.translationService.translateAsync('@general:actions.configure.named-title', {
|
|
4827
4912
|
params: { name: nameForDialog || '—' },
|
|
4828
4913
|
})) || `Configure ${nameForDialog || '—'}`;
|
|
4914
|
+
const valuesSnapshot = cloneDeep(this.values());
|
|
4829
4915
|
const result = (await this.propertyViewerService
|
|
4830
4916
|
.create()
|
|
4831
4917
|
.dialog((d) => {
|
|
@@ -4834,16 +4920,22 @@ class AXPItemConfiguratorComponent {
|
|
|
4834
4920
|
.setCloseButton(true)
|
|
4835
4921
|
.setMode('advanced')
|
|
4836
4922
|
.setTabs(tabs)
|
|
4837
|
-
.setContext(cloneDeep(context))
|
|
4923
|
+
.setContext(cloneDeep(context))
|
|
4924
|
+
.onChange((event) => {
|
|
4925
|
+
if (event.mode !== 'update' || !event.values || typeof event.values !== 'object') {
|
|
4926
|
+
return;
|
|
4927
|
+
}
|
|
4928
|
+
const optsPatch = extractOptionsPatchFromPropertyViewerValues(event.values);
|
|
4929
|
+
this.values.set(merge({}, cloneDeep(valuesSnapshot), cloneDeep(optsPatch)));
|
|
4930
|
+
});
|
|
4838
4931
|
})
|
|
4839
4932
|
.show());
|
|
4840
4933
|
if (result?.values && typeof result.values === 'object') {
|
|
4841
|
-
const
|
|
4842
|
-
|
|
4843
|
-
|
|
4844
|
-
: rv;
|
|
4845
|
-
this.values.set(merge({}, cloneDeep(this.values()), cloneDeep(optsPatch)));
|
|
4934
|
+
const optsPatch = extractOptionsPatchFromPropertyViewerValues(result.values);
|
|
4935
|
+
this.values.set(merge({}, cloneDeep(valuesSnapshot), cloneDeep(optsPatch)));
|
|
4936
|
+
return;
|
|
4846
4937
|
}
|
|
4938
|
+
this.values.set(cloneDeep(valuesSnapshot));
|
|
4847
4939
|
}
|
|
4848
4940
|
onHeaderActionClick(action) {
|
|
4849
4941
|
if (this.readonly() || this.isHeaderActionDisabled(action)) {
|
|
@@ -4893,6 +4985,13 @@ function isPropertyDefinitionArray(value) {
|
|
|
4893
4985
|
'schema' in entry &&
|
|
4894
4986
|
'group' in entry);
|
|
4895
4987
|
}
|
|
4988
|
+
function extractOptionsPatchFromPropertyViewerValues(values) {
|
|
4989
|
+
const nested = values['options'];
|
|
4990
|
+
if (nested !== undefined && typeof nested === 'object' && !Array.isArray(nested)) {
|
|
4991
|
+
return nested;
|
|
4992
|
+
}
|
|
4993
|
+
return values;
|
|
4994
|
+
}
|
|
4896
4995
|
|
|
4897
4996
|
//#region ---- Imports ----
|
|
4898
4997
|
//#endregion
|
|
@@ -5845,7 +5944,7 @@ class AXPMenuCustomizerComponent {
|
|
|
5845
5944
|
this.toastService.warning(message);
|
|
5846
5945
|
}
|
|
5847
5946
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuCustomizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5848
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ 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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5947
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, 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"], dependencies: [{ 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: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { 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: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5849
5948
|
}
|
|
5850
5949
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPMenuCustomizerComponent, decorators: [{
|
|
5851
5950
|
type: Component,
|
|
@@ -6178,7 +6277,7 @@ class AXPRepeaterRowsLayoutComponent {
|
|
|
6178
6277
|
this.removeClick.emit(index);
|
|
6179
6278
|
}
|
|
6180
6279
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRepeaterRowsLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6181
|
-
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 }); }
|
|
6280
|
+
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", "titleParams", "descriptionParams", "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 }); }
|
|
6182
6281
|
}
|
|
6183
6282
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRepeaterRowsLayoutComponent, decorators: [{
|
|
6184
6283
|
type: Component,
|
|
@@ -6804,7 +6903,7 @@ class AXPSectionItemsBuilderComponent {
|
|
|
6804
6903
|
return items.map((it, i) => ({ ...it, order: i }));
|
|
6805
6904
|
}
|
|
6806
6905
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSectionItemsBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6807
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSectionItemsBuilderComponent, isStandalone: true, selector: "axp-section-items-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "axp-section-items-builder-host" }, ngImport: i0, template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n <div class=\"__content\">\n @if (sectionsModel().sections.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-layer-group\"\n [title]=\"definition().texts.emptySectionsTitle\"\n [description]=\"definition().texts.emptySectionsDescription\"\n >\n </axp-state-message>\n } @else {\n <div\n class=\"__sections-container\"\n cdkDropList\n [cdkDropListData]=\"sectionsModel().sections\"\n (cdkDropListDropped)=\"onSectionDrop($event)\"\n >\n @for (row of sectionRows(); track row.section.id) {\n <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n <div class=\"__section-header\">\n @if (!readonlyMode()) {\n <div class=\"__section-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__section-info\">\n @let secTitle = sectionTitleValue(row.section) | translate | async;\n <h3 class=\"__section-title\" [title]=\"secTitle\">\n {{ secTitle }}\n @if (definition().showSectionTechnicalName) {\n @let secTechName = sectionNameValue(row.section) | translate | async;\n @if (secTechName?.trim()) {\n <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n }\n }\n @if (isDefaultSection(row.section)) {\n @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n }\n }\n </h3>\n @let secDesc = (sectionDescriptionValue(row.section) | translate | async) || '';\n @let secDescTrimmed = secDesc?.trim();\n @if (secDescTrimmed) {\n @if (containsHtmlMarkup(secDescTrimmed)) {\n <div\n class=\"__section-description __section-description--rich\"\n [title]=\"tooltipPlainTextForHtml(secDesc)\"\n [innerHTML]=\"secDesc | safe: 'html'\"\n ></div>\n } @else {\n <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n }\n }\n </div>\n @if (!readonlyMode()) {\n <div class=\"__section-actions\">\n @if (definition().promptAddItems) {\n <ax-button\n class=\"ax-sm\"\n [text]=\"definition().texts.addItem | translate | async\"\n [color]=\"'accent2'\"\n (onClick)=\"onAddItems(row.section)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n @if (definition().promptEditSection || canRemoveSection()) {\n <div class=\"__section-inline-actions\">\n @if (definition().promptEditSection) {\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"accent3\"\n (onClick)=\"onEditSection(row.section)\"\n >\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n }\n @if (canRemoveSection()) {\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"danger\"\n (onClick)=\"onRemoveSection(row.section)\"\n >\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"__items-container\">\n <div\n class=\"__items-list\"\n cdkDropList\n [id]=\"sectionItemsListId(row.section.id)\"\n [cdkDropListData]=\"row.section.items\"\n [cdkDropListConnectedTo]=\"itemDropListIds()\"\n (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\"\n >\n @if (row.itemRows.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-inbox\"\n [title]=\"definition().texts.emptyItemsTitle\"\n [description]=\"definition().texts.emptyItemsDescription\"\n >\n </axp-state-message>\n } @else {\n @for (ir of row.itemRows; track ir.item.id) {\n <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n @if (!readonlyMode()) {\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__item-content\">\n <div\n class=\"__item-leading\"\n [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async\"\n >\n <div\n class=\"__item-icon\"\n [class.__tone-easy]=\"ir.view.iconTone === 'easy'\"\n [class.__tone-medium]=\"ir.view.iconTone === 'medium'\"\n [class.__tone-hard]=\"ir.view.iconTone === 'hard'\"\n >\n <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n </div>\n </div>\n <div class=\"__item-info\">\n <div class=\"__item-info-body\">\n <div class=\"__title-row\">\n @let itemTitle =\n itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async;\n @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | translate | async;\n <h4\n class=\"__item-title\"\n [title]=\"itemTitle + (itemName?.trim() ? ' (' + itemName + ')' : '')\"\n >\n {{ itemTitle }}\n @if (itemName?.trim()) {\n <span class=\"__item-name-prefix\">({{ itemName }})</span>\n }\n </h4>\n </div>\n @let itemDesc =\n (itemMultilingualField(ir.item, 'description', ir.view.description)\n | translate\n | async) || '';\n @let itemDescTrimmed = itemDesc?.trim();\n @if (itemDescTrimmed) {\n @if (containsHtmlMarkup(itemDescTrimmed)) {\n <div\n class=\"__item-description __item-description--rich\"\n [title]=\"tooltipPlainTextForHtml(itemDesc)\"\n [innerHTML]=\"itemDesc | safe: 'html'\"\n ></div>\n } @else {\n <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n }\n }\n </div>\n <div class=\"__title-actions\">\n @for (b of ir.view.badges; track $index) {\n <span\n class=\"__item-badge\"\n [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n [class.__badge-accent]=\"b.variant === 'accent'\"\n [class.__badge-warning]=\"b.variant === 'warning'\"\n [class.__badge-danger]=\"b.variant === 'danger'\"\n [class.__badge-success]=\"b.variant === 'success'\"\n >\n @if (isTranslationKey(b.text)) {\n {{ b.text | translate | async }}\n } @else {\n {{ b.text }}\n }\n </span>\n }\n @if (!readonlyMode()) {\n <div class=\"__item-actions\">\n @if (definition().promptEditItem) {\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"accent3\"\n (onClick)=\"onEditItem(ir.item, row.section.id)\"\n >\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n }\n <ax-button\n [look]=\"'blank'\"\n class=\"ax-sm\"\n color=\"danger\"\n (onClick)=\"onRemoveItem(ir.item, row.section.id)\"\n >\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1 1 0%;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:1rem}.axp-section-items-builder .__section{border-radius:.375rem;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-section-items-builder .__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-section-items-builder .__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__section .__section-header .__section-drag-handle:active{cursor:grabbing}.axp-section-items-builder .__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.axp-section-items-builder .__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description,.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p{margin:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.axp-section-items-builder .__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__section .__items-container{padding:1rem}.axp-section-items-builder .__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.axp-section-items-builder .__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--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));-webkit-user-select:none;user-select:none}.axp-section-items-builder .__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__item .__drag-handle:active{cursor:grabbing}.axp-section-items-builder .__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.axp-section-items-builder .__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-section-items-builder .__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.axp-section-items-builder .__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.axp-section-items-builder .__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__item .__item-content .__item-description,.axp-section-items-builder .__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-description--rich p{margin:0}.axp-section-items-builder .__item .__item-content .__item-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.axp-section-items-builder .__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:.375rem;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))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container{padding:1rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;opacity:.98}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--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));-webkit-user-select:none;user-select:none}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;cursor:grabbing;opacity:.98}.__section.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__section.cdk-drag-dragging{opacity:.7}.__item.cdk-drag-placeholder{position:relative;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__item.cdk-drag-placeholder>*{opacity:0}.__item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__items-list.cdk-drop-list-dragging axp-state-message,.axp-section-items-builder .__items-list.cdk-drop-list-receiving axp-state-message{display:none}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:1rem}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "look"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6906
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPSectionItemsBuilderComponent, isStandalone: true, selector: "axp-section-items-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: true, transformFunction: null }, definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, readonlyMode: { classPropertyName: "readonlyMode", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, host: { classAttribute: "axp-section-items-builder-host" }, ngImport: i0, template: "<div class=\"axp-section-items-builder\" *translate=\"let t\">\n <div class=\"__content\">\n @if (sectionsModel().sections.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-layer-group\"\n [title]=\"definition().texts.emptySectionsTitle\"\n [description]=\"definition().texts.emptySectionsDescription\"\n >\n </axp-state-message>\n } @else {\n <div\n class=\"__sections-container\"\n cdkDropList\n [cdkDropListData]=\"sectionsModel().sections\"\n (cdkDropListDropped)=\"onSectionDrop($event)\"\n >\n @for (row of sectionRows(); track row.section.id) {\n <div class=\"__section\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n <div class=\"__section-header\">\n @if (!readonlyMode()) {\n <div class=\"__section-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__section-info\">\n @let secTitle = sectionTitleValue(row.section) | translate | async;\n <h3 class=\"__section-title\" [title]=\"secTitle\">\n {{ secTitle }}\n @if (definition().showSectionTechnicalName) {\n @let secTechName = sectionNameValue(row.section) | translate | async;\n @if (secTechName?.trim()) {\n <span class=\"__section-name-prefix\">({{ secTechName }})</span>\n }\n }\n @if (isDefaultSection(row.section)) {\n @if (definition().texts.defaultSectionBadge; as defaultBadge) {\n <span class=\"__default-section-badge\">{{ defaultBadge | translate | async }}</span>\n }\n }\n </h3>\n @let secDesc = (sectionDescriptionValue(row.section) | translate | async) || '';\n @let secDescTrimmed = secDesc?.trim();\n @if (secDescTrimmed) {\n @if (containsHtmlMarkup(secDescTrimmed)) {\n <div\n class=\"__section-description __section-description--rich\"\n [title]=\"tooltipPlainTextForHtml(secDesc)\"\n [innerHTML]=\"secDesc | safe: 'html'\"\n ></div>\n } @else {\n <p class=\"__section-description\" [title]=\"secDescTrimmed\">{{ secDescTrimmed }}</p>\n }\n }\n </div>\n @if (!readonlyMode()) {\n <div class=\"__section-actions\">\n @if (definition().promptAddItems) {\n <ax-button\n class=\"ax-sm\"\n [text]=\"definition().texts.addItem | translate | async\"\n [color]=\"'accent2'\"\n (onClick)=\"onAddItems(row.section)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n @if (definition().promptEditSection || canRemoveSection()) {\n <div class=\"__section-inline-actions\">\n @if (definition().promptEditSection) {\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"accent3\"\n (onClick)=\"onEditSection(row.section)\"\n >\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n }\n @if (canRemoveSection()) {\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"danger\"\n (onClick)=\"onRemoveSection(row.section)\"\n >\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n }\n </div>\n\n <div class=\"__items-container\">\n <div\n class=\"__items-list\"\n cdkDropList\n [id]=\"sectionItemsListId(row.section.id)\"\n [cdkDropListData]=\"row.section.items\"\n [cdkDropListConnectedTo]=\"itemDropListIds()\"\n (cdkDropListDropped)=\"onItemDrop($event, row.section.id)\"\n >\n @if (row.itemRows.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-inbox\"\n [title]=\"definition().texts.emptyItemsTitle\"\n [description]=\"definition().texts.emptyItemsDescription\"\n >\n </axp-state-message>\n } @else {\n @for (ir of row.itemRows; track ir.item.id) {\n <div class=\"__item\" cdkDrag cdkDragPreviewClass=\"axp-section-items-builder-drag-preview\">\n @if (!readonlyMode()) {\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__item-content\">\n <div\n class=\"__item-leading\"\n [title]=\"itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async\"\n >\n <div\n class=\"__item-icon\"\n [class.__tone-easy]=\"ir.view.iconTone === 'easy'\"\n [class.__tone-medium]=\"ir.view.iconTone === 'medium'\"\n [class.__tone-hard]=\"ir.view.iconTone === 'hard'\"\n >\n <ax-icon [icon]=\"ir.view.icon\"></ax-icon>\n </div>\n </div>\n <div class=\"__item-info\">\n <div class=\"__item-info-body\">\n <div class=\"__title-row\">\n @let itemTitle =\n itemMultilingualField(ir.item, 'title', ir.view.title) | translate | async;\n @let itemName = itemMultilingualField(ir.item, 'name', ir.view.name) | translate | async;\n <h4\n class=\"__item-title\"\n [title]=\"itemTitle + (itemName?.trim() ? ' (' + itemName + ')' : '')\"\n >\n {{ itemTitle }}\n @if (itemName?.trim()) {\n <span class=\"__item-name-prefix\">({{ itemName }})</span>\n }\n </h4>\n </div>\n @let itemDesc =\n (itemMultilingualField(ir.item, 'description', ir.view.description)\n | translate\n | async) || '';\n @let itemDescTrimmed = itemDesc?.trim();\n @if (itemDescTrimmed) {\n @if (containsHtmlMarkup(itemDescTrimmed)) {\n <div\n class=\"__item-description __item-description--rich\"\n [title]=\"tooltipPlainTextForHtml(itemDesc)\"\n [innerHTML]=\"itemDesc | safe: 'html'\"\n ></div>\n } @else {\n <p class=\"__item-description\" [title]=\"itemDescTrimmed\">{{ itemDescTrimmed }}</p>\n }\n }\n </div>\n <div class=\"__title-actions\">\n @for (b of ir.view.badges; track $index) {\n <span\n class=\"__item-badge\"\n [class.__badge-neutral]=\"!b.variant || b.variant === 'neutral'\"\n [class.__badge-accent]=\"b.variant === 'accent'\"\n [class.__badge-warning]=\"b.variant === 'warning'\"\n [class.__badge-danger]=\"b.variant === 'danger'\"\n [class.__badge-success]=\"b.variant === 'success'\"\n >\n @if (isTranslationKey(b.text)) {\n {{ b.text | translate | async }}\n } @else {\n {{ b.text }}\n }\n </span>\n }\n @if (!readonlyMode()) {\n <div class=\"__item-actions\">\n @if (definition().promptEditItem) {\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"accent3\"\n (onClick)=\"onEditItem(ir.item, row.section.id)\"\n >\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n }\n <ax-button\n [look]=\"'blank'\"\n class=\"ax-sm\"\n color=\"danger\"\n (onClick)=\"onRemoveItem(ir.item, row.section.id)\"\n >\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </div>\n </div>\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".axp-section-items-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-section-items-builder .__content{flex:1 1 0%;overflow:auto}.axp-section-items-builder .__sections-container{display:flex;flex-direction:column;gap:1rem}.axp-section-items-builder .__section{border-radius:.375rem;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-section-items-builder .__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-section-items-builder .__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__section .__section-header .__section-drag-handle:active{cursor:grabbing}.axp-section-items-builder .__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.axp-section-items-builder .__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description,.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p{margin:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.axp-section-items-builder .__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__section .__items-container{padding:1rem}.axp-section-items-builder .__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.axp-section-items-builder .__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--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));-webkit-user-select:none;user-select:none}.axp-section-items-builder .__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-section-items-builder .__item .__drag-handle:active{cursor:grabbing}.axp-section-items-builder .__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.axp-section-items-builder .__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.axp-section-items-builder .__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.axp-section-items-builder .__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.axp-section-items-builder .__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.axp-section-items-builder .__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.axp-section-items-builder .__item .__item-content .__item-description,.axp-section-items-builder .__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-description--rich p{margin:0}.axp-section-items-builder .__item .__item-content .__item-description--rich p:first-child{margin-top:0}.axp-section-items-builder .__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.axp-section-items-builder .__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.axp-section-items-builder .__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.axp-section-items-builder .__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.axp-section-items-builder .__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.axp-section-items-builder .__item{cursor:move}.axp-section-items-builder .__item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px 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-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{border-radius:.375rem;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))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info{min-width:0px;flex:1 1 0%}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title{margin-bottom:.25rem;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;overflow:hidden;overflow-wrap:break-word;font-size:1.125rem;line-height:1.75rem;font-weight:600}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__section-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-title .__default-section-badge{margin-left:.5rem;display:inline-flex;border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-info .__section-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-actions{display:flex;flex-shrink:0;align-items:center;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__section-header .__section-inline-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container{padding:1rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section .__items-container .__items-list{display:flex;flex-direction:column;gap:.75rem;min-height:3rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__section{--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;opacity:.98}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--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));-webkit-user-select:none;user-select:none}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:active{cursor:grabbing}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content{display:flex;min-width:0px;flex:1 1 0%;align-items:center;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-leading{display:flex;flex-shrink:0;align-items:center;justify-content:center}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-easy{background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-medium{background-color:rgba(var(--ax-sys-color-warning-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-icon.__tone-hard{background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info{display:flex;min-width:0px;flex:1 1 0%;flex-direction:row;align-items:center;justify-content:space-between;gap:.75rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-info-body{display:flex;min-width:0px;flex:1 1 0%;flex-direction:column;gap:.125rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-row{display:flex;min-width:0px;align-items:baseline}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title{margin-bottom:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1;min-width:0px;flex:1 1 0%;overflow:hidden;overflow-wrap:break-word;font-size:1rem;line-height:1.5rem;font-weight:600;line-height:1.375}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-title .__item-name-prefix{margin-left:.25rem;font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));font-weight:300}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description,.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich{margin-top:0;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;overflow-wrap:break-word;font-size:.875rem;line-height:1.25rem;line-height:1.375;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p{margin:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich p:first-child{margin-top:0}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ul{list-style-type:disc;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich ol{list-style-type:decimal;list-style-position:outside;margin-block:.375rem 0;padding-inline-start:1.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-description--rich li{margin-block:.125rem;padding-inline-start:.25rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__title-actions{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:.5rem}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:9999px;border-width:1px;padding-left:.375rem;padding-right:.375rem;padding-top:1px;padding-bottom:1px;font-size:.6875rem;font-weight:500;line-height:1}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-neutral{--tw-border-opacity: 1;border-color:rgb(229 229 229 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgb(64 64 64 / var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-accent{border-color:rgba(var(--ax-sys-color-accent2-500),.3);background-color:rgba(var(--ax-sys-color-accent2-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning{border-color:rgba(var(--ax-sys-color-warning-500),.4);--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-lightest-surface),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-800),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-warning:is(.ax-dark *){--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-600),var(--tw-border-opacity, 1));background-color:rgba(var(--ax-sys-color-warning-900),.85);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-100),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-danger{border-color:rgba(var(--ax-sys-color-danger-500),.4);background-color:rgba(var(--ax-sys-color-danger-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-badge.__badge-success{border-color:rgba(var(--ax-sys-color-success-500),.4);background-color:rgba(var(--ax-sys-color-success-500),.1);--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-success-500),var(--tw-text-opacity, 1))}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item .__item-content .__item-actions{display:flex;align-items:center;gap:0px}.cdk-drag-preview.axp-section-items-builder-drag-preview.__item{--tw-shadow: 0 20px 25px -5px rgb(0 0 0 / .1), 0 8px 10px -6px rgb(0 0 0 / .1);--tw-shadow-colored: 0 20px 25px -5px var(--tw-shadow-color), 0 8px 10px -6px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-sizing:border-box;cursor:grabbing;opacity:.98}.__section.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin-bottom:1rem;min-height:8rem}.__section.cdk-drag-dragging{opacity:.7}.__item.cdk-drag-placeholder{position:relative;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));min-height:5rem;margin-bottom:.75rem;opacity:.5}.__item.cdk-drag-placeholder>*{opacity:0}.__item.cdk-drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-section-items-builder .__items-list.cdk-drop-list-dragging .__item:not(.cdk-drag-placeholder){margin-bottom:.75rem}.axp-section-items-builder .__items-list.cdk-drop-list-dragging,.axp-section-items-builder .__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.axp-section-items-builder .__items-list.cdk-drop-list-dragging axp-state-message,.axp-section-items-builder .__items-list.cdk-drop-list-receiving axp-state-message{display:none}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging .__section:not(.cdk-drag-placeholder){margin-bottom:1rem}.axp-section-items-builder .__sections-container.cdk-drop-list-dragging:has(.__section.cdk-drag-placeholder),.axp-section-items-builder .__sections-container.cdk-drop-list-receiving:has(.__section.cdk-drag-placeholder){border-radius:.5rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { 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: "directive", type: i3.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AXSafePipe, name: "safe" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6808
6907
|
}
|
|
6809
6908
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPSectionItemsBuilderComponent, decorators: [{
|
|
6810
6909
|
type: Component,
|
|
@@ -8179,6 +8278,18 @@ class AXPTableColumnsEditorPopupComponent extends AXBasePageComponent {
|
|
|
8179
8278
|
const initial = this.columns();
|
|
8180
8279
|
this.localColumns.set(cloneDeep(initial?.length ? initial : []));
|
|
8181
8280
|
});
|
|
8281
|
+
setupPopupFooterKeyboardShortcuts(() => [
|
|
8282
|
+
{
|
|
8283
|
+
title: I18N$1.cancel,
|
|
8284
|
+
command: 'cancel',
|
|
8285
|
+
handler: () => this.handleCancel(),
|
|
8286
|
+
},
|
|
8287
|
+
{
|
|
8288
|
+
title: I18N$1.save,
|
|
8289
|
+
command: 'submit',
|
|
8290
|
+
handler: () => this.handleSave(),
|
|
8291
|
+
},
|
|
8292
|
+
], { id: 'table-columns-editor-popup' });
|
|
8182
8293
|
}
|
|
8183
8294
|
handleCancel() {
|
|
8184
8295
|
this.close();
|
|
@@ -8363,6 +8474,18 @@ class AXPTableDataEditorPopupComponent extends AXBasePageComponent {
|
|
|
8363
8474
|
const initial = this.rows();
|
|
8364
8475
|
this.localRows.set(Array.isArray(initial) ? cloneDeep(initial) : []);
|
|
8365
8476
|
});
|
|
8477
|
+
setupPopupFooterKeyboardShortcuts(() => [
|
|
8478
|
+
{
|
|
8479
|
+
title: I18N.cancel,
|
|
8480
|
+
command: 'cancel',
|
|
8481
|
+
handler: () => this.handleCancel(),
|
|
8482
|
+
},
|
|
8483
|
+
{
|
|
8484
|
+
title: I18N.save,
|
|
8485
|
+
command: 'submit',
|
|
8486
|
+
handler: () => this.handleSave(),
|
|
8487
|
+
},
|
|
8488
|
+
], { id: 'table-data-editor-popup' });
|
|
8366
8489
|
}
|
|
8367
8490
|
handleCancel() {
|
|
8368
8491
|
this.close();
|
|
@@ -9251,13 +9374,25 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
9251
9374
|
|
|
9252
9375
|
class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
9253
9376
|
constructor() {
|
|
9254
|
-
super(
|
|
9377
|
+
super();
|
|
9255
9378
|
//#region ---- Inputs ----
|
|
9256
9379
|
this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : /* istanbul ignore next */ []));
|
|
9257
9380
|
this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : /* istanbul ignore next */ []));
|
|
9258
9381
|
//#endregion
|
|
9259
9382
|
//#region ---- Properties ----
|
|
9260
9383
|
this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : /* istanbul ignore next */ []));
|
|
9384
|
+
setupPopupFooterKeyboardShortcuts(() => [
|
|
9385
|
+
{
|
|
9386
|
+
title: '@general:actions.close.title',
|
|
9387
|
+
command: 'cancel',
|
|
9388
|
+
handler: () => this.handleCloseClick(),
|
|
9389
|
+
},
|
|
9390
|
+
{
|
|
9391
|
+
title: '@general:actions.apply.title',
|
|
9392
|
+
command: 'apply',
|
|
9393
|
+
handler: () => this.handleApplyClick(),
|
|
9394
|
+
},
|
|
9395
|
+
], { id: 'widget-property-viewer-popup' });
|
|
9261
9396
|
}
|
|
9262
9397
|
//#endregion
|
|
9263
9398
|
//#region ---- Event Handlers ----
|
|
@@ -9273,7 +9408,7 @@ class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
|
9273
9408
|
mode: 'update'
|
|
9274
9409
|
});
|
|
9275
9410
|
}
|
|
9276
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps:
|
|
9411
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9277
9412
|
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.2.9", type: AXPWidgetPropertyViewerPopupComponent, isStandalone: true, selector: "axp-widget-property-viewer-popup", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
9278
9413
|
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
9279
9414
|
<axp-widget-property-viewer
|
|
@@ -9338,7 +9473,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
9338
9473
|
AXPWidgetPropertyViewerComponent
|
|
9339
9474
|
],
|
|
9340
9475
|
}]
|
|
9341
|
-
}], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
9476
|
+
}], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
9342
9477
|
|
|
9343
9478
|
//#endregion
|
|
9344
9479
|
//#region ---- Tab / context builders ----
|