@acorex/platform 20.5.4 → 20.6.0-next.1
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/common/index.d.ts +5 -1
- package/core/index.d.ts +443 -3
- package/fesm2022/acorex-platform-auth.mjs +19 -19
- package/fesm2022/acorex-platform-auth.mjs.map +1 -1
- package/fesm2022/{acorex-platform-common-common-settings.provider-9OHien_H.mjs → acorex-platform-common-common-settings.provider-CLb2KMfv.mjs} +4 -4
- package/fesm2022/acorex-platform-common-common-settings.provider-CLb2KMfv.mjs.map +1 -0
- package/fesm2022/acorex-platform-common.mjs +104 -104
- package/fesm2022/acorex-platform-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-core.mjs +460 -55
- package/fesm2022/acorex-platform-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-domain.mjs +37 -38
- package/fesm2022/acorex-platform-domain.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-builder.mjs +22 -18
- package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-components.mjs +571 -274
- package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-designer.mjs +84 -84
- package/fesm2022/acorex-platform-layout-designer.mjs.map +1 -1
- package/fesm2022/{acorex-platform-layout-entity-create-entity.command-DyXF9zAh.mjs → acorex-platform-layout-entity-create-entity.command-BsLbiAdA.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-entity-create-entity.command-BsLbiAdA.mjs.map +1 -0
- package/fesm2022/acorex-platform-layout-entity.mjs +150 -148
- package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-views.mjs +20 -20
- package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-widget-core.mjs +78 -76
- package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-button-widget-designer.component-C_3IWNkj.mjs → acorex-platform-layout-widgets-button-widget-designer.component-lHfg4JFJ.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-button-widget-designer.component-lHfg4JFJ.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CJltEgut.mjs → acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CMSnecnD.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CMSnecnD.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-pM-TIuk0.mjs → acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-DN-sIFYe.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-DN-sIFYe.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-BqI96-fU.mjs → acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-Bn9w0SEz.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-Bn9w0SEz.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-view.component-C-AhenaM.mjs → acorex-platform-layout-widgets-extra-properties-values-widget-view.component-B8mgcvoX.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-values-widget-view.component-B8mgcvoX.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-edit.component-DCAya5ne.mjs → acorex-platform-layout-widgets-extra-properties-widget-edit.component-Bhof2SY8.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-widget-edit.component-Bhof2SY8.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-view.component-D-PnBqLb.mjs → acorex-platform-layout-widgets-extra-properties-widget-view.component-CeQIvKVV.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-widget-view.component-CeQIvKVV.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-file-list-popup.component-CGEHOyKT.mjs → acorex-platform-layout-widgets-file-list-popup.component-BOP7jFp4.mjs} +5 -5
- package/fesm2022/acorex-platform-layout-widgets-file-list-popup.component-BOP7jFp4.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-page-widget-designer.component-Bss0xUcu.mjs → acorex-platform-layout-widgets-page-widget-designer.component-C57lyBs3.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-page-widget-designer.component-C57lyBs3.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-edit-popup.component-Cy9mHnNP.mjs → acorex-platform-layout-widgets-tabular-data-edit-popup.component-fr77M8Z0.mjs} +5 -5
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-fr77M8Z0.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-view-popup.component-DznLtuer.mjs → acorex-platform-layout-widgets-tabular-data-view-popup.component-CvZTRhct.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-view-popup.component-CvZTRhct.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-text-block-widget-designer.component-ndOUSFi9.mjs → acorex-platform-layout-widgets-text-block-widget-designer.component-DHES_0ot.mjs} +4 -4
- package/fesm2022/acorex-platform-layout-widgets-text-block-widget-designer.component-DHES_0ot.mjs.map +1 -0
- package/fesm2022/acorex-platform-layout-widgets.mjs +1600 -805
- package/fesm2022/acorex-platform-layout-widgets.mjs.map +1 -1
- package/fesm2022/acorex-platform-native.mjs +7 -7
- package/fesm2022/acorex-platform-native.mjs.map +1 -1
- package/fesm2022/acorex-platform-runtime.mjs +49 -42
- package/fesm2022/acorex-platform-runtime.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-default-entity-master-create-view.component-B1PT6FtZ.mjs → acorex-platform-themes-default-entity-master-create-view.component-C_XmJV7Y.mjs} +5 -5
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-C_XmJV7Y.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-ccqB5ShI.mjs → acorex-platform-themes-default-entity-master-list-view.component-BkY9HXcT.mjs} +51 -17
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-BkY9HXcT.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-modify-view.component-4g19A3eI.mjs → acorex-platform-themes-default-entity-master-modify-view.component-DJPDil7w.mjs} +5 -5
- package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-DJPDil7w.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-single-view.component-B8gx5cG7.mjs → acorex-platform-themes-default-entity-master-single-view.component-BArdGNfr.mjs} +8 -8
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-BArdGNfr.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-error-401.component-CcvGfdhu.mjs → acorex-platform-themes-default-error-401.component-D7rEInHg.mjs} +4 -4
- package/fesm2022/acorex-platform-themes-default-error-401.component-D7rEInHg.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-error-404.component-4-CaEsnV.mjs → acorex-platform-themes-default-error-404.component-BTZlVrd8.mjs} +4 -4
- package/fesm2022/acorex-platform-themes-default-error-404.component-BTZlVrd8.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default-error-offline.component-BhvEi6nX.mjs +19 -0
- package/fesm2022/acorex-platform-themes-default-error-offline.component-BhvEi6nX.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default.mjs +39 -39
- package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-shared-icon-chooser-view.component-Dc_Txe32.mjs → acorex-platform-themes-shared-icon-chooser-view.component-BXV40gay.mjs} +4 -4
- package/fesm2022/acorex-platform-themes-shared-icon-chooser-view.component-BXV40gay.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-shared-settings.provider-DY2xFnrv.mjs → acorex-platform-themes-shared-settings.provider-DSs1o1M6.mjs} +18 -18
- package/fesm2022/acorex-platform-themes-shared-settings.provider-DSs1o1M6.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-column.component-hgWLhhle.mjs → acorex-platform-themes-shared-theme-color-chooser-column.component-BpIf4s53.mjs} +4 -4
- package/fesm2022/acorex-platform-themes-shared-theme-color-chooser-column.component-BpIf4s53.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-view.component-CY3JZK_W.mjs → acorex-platform-themes-shared-theme-color-chooser-view.component-C9gvfQfX.mjs} +4 -4
- package/fesm2022/acorex-platform-themes-shared-theme-color-chooser-view.component-C9gvfQfX.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-shared.mjs +55 -55
- package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
- package/fesm2022/acorex-platform-workflow.mjs +1476 -28
- package/fesm2022/acorex-platform-workflow.mjs.map +1 -1
- package/layout/builder/index.d.ts +6 -2
- package/layout/components/index.d.ts +46 -4
- package/layout/widget-core/index.d.ts +2 -0
- package/layout/widgets/index.d.ts +240 -30
- package/package.json +5 -5
- package/workflow/index.d.ts +1536 -3
- package/fesm2022/acorex-platform-common-common-settings.provider-9OHien_H.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-entity-create-entity.command-DyXF9zAh.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-button-widget-designer.component-C_3IWNkj.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CJltEgut.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-pM-TIuk0.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-BqI96-fU.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-values-widget-view.component-C-AhenaM.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-widget-edit.component-DCAya5ne.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-extra-properties-widget-view.component-D-PnBqLb.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-file-list-popup.component-CGEHOyKT.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-page-widget-designer.component-Bss0xUcu.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-Cy9mHnNP.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-view-popup.component-DznLtuer.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-text-block-widget-designer.component-ndOUSFi9.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-B1PT6FtZ.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-ccqB5ShI.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-4g19A3eI.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-B8gx5cG7.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-error-401.component-CcvGfdhu.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-error-404.component-4-CaEsnV.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-error-offline.component-BNecbFEj.mjs +0 -19
- package/fesm2022/acorex-platform-themes-default-error-offline.component-BNecbFEj.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-shared-icon-chooser-view.component-Dc_Txe32.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-shared-settings.provider-DY2xFnrv.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-shared-theme-color-chooser-column.component-hgWLhhle.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-shared-theme-color-chooser-view.component-CY3JZK_W.mjs.map +0 -1
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import * as i5$1 from '@acorex/components/button';
|
|
2
2
|
import { AXButtonModule } from '@acorex/components/button';
|
|
3
|
-
import * as i1$
|
|
3
|
+
import * as i1$2 from '@acorex/cdk/common';
|
|
4
4
|
import { AXCommonModule } from '@acorex/cdk/common';
|
|
5
5
|
import * as i2$1 from '@acorex/components/decorators';
|
|
6
6
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
|
@@ -10,7 +10,7 @@ import * as i2 from '@acorex/components/skeleton';
|
|
|
10
10
|
import { AXSkeletonModule } from '@acorex/components/skeleton';
|
|
11
11
|
import * as i4$1 from '@acorex/core/format';
|
|
12
12
|
import { AXFormatModule } from '@acorex/core/format';
|
|
13
|
-
import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore, AXPGridLayoutDirective } from '@acorex/platform/core';
|
|
13
|
+
import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore, extractValue, AXPGridLayoutDirective } from '@acorex/platform/core';
|
|
14
14
|
import { AXPWorkflowService } from '@acorex/platform/workflow';
|
|
15
15
|
import * as i4 from '@angular/common';
|
|
16
16
|
import { CommonModule } from '@angular/common';
|
|
@@ -19,7 +19,7 @@ import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, s
|
|
|
19
19
|
import { AXAccordionCdkModule } from '@acorex/cdk/accordion';
|
|
20
20
|
import { AXTagModule } from '@acorex/components/tag';
|
|
21
21
|
import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
|
|
22
|
-
import * as
|
|
22
|
+
import * as i1 from '@acorex/components/badge';
|
|
23
23
|
import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
|
|
24
24
|
import * as i4$2 from '@acorex/components/search-box';
|
|
25
25
|
import { AXSearchBoxModule } from '@acorex/components/search-box';
|
|
@@ -27,18 +27,20 @@ import * as i2$2 from '@acorex/components/tree-view';
|
|
|
27
27
|
import { AXTreeViewModule } from '@acorex/components/tree-view';
|
|
28
28
|
import * as i6 from '@acorex/components/dropdown';
|
|
29
29
|
import { AXDropdownModule } from '@acorex/components/dropdown';
|
|
30
|
+
import * as i2$3 from '@acorex/components/popover';
|
|
31
|
+
import { AXPopoverModule } from '@acorex/components/popover';
|
|
30
32
|
import * as i3 from '@acorex/components/switch';
|
|
31
33
|
import { AXSwitchModule } from '@acorex/components/switch';
|
|
32
34
|
import * as i3$3 from '@angular/cdk/drag-drop';
|
|
33
35
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
34
|
-
import * as i1 from '@angular/forms';
|
|
36
|
+
import * as i1$1 from '@angular/forms';
|
|
35
37
|
import { FormsModule } from '@angular/forms';
|
|
36
38
|
import { cloneDeep, sortBy, isEmpty, isNil, isEqual, camelCase, merge, capitalize, unionBy, isArray, set } from 'lodash-es';
|
|
37
|
-
import * as i2$
|
|
39
|
+
import * as i2$5 from '@acorex/components/form';
|
|
38
40
|
import { AXFormModule } from '@acorex/components/form';
|
|
39
41
|
import * as i4$4 from '@acorex/components/text-box';
|
|
40
42
|
import { AXTextBoxModule } from '@acorex/components/text-box';
|
|
41
|
-
import * as i2$
|
|
43
|
+
import * as i2$4 from '@acorex/components/check-box';
|
|
42
44
|
import { AXCheckBoxModule } from '@acorex/components/check-box';
|
|
43
45
|
import * as i3$1 from '@acorex/components/label';
|
|
44
46
|
import { AXLabelModule } from '@acorex/components/label';
|
|
@@ -53,26 +55,24 @@ import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDire
|
|
|
53
55
|
import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
|
|
54
56
|
import * as i5$2 from '@acorex/components/select-box';
|
|
55
57
|
import { AXSelectBoxModule } from '@acorex/components/select-box';
|
|
56
|
-
import * as i1$
|
|
58
|
+
import * as i1$3 from '@acorex/components/accordion';
|
|
57
59
|
import { AXAccordionModule } from '@acorex/components/accordion';
|
|
58
|
-
import * as i2$
|
|
60
|
+
import * as i2$6 from '@acorex/components/tabs';
|
|
59
61
|
import { AXTabsModule } from '@acorex/components/tabs';
|
|
60
62
|
import * as i7 from '@acorex/cdk/list-navigation';
|
|
61
63
|
import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
|
|
62
|
-
import * as i4$5 from '@acorex/components/popover';
|
|
63
|
-
import { AXPopoverModule } from '@acorex/components/popover';
|
|
64
64
|
import { AXSelectionListModule } from '@acorex/components/selection-list';
|
|
65
65
|
import * as i5$3 from '@acorex/components/tag-box';
|
|
66
66
|
import { AXTagBoxModule } from '@acorex/components/tag-box';
|
|
67
67
|
import { AXCalendarService } from '@acorex/core/date-time';
|
|
68
68
|
import { AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPFileStorageService } from '@acorex/platform/common';
|
|
69
|
-
import * as i1$
|
|
69
|
+
import * as i1$4 from '@acorex/components/image-editor';
|
|
70
70
|
import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
|
|
71
71
|
import * as i3$4 from '@acorex/components/toolbar';
|
|
72
72
|
import { AXToolBarModule } from '@acorex/components/toolbar';
|
|
73
73
|
import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
|
|
74
74
|
import { tap } from 'rxjs/operators';
|
|
75
|
-
import * as i1$
|
|
75
|
+
import * as i1$5 from '@acorex/components/avatar';
|
|
76
76
|
import { AXAvatarModule } from '@acorex/components/avatar';
|
|
77
77
|
import * as i3$5 from '@acorex/components/image';
|
|
78
78
|
import { AXImageModule } from '@acorex/components/image';
|
|
@@ -91,13 +91,13 @@ class AXPStateMessageComponent {
|
|
|
91
91
|
// Optional styling
|
|
92
92
|
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
93
93
|
}
|
|
94
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
94
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPStateMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", 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 }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-variant]=\"variant()\">\n <div class=\"__icon\" *ngIf=\"icon()\">\n <i [class]=\"icon()\"></i>\n </div>\n <div class=\"__content\">\n <h3 class=\"__title\" *ngIf=\"title()\">{{ title() | translate | async }}</h3>\n <p class=\"__description\" *ngIf=\"description()\">{{ description() | translate | async }}</p>\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>\n", 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-variant=compact]{padding:1.5rem .75rem}.axp-state-message[data-variant=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-variant=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-variant=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-variant=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-variant=minimal]{padding:1rem .5rem}.axp-state-message[data-variant=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-variant=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-variant=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-variant=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
96
96
|
}
|
|
97
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
97
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPStateMessageComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
99
|
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-variant]=\"variant()\">\n <div class=\"__icon\" *ngIf=\"icon()\">\n <i [class]=\"icon()\"></i>\n </div>\n <div class=\"__content\">\n <h3 class=\"__title\" *ngIf=\"title()\">{{ title() | translate | async }}</h3>\n <p class=\"__description\" *ngIf=\"description()\">{{ description() | translate | async }}</p>\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>\n", 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-variant=compact]{padding:1.5rem .75rem}.axp-state-message[data-variant=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-variant=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-variant=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-variant=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-variant=minimal]{padding:1rem .5rem}.axp-state-message[data-variant=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-variant=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-variant=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-variant=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"] }]
|
|
100
|
-
}] });
|
|
100
|
+
}], 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 }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
101
101
|
|
|
102
102
|
//#region ---- Component Definition ----
|
|
103
103
|
class AXPActivityLogComponent {
|
|
@@ -228,10 +228,10 @@ class AXPActivityLogComponent {
|
|
|
228
228
|
const currentIndex = this.activities().findIndex(a => a.id === activity.id);
|
|
229
229
|
return currentIndex > 0; // Can compare if not the first activity
|
|
230
230
|
}
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 <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 <span class=\"__action-text\">{{ change.description | translate | async }}</span>\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:state-message.no-history.title'\"\n [description]=\"'@activity-log:state-message.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: i5.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", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 <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 <span class=\"__action-text\">{{ change.description | translate | async }}</span>\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: i5.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", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
233
233
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
|
|
235
235
|
type: Component,
|
|
236
236
|
args: [{ selector: 'axp-activity-log', standalone: true, imports: [
|
|
237
237
|
CommonModule,
|
|
@@ -244,8 +244,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
244
244
|
AXTagModule,
|
|
245
245
|
AXAccordionCdkModule,
|
|
246
246
|
AXPStateMessageComponent,
|
|
247
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 <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 <span class=\"__action-text\">{{ change.description | translate | async }}</span>\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:state-message.no-history.title'\"\n [description]=\"'@activity-log:state-message.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"] }]
|
|
248
|
-
}], ctorParameters: () => [] });
|
|
247
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, 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 <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 <span class=\"__action-text\">{{ change.description | translate | async }}</span>\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"] }]
|
|
248
|
+
}], ctorParameters: () => [], propDecorators: { activities: [{ type: i0.Input, args: [{ isSignal: true, alias: "activities", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }] } });
|
|
249
249
|
|
|
250
250
|
const AXP_TASK_BADGE_PROVIDERS = new InjectionToken('AXP_TASK_BADGE_PROVIDERS');
|
|
251
251
|
class AXPTaskBadgeProvider {
|
|
@@ -272,10 +272,10 @@ class AXPTaskBadgeService {
|
|
|
272
272
|
this.computedCache.set(key, total);
|
|
273
273
|
return total;
|
|
274
274
|
}
|
|
275
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
276
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTaskBadgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
276
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTaskBadgeService, providedIn: 'root' }); }
|
|
277
277
|
}
|
|
278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTaskBadgeService, decorators: [{
|
|
279
279
|
type: Injectable,
|
|
280
280
|
args: [{ providedIn: 'root' }]
|
|
281
281
|
}], ctorParameters: () => [] });
|
|
@@ -306,16 +306,16 @@ class AXPTaskBadgeDirective {
|
|
|
306
306
|
const node = signal[SIGNAL];
|
|
307
307
|
signalSetFn(node, value);
|
|
308
308
|
}
|
|
309
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
310
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
309
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTaskBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
310
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: AXPTaskBadgeDirective, isStandalone: true, selector: "[axp-task-badge]", inputs: { badgeKey: { classPropertyName: "badgeKey", publicName: "badgeKey", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "axp-task-badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
311
311
|
}
|
|
312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTaskBadgeDirective, decorators: [{
|
|
313
313
|
type: Directive,
|
|
314
314
|
args: [{
|
|
315
315
|
selector: '[axp-task-badge]',
|
|
316
316
|
standalone: true,
|
|
317
317
|
}]
|
|
318
|
-
}] });
|
|
318
|
+
}], propDecorators: { badgeKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeKey", required: false }] }], count: [{ type: i0.Input, args: [{ isSignal: true, alias: "axp-task-badge", required: false }] }] } });
|
|
319
319
|
|
|
320
320
|
class AXPMenuBadgeHelper {
|
|
321
321
|
static { this.cache = new WeakMap(); }
|
|
@@ -331,10 +331,10 @@ class AXPMenuBadgeHelper {
|
|
|
331
331
|
}
|
|
332
332
|
|
|
333
333
|
class AXPThemeLayoutPagePrimaryActionsComponent {
|
|
334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
334
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
335
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutPagePrimaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-primary", ngImport: i0, template: `<ng-content select="ax-button,ax-dropdown-button"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
336
336
|
}
|
|
337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, decorators: [{
|
|
338
338
|
type: Component,
|
|
339
339
|
args: [{
|
|
340
340
|
standalone: true,
|
|
@@ -345,10 +345,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
345
345
|
}]
|
|
346
346
|
}] });
|
|
347
347
|
class AXPThemeLayoutPageSecondaryActionsComponent {
|
|
348
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutPageSecondaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-secondary", ngImport: i0, template: `<ng-content select="ax-button-item,ax-divider,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
350
350
|
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, decorators: [{
|
|
352
352
|
type: Component,
|
|
353
353
|
args: [{
|
|
354
354
|
standalone: true,
|
|
@@ -367,8 +367,8 @@ class AXPThemeLayoutActionsComponent {
|
|
|
367
367
|
this.secondaryContent = contentChild(AXPThemeLayoutPageSecondaryActionsComponent, ...(ngDevMode ? [{ debugName: "secondaryContent" }] : []));
|
|
368
368
|
this.hasSecondary = computed(() => this.secondaryContent() != null, ...(ngDevMode ? [{ debugName: "hasSecondary" }] : []));
|
|
369
369
|
}
|
|
370
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: AXPThemeLayoutActionsComponent, isStandalone: true, selector: "axp-layout-actions", queries: [{ propertyName: "primaryContent", first: true, predicate: AXPThemeLayoutPagePrimaryActionsComponent, descendants: true, isSignal: true }, { propertyName: "secondaryContent", first: true, predicate: AXPThemeLayoutPageSecondaryActionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "primaryTemplate", first: true, predicate: ["primary"], descendants: true, isSignal: true }, { propertyName: "secondaryTemplate", first: true, predicate: ["secondary"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
372
372
|
|
|
373
373
|
<ng-template #primary>
|
|
374
374
|
<ng-content select="axp-layout-actions-primary"></ng-content>
|
|
@@ -381,7 +381,7 @@ class AXPThemeLayoutActionsComponent {
|
|
|
381
381
|
<ng-content></ng-content>
|
|
382
382
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
383
383
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutActionsComponent, decorators: [{
|
|
385
385
|
type: Component,
|
|
386
386
|
args: [{
|
|
387
387
|
imports: [],
|
|
@@ -402,17 +402,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
402
402
|
encapsulation: ViewEncapsulation.None,
|
|
403
403
|
changeDetection: ChangeDetectionStrategy.OnPush
|
|
404
404
|
}]
|
|
405
|
-
}] });
|
|
405
|
+
}], propDecorators: { primaryTemplate: [{ type: i0.ViewChild, args: ['primary', { isSignal: true }] }], primaryContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXPThemeLayoutPagePrimaryActionsComponent), { isSignal: true }] }], secondaryTemplate: [{ type: i0.ViewChild, args: ['secondary', { isSignal: true }] }], secondaryContent: [{ type: i0.ContentChild, args: [i0.forwardRef(() => AXPThemeLayoutPageSecondaryActionsComponent), { isSignal: true }] }] } });
|
|
406
406
|
|
|
407
407
|
class AXPThemeLayoutBlockComponent {
|
|
408
408
|
constructor() {
|
|
409
409
|
this.elementRef = inject(ElementRef);
|
|
410
410
|
this.hostElement = this.elementRef.nativeElement;
|
|
411
411
|
}
|
|
412
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutBlockComponent, isStandalone: true, 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 ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
414
414
|
}
|
|
415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutBlockComponent, decorators: [{
|
|
416
416
|
type: Component,
|
|
417
417
|
args: [{
|
|
418
418
|
standalone: true,
|
|
@@ -448,14 +448,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
448
448
|
}] });
|
|
449
449
|
|
|
450
450
|
class AXPThemeLayoutFooterComponent {
|
|
451
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
451
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutFooterComponent, isStandalone: true, selector: "axp-layout-footer, axp-layout-page-footer", ngImport: i0, template: `
|
|
453
453
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
454
454
|
<ng-content></ng-content>
|
|
455
455
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
456
456
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
457
457
|
}
|
|
458
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutFooterComponent, decorators: [{
|
|
459
459
|
type: Component,
|
|
460
460
|
args: [{
|
|
461
461
|
imports: [],
|
|
@@ -480,8 +480,8 @@ class AXPThemeLayoutPageHeaderComponent {
|
|
|
480
480
|
this.breadcrumbs = viewChild('breadcrumbs', ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
481
481
|
this.navButton = viewChild('navButton', ...(ngDevMode ? [{ debugName: "navButton" }] : []));
|
|
482
482
|
}
|
|
483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
483
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.10", type: AXPThemeLayoutPageHeaderComponent, isStandalone: true, selector: "axp-layout-page-header", viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true, isSignal: true }, { propertyName: "breadcrumbs", first: true, predicate: ["breadcrumbs"], descendants: true, isSignal: true }, { propertyName: "navButton", first: true, predicate: ["navButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
485
485
|
<ng-template #breadcrumbs>
|
|
486
486
|
<ng-content select="axp-layout-breadcrumbs"></ng-content>
|
|
487
487
|
</ng-template>
|
|
@@ -506,7 +506,7 @@ class AXPThemeLayoutPageHeaderComponent {
|
|
|
506
506
|
</ng-template>
|
|
507
507
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
508
508
|
}
|
|
509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, decorators: [{
|
|
510
510
|
type: Component,
|
|
511
511
|
args: [{
|
|
512
512
|
imports: [],
|
|
@@ -539,16 +539,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
539
539
|
encapsulation: ViewEncapsulation.None,
|
|
540
540
|
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
541
541
|
}]
|
|
542
|
-
}] });
|
|
542
|
+
}], propDecorators: { title: [{ type: i0.ViewChild, args: ['title', { isSignal: true }] }], description: [{ type: i0.ViewChild, args: ['description', { isSignal: true }] }], actions: [{ type: i0.ViewChild, args: ['actions', { isSignal: true }] }], navbar: [{ type: i0.ViewChild, args: ['navbar', { isSignal: true }] }], breadcrumbs: [{ type: i0.ViewChild, args: ['breadcrumbs', { isSignal: true }] }], navButton: [{ type: i0.ViewChild, args: ['navButton', { isSignal: true }] }] } });
|
|
543
543
|
class AXPThemeLayoutHeaderComponent {
|
|
544
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
545
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutHeaderComponent, isStandalone: true, selector: "axp-layout-header", ngImport: i0, template: `
|
|
546
546
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
547
547
|
<ng-content></ng-content>
|
|
548
548
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
549
549
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
550
550
|
}
|
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutHeaderComponent, decorators: [{
|
|
552
552
|
type: Component,
|
|
553
553
|
args: [{
|
|
554
554
|
imports: [],
|
|
@@ -565,10 +565,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
565
565
|
}] });
|
|
566
566
|
|
|
567
567
|
class AXPThemeLayoutListComponent {
|
|
568
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
569
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutListComponent, isStandalone: true, selector: "axp-layout-list", ngImport: i0, template: `<ng-content select="axp-layout-list-item,axp-layout-list-group,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
570
570
|
}
|
|
571
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutListComponent, decorators: [{
|
|
572
572
|
type: Component,
|
|
573
573
|
args: [{
|
|
574
574
|
standalone: true,
|
|
@@ -579,10 +579,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
579
579
|
}]
|
|
580
580
|
}] });
|
|
581
581
|
class AXPThemeLayoutListItemsGroupComponent {
|
|
582
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutListItemsGroupComponent, isStandalone: true, selector: "axp-layout-list-group", ngImport: i0, template: `<ng-content select="axp-layout-list-item, axp-layout-title, axp-layout-header ,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
584
584
|
}
|
|
585
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, decorators: [{
|
|
586
586
|
type: Component,
|
|
587
587
|
args: [{
|
|
588
588
|
standalone: true,
|
|
@@ -593,10 +593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
593
593
|
}]
|
|
594
594
|
}] });
|
|
595
595
|
class AXPThemeLayoutListItemComponent {
|
|
596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
596
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
597
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutListItemComponent, isStandalone: true, selector: "axp-layout-list-item", ngImport: i0, template: `<ng-content select="axp-layout-content,axp-layout-prefix,axp-layout-suffix,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
598
598
|
}
|
|
599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutListItemComponent, decorators: [{
|
|
600
600
|
type: Component,
|
|
601
601
|
args: [{
|
|
602
602
|
standalone: true,
|
|
@@ -608,13 +608,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
608
608
|
}] });
|
|
609
609
|
|
|
610
610
|
class AXPThemeLayoutSectionComponent {
|
|
611
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
612
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutSectionComponent, isStandalone: true, selector: "axp-layout-section", ngImport: i0, template: `
|
|
613
613
|
<ng-content select="axp-layout-header"></ng-content>
|
|
614
614
|
<ng-content select="axp-layout-content"></ng-content>
|
|
615
615
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
616
616
|
}
|
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
617
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutSectionComponent, decorators: [{
|
|
618
618
|
type: Component,
|
|
619
619
|
args: [{
|
|
620
620
|
imports: [],
|
|
@@ -630,15 +630,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
630
630
|
}] });
|
|
631
631
|
|
|
632
632
|
class AXPThemeLayoutStartSideComponent {
|
|
633
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
634
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
633
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutStartSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side, axp-layout-start-side", ngImport: i0, template: `
|
|
635
635
|
<ng-content select="axp-layout-header"></ng-content>
|
|
636
636
|
<ng-content select="axp-layout-content"></ng-content>
|
|
637
637
|
<ng-content select="axp-layout-footer"></ng-content>
|
|
638
638
|
<ng-content></ng-content>
|
|
639
639
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
640
640
|
}
|
|
641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutStartSideComponent, decorators: [{
|
|
642
642
|
type: Component,
|
|
643
643
|
args: [{
|
|
644
644
|
imports: [],
|
|
@@ -655,14 +655,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
655
655
|
}]
|
|
656
656
|
}] });
|
|
657
657
|
class AXPThemeLayoutEndSideComponent {
|
|
658
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
658
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutEndSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side, axp-layout-end-side", ngImport: i0, template: `
|
|
660
660
|
<ng-content select="axp-layout-header"></ng-content>
|
|
661
661
|
<ng-content select="axp-layout-content"></ng-content>
|
|
662
662
|
<ng-content select="axp-layout-footer"></ng-content>
|
|
663
663
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
664
664
|
}
|
|
665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutEndSideComponent, decorators: [{
|
|
666
666
|
type: Component,
|
|
667
667
|
args: [{
|
|
668
668
|
imports: [],
|
|
@@ -679,14 +679,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
679
679
|
}] });
|
|
680
680
|
|
|
681
681
|
class AXPThemeLayoutToolbarComponent {
|
|
682
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
683
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
683
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutToolbarComponent, isStandalone: true, selector: "axp-layout-toolbar", ngImport: i0, template: `
|
|
684
684
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
685
685
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
686
686
|
<ng-content></ng-content>
|
|
687
687
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
688
688
|
}
|
|
689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
689
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutToolbarComponent, decorators: [{
|
|
690
690
|
type: Component,
|
|
691
691
|
args: [{
|
|
692
692
|
imports: [],
|
|
@@ -721,10 +721,10 @@ class AXPThemeLayoutContainerComponent {
|
|
|
721
721
|
ngOnDestroy() {
|
|
722
722
|
this.mutationObserver?.disconnect();
|
|
723
723
|
}
|
|
724
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.10", type: AXPThemeLayoutContainerComponent, isStandalone: true, selector: "axp-layout-container", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
726
726
|
}
|
|
727
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPThemeLayoutContainerComponent, decorators: [{
|
|
728
728
|
type: Component,
|
|
729
729
|
args: [{
|
|
730
730
|
standalone: true,
|
|
@@ -778,6 +778,8 @@ class AXPCategoryTreeComponent {
|
|
|
778
778
|
this.tree = viewChild('tree', ...(ngDevMode ? [{ debugName: "tree" }] : []));
|
|
779
779
|
this.isLoading = signal(true, ...(ngDevMode ? [{ debugName: "isLoading" }] : []));
|
|
780
780
|
this.searchValue = signal('', ...(ngDevMode ? [{ debugName: "searchValue" }] : []));
|
|
781
|
+
this.loadingTimeoutId = null;
|
|
782
|
+
this.LOADING_DELAY = 300; // Show skeleton only if loading takes more than 300ms
|
|
781
783
|
this.treeItems = signal([
|
|
782
784
|
{
|
|
783
785
|
id: 'root',
|
|
@@ -808,7 +810,8 @@ class AXPCategoryTreeComponent {
|
|
|
808
810
|
//#endregion
|
|
809
811
|
//#region ---- Data Loading Methods ----
|
|
810
812
|
async loadRootNodes() {
|
|
811
|
-
|
|
813
|
+
// Set loading state with delay to avoid flickering
|
|
814
|
+
this.setLoadingWithDelay(true);
|
|
812
815
|
try {
|
|
813
816
|
const entities = await this.dataSource().loadRootNodes();
|
|
814
817
|
const nodes = this.convertEntitiesToTreeNodes(entities);
|
|
@@ -821,7 +824,7 @@ class AXPCategoryTreeComponent {
|
|
|
821
824
|
console.error('Error loading root nodes:', error);
|
|
822
825
|
}
|
|
823
826
|
finally {
|
|
824
|
-
this.
|
|
827
|
+
this.clearLoadingState();
|
|
825
828
|
}
|
|
826
829
|
}
|
|
827
830
|
async loadChildNodes(parentId) {
|
|
@@ -843,7 +846,8 @@ class AXPCategoryTreeComponent {
|
|
|
843
846
|
async searchNodes(searchValue) {
|
|
844
847
|
if (!this.dataSource().searchNodes)
|
|
845
848
|
return;
|
|
846
|
-
|
|
849
|
+
// Set loading state with delay to avoid flickering
|
|
850
|
+
this.setLoadingWithDelay(true);
|
|
847
851
|
try {
|
|
848
852
|
const entities = await this.dataSource().searchNodes(searchValue);
|
|
849
853
|
const nodes = this.convertEntitiesToTreeNodes(entities);
|
|
@@ -856,7 +860,7 @@ class AXPCategoryTreeComponent {
|
|
|
856
860
|
console.error('Error searching nodes:', error);
|
|
857
861
|
}
|
|
858
862
|
finally {
|
|
859
|
-
this.
|
|
863
|
+
this.clearLoadingState();
|
|
860
864
|
}
|
|
861
865
|
}
|
|
862
866
|
//#endregion
|
|
@@ -989,10 +993,38 @@ class AXPCategoryTreeComponent {
|
|
|
989
993
|
await this.loadRootNodes();
|
|
990
994
|
}
|
|
991
995
|
}
|
|
992
|
-
|
|
993
|
-
|
|
996
|
+
/**
|
|
997
|
+
* Set loading state with delay to avoid flickering for fast responses
|
|
998
|
+
*/
|
|
999
|
+
setLoadingWithDelay(loading) {
|
|
1000
|
+
if (loading) {
|
|
1001
|
+
// Clear any existing timeout
|
|
1002
|
+
if (this.loadingTimeoutId) {
|
|
1003
|
+
clearTimeout(this.loadingTimeoutId);
|
|
1004
|
+
}
|
|
1005
|
+
// Only show skeleton if loading takes more than LOADING_DELAY ms
|
|
1006
|
+
this.loadingTimeoutId = setTimeout(() => {
|
|
1007
|
+
this.isLoading.set(true);
|
|
1008
|
+
this.loadingTimeoutId = null;
|
|
1009
|
+
}, this.LOADING_DELAY);
|
|
1010
|
+
}
|
|
1011
|
+
}
|
|
1012
|
+
/**
|
|
1013
|
+
* Clear loading state and cancel any pending timeout
|
|
1014
|
+
*/
|
|
1015
|
+
clearLoadingState() {
|
|
1016
|
+
// Cancel the delayed loading state if it hasn't been set yet
|
|
1017
|
+
if (this.loadingTimeoutId) {
|
|
1018
|
+
clearTimeout(this.loadingTimeoutId);
|
|
1019
|
+
this.loadingTimeoutId = null;
|
|
1020
|
+
}
|
|
1021
|
+
// Clear the loading state
|
|
1022
|
+
this.isLoading.set(false);
|
|
1023
|
+
}
|
|
1024
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1025
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view\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>\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'\"\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 <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\">{{ item.title | translate | async }}</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]=\"actions().createChildLabel || 'Add New Child'\"\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 || 'Edit'\"\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 || 'Delete'\"\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: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: i2$2.AXTreeViewComponent, selector: "ax-tree-view", 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: i4$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], 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: i5$1.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: i5$1.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$1.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items"], 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", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
994
1026
|
}
|
|
995
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
|
|
996
1028
|
type: Component,
|
|
997
1029
|
args: [{ selector: 'axp-category-tree', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
|
|
998
1030
|
CommonModule,
|
|
@@ -1007,8 +1039,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
1007
1039
|
AXButtonModule,
|
|
1008
1040
|
AXDropdownModule,
|
|
1009
1041
|
AXPStateMessageComponent,
|
|
1010
|
-
], 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-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view\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>\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 </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\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\">{{ item.title | translate | async }}</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]=\"actions().createChildLabel || 'Add New Child'\"\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 || 'Edit'\"\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 || 'Delete'\"\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" }]
|
|
1011
|
-
}] });
|
|
1042
|
+
], 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-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view\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>\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'\"\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 <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\">{{ item.title | translate | async }}</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]=\"actions().createChildLabel || 'Add New Child'\"\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 || 'Edit'\"\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 || 'Delete'\"\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" }]
|
|
1043
|
+
}], 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 }] }] } });
|
|
1012
1044
|
|
|
1013
1045
|
//#region ---- Tree Node Interface ----
|
|
1014
1046
|
//#endregion
|
|
@@ -1055,13 +1087,128 @@ class AXPColorPalettePickerComponent {
|
|
|
1055
1087
|
}
|
|
1056
1088
|
this.colorSelected.emit(color);
|
|
1057
1089
|
}
|
|
1058
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1059
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1090
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1091
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPColorPalettePickerComponent, isStandalone: true, selector: "axp-color-palette-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSelected: "colorSelected" }, ngImport: i0, template: "<div class=\"axp-color-palette-picker\">\n <div class=\"__swatches\">\n @for (color of colors(); track color) {\n <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n @if (selectedColor() === color) {\n <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </button>\n }\n </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--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);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--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);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1060
1092
|
}
|
|
1061
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1093
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPColorPalettePickerComponent, decorators: [{
|
|
1062
1094
|
type: Component,
|
|
1063
1095
|
args: [{ selector: 'axp-color-palette-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"axp-color-palette-picker\">\n <div class=\"__swatches\">\n @for (color of colors(); track color) {\n <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n @if (selectedColor() === color) {\n <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </button>\n }\n </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--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);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--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);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}\n"] }]
|
|
1064
|
-
}] });
|
|
1096
|
+
}], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], colorSelected: [{ type: i0.Output, args: ["colorSelected"] }] } });
|
|
1097
|
+
|
|
1098
|
+
class AXPColumnItemListComponent {
|
|
1099
|
+
constructor() {
|
|
1100
|
+
this.items = input([], ...(ngDevMode ? [{ debugName: "items" }] : []));
|
|
1101
|
+
this.itemClick = output();
|
|
1102
|
+
this.moreButton = viewChild('moreButton', ...(ngDevMode ? [{ debugName: "moreButton" }] : []));
|
|
1103
|
+
this.morePopover = viewChild('morePopover', ...(ngDevMode ? [{ debugName: "morePopover" }] : []));
|
|
1104
|
+
this.isMorePopoverOpen = signal(false, ...(ngDevMode ? [{ debugName: "isMorePopoverOpen" }] : []));
|
|
1105
|
+
}
|
|
1106
|
+
showMoreItems() {
|
|
1107
|
+
this.openMorePopover();
|
|
1108
|
+
}
|
|
1109
|
+
onMorePopoverOpenChange(event) {
|
|
1110
|
+
this.isMorePopoverOpen.set(event);
|
|
1111
|
+
}
|
|
1112
|
+
openMorePopover() {
|
|
1113
|
+
if (this.morePopover() && this.moreButton()) {
|
|
1114
|
+
this.morePopover().target = this.moreButton().nativeElement;
|
|
1115
|
+
this.morePopover().open();
|
|
1116
|
+
this.isMorePopoverOpen.set(true);
|
|
1117
|
+
}
|
|
1118
|
+
}
|
|
1119
|
+
submitClick(event) {
|
|
1120
|
+
this.itemClick.emit(event);
|
|
1121
|
+
// console.log(event);
|
|
1122
|
+
this.morePopover()?.close();
|
|
1123
|
+
}
|
|
1124
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPColumnItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1125
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPColumnItemListComponent, isStandalone: true, selector: "axp-column-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1126
|
+
<div class="ax-flex ax-gap-1 ax-items-center">
|
|
1127
|
+
@if (items().length === 0) {
|
|
1128
|
+
<span class="ax-text-muted">---</span>
|
|
1129
|
+
} @else if (items().length === 1) {
|
|
1130
|
+
<span class="ax-text-sm">{{ items()[0].content }}</span>
|
|
1131
|
+
} @else {
|
|
1132
|
+
<span class="ax-text-sm ax-flex-1 ax-min-w-0 ax-overflow-hidden">
|
|
1133
|
+
@for (item of items(); track item.id) {
|
|
1134
|
+
<ax-badge class="ax-p-0.5" [text]="item.content"></ax-badge>
|
|
1135
|
+
}
|
|
1136
|
+
</span>
|
|
1137
|
+
}
|
|
1138
|
+
|
|
1139
|
+
@if (items().length > 0) {
|
|
1140
|
+
<span
|
|
1141
|
+
class="ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter"
|
|
1142
|
+
(click)="showMoreItems()"
|
|
1143
|
+
#moreButton
|
|
1144
|
+
>
|
|
1145
|
+
<i class="fa-light fa-ellipsis-vertical"></i>
|
|
1146
|
+
</span>
|
|
1147
|
+
}
|
|
1148
|
+
</div>
|
|
1149
|
+
|
|
1150
|
+
<!-- More Items Popover -->
|
|
1151
|
+
<ax-popover [openOn]="'manual'" #morePopover (openChange)="onMorePopoverOpenChange($event)">
|
|
1152
|
+
<div class="ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]">
|
|
1153
|
+
<div class="ax-mb-4 ax-border-b ax-pb-2">
|
|
1154
|
+
<h3 class="ax-text-base ax-font-semibold">All {{ items().length }} Items</h3>
|
|
1155
|
+
</div>
|
|
1156
|
+
<div class="ax-max-h-64 ax-flex ax-flex-col ax-gap-3 ax-overflow-auto" style="max-height: max(30dvh,10rem)">
|
|
1157
|
+
@for (item of items(); track item.id) {
|
|
1158
|
+
<ax-button class="ax-sm" (onClick)="submitClick(item)" [text]="item.content"></ax-button>
|
|
1159
|
+
}
|
|
1160
|
+
</div>
|
|
1161
|
+
</div>
|
|
1162
|
+
</ax-popover>
|
|
1163
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1164
|
+
}
|
|
1165
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPColumnItemListComponent, decorators: [{
|
|
1166
|
+
type: Component,
|
|
1167
|
+
args: [{
|
|
1168
|
+
selector: 'axp-column-item-list',
|
|
1169
|
+
template: `
|
|
1170
|
+
<div class="ax-flex ax-gap-1 ax-items-center">
|
|
1171
|
+
@if (items().length === 0) {
|
|
1172
|
+
<span class="ax-text-muted">---</span>
|
|
1173
|
+
} @else if (items().length === 1) {
|
|
1174
|
+
<span class="ax-text-sm">{{ items()[0].content }}</span>
|
|
1175
|
+
} @else {
|
|
1176
|
+
<span class="ax-text-sm ax-flex-1 ax-min-w-0 ax-overflow-hidden">
|
|
1177
|
+
@for (item of items(); track item.id) {
|
|
1178
|
+
<ax-badge class="ax-p-0.5" [text]="item.content"></ax-badge>
|
|
1179
|
+
}
|
|
1180
|
+
</span>
|
|
1181
|
+
}
|
|
1182
|
+
|
|
1183
|
+
@if (items().length > 0) {
|
|
1184
|
+
<span
|
|
1185
|
+
class="ax-absolute ax-flex ax-items-center ax-end-0 ax-px-1 ax-cursor-pointer ax-h-full hover:ax-primary-lighter"
|
|
1186
|
+
(click)="showMoreItems()"
|
|
1187
|
+
#moreButton
|
|
1188
|
+
>
|
|
1189
|
+
<i class="fa-light fa-ellipsis-vertical"></i>
|
|
1190
|
+
</span>
|
|
1191
|
+
}
|
|
1192
|
+
</div>
|
|
1193
|
+
|
|
1194
|
+
<!-- More Items Popover -->
|
|
1195
|
+
<ax-popover [openOn]="'manual'" #morePopover (openChange)="onMorePopoverOpenChange($event)">
|
|
1196
|
+
<div class="ax-lightest-surface ax-border ax-rounded-lg ax-shadow-lg ax-p-4 ax-min-w-[280px]">
|
|
1197
|
+
<div class="ax-mb-4 ax-border-b ax-pb-2">
|
|
1198
|
+
<h3 class="ax-text-base ax-font-semibold">All {{ items().length }} Items</h3>
|
|
1199
|
+
</div>
|
|
1200
|
+
<div class="ax-max-h-64 ax-flex ax-flex-col ax-gap-3 ax-overflow-auto" style="max-height: max(30dvh,10rem)">
|
|
1201
|
+
@for (item of items(); track item.id) {
|
|
1202
|
+
<ax-button class="ax-sm" (onClick)="submitClick(item)" [text]="item.content"></ax-button>
|
|
1203
|
+
}
|
|
1204
|
+
</div>
|
|
1205
|
+
</div>
|
|
1206
|
+
</ax-popover>
|
|
1207
|
+
`,
|
|
1208
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
1209
|
+
imports: [AXBadgeModule, AXPopoverModule, AXButtonModule],
|
|
1210
|
+
}]
|
|
1211
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], moreButton: [{ type: i0.ViewChild, args: ['moreButton', { isSignal: true }] }], morePopover: [{ type: i0.ViewChild, args: ['morePopover', { isSignal: true }] }] } });
|
|
1065
1212
|
|
|
1066
1213
|
class AXPQueryColumnsComponent {
|
|
1067
1214
|
constructor() {
|
|
@@ -1081,10 +1228,10 @@ class AXPQueryColumnsComponent {
|
|
|
1081
1228
|
moveItemInArray(columns, event.previousIndex, event.currentIndex);
|
|
1082
1229
|
this.columns.set(columns);
|
|
1083
1230
|
}
|
|
1084
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPQueryColumnsComponent, isStandalone: true, selector: "axp-query-columns", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for (item of columns(); track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-switch\n class=\"ax-sm\"\n [ngModel]=\"item.visible\"\n (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n ></ax-switch>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { 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: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
|
|
1086
1233
|
}
|
|
1087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
|
|
1088
1235
|
type: Component,
|
|
1089
1236
|
args: [{ selector: 'axp-query-columns', imports: [
|
|
1090
1237
|
CommonModule,
|
|
@@ -1097,7 +1244,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
1097
1244
|
AXSwitchModule,
|
|
1098
1245
|
AXTranslationModule,
|
|
1099
1246
|
], template: "<div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for (item of columns(); track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-switch\n class=\"ax-sm\"\n [ngModel]=\"item.visible\"\n (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n ></ax-switch>\n </div>\n }\n </div>\n</div>\n" }]
|
|
1100
|
-
}] });
|
|
1247
|
+
}], propDecorators: { columns: [{ type: i0.Input, args: [{ isSignal: true, alias: "columns", required: false }] }, { type: i0.Output, args: ["columnsChange"] }] } });
|
|
1101
1248
|
|
|
1102
1249
|
class AXPCompareViewComponent {
|
|
1103
1250
|
constructor() {
|
|
@@ -1212,16 +1359,16 @@ class AXPCompareViewComponent {
|
|
|
1212
1359
|
}
|
|
1213
1360
|
ngOnDestroy() {
|
|
1214
1361
|
}
|
|
1215
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1216
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;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));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;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));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;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));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{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-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;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));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1362
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1363
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;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));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;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));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;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));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{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-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;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));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1217
1364
|
// Angular
|
|
1218
1365
|
CommonModule }, { kind: "ngmodule", type:
|
|
1219
1366
|
// ACoreX
|
|
1220
|
-
AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$
|
|
1367
|
+
AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$4.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type:
|
|
1221
1368
|
// Platform
|
|
1222
1369
|
AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1223
1370
|
}
|
|
1224
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1371
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
|
|
1225
1372
|
type: Component,
|
|
1226
1373
|
args: [{ selector: 'axp-compare-view', imports: [
|
|
1227
1374
|
// Angular
|
|
@@ -1235,14 +1382,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
1235
1382
|
AXTranslationModule,
|
|
1236
1383
|
// Platform
|
|
1237
1384
|
AXPWidgetCoreModule
|
|
1238
|
-
], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;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));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;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));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;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));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{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-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;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));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
|
|
1239
|
-
}] });
|
|
1385
|
+
], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;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));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;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));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;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));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{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-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;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));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
|
|
1386
|
+
}], propDecorators: { inputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputs", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
1240
1387
|
|
|
1241
1388
|
class AXPComponentSlot {
|
|
1242
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1243
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1389
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1390
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.10", type: AXPComponentSlot, isStandalone: true, ngImport: i0 }); }
|
|
1244
1391
|
}
|
|
1245
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1392
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlot, decorators: [{
|
|
1246
1393
|
type: Directive
|
|
1247
1394
|
}] });
|
|
1248
1395
|
|
|
@@ -1262,10 +1409,10 @@ class AXPComponentSlotRegistryService {
|
|
|
1262
1409
|
get(slotName) {
|
|
1263
1410
|
return this.registry.get(slotName) || [];
|
|
1264
1411
|
}
|
|
1265
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1266
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1413
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotRegistryService, providedIn: 'root' }); }
|
|
1267
1414
|
}
|
|
1268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotRegistryService, decorators: [{
|
|
1269
1416
|
type: Injectable,
|
|
1270
1417
|
args: [{
|
|
1271
1418
|
providedIn: 'root'
|
|
@@ -1364,17 +1511,17 @@ class AXPComponentSlotDirective {
|
|
|
1364
1511
|
return condition(this.contextStore.data());
|
|
1365
1512
|
//return condition(this.context());
|
|
1366
1513
|
}
|
|
1367
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1368
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
1514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1515
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.10", type: AXPComponentSlotDirective, isStandalone: false, selector: "axp-component-slot", inputs: { name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: true, transformFunction: null }, host: { classPropertyName: "host", publicName: "host", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, exportAs: ["slot"], ngImport: i0 }); }
|
|
1369
1516
|
}
|
|
1370
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotDirective, decorators: [{
|
|
1371
1518
|
type: Directive,
|
|
1372
1519
|
args: [{
|
|
1373
1520
|
selector: 'axp-component-slot',
|
|
1374
1521
|
standalone: false,
|
|
1375
1522
|
exportAs: 'slot',
|
|
1376
1523
|
}]
|
|
1377
|
-
}], ctorParameters: () => [] });
|
|
1524
|
+
}], ctorParameters: () => [], propDecorators: { name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: true }] }], host: [{ type: i0.Input, args: [{ isSignal: true, alias: "host", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }] } });
|
|
1378
1525
|
|
|
1379
1526
|
class AXPComponentSlotModule {
|
|
1380
1527
|
static forRoot(configs) {
|
|
@@ -1427,11 +1574,11 @@ class AXPComponentSlotModule {
|
|
|
1427
1574
|
f();
|
|
1428
1575
|
});
|
|
1429
1576
|
}
|
|
1430
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1431
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
1432
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
1577
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotModule, deps: [{ token: 'AXPComponentSlotModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1578
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotModule, declarations: [AXPComponentSlotDirective], exports: [AXPComponentSlotDirective] }); }
|
|
1579
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotModule }); }
|
|
1433
1580
|
}
|
|
1434
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1581
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPComponentSlotModule, decorators: [{
|
|
1435
1582
|
type: NgModule,
|
|
1436
1583
|
args: [{
|
|
1437
1584
|
declarations: [AXPComponentSlotDirective],
|
|
@@ -1661,10 +1808,10 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1661
1808
|
this.config().dataSource.filter(filter);
|
|
1662
1809
|
this.config().dataSource.refresh();
|
|
1663
1810
|
}
|
|
1664
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1665
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1811
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1812
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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]=\"config().categoryFilter?.enabled\">\n <!-- Category Filter Side Panel -->\n @if (config().categoryFilter?.enabled) {\n <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n <axp-category-tree\n [dataSource]=\"config().categoryFilter!.dataSource\"\n [config]=\"categoryTreeConfig()\"\n [actions]=\"categoryTreeActions()\"\n (nodeClick)=\"handleCategoryFilterClick($event)\"\n >\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\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm\"\n (onValueChanged)=\"handleChangeSearchValue($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n\n <ax-data-table\n #grid\n [showFooter]=\"false\"\n class=\"ax-h-[50vh]\"\n [paging]=\"true\"\n [loading]=\"{ enabled: true, animation: true }\"\n [dataSource]=\"config().dataSource\"\n [parentField]=\"config().parentField\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n (onRowClick)=\"handleRowClick($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\"\n >\n @if (config().selectionMode === 'multiple') {\n <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n }\n\n @for (col of config().columns; track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer\n [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n [caption]=\"col.title | translate | async\"\n [node]=\"{\n path: col.dataPath || col.name,\n type: col.widget.type,\n options: col.widget.options,\n }\"\n >\n </axp-widget-column-renderer>\n }\n }\n </ax-data-table>\n </div>\n </div>\n</div>\n\n<ax-footer>\n <ax-suffix>\n <ax-button\n look=\"solid\"\n [text]=\"('@general:actions.close.title' | translate | async)!\"\n (onClick)=\"handleCloseClick()\"\n >\n </ax-button>\n <ax-button\n look=\"solid\"\n color=\"primary\"\n [text]=\"('@general:actions.select.title' | translate | async)!\"\n (onClick)=\"handleSelectClick()\"\n [disabled]=\"allowSelect() === false\"\n >\n </ax-button>\n <!-- @if (config().allowCreate) {\n <ax-button\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.create.title' | translate | async\"\n (onClick)=\"handleCreateNewClick()\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n </ax-prefix>\n </ax-button>\n } -->\n </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.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-h-\\[50vh\\]{height:50vh}.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;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;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}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.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$3.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "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$3.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i4$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "cellTemplate", "headerTemplate"] }, { 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: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1666
1813
|
}
|
|
1667
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1814
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
|
|
1668
1815
|
type: Component,
|
|
1669
1816
|
args: [{ selector: 'axp-data-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1670
1817
|
CommonModule,
|
|
@@ -1680,7 +1827,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
1680
1827
|
AXBadgeModule,
|
|
1681
1828
|
AXPCategoryTreeComponent,
|
|
1682
1829
|
], inputs: [], template: "<div class=\"axp-data-selector\">\n <!-- Main Content Area -->\n <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n <!-- Category Filter Side Panel -->\n @if (config().categoryFilter?.enabled) {\n <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n <axp-category-tree\n [dataSource]=\"config().categoryFilter!.dataSource\"\n [config]=\"categoryTreeConfig()\"\n [actions]=\"categoryTreeActions()\"\n (nodeClick)=\"handleCategoryFilterClick($event)\"\n >\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\n [placeholder]=\"searchPlaceholder()\"\n [value]=\"searchTerm\"\n (onValueChanged)=\"handleChangeSearchValue($event)\"\n [axAutoFocus]=\"true\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n\n <ax-data-table\n #grid\n [showFooter]=\"false\"\n class=\"ax-h-[50vh]\"\n [paging]=\"true\"\n [loading]=\"{ enabled: true, animation: true }\"\n [dataSource]=\"config().dataSource\"\n [parentField]=\"config().parentField\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n (onRowClick)=\"handleRowClick($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\"\n >\n @if (config().selectionMode === 'multiple') {\n <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n }\n\n @for (col of config().columns; track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer\n [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n [caption]=\"col.title | translate | async\"\n [node]=\"{\n path: col.dataPath || col.name,\n type: col.widget.type,\n options: col.widget.options,\n }\"\n >\n </axp-widget-column-renderer>\n }\n }\n </ax-data-table>\n </div>\n </div>\n</div>\n\n<ax-footer>\n <ax-suffix>\n <ax-button\n look=\"solid\"\n [text]=\"('@general:actions.close.title' | translate | async)!\"\n (onClick)=\"handleCloseClick()\"\n >\n </ax-button>\n <ax-button\n look=\"solid\"\n color=\"primary\"\n [text]=\"('@general:actions.select.title' | translate | async)!\"\n (onClick)=\"handleSelectClick()\"\n [disabled]=\"allowSelect() === false\"\n >\n </ax-button>\n <!-- @if (config().allowCreate) {\n <ax-button\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.create.title' | translate | async\"\n (onClick)=\"handleCreateNewClick()\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-solid fa-add\"></ax-icon>\n </ax-prefix>\n </ax-button>\n } -->\n </ax-suffix>\n</ax-footer>\n", styles: [":host{display:block;height:100%}.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-h-\\[50vh\\]{height:50vh}.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;height:100%;overflow:hidden}.axp-data-selector-header{display:flex;justify-content:space-between;align-items:center;padding:1rem;border-bottom:1px solid var(--border-color);background:var(--surface-color);flex-shrink:0}.axp-data-selector-header h3{margin:0;font-size:1.25rem;font-weight:600;color:var(--text-color)}.axp-data-selector-content{display:flex;flex:1;overflow:hidden}.axp-data-selector-content.with-category-filter .axp-main-data-area{flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{border-right:1px solid var(--border-color);padding:1rem;overflow-y:auto;background:var(--surface-color);flex-shrink:0}.axp-data-selector .axp-main-data-area{flex:1;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}.axp-data-selector .axp-main-data-area .ax-search-box{width:100%}\n"] }]
|
|
1683
|
-
}] });
|
|
1830
|
+
}], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
|
|
1684
1831
|
|
|
1685
1832
|
var dataSelector_component = /*#__PURE__*/Object.freeze({
|
|
1686
1833
|
__proto__: null,
|
|
@@ -1730,10 +1877,10 @@ class AXPDataSelectorService {
|
|
|
1730
1877
|
};
|
|
1731
1878
|
return this.open(enhancedConfig);
|
|
1732
1879
|
}
|
|
1733
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1734
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1880
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1881
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataSelectorService, providedIn: 'root' }); }
|
|
1735
1882
|
}
|
|
1736
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1883
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDataSelectorService, decorators: [{
|
|
1737
1884
|
type: Injectable,
|
|
1738
1885
|
args: [{
|
|
1739
1886
|
providedIn: 'root'
|
|
@@ -1770,15 +1917,15 @@ class AXPDragDropListComponent {
|
|
|
1770
1917
|
this.itemClick.emit(item);
|
|
1771
1918
|
}
|
|
1772
1919
|
}
|
|
1773
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1774
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1920
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDragDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1921
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPDragDropListComponent, isStandalone: true, selector: "axp-drag-drop-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", itemClick: "itemClick", dropListDropped: "dropListDropped" }, host: { classAttribute: "axp-drag-drop-list" }, ngImport: i0, template: "<div\n class=\"axp-drag-drop-list-container ax-divide-y\"\n [attr.id]=\"listId()\"\n [attr.data-orientation]=\"orientation()\"\n axDropList\n [dropListGroup]=\"dropListGroup()\"\n [dropListOrientation]=\"orientation()\"\n (dropListDropped)=\"onDrop($event)\"\n [sortingDisabled]=\"disable()\"\n>\n @if (items().length === 0) {\n <div class=\"axp-drag-drop-list-empty\">\n <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n </div>\n }\n\n @for (item of items(); track item.id; let i = $index) {\n <div\n class=\"axp-drag-drop-list-item\"\n [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n [class]=\"item.cssClass\"\n axDrag\n [dragDisabled]=\"item.disabled || false\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n <i class=\"fa-solid fa-bars\"></i>\n </div>\n\n <div class=\"axp-drag-drop-list-item-content\">\n {{ item.content }}\n </div>\n </div>\n }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px rgba(0,0,0,.2);opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1775
1922
|
}
|
|
1776
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1923
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDragDropListComponent, decorators: [{
|
|
1777
1924
|
type: Component,
|
|
1778
1925
|
args: [{ selector: 'axp-drag-drop-list', standalone: true, imports: [CommonModule, AXDragDirective, AXDragHandleDirective, AXDropListDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1779
1926
|
class: 'axp-drag-drop-list',
|
|
1780
1927
|
}, template: "<div\n class=\"axp-drag-drop-list-container ax-divide-y\"\n [attr.id]=\"listId()\"\n [attr.data-orientation]=\"orientation()\"\n axDropList\n [dropListGroup]=\"dropListGroup()\"\n [dropListOrientation]=\"orientation()\"\n (dropListDropped)=\"onDrop($event)\"\n [sortingDisabled]=\"disable()\"\n>\n @if (items().length === 0) {\n <div class=\"axp-drag-drop-list-empty\">\n <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n </div>\n }\n\n @for (item of items(); track item.id; let i = $index) {\n <div\n class=\"axp-drag-drop-list-item\"\n [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n [class]=\"item.cssClass\"\n axDrag\n [dragDisabled]=\"item.disabled || false\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n <i class=\"fa-solid fa-bars\"></i>\n </div>\n\n <div class=\"axp-drag-drop-list-item-content\">\n {{ item.content }}\n </div>\n </div>\n }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px rgba(0,0,0,.2);opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:.9}\n"] }]
|
|
1781
|
-
}] });
|
|
1928
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }] } });
|
|
1782
1929
|
|
|
1783
1930
|
class AXPWidgetPropertyViewerService {
|
|
1784
1931
|
constructor() {
|
|
@@ -1802,10 +1949,10 @@ class AXPWidgetPropertyViewerService {
|
|
|
1802
1949
|
});
|
|
1803
1950
|
return result.data || null;
|
|
1804
1951
|
}
|
|
1805
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1806
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1952
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1953
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerService, providedIn: 'root' }); }
|
|
1807
1954
|
}
|
|
1808
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1955
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerService, decorators: [{
|
|
1809
1956
|
type: Injectable,
|
|
1810
1957
|
args: [{
|
|
1811
1958
|
providedIn: 'root'
|
|
@@ -1837,6 +1984,7 @@ function convertDesignerGroupToFormGroup(group) {
|
|
|
1837
1984
|
description: group.description,
|
|
1838
1985
|
parameters: group.fields.map(convertDesignerFieldToFormField),
|
|
1839
1986
|
mode: group.mode,
|
|
1987
|
+
look: group.look,
|
|
1840
1988
|
};
|
|
1841
1989
|
}
|
|
1842
1990
|
/**
|
|
@@ -1853,7 +2001,17 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1853
2001
|
constructor() {
|
|
1854
2002
|
//#region ---- Inputs ----
|
|
1855
2003
|
// Form definition model for two-way binding
|
|
1856
|
-
this.formDefinition = model({
|
|
2004
|
+
this.formDefinition = model({
|
|
2005
|
+
groups: [
|
|
2006
|
+
{
|
|
2007
|
+
name: 'default',
|
|
2008
|
+
title: undefined,
|
|
2009
|
+
description: undefined,
|
|
2010
|
+
parameters: [],
|
|
2011
|
+
look: 'container',
|
|
2012
|
+
},
|
|
2013
|
+
],
|
|
2014
|
+
}, ...(ngDevMode ? [{ debugName: "formDefinition" }] : []));
|
|
1857
2015
|
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1858
2016
|
// Flag to prevent external sync during internal updates
|
|
1859
2017
|
this.isInternalUpdate = false;
|
|
@@ -1862,12 +2020,18 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1862
2020
|
this.widgetRegistry = inject(AXPWidgetRegistryService);
|
|
1863
2021
|
this.formBuilderService = inject(AXPLayoutBuilderService);
|
|
1864
2022
|
this.widgetPropertyViewerService = inject(AXPWidgetPropertyViewerService);
|
|
2023
|
+
this.translationService = inject(AXTranslationService);
|
|
1865
2024
|
//#endregion
|
|
1866
2025
|
//#region ---- Class Properties ----
|
|
2026
|
+
// Default group configuration - always exists, invisible by default
|
|
2027
|
+
this.DEFAULT_GROUP_NAME = 'default';
|
|
1867
2028
|
// Designer state
|
|
1868
2029
|
this.selectedFieldId = signal(null, ...(ngDevMode ? [{ debugName: "selectedFieldId" }] : []));
|
|
1869
2030
|
// Internal designer state for UI management
|
|
1870
|
-
this.designerState = signal({
|
|
2031
|
+
this.designerState = signal({
|
|
2032
|
+
groups: [this.createDefaultGroup()],
|
|
2033
|
+
mode: 'designer',
|
|
2034
|
+
}, ...(ngDevMode ? [{ debugName: "designerState" }] : []));
|
|
1871
2035
|
// Field management - simplified approach
|
|
1872
2036
|
// Available widgets filtered by FormElement group
|
|
1873
2037
|
this.availableWidgets = computed(() => {
|
|
@@ -1897,6 +2061,14 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1897
2061
|
return [];
|
|
1898
2062
|
return groups.flatMap((group) => group.fields);
|
|
1899
2063
|
}, ...(ngDevMode ? [{ debugName: "getAllFields" }] : []));
|
|
2064
|
+
// Check if a group is the default group
|
|
2065
|
+
this.isDefaultGroup = (groupName) => {
|
|
2066
|
+
return groupName === this.DEFAULT_GROUP_NAME;
|
|
2067
|
+
};
|
|
2068
|
+
// Check if we can delete a group (more than 1 group exists)
|
|
2069
|
+
this.canDeleteGroup = computed(() => {
|
|
2070
|
+
return this.formDefinition().groups.length > 1;
|
|
2071
|
+
}, ...(ngDevMode ? [{ debugName: "canDeleteGroup" }] : []));
|
|
1900
2072
|
// Convert form definition to designer groups for template rendering
|
|
1901
2073
|
this.designerGroups = computed(() => {
|
|
1902
2074
|
const formDef = this.formDefinition();
|
|
@@ -1908,6 +2080,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1908
2080
|
title: group.title,
|
|
1909
2081
|
description: group.description,
|
|
1910
2082
|
mode: group.mode,
|
|
2083
|
+
look: group.look, // Include look property
|
|
1911
2084
|
fields: group.parameters.map((param) => ({
|
|
1912
2085
|
id: `field-${param.path}`,
|
|
1913
2086
|
name: param.path,
|
|
@@ -1933,7 +2106,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1933
2106
|
* Effect to sync form definition model to designer state
|
|
1934
2107
|
*/
|
|
1935
2108
|
this.syncModelToDesigner = effect(() => {
|
|
1936
|
-
const formDef = this.formDefinition();
|
|
2109
|
+
const formDef = this.ensureDefaultGroup(this.formDefinition());
|
|
1937
2110
|
if (formDef && formDef.groups.length > 0) {
|
|
1938
2111
|
if (!this.isInternalUpdate) {
|
|
1939
2112
|
untracked(() => {
|
|
@@ -1962,6 +2135,41 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1962
2135
|
}, ...(ngDevMode ? [{ debugName: "syncDesignerToModel" }] : []));
|
|
1963
2136
|
}
|
|
1964
2137
|
//#endregion
|
|
2138
|
+
//#region ---- Utility Methods ----
|
|
2139
|
+
/**
|
|
2140
|
+
* Create the default group for ungrouped fields
|
|
2141
|
+
*/
|
|
2142
|
+
createDefaultGroup() {
|
|
2143
|
+
return {
|
|
2144
|
+
id: this.generateId(),
|
|
2145
|
+
name: this.DEFAULT_GROUP_NAME,
|
|
2146
|
+
title: undefined, // No title = invisible in view mode
|
|
2147
|
+
description: undefined,
|
|
2148
|
+
fields: [],
|
|
2149
|
+
look: 'container', // Container look for minimal styling
|
|
2150
|
+
};
|
|
2151
|
+
}
|
|
2152
|
+
/**
|
|
2153
|
+
* Ensure form definition has at least the default group
|
|
2154
|
+
*/
|
|
2155
|
+
ensureDefaultGroup(definition) {
|
|
2156
|
+
if (!definition.groups || definition.groups.length === 0) {
|
|
2157
|
+
return {
|
|
2158
|
+
...definition,
|
|
2159
|
+
groups: [
|
|
2160
|
+
{
|
|
2161
|
+
name: this.DEFAULT_GROUP_NAME,
|
|
2162
|
+
title: undefined,
|
|
2163
|
+
description: undefined,
|
|
2164
|
+
parameters: [],
|
|
2165
|
+
look: 'container',
|
|
2166
|
+
},
|
|
2167
|
+
],
|
|
2168
|
+
};
|
|
2169
|
+
}
|
|
2170
|
+
return definition;
|
|
2171
|
+
}
|
|
2172
|
+
//#endregion
|
|
1965
2173
|
//#region ---- External API Methods ----
|
|
1966
2174
|
/**
|
|
1967
2175
|
* Get the current form definition (converted from designer state)
|
|
@@ -1973,12 +2181,14 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1973
2181
|
* Set the form definition (converted to designer state)
|
|
1974
2182
|
*/
|
|
1975
2183
|
setFormDefinition(definition) {
|
|
1976
|
-
const
|
|
2184
|
+
const ensuredDefinition = this.ensureDefaultGroup(definition);
|
|
2185
|
+
const groups = ensuredDefinition.groups.map((group) => ({
|
|
1977
2186
|
id: this.generateId(),
|
|
1978
2187
|
name: group.name,
|
|
1979
2188
|
title: group.title,
|
|
1980
2189
|
description: group.description,
|
|
1981
2190
|
mode: group.mode,
|
|
2191
|
+
look: group.look || 'container',
|
|
1982
2192
|
fields: group.parameters.map((param) => ({
|
|
1983
2193
|
id: this.generateId(),
|
|
1984
2194
|
name: param.path,
|
|
@@ -1997,33 +2207,20 @@ class AXPDynamicFormDesignerComponent {
|
|
|
1997
2207
|
/**
|
|
1998
2208
|
* Add a new field to the form
|
|
1999
2209
|
* @param field The field to add
|
|
2210
|
+
* @param groupName Optional group name to add the field to. Defaults to the default group or first group.
|
|
2000
2211
|
*/
|
|
2001
|
-
addField(field) {
|
|
2002
|
-
const currentDefinition = this.formDefinition();
|
|
2003
|
-
const updatedGroups = [...
|
|
2004
|
-
|
|
2005
|
-
|
|
2006
|
-
|
|
2007
|
-
|
|
2008
|
-
|
|
2009
|
-
|
|
2010
|
-
|
|
2011
|
-
path: field.name,
|
|
2012
|
-
title: field.title,
|
|
2013
|
-
description: field.description,
|
|
2014
|
-
widget: field.widget,
|
|
2015
|
-
mode: field.mode,
|
|
2016
|
-
layout: field.layout,
|
|
2017
|
-
},
|
|
2018
|
-
],
|
|
2019
|
-
});
|
|
2020
|
-
}
|
|
2021
|
-
else {
|
|
2022
|
-
// Add to first group
|
|
2023
|
-
updatedGroups[0] = {
|
|
2024
|
-
...updatedGroups[0],
|
|
2212
|
+
addField(field, groupName) {
|
|
2213
|
+
const currentDefinition = this.ensureDefaultGroup(this.formDefinition());
|
|
2214
|
+
const updatedGroups = [...currentDefinition.groups];
|
|
2215
|
+
// Determine which group to add the field to
|
|
2216
|
+
const targetGroupName = groupName || this.DEFAULT_GROUP_NAME;
|
|
2217
|
+
const targetGroupIndex = updatedGroups.findIndex((g) => g.name === targetGroupName);
|
|
2218
|
+
if (targetGroupIndex >= 0) {
|
|
2219
|
+
// Add to target group
|
|
2220
|
+
updatedGroups[targetGroupIndex] = {
|
|
2221
|
+
...updatedGroups[targetGroupIndex],
|
|
2025
2222
|
parameters: [
|
|
2026
|
-
...updatedGroups[
|
|
2223
|
+
...updatedGroups[targetGroupIndex].parameters,
|
|
2027
2224
|
{
|
|
2028
2225
|
path: field.name,
|
|
2029
2226
|
title: field.title,
|
|
@@ -2125,6 +2322,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2125
2322
|
layout: field.layout,
|
|
2126
2323
|
})),
|
|
2127
2324
|
mode: group.mode,
|
|
2325
|
+
look: group.look || 'container', // Default to 'container' for new groups
|
|
2128
2326
|
});
|
|
2129
2327
|
this.formDefinition.set({
|
|
2130
2328
|
...currentDefinition,
|
|
@@ -2137,11 +2335,14 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2137
2335
|
*/
|
|
2138
2336
|
removeGroup(groupName) {
|
|
2139
2337
|
const currentDefinition = this.formDefinition();
|
|
2338
|
+
// Prevent removing the last group
|
|
2339
|
+
if (currentDefinition.groups.length <= 1) {
|
|
2340
|
+
console.warn('Cannot remove the last group');
|
|
2341
|
+
return;
|
|
2342
|
+
}
|
|
2140
2343
|
const updatedGroups = currentDefinition.groups.filter((group) => group.name !== groupName);
|
|
2141
|
-
|
|
2142
|
-
|
|
2143
|
-
groups: updatedGroups,
|
|
2144
|
-
});
|
|
2344
|
+
// Ensure at least one group remains (will auto-create default if needed)
|
|
2345
|
+
this.formDefinition.set(this.ensureDefaultGroup({ ...currentDefinition, groups: updatedGroups }));
|
|
2145
2346
|
}
|
|
2146
2347
|
/**
|
|
2147
2348
|
* Reorder groups in the form
|
|
@@ -2175,6 +2376,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2175
2376
|
title: updates.title ?? group.title,
|
|
2176
2377
|
description: updates.description ?? group.description,
|
|
2177
2378
|
mode: updates.mode ?? group.mode,
|
|
2379
|
+
look: updates.look ?? group.look,
|
|
2178
2380
|
};
|
|
2179
2381
|
console.log('Updating group:', { original: group, updates, result: updatedGroup });
|
|
2180
2382
|
return updatedGroup;
|
|
@@ -2234,39 +2436,63 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2234
2436
|
//#region ---- Event Handlers ----
|
|
2235
2437
|
async handleAddGroupClick() {
|
|
2236
2438
|
try {
|
|
2439
|
+
// Translate all strings
|
|
2440
|
+
const title = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.title');
|
|
2441
|
+
const groupNameLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-name');
|
|
2442
|
+
const groupNamePlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-name-placeholder');
|
|
2443
|
+
const groupTitleLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-title');
|
|
2444
|
+
const groupTitlePlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-title-placeholder');
|
|
2445
|
+
const groupDescLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-description');
|
|
2446
|
+
const groupDescPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-description-placeholder');
|
|
2447
|
+
const groupStyleLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style');
|
|
2448
|
+
const styleOptions = [
|
|
2449
|
+
{ value: 'container', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.container') },
|
|
2450
|
+
{ value: 'card', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.card') },
|
|
2451
|
+
{ value: 'fieldset', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.fieldset') },
|
|
2452
|
+
{ value: 'group', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.group') },
|
|
2453
|
+
];
|
|
2237
2454
|
// Create dialog using new Layout Builder API
|
|
2238
2455
|
const dialogRef = await this.formBuilderService
|
|
2239
2456
|
.create()
|
|
2240
2457
|
.dialog((dialog) => {
|
|
2241
2458
|
dialog
|
|
2242
|
-
.setTitle(
|
|
2459
|
+
.setTitle(title)
|
|
2243
2460
|
.setSize('md')
|
|
2244
2461
|
.setCloseButton(true)
|
|
2245
|
-
.setContext({ name: '', title: '', description: '' })
|
|
2462
|
+
.setContext({ name: '', title: '', description: '', look: 'container' })
|
|
2246
2463
|
.content((layoutBuilder) => {
|
|
2247
2464
|
layoutBuilder.flex((flex) => {
|
|
2248
2465
|
flex
|
|
2249
2466
|
.setDirection('column')
|
|
2250
2467
|
.setGap('16px')
|
|
2251
|
-
.formField(
|
|
2468
|
+
.formField(groupNameLabel, (field) => {
|
|
2252
2469
|
field.path('name');
|
|
2253
2470
|
field.textBox({
|
|
2254
|
-
placeholder:
|
|
2471
|
+
placeholder: groupNamePlaceholder,
|
|
2255
2472
|
validations: [{ rule: 'required' }],
|
|
2256
2473
|
});
|
|
2257
2474
|
})
|
|
2258
|
-
.formField(
|
|
2475
|
+
.formField(groupTitleLabel, (field) => {
|
|
2259
2476
|
field.path('title');
|
|
2260
2477
|
field.textBox({
|
|
2261
|
-
placeholder:
|
|
2478
|
+
placeholder: groupTitlePlaceholder,
|
|
2262
2479
|
});
|
|
2263
2480
|
})
|
|
2264
|
-
.formField(
|
|
2481
|
+
.formField(groupDescLabel, (field) => {
|
|
2265
2482
|
field.path('description');
|
|
2266
2483
|
field.largeTextBox({
|
|
2267
|
-
placeholder:
|
|
2484
|
+
placeholder: groupDescPlaceholder,
|
|
2268
2485
|
rows: 3,
|
|
2269
2486
|
});
|
|
2487
|
+
})
|
|
2488
|
+
.formField(groupStyleLabel, (field) => {
|
|
2489
|
+
field.path('look');
|
|
2490
|
+
field.selectBox({
|
|
2491
|
+
dataSource: styleOptions,
|
|
2492
|
+
valueField: 'value',
|
|
2493
|
+
textField: 'text',
|
|
2494
|
+
validations: [{ rule: 'required' }],
|
|
2495
|
+
});
|
|
2270
2496
|
});
|
|
2271
2497
|
});
|
|
2272
2498
|
})
|
|
@@ -2285,6 +2511,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2285
2511
|
name: this.deriveGroupKey(formData.name),
|
|
2286
2512
|
title: formData.title || formData.name,
|
|
2287
2513
|
description: formData.description,
|
|
2514
|
+
look: extractValue(formData.look, 'value'),
|
|
2288
2515
|
fields: [],
|
|
2289
2516
|
layout: {
|
|
2290
2517
|
positions: {
|
|
@@ -2303,12 +2530,20 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2303
2530
|
}
|
|
2304
2531
|
async handleAddFieldToGroup(group) {
|
|
2305
2532
|
try {
|
|
2533
|
+
// Translate all strings
|
|
2534
|
+
const title = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.add-dialog.title', {
|
|
2535
|
+
params: { groupName: group.title || group.name }
|
|
2536
|
+
});
|
|
2537
|
+
const fieldTitleLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.add-dialog.field-title');
|
|
2538
|
+
const fieldTitlePlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.add-dialog.field-title-placeholder');
|
|
2539
|
+
const widgetTypeLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.add-dialog.widget-type');
|
|
2540
|
+
const widgetTypePlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.add-dialog.widget-type-placeholder');
|
|
2306
2541
|
// Create dialog using new Layout Builder API
|
|
2307
2542
|
const dialogRef = await this.formBuilderService
|
|
2308
2543
|
.create()
|
|
2309
2544
|
.dialog((dialog) => {
|
|
2310
2545
|
dialog
|
|
2311
|
-
.setTitle(
|
|
2546
|
+
.setTitle(title)
|
|
2312
2547
|
.setSize('sm')
|
|
2313
2548
|
.setCloseButton(true)
|
|
2314
2549
|
.setContext({ title: '', widgetType: '' })
|
|
@@ -2317,20 +2552,20 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2317
2552
|
flex
|
|
2318
2553
|
.setDirection('column')
|
|
2319
2554
|
.setGap('16px')
|
|
2320
|
-
.formField(
|
|
2555
|
+
.formField(fieldTitleLabel, (field) => {
|
|
2321
2556
|
field.path('title');
|
|
2322
2557
|
field.textBox({
|
|
2323
|
-
placeholder:
|
|
2558
|
+
placeholder: fieldTitlePlaceholder,
|
|
2324
2559
|
validations: [{ rule: 'required' }],
|
|
2325
2560
|
});
|
|
2326
2561
|
})
|
|
2327
|
-
.formField(
|
|
2562
|
+
.formField(widgetTypeLabel, (field) => {
|
|
2328
2563
|
field.path('widgetType');
|
|
2329
2564
|
field.selectBox({
|
|
2330
2565
|
valueField: 'value',
|
|
2331
2566
|
textField: 'text',
|
|
2332
2567
|
dataSource: this.widgetOptions(),
|
|
2333
|
-
placeholder:
|
|
2568
|
+
placeholder: widgetTypePlaceholder,
|
|
2334
2569
|
validations: [{ rule: 'required' }],
|
|
2335
2570
|
});
|
|
2336
2571
|
});
|
|
@@ -2377,9 +2612,13 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2377
2612
|
}
|
|
2378
2613
|
async handleFieldEdit(field) {
|
|
2379
2614
|
try {
|
|
2615
|
+
// Translate title
|
|
2616
|
+
const title = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.edit-dialog.title', {
|
|
2617
|
+
params: { fieldName: field.title }
|
|
2618
|
+
});
|
|
2380
2619
|
// Use the existing widget property viewer service
|
|
2381
2620
|
const result = await this.widgetPropertyViewerService.open({
|
|
2382
|
-
title:
|
|
2621
|
+
title: title,
|
|
2383
2622
|
widget: field.widget,
|
|
2384
2623
|
mode: 'advanced',
|
|
2385
2624
|
size: 'md',
|
|
@@ -2405,34 +2644,59 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2405
2644
|
async handleGroupEdit(group) {
|
|
2406
2645
|
// Similar to field edit but for group properties
|
|
2407
2646
|
try {
|
|
2647
|
+
// Translate all strings
|
|
2648
|
+
const title = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.edit-dialog.title', {
|
|
2649
|
+
params: { groupName: group.title || group.name }
|
|
2650
|
+
});
|
|
2651
|
+
const groupTitleLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-title');
|
|
2652
|
+
const groupTitlePlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-title-placeholder');
|
|
2653
|
+
const groupDescLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-description');
|
|
2654
|
+
const groupDescPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-description-placeholder');
|
|
2655
|
+
const groupStyleLabel = await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style');
|
|
2656
|
+
const styleOptions = [
|
|
2657
|
+
{ value: 'container', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.container') },
|
|
2658
|
+
{ value: 'card', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.card') },
|
|
2659
|
+
{ value: 'fieldset', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.fieldset') },
|
|
2660
|
+
{ value: 'group', text: await this.translationService.translateAsync('@dynamic-form-designer:components.groups.add-dialog.group-style-options.group') },
|
|
2661
|
+
];
|
|
2408
2662
|
const dialogRef = await this.formBuilderService
|
|
2409
2663
|
.create()
|
|
2410
2664
|
.dialog((dialog) => {
|
|
2411
2665
|
dialog
|
|
2412
|
-
.setTitle(
|
|
2666
|
+
.setTitle(title)
|
|
2413
2667
|
.setSize('md')
|
|
2414
2668
|
.setCloseButton(true)
|
|
2415
2669
|
.setContext({
|
|
2416
2670
|
title: group.title || '',
|
|
2417
2671
|
description: group.description || '',
|
|
2672
|
+
look: group.look || 'container',
|
|
2418
2673
|
})
|
|
2419
2674
|
.content((layoutBuilder) => {
|
|
2420
2675
|
layoutBuilder.flex((flex) => {
|
|
2421
2676
|
flex
|
|
2422
2677
|
.setDirection('column')
|
|
2423
2678
|
.setGap('16px')
|
|
2424
|
-
.formField(
|
|
2679
|
+
.formField(groupTitleLabel, (field) => {
|
|
2425
2680
|
field.path('title');
|
|
2426
2681
|
field.textBox({
|
|
2427
|
-
placeholder:
|
|
2682
|
+
placeholder: groupTitlePlaceholder,
|
|
2428
2683
|
});
|
|
2429
2684
|
})
|
|
2430
|
-
.formField(
|
|
2685
|
+
.formField(groupDescLabel, (field) => {
|
|
2431
2686
|
field.path('description');
|
|
2432
2687
|
field.largeTextBox({
|
|
2433
|
-
placeholder:
|
|
2688
|
+
placeholder: groupDescPlaceholder,
|
|
2434
2689
|
rows: 3,
|
|
2435
2690
|
});
|
|
2691
|
+
})
|
|
2692
|
+
.formField(groupStyleLabel, (field) => {
|
|
2693
|
+
field.path('look');
|
|
2694
|
+
field.selectBox({
|
|
2695
|
+
dataSource: styleOptions,
|
|
2696
|
+
valueField: 'value',
|
|
2697
|
+
textField: 'text',
|
|
2698
|
+
validations: [{ rule: 'required' }],
|
|
2699
|
+
});
|
|
2436
2700
|
});
|
|
2437
2701
|
});
|
|
2438
2702
|
})
|
|
@@ -2446,6 +2710,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2446
2710
|
this.updateGroup(group.name, {
|
|
2447
2711
|
title: formData.title,
|
|
2448
2712
|
description: formData.description,
|
|
2713
|
+
look: extractValue(formData.look, 'value'),
|
|
2449
2714
|
});
|
|
2450
2715
|
}
|
|
2451
2716
|
}
|
|
@@ -2467,12 +2732,41 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2467
2732
|
async handleFieldLayoutEdit(field, group) {
|
|
2468
2733
|
try {
|
|
2469
2734
|
const currentLayout = field.layout || { positions: {} };
|
|
2735
|
+
// Translate all strings
|
|
2736
|
+
const title = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.title', {
|
|
2737
|
+
params: { fieldName: field.title || field.name }
|
|
2738
|
+
});
|
|
2739
|
+
const configTitle = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.configuration-title');
|
|
2740
|
+
const smColSpan = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.sm-col-span');
|
|
2741
|
+
const smColSpanPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.sm-col-span-placeholder');
|
|
2742
|
+
const smColStart = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.sm-col-start');
|
|
2743
|
+
const smColStartPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.sm-col-start-placeholder');
|
|
2744
|
+
const mdColSpan = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.md-col-span');
|
|
2745
|
+
const mdColSpanPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.md-col-span-placeholder');
|
|
2746
|
+
const mdColStart = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.md-col-start');
|
|
2747
|
+
const mdColStartPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.md-col-start-placeholder');
|
|
2748
|
+
const lgColSpan = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.lg-col-span');
|
|
2749
|
+
const lgColSpanPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.lg-col-span-placeholder');
|
|
2750
|
+
const lgColStart = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.lg-col-start');
|
|
2751
|
+
const lgColStartPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.lg-col-start-placeholder');
|
|
2752
|
+
const xlColSpan = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xl-col-span');
|
|
2753
|
+
const xlColSpanPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xl-col-span-placeholder');
|
|
2754
|
+
const xlColStart = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xl-col-start');
|
|
2755
|
+
const xlColStartPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xl-col-start-placeholder');
|
|
2756
|
+
const xxlColSpan = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxl-col-span');
|
|
2757
|
+
const xxlColSpanPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxl-col-span-placeholder');
|
|
2758
|
+
const xxlColStart = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxl-col-start');
|
|
2759
|
+
const xxlColStartPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxl-col-start-placeholder');
|
|
2760
|
+
const xxxlColSpan = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxxl-col-span');
|
|
2761
|
+
const xxxlColSpanPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxxl-col-span-placeholder');
|
|
2762
|
+
const xxxlColStart = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxxl-col-start');
|
|
2763
|
+
const xxxlColStartPlaceholder = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.layout-dialog.xxxl-col-start-placeholder');
|
|
2470
2764
|
// Create dialog using new Layout Builder API
|
|
2471
2765
|
const dialogRef = await this.formBuilderService
|
|
2472
2766
|
.create()
|
|
2473
2767
|
.dialog((dialog) => {
|
|
2474
2768
|
dialog
|
|
2475
|
-
.setTitle(
|
|
2769
|
+
.setTitle(title)
|
|
2476
2770
|
.setSize('lg')
|
|
2477
2771
|
.setCloseButton(true)
|
|
2478
2772
|
.setContext({
|
|
@@ -2494,57 +2788,57 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2494
2788
|
flex
|
|
2495
2789
|
.setDirection('column')
|
|
2496
2790
|
.setGap('16px')
|
|
2497
|
-
.formField(
|
|
2791
|
+
.formField(configTitle, (f) => {
|
|
2498
2792
|
f.setShowLabel(false);
|
|
2499
2793
|
f.customWidget('spacer');
|
|
2500
2794
|
})
|
|
2501
|
-
.formField(
|
|
2795
|
+
.formField(smColSpan, (f) => {
|
|
2502
2796
|
f.path('sm_colSpan');
|
|
2503
|
-
f.numberBox({ placeholder:
|
|
2797
|
+
f.numberBox({ placeholder: smColSpanPlaceholder });
|
|
2504
2798
|
})
|
|
2505
|
-
.formField(
|
|
2799
|
+
.formField(smColStart, (f) => {
|
|
2506
2800
|
f.path('sm_colStart');
|
|
2507
|
-
f.numberBox({ placeholder:
|
|
2801
|
+
f.numberBox({ placeholder: smColStartPlaceholder });
|
|
2508
2802
|
})
|
|
2509
|
-
.formField(
|
|
2803
|
+
.formField(mdColSpan, (f) => {
|
|
2510
2804
|
f.path('md_colSpan');
|
|
2511
|
-
f.numberBox({ placeholder:
|
|
2805
|
+
f.numberBox({ placeholder: mdColSpanPlaceholder });
|
|
2512
2806
|
})
|
|
2513
|
-
.formField(
|
|
2807
|
+
.formField(mdColStart, (f) => {
|
|
2514
2808
|
f.path('md_colStart');
|
|
2515
|
-
f.numberBox({ placeholder:
|
|
2809
|
+
f.numberBox({ placeholder: mdColStartPlaceholder });
|
|
2516
2810
|
})
|
|
2517
|
-
.formField(
|
|
2811
|
+
.formField(lgColSpan, (f) => {
|
|
2518
2812
|
f.path('lg_colSpan');
|
|
2519
|
-
f.numberBox({ placeholder:
|
|
2813
|
+
f.numberBox({ placeholder: lgColSpanPlaceholder });
|
|
2520
2814
|
})
|
|
2521
|
-
.formField(
|
|
2815
|
+
.formField(lgColStart, (f) => {
|
|
2522
2816
|
f.path('lg_colStart');
|
|
2523
|
-
f.numberBox({ placeholder:
|
|
2817
|
+
f.numberBox({ placeholder: lgColStartPlaceholder });
|
|
2524
2818
|
})
|
|
2525
|
-
.formField(
|
|
2819
|
+
.formField(xlColSpan, (f) => {
|
|
2526
2820
|
f.path('xl_colSpan');
|
|
2527
|
-
f.numberBox({ placeholder:
|
|
2821
|
+
f.numberBox({ placeholder: xlColSpanPlaceholder });
|
|
2528
2822
|
})
|
|
2529
|
-
.formField(
|
|
2823
|
+
.formField(xlColStart, (f) => {
|
|
2530
2824
|
f.path('xl_colStart');
|
|
2531
|
-
f.numberBox({ placeholder:
|
|
2825
|
+
f.numberBox({ placeholder: xlColStartPlaceholder });
|
|
2532
2826
|
})
|
|
2533
|
-
.formField(
|
|
2827
|
+
.formField(xxlColSpan, (f) => {
|
|
2534
2828
|
f.path('xxl_colSpan');
|
|
2535
|
-
f.numberBox({ placeholder:
|
|
2829
|
+
f.numberBox({ placeholder: xxlColSpanPlaceholder });
|
|
2536
2830
|
})
|
|
2537
|
-
.formField(
|
|
2831
|
+
.formField(xxlColStart, (f) => {
|
|
2538
2832
|
f.path('xxl_colStart');
|
|
2539
|
-
f.numberBox({ placeholder:
|
|
2833
|
+
f.numberBox({ placeholder: xxlColStartPlaceholder });
|
|
2540
2834
|
})
|
|
2541
|
-
.formField(
|
|
2835
|
+
.formField(xxxlColSpan, (f) => {
|
|
2542
2836
|
f.path('xxxl_colSpan');
|
|
2543
|
-
f.numberBox({ placeholder:
|
|
2837
|
+
f.numberBox({ placeholder: xxxlColSpanPlaceholder });
|
|
2544
2838
|
})
|
|
2545
|
-
.formField(
|
|
2839
|
+
.formField(xxxlColStart, (f) => {
|
|
2546
2840
|
f.path('xxxl_colStart');
|
|
2547
|
-
f.numberBox({ placeholder:
|
|
2841
|
+
f.numberBox({ placeholder: xxxlColStartPlaceholder });
|
|
2548
2842
|
});
|
|
2549
2843
|
});
|
|
2550
2844
|
})
|
|
@@ -2682,6 +2976,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2682
2976
|
async handlePreviewClick() {
|
|
2683
2977
|
try {
|
|
2684
2978
|
const formDef = this.getFormDefinition();
|
|
2979
|
+
const previewTitle = await this.translationService.translateAsync('@dynamic-form-designer:components.preview.title');
|
|
2685
2980
|
// Check if form has content
|
|
2686
2981
|
if (!formDef.groups || formDef.groups.length === 0) {
|
|
2687
2982
|
// Show empty state message
|
|
@@ -2689,7 +2984,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2689
2984
|
.create()
|
|
2690
2985
|
.dialog((dialog) => {
|
|
2691
2986
|
dialog
|
|
2692
|
-
.setTitle(
|
|
2987
|
+
.setTitle(previewTitle)
|
|
2693
2988
|
.setSize('md')
|
|
2694
2989
|
.setCloseButton(true)
|
|
2695
2990
|
.setContext({})
|
|
@@ -2704,7 +2999,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2704
2999
|
.create()
|
|
2705
3000
|
.dialog((dialog) => {
|
|
2706
3001
|
dialog
|
|
2707
|
-
.setTitle(
|
|
3002
|
+
.setTitle(previewTitle)
|
|
2708
3003
|
.setSize('lg')
|
|
2709
3004
|
.setCloseButton(true)
|
|
2710
3005
|
.setContext({})
|
|
@@ -2717,6 +3012,8 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2717
3012
|
fieldset.setTitle(group.title);
|
|
2718
3013
|
if (group.description)
|
|
2719
3014
|
fieldset.setDescription(group.description);
|
|
3015
|
+
if (group.look)
|
|
3016
|
+
fieldset.setLook(group.look);
|
|
2720
3017
|
fieldset.setCols(12);
|
|
2721
3018
|
for (const param of group.parameters) {
|
|
2722
3019
|
fieldset.formField(param.title || param.path, (f) => {
|
|
@@ -2883,10 +3180,10 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2883
3180
|
},
|
|
2884
3181
|
};
|
|
2885
3182
|
}
|
|
2886
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2887
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPDynamicFormDesignerComponent, isStandalone: true, selector: "axp-dynamic-form-designer", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDefinition: "formDefinitionChange" }, host: { classAttribute: "ax-w-full ax-h-full" }, ngImport: i0, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button\n class=\"ax-sm\"\n [text]=\"t('@dynamic-form-designer:actions.add-group') | async\"\n [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button\n class=\"ax-sm\"\n [text]=\"t('@dynamic-form-designer:actions.preview') | async\"\n [color]=\"'success'\"\n (onClick)=\"handlePreviewClick()\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:groups.empty'\"\n [description]=\"'@dynamic-form-designer:groups.empty-description'\"\n >\n </axp-state-message>\n } @else {\n <div\n class=\"__groups-container\"\n cdkDropList\n [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\"\n >\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag>\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">{{ group.title || group.name }}</h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button\n class=\"ax-sm\"\n [text]=\"t('@dynamic-form-designer:actions.add-field') | async\"\n [color]=\"'accent2'\"\n (onClick)=\"handleAddFieldToGroup(group)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"info\"\n (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings') | async\"\n >\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div\n class=\"__items-list\"\n cdkDropList\n [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\"\n [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\"\n >\n @if (group.fields.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:fields.empty-group'\"\n [description]=\"'@dynamic-form-designer:fields.empty-group-description'\"\n >\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div\n class=\"__field-item\"\n cdkDrag\n [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\"\n >\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n title=\"Configure field layout (colSpan, colStart)\"\n >\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;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-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;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-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{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-dynamic-form-designer .__content .__group .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{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-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-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));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-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))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-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;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-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))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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);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))}.__group.cdk-drag-preview .__group-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))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.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))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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))}.__field-item.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))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;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));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{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: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3183
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDynamicFormDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3184
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPDynamicFormDesignerComponent, isStandalone: true, selector: "axp-dynamic-form-designer", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDefinition: "formDefinitionChange" }, host: { classAttribute: "ax-w-full ax-h-full" }, ngImport: i0, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n (onClick)=\"handlePreviewClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n </axp-state-message>\n } @else {\n <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\">\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">\n {{ group.title || group.name }}\n @if (isDefaultGroup(group.name) && !group.title) {\n <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n }\n </h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n @if (canDeleteGroup()) {\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n @if (group.fields.length === 0) {\n <axp-state-message icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\">\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;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-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;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-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{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-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{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-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{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-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-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));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-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))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-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;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-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))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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);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))}.__group.cdk-drag-preview .__group-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))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.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))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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))}.__field-item.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))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;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));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{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: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2888
3185
|
}
|
|
2889
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPDynamicFormDesignerComponent, decorators: [{
|
|
2890
3187
|
type: Component,
|
|
2891
3188
|
args: [{ selector: 'axp-dynamic-form-designer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2892
3189
|
CommonModule,
|
|
@@ -2901,8 +3198,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
2901
3198
|
AXPGridLayoutDirective,
|
|
2902
3199
|
], standalone: true, host: {
|
|
2903
3200
|
class: 'ax-w-full ax-h-full',
|
|
2904
|
-
}, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button\n class=\"ax-sm\"\n [text]=\"t('@dynamic-form-designer:actions.add-group') | async\"\n [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button\n class=\"ax-sm\"\n [text]=\"t('@dynamic-form-designer:actions.preview') | async\"\n [color]=\"'success'\"\n (onClick)=\"handlePreviewClick()\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:groups.empty'\"\n [description]=\"'@dynamic-form-designer:groups.empty-description'\"\n >\n </axp-state-message>\n } @else {\n <div\n class=\"__groups-container\"\n cdkDropList\n [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\"\n >\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag>\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">{{ group.title || group.name }}</h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button\n class=\"ax-sm\"\n [text]=\"t('@dynamic-form-designer:actions.add-field') | async\"\n [color]=\"'accent2'\"\n (onClick)=\"handleAddFieldToGroup(group)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"info\"\n (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings') | async\"\n >\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div\n class=\"__items-list\"\n cdkDropList\n [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\"\n [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\"\n >\n @if (group.fields.length === 0) {\n <axp-state-message\n icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:fields.empty-group'\"\n [description]=\"'@dynamic-form-designer:fields.empty-group-description'\"\n >\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div\n class=\"__field-item\"\n cdkDrag\n [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\"\n >\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button\n class=\"ax-sm\"\n [look]=\"'blank'\"\n color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n title=\"Configure field layout (colSpan, colStart)\"\n >\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>\n", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;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-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;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-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{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-dynamic-form-designer .__content .__group .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{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-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-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));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-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))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-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;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-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))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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);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))}.__group.cdk-drag-preview .__group-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))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.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))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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))}.__field-item.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))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;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));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{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"] }]
|
|
2905
|
-
}] });
|
|
3201
|
+
}, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n (onClick)=\"handlePreviewClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n </axp-state-message>\n } @else {\n <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\">\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">\n {{ group.title || group.name }}\n @if (isDefaultGroup(group.name) && !group.title) {\n <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n }\n </h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n @if (canDeleteGroup()) {\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n @if (group.fields.length === 0) {\n <axp-state-message icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\">\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;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-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;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-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{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-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-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-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{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-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{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-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-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));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-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))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--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-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-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;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-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))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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);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))}.__group.cdk-drag-preview .__group-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))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;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))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.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))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--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))}.__field-item.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))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-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));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;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));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{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"] }]
|
|
3202
|
+
}], propDecorators: { formDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDefinition", required: false }] }, { type: i0.Output, args: ["formDefinitionChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
2906
3203
|
|
|
2907
3204
|
//#endregion
|
|
2908
3205
|
//#region ---- Injection Tokens ----
|
|
@@ -3154,8 +3451,8 @@ class AXPExtraPropertiesComponent {
|
|
|
3154
3451
|
i++;
|
|
3155
3452
|
return `${k}${i}`;
|
|
3156
3453
|
}
|
|
3157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3454
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPExtraPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3455
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPExtraPropertiesComponent, isStandalone: true, selector: "axp-extra-properties", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemsChange: "itemsChange" }, host: { classAttribute: "ax-block ax-flex-1" }, ngImport: i0, template: `
|
|
3159
3456
|
<div class="ax-grid ax-grid-cols-12 ax-gap-4">
|
|
3160
3457
|
<axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
|
|
3161
3458
|
<div cdkDropList (cdkDropListDropped)="handleDrop($event)" class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
|
|
@@ -3245,9 +3542,9 @@ class AXPExtraPropertiesComponent {
|
|
|
3245
3542
|
</axp-widgets-container>
|
|
3246
3543
|
</div>
|
|
3247
3544
|
|
|
3248
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$
|
|
3545
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3249
3546
|
}
|
|
3250
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3547
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
|
|
3251
3548
|
type: Component,
|
|
3252
3549
|
args: [{
|
|
3253
3550
|
selector: 'axp-extra-properties',
|
|
@@ -3362,7 +3659,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3362
3659
|
class: 'ax-block ax-flex-1',
|
|
3363
3660
|
},
|
|
3364
3661
|
}]
|
|
3365
|
-
}] });
|
|
3662
|
+
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], itemsChange: [{ type: i0.Output, args: ["itemsChange"] }] } });
|
|
3366
3663
|
|
|
3367
3664
|
class AXPWidgetPropertyViewerComponent {
|
|
3368
3665
|
constructor() {
|
|
@@ -3458,13 +3755,13 @@ class AXPWidgetPropertyViewerComponent {
|
|
|
3458
3755
|
handleCollapsedChange(group, collapsed) {
|
|
3459
3756
|
this.groupCollapsedStates.set(group, collapsed);
|
|
3460
3757
|
}
|
|
3461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3758
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3759
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n @if (mode() == 'advanced') {\n <div class=\"ax-flex ax-flex-col\">\n @if (tabs().length > 1) {\n <div class=\"ax-pb-2\">\n <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n @for (tab of tabs(); track $index) {\n <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"ax-flex-1 ax-overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n @for (group of groups(); track $index) {\n <ax-accordion-item\n class=\"!ax-mb-0\"\n [caption]=\"group.title\"\n [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n >\n <div class=\"ax-flex ax-flex-col\">\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n <span class=\"ax-font-semibold\">{{ p.title }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n <!-- Simple-->\n @else {\n <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n <!-- groups -->\n @for (group of groups(); track $index) {\n <!-- props -->\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n }\n </div>\n }\n</axp-widgets-container>\n", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$3.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$3.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3463
3760
|
}
|
|
3464
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3761
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
|
|
3465
3762
|
type: Component,
|
|
3466
|
-
args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXAccordionModule, AXTabsModule, AXPWidgetCoreModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n @if (mode() == 'advanced') {\n
|
|
3467
|
-
}], ctorParameters: () => [], propDecorators: { onChanged: [{
|
|
3763
|
+
args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXAccordionModule, AXTabsModule, AXPWidgetCoreModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n @if (mode() == 'advanced') {\n <div class=\"ax-flex ax-flex-col\">\n @if (tabs().length > 1) {\n <div class=\"ax-pb-2\">\n <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n @for (tab of tabs(); track $index) {\n <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"ax-flex-1 ax-overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n @for (group of groups(); track $index) {\n <ax-accordion-item\n class=\"!ax-mb-0\"\n [caption]=\"group.title\"\n [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n >\n <div class=\"ax-flex ax-flex-col\">\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n <span class=\"ax-font-semibold\">{{ p.title }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n <!-- Simple-->\n @else {\n <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n <!-- groups -->\n @for (group of groups(); track $index) {\n <!-- props -->\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n }\n </div>\n }\n</axp-widgets-container>\n", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"] }]
|
|
3764
|
+
}], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onChanged: [{
|
|
3468
3765
|
type: Output
|
|
3469
3766
|
}] } });
|
|
3470
3767
|
|
|
@@ -3593,10 +3890,10 @@ class AXPExtraPropertiesSchemaComponent {
|
|
|
3593
3890
|
i++;
|
|
3594
3891
|
return `${k}${i}`;
|
|
3595
3892
|
}
|
|
3596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n @for (item of schema(); track item.key) {\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n [cdkDragDisabled]=\"false\">\n <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n cdkDragHandle></ax-icon>\n <div>\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n </div>\n </div>\n <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\"\n (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n </ax-form-field>\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-text-box [ngModel]=\"item.title\"\n (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n </ax-form-field>\n </div>\n <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n } @else {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n </div>\n }\n } @empty {\n <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n async\n }}</div>\n }\n\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n <!-- Type -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n </ax-form-field>\n <!-- Title -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n <ax-text-box [ngModel]=\"newTitle()\"\n (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n </ax-form-field>\n <!-- Add -->\n <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n @if (mode() === 'edit' && selectedItem()) {\n <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n {{selectedItem()?.title}}\n </div>\n <div class=\"ax-overflow-y-auto ax-flex-1\">\n <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n </div>\n }\n @else {\n <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n translate | async }}</div>\n }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3893
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3894
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n @for (item of schema(); track item.key) {\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n [cdkDragDisabled]=\"false\">\n <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n cdkDragHandle></ax-icon>\n <div>\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n </div>\n </div>\n <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\"\n (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n </ax-form-field>\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-text-box [ngModel]=\"item.title\"\n (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n </ax-form-field>\n </div>\n <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n } @else {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n </div>\n }\n } @empty {\n <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n async\n }}</div>\n }\n\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n <!-- Type -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n </ax-form-field>\n <!-- Title -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n <ax-text-box [ngModel]=\"newTitle()\"\n (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n </ax-form-field>\n <!-- Add -->\n <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n @if (mode() === 'edit' && selectedItem()) {\n <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n {{selectedItem()?.title}}\n </div>\n <div class=\"ax-overflow-y-auto ax-flex-1\">\n <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n </div>\n }\n @else {\n <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n translate | async }}</div>\n }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: DragDropModule }, { kind: "directive", type: i3$3.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: i3$3.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: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3598
3895
|
}
|
|
3599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3896
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
|
|
3600
3897
|
type: Component,
|
|
3601
3898
|
args: [{ selector: 'axp-extra-properties-schema', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3602
3899
|
CommonModule,
|
|
@@ -3613,7 +3910,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3613
3910
|
], standalone: true, host: {
|
|
3614
3911
|
class: 'ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4',
|
|
3615
3912
|
}, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n @for (item of schema(); track item.key) {\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n [cdkDragDisabled]=\"false\">\n <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n cdkDragHandle></ax-icon>\n <div>\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n </div>\n </div>\n <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\"\n (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n </ax-form-field>\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-text-box [ngModel]=\"item.title\"\n (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n </ax-form-field>\n </div>\n <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n } @else {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n </div>\n }\n } @empty {\n <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n async\n }}</div>\n }\n\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n <!-- Type -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n </ax-form-field>\n <!-- Title -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n <ax-text-box [ngModel]=\"newTitle()\"\n (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n </ax-form-field>\n <!-- Add -->\n <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n @if (mode() === 'edit' && selectedItem()) {\n <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n {{selectedItem()?.title}}\n </div>\n <div class=\"ax-overflow-y-auto ax-flex-1\">\n <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n </div>\n }\n @else {\n <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n translate | async }}</div>\n }\n</div>" }]
|
|
3616
|
-
}], ctorParameters: () => [] });
|
|
3913
|
+
}], ctorParameters: () => [], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], schemaChange: [{ type: i0.Output, args: ["schemaChange"] }] } });
|
|
3617
3914
|
|
|
3618
3915
|
class AXPExtraPropertiesValuesComponent {
|
|
3619
3916
|
constructor() {
|
|
@@ -3714,8 +4011,8 @@ class AXPExtraPropertiesValuesComponent {
|
|
|
3714
4011
|
}
|
|
3715
4012
|
return node;
|
|
3716
4013
|
}
|
|
3717
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3718
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4014
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPExtraPropertiesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4015
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPExtraPropertiesValuesComponent, isStandalone: true, selector: "axp-extra-properties-values", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valuesChange: "valuesChange" }, host: { classAttribute: "ax-block ax-flex-1" }, ngImport: i0, template: `
|
|
3719
4016
|
<div class="ax-grid ax-grid-cols-12 ax-gap-4">
|
|
3720
4017
|
<axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
|
|
3721
4018
|
<div class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
|
|
@@ -3745,9 +4042,9 @@ class AXPExtraPropertiesValuesComponent {
|
|
|
3745
4042
|
</div>
|
|
3746
4043
|
</axp-widgets-container>
|
|
3747
4044
|
</div>
|
|
3748
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$
|
|
4045
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3749
4046
|
}
|
|
3750
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4047
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPExtraPropertiesValuesComponent, decorators: [{
|
|
3751
4048
|
type: Component,
|
|
3752
4049
|
args: [{
|
|
3753
4050
|
selector: 'axp-extra-properties-values',
|
|
@@ -3789,7 +4086,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
3789
4086
|
class: 'ax-block ax-flex-1',
|
|
3790
4087
|
},
|
|
3791
4088
|
}]
|
|
3792
|
-
}] });
|
|
4089
|
+
}], propDecorators: { schema: [{ type: i0.Input, args: [{ isSignal: true, alias: "schema", required: false }] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], valuesChange: [{ type: i0.Output, args: ["valuesChange"] }] } });
|
|
3793
4090
|
|
|
3794
4091
|
class AXPQueryFiltersComponent {
|
|
3795
4092
|
constructor() {
|
|
@@ -4022,10 +4319,10 @@ class AXPQueryFiltersComponent {
|
|
|
4022
4319
|
}
|
|
4023
4320
|
}
|
|
4024
4321
|
#effect2;
|
|
4025
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4026
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4322
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4323
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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: "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\">\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\n [ngModel]=\"asyncTags()\"\n (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\"\n [valueField]=\"'id'\"\n [readonly]=\"filtersDefinitions().length === 0\"\n [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\"\n (onKeyDown)=\"handleKeyDown($event)\"\n [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 \"\n #tagBox\n ></ax-tag-box>\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\n class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n >\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\">\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())!\"></ax-badge>\n </div>\n <ng-container\n axp-widget-renderer\n [node]=\"{\n type: activeFilter()?.widget?.type || 'text-editor',\n path: activeFilter()?.field,\n options: activeFilter()?.widget?.options,\n }\"\n [mode]=\"'edit'\"\n >\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\n class=\"ax-xs\"\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"\n ></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\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\"\n tabindex=\"0\"\n >\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>\n", styles: ["axp-query-filters{width:100%}.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))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$3.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$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], 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.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4027
4324
|
}
|
|
4028
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4325
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
|
|
4029
4326
|
type: Component,
|
|
4030
4327
|
args: [{ selector: 'axp-query-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
4031
4328
|
CommonModule,
|
|
@@ -4040,10 +4337,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
4040
4337
|
AXListNavigationModule,
|
|
4041
4338
|
AXBadgeModule,
|
|
4042
4339
|
], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\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\n [ngModel]=\"asyncTags()\"\n (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\"\n [valueField]=\"'id'\"\n [readonly]=\"filtersDefinitions().length === 0\"\n [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\"\n (onKeyDown)=\"handleKeyDown($event)\"\n [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 \"\n #tagBox\n ></ax-tag-box>\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\n class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n >\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\">\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())!\"></ax-badge>\n </div>\n <ng-container\n axp-widget-renderer\n [node]=\"{\n type: activeFilter()?.widget?.type || 'text-editor',\n path: activeFilter()?.field,\n options: activeFilter()?.widget?.options,\n }\"\n [mode]=\"'edit'\"\n >\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\n class=\"ax-xs\"\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"\n ></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\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\"\n tabindex=\"0\"\n >\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>\n", styles: ["axp-query-filters{width:100%}.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))}\n"] }]
|
|
4043
|
-
}], propDecorators: { listItems: [{
|
|
4340
|
+
}], 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 }] }], listItems: [{
|
|
4044
4341
|
type: ViewChildren,
|
|
4045
4342
|
args: ['caseItem']
|
|
4046
|
-
}] } });
|
|
4343
|
+
}], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }] } });
|
|
4047
4344
|
|
|
4048
4345
|
class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
4049
4346
|
constructor() {
|
|
@@ -4093,8 +4390,8 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
4093
4390
|
URL.revokeObjectURL(prev);
|
|
4094
4391
|
}
|
|
4095
4392
|
}
|
|
4096
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4097
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPImageEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4394
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", 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 } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
4098
4395
|
<ax-form class="ax-flex ax-justify-center">
|
|
4099
4396
|
<ax-form-field class="ax-p-2">
|
|
4100
4397
|
<ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
|
|
@@ -4119,9 +4416,9 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
4119
4416
|
</ax-button>
|
|
4120
4417
|
</ax-suffix>
|
|
4121
4418
|
</ax-footer>
|
|
4122
|
-
`, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$
|
|
4419
|
+
`, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$4.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$4.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXToolBarModule }, { kind: "component", type: i3$4.AXToolBarComponent, selector: "ax-toolbar" }, { 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: AXButtonModule }, { kind: "component", type: i5$1.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: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
|
|
4123
4420
|
}
|
|
4124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4421
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
|
|
4125
4422
|
type: Component,
|
|
4126
4423
|
args: [{ standalone: true, selector: 'axp-image-editor-popup', imports: [
|
|
4127
4424
|
CommonModule,
|
|
@@ -4157,7 +4454,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
4157
4454
|
</ax-suffix>
|
|
4158
4455
|
</ax-footer>
|
|
4159
4456
|
`, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"] }]
|
|
4160
|
-
}] });
|
|
4457
|
+
}], 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 }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
|
|
4161
4458
|
|
|
4162
4459
|
var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
|
|
4163
4460
|
__proto__: null,
|
|
@@ -4181,10 +4478,10 @@ class AXPImageEditorService {
|
|
|
4181
4478
|
});
|
|
4182
4479
|
return result?.data?.data?.image ?? null;
|
|
4183
4480
|
}
|
|
4184
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4185
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
4481
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4482
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPImageEditorService, providedIn: 'root' }); }
|
|
4186
4483
|
}
|
|
4187
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4484
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPImageEditorService, decorators: [{
|
|
4188
4485
|
type: Injectable,
|
|
4189
4486
|
args: [{ providedIn: 'root' }]
|
|
4190
4487
|
}] });
|
|
@@ -4213,8 +4510,8 @@ class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
|
4213
4510
|
mode: 'update'
|
|
4214
4511
|
});
|
|
4215
4512
|
}
|
|
4216
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4217
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
4513
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", 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: `
|
|
4218
4515
|
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
4219
4516
|
<axp-widget-property-viewer
|
|
4220
4517
|
[widget]="widget()"
|
|
@@ -4240,7 +4537,7 @@ class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
|
4240
4537
|
</ax-footer>
|
|
4241
4538
|
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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.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: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4242
4539
|
}
|
|
4243
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
|
|
4244
4541
|
type: Component,
|
|
4245
4542
|
args: [{
|
|
4246
4543
|
selector: 'axp-widget-property-viewer-popup',
|
|
@@ -4278,7 +4575,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
4278
4575
|
AXPWidgetPropertyViewerComponent
|
|
4279
4576
|
],
|
|
4280
4577
|
}]
|
|
4281
|
-
}] });
|
|
4578
|
+
}], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
4282
4579
|
|
|
4283
4580
|
var widgetPropertyViewerPopup_component = /*#__PURE__*/Object.freeze({
|
|
4284
4581
|
__proto__: null,
|
|
@@ -4332,10 +4629,10 @@ class AXPQuerySortsComponent {
|
|
|
4332
4629
|
});
|
|
4333
4630
|
});
|
|
4334
4631
|
}
|
|
4335
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4336
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4632
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPQuerySortsComponent, isStandalone: true, selector: "axp-query-sorts", inputs: { sortDefinitions: { classPropertyName: "sortDefinitions", publicName: "sortDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialSortQueries: { classPropertyName: "initialSortQueries", publicName: "initialSortQueries", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { sortDefinitions: "sortDefinitionsChange", sortQueriesChange: "sortQueriesChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for (item of sortDefinitions(); track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n <ax-icon\n [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n ></ax-icon>\n <ax-icon\n [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n ></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </div>\n</div>\n", dependencies: [{ 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: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.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: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4337
4634
|
}
|
|
4338
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
|
|
4339
4636
|
type: Component,
|
|
4340
4637
|
args: [{ selector: 'axp-query-sorts', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
4341
4638
|
CdkDropList,
|
|
@@ -4347,7 +4644,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImpor
|
|
|
4347
4644
|
AXDecoratorModule,
|
|
4348
4645
|
AXButtonModule,
|
|
4349
4646
|
], template: "<div class=\"ax-flex ax-flex-col ax-justify-center ax-gap-4 ax-select-none\">\n <div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for (item of sortDefinitions(); track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-button [color]=\"'blank'\" class=\"ax-sm\" (click)=\"changeItemSort(item)\">\n <ax-icon\n [class.ax-text-primary]=\"getSortDirection(item) === 'asc'\"\n class=\"fa-solid fa-arrow-up-long ax-text-neutral-400\"\n ></ax-icon>\n <ax-icon\n [class.ax-text-primary]=\"getSortDirection(item) === 'desc'\"\n class=\"fa-solid fa-arrow-down-long ax-text-neutral-400\"\n ></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </div>\n</div>\n" }]
|
|
4350
|
-
}], ctorParameters: () => [] });
|
|
4647
|
+
}], ctorParameters: () => [], propDecorators: { sortDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "sortDefinitions", required: false }] }, { type: i0.Output, args: ["sortDefinitionsChange"] }], initialSortQueries: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialSortQueries", required: false }] }], sortQueriesChange: [{ type: i0.Output, args: ["sortQueriesChange"] }] } });
|
|
4351
4648
|
|
|
4352
4649
|
class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
4353
4650
|
constructor() {
|
|
@@ -4422,8 +4719,8 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
|
4422
4719
|
metadata: this.config?.metadata
|
|
4423
4720
|
});
|
|
4424
4721
|
}
|
|
4425
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4426
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4722
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTemplateViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4723
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPTemplateViewerComponent, isStandalone: true, selector: "axp-template-viewer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: `
|
|
4427
4724
|
<div class="ax-p-4 ax-min-h-64">
|
|
4428
4725
|
<ax-form #form>
|
|
4429
4726
|
<axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)" >
|
|
@@ -4442,9 +4739,9 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
|
4442
4739
|
</ax-suffix>
|
|
4443
4740
|
</ax-footer>
|
|
4444
4741
|
}
|
|
4445
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { 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: AXButtonModule }, { kind: "component", type: i5$1.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: "component", type: i2$
|
|
4742
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { 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: AXButtonModule }, { kind: "component", type: i5$1.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: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4446
4743
|
}
|
|
4447
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4744
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
|
|
4448
4745
|
type: Component,
|
|
4449
4746
|
args: [{
|
|
4450
4747
|
selector: 'axp-template-viewer',
|
|
@@ -4513,10 +4810,10 @@ class AXPTemplateViewerService {
|
|
|
4513
4810
|
showActions: false
|
|
4514
4811
|
});
|
|
4515
4812
|
}
|
|
4516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4517
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
4813
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTemplateViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4814
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTemplateViewerService, providedIn: 'root' }); }
|
|
4518
4815
|
}
|
|
4519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4816
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPTemplateViewerService, decorators: [{
|
|
4520
4817
|
type: Injectable,
|
|
4521
4818
|
args: [{
|
|
4522
4819
|
providedIn: 'root'
|
|
@@ -4639,10 +4936,10 @@ class AXPUserAvatarService {
|
|
|
4639
4936
|
throw error;
|
|
4640
4937
|
}
|
|
4641
4938
|
}
|
|
4642
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4643
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
4939
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPUserAvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4940
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPUserAvatarService, providedIn: 'root' }); }
|
|
4644
4941
|
}
|
|
4645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4942
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPUserAvatarService, decorators: [{
|
|
4646
4943
|
type: Injectable,
|
|
4647
4944
|
args: [{
|
|
4648
4945
|
providedIn: 'root',
|
|
@@ -4727,13 +5024,13 @@ class AXPUserAvatarComponent {
|
|
|
4727
5024
|
const idx = this.hashString(initials) % colors.length;
|
|
4728
5025
|
return colors[idx];
|
|
4729
5026
|
}
|
|
4730
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4731
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5027
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5028
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n @if(hasAvatar()){\n <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n }@else{\n <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n </ax-text>\n }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$5.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { 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: AXImageModule }, { kind: "component", type: i3$5.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4732
5029
|
}
|
|
4733
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5030
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
|
|
4734
5031
|
type: Component,
|
|
4735
5032
|
args: [{ selector: 'axp-user-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule, AXBadgeModule], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n @if(hasAvatar()){\n <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n }@else{\n <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n </ax-text>\n }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->" }]
|
|
4736
|
-
}] });
|
|
5033
|
+
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }] } });
|
|
4737
5034
|
|
|
4738
5035
|
class AXPQueryViewsComponent {
|
|
4739
5036
|
constructor() {
|
|
@@ -4767,13 +5064,13 @@ class AXPQueryViewsComponent {
|
|
|
4767
5064
|
handleActiveChange(e) {
|
|
4768
5065
|
console.log(e);
|
|
4769
5066
|
}
|
|
4770
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4771
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5067
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5068
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPQueryViewsComponent, isStandalone: true, selector: "axp-query-views", inputs: { views: { classPropertyName: "views", publicName: "views", isSignal: true, isRequired: false, transformFunction: null }, selectedView: { classPropertyName: "selectedView", publicName: "selectedView", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { views: "viewsChange", selectedView: "selectedViewChange" }, viewQueries: [{ propertyName: "tabs", first: true, predicate: ["tabs"], descendants: true, isSignal: true }], ngImport: i0, template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n @for (item of views(); track item.name) {\n <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n </ax-tab-item>\n }\n <!-- <ax-tab-item\n (onClick)=\"createNew()\"\n [key]=\"'create-new'\"\n [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n >\n </ax-tab-item> -->\n</ax-tabs>\n", dependencies: [{ kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$6.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$6.AXTabItemComponent, selector: "ax-tab-item", inputs: ["disabled", "text", "key", "headerTemplate", "active"], outputs: ["disabledChange", "onClick", "onBlur", "onFocus", "activeChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4772
5069
|
}
|
|
4773
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5070
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPQueryViewsComponent, decorators: [{
|
|
4774
5071
|
type: Component,
|
|
4775
5072
|
args: [{ selector: 'axp-query-views', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [AXTabsModule, AXTranslationModule, CommonModule], template: "<ax-tabs #tabs [look]=\"'with-line'\" class=\"ax-font-semibold\">\n @for (item of views(); track item.name) {\n <ax-tab-item (onClick)=\"setView(item)\" [key]=\"item.name\" [text]=\"(item.title | translate | async) || 'item.title'\">\n </ax-tab-item>\n }\n <!-- <ax-tab-item\n (onClick)=\"createNew()\"\n [key]=\"'create-new'\"\n [text]=\"('@general:actions.create.title' | translate | async) || 'Create New'\"\n >\n </ax-tab-item> -->\n</ax-tabs>\n" }]
|
|
4776
|
-
}] });
|
|
5073
|
+
}], propDecorators: { tabs: [{ type: i0.ViewChild, args: ['tabs', { isSignal: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }, { type: i0.Output, args: ["viewsChange"] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: true }] }, { type: i0.Output, args: ["selectedViewChange"] }] } });
|
|
4777
5074
|
|
|
4778
5075
|
/**
|
|
4779
5076
|
* Generic widget item component for displaying selectable widgets with icons, titles, and descriptions.
|
|
@@ -4821,17 +5118,17 @@ class AXPWidgetItemComponent {
|
|
|
4821
5118
|
getIconClass() {
|
|
4822
5119
|
return this.widget().icon || 'fa-light fa-document';
|
|
4823
5120
|
}
|
|
4824
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4825
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5121
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5122
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPWidgetItemComponent, isStandalone: true, selector: "axp-widget-item", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, isSelected: { classPropertyName: "isSelected", publicName: "isSelected", isSignal: true, isRequired: false, transformFunction: null }, showPinButton: { classPropertyName: "showPinButton", publicName: "showPinButton", isSignal: true, isRequired: false, transformFunction: null }, customClasses: { classPropertyName: "customClasses", publicName: "customClasses", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onWidgetClick: "onWidgetClick", onPinClick: "onPinClick" }, ngImport: i0, template: "<div (click)=\"handleClick($event)\"\n class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n <!-- Widget Icon -->\n <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n </div>\n\n <!-- Widget Content -->\n <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n <!-- Widget Title -->\n <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n {{ widget().title }}\n </div>\n\n <!-- Pin Button -->\n @if (showPinButton()) {\n <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n @if (widget().isPinned) {\n <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n } @else {\n <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n title=\"Pin\"></i>\n }\n </div>\n }\n </div>\n\n <!-- Widget Description -->\n @if (widget().description) {\n <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n {{ widget().description }}\n </span>\n }\n </div>\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
4826
5123
|
}
|
|
4827
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5124
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
|
|
4828
5125
|
type: Component,
|
|
4829
5126
|
args: [{ selector: 'axp-widget-item', imports: [CommonModule], encapsulation: ViewEncapsulation.None, template: "<div (click)=\"handleClick($event)\"\n class=\"ax-py-2 ax-px-3 ax-rounded-md ax-flex ax-gap-3 ax-items-center ax-group hover:ax-bg-primary-lightest/65 hover:ax-text-primary-on-lightest ax-cursor-pointer ax-w-full\"\n [class.ax-bg-primary-lightest]=\"isSelected()\" [class.ax-text-primary-on-lightest]=\"isSelected()\"\n [class.ax-border-primary-lightest]=\"isSelected()\" [class]=\"customClasses()\">\n\n <!-- Widget Icon -->\n <div class=\"ax-min-w-10 ax-h-10 ax-flex ax-items-center ax-justify-center ax-rounded-md ax-border group-hover:ax-bg-primary-lighter group-hover:ax-text-primary-on-lighter group-hover:ax-border-primary-lighter\"\n [class.ax-bg-primary-light]=\"isSelected()\" [class.ax-text-primary-on-light]=\"isSelected()\"\n [class.ax-border-primary-light]=\"isSelected()\" [class.ax-surface]=\"!isSelected()\">\n <i [ngClass]=\"getIconClass()\" class=\"ax-text-lg\"></i>\n </div>\n\n <!-- Widget Content -->\n <div class=\"ax-flex ax-flex-col ax-gap-1 ax-flex-1 ax-w-[70%]\">\n <div class=\"ax-flex ax-items-center ax-justify-between ax-gap-2\">\n <!-- Widget Title -->\n <div class=\"ax-font-semibold ax-text-sm ax-truncate\" [title]=\"widget().title\">\n {{ widget().title }}\n </div>\n\n <!-- Pin Button -->\n @if (showPinButton()) {\n <div (click)=\"handlePinClick($event)\" class=\"ax-cursor-pointer\">\n @if (widget().isPinned) {\n <i class=\"fa-solid fa-thumbtack ax-text-sm ax-rotate-45\" title=\"Unpin\"></i>\n } @else {\n <i class=\"fa-light fa-thumbtack ax-text-sm ax-rotate-45 ax-invisible group-hover:ax-visible\"\n title=\"Pin\"></i>\n }\n </div>\n }\n </div>\n\n <!-- Widget Description -->\n @if (widget().description) {\n <span class=\"ax-text-xs ax-truncate\" [title]=\"widget().description\">\n {{ widget().description }}\n </span>\n }\n </div>\n</div>" }]
|
|
4830
|
-
}] });
|
|
5127
|
+
}], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], showPinButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPinButton", required: false }] }], customClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], onWidgetClick: [{ type: i0.Output, args: ["onWidgetClick"] }], onPinClick: [{ type: i0.Output, args: ["onPinClick"] }] } });
|
|
4831
5128
|
|
|
4832
5129
|
/**
|
|
4833
5130
|
* Generated bundle index. Do not edit.
|
|
4834
5131
|
*/
|
|
4835
5132
|
|
|
4836
|
-
export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
|
|
5133
|
+
export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
|
|
4837
5134
|
//# sourceMappingURL=acorex-platform-layout-components.mjs.map
|