@acorex/platform 20.3.0-next.20 → 20.3.0-next.21
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/core/index.d.ts +14 -1
- package/fesm2022/acorex-platform-auth.mjs +19 -19
- package/fesm2022/acorex-platform-auth.mjs.map +1 -1
- package/fesm2022/acorex-platform-common.mjs +126 -105
- package/fesm2022/acorex-platform-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-core.mjs +55 -42
- package/fesm2022/acorex-platform-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-domain.mjs +16 -16
- package/fesm2022/acorex-platform-domain.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-builder.mjs +182 -159
- package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-components.mjs +542 -2387
- package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-designer.mjs +72 -72
- package/fesm2022/acorex-platform-layout-designer.mjs.map +1 -1
- package/fesm2022/{acorex-platform-layout-entity-create-entity.command-BXExgI3W.mjs → acorex-platform-layout-entity-create-entity.command-DyXF9zAh.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-entity-create-entity.command-BXExgI3W.mjs.map → acorex-platform-layout-entity-create-entity.command-DyXF9zAh.mjs.map} +1 -1
- package/fesm2022/acorex-platform-layout-entity.mjs +156 -156
- package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-views.mjs +15 -15
- package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-widget-core.mjs +73 -73
- package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-button-widget-designer.component-BzsfTNs2.mjs → acorex-platform-layout-widgets-button-widget-designer.component-C_3IWNkj.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-button-widget-designer.component-BzsfTNs2.mjs.map → acorex-platform-layout-widgets-button-widget-designer.component-C_3IWNkj.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-Dvk76-2W.mjs → acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CJltEgut.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-Dvk76-2W.mjs.map → acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CJltEgut.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-BYLaipWi.mjs → acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-pM-TIuk0.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-BYLaipWi.mjs.map → acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-pM-TIuk0.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-DcSllNik.mjs → acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-BqI96-fU.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-DcSllNik.mjs.map → acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-BqI96-fU.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-view.component-BT-U4BiA.mjs → acorex-platform-layout-widgets-extra-properties-values-widget-view.component-C-AhenaM.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-view.component-BT-U4BiA.mjs.map → acorex-platform-layout-widgets-extra-properties-values-widget-view.component-C-AhenaM.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-edit.component-Il7jnRBg.mjs → acorex-platform-layout-widgets-extra-properties-widget-edit.component-DCAya5ne.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-edit.component-Il7jnRBg.mjs.map → acorex-platform-layout-widgets-extra-properties-widget-edit.component-DCAya5ne.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-view.component-CBEPu7Fl.mjs → acorex-platform-layout-widgets-extra-properties-widget-view.component-D-PnBqLb.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-view.component-CBEPu7Fl.mjs.map → acorex-platform-layout-widgets-extra-properties-widget-view.component-D-PnBqLb.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-file-list-popup.component-BPzn8lr3.mjs → acorex-platform-layout-widgets-file-list-popup.component-DuuFHWvB.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-file-list-popup.component-BPzn8lr3.mjs.map → acorex-platform-layout-widgets-file-list-popup.component-DuuFHWvB.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-page-widget-designer.component-C_JrGoXy.mjs → acorex-platform-layout-widgets-page-widget-designer.component-Bss0xUcu.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-page-widget-designer.component-C_JrGoXy.mjs.map → acorex-platform-layout-widgets-page-widget-designer.component-Bss0xUcu.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-edit-popup.component-C6DaBt_N.mjs → acorex-platform-layout-widgets-tabular-data-edit-popup.component-Cy9mHnNP.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-edit-popup.component-C6DaBt_N.mjs.map → acorex-platform-layout-widgets-tabular-data-edit-popup.component-Cy9mHnNP.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-view-popup.component-Bth3jI9T.mjs → acorex-platform-layout-widgets-tabular-data-view-popup.component-DznLtuer.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-view-popup.component-Bth3jI9T.mjs.map → acorex-platform-layout-widgets-tabular-data-view-popup.component-DznLtuer.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-text-block-widget-designer.component-CUHptbP4.mjs → acorex-platform-layout-widgets-text-block-widget-designer.component-ndOUSFi9.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-text-block-widget-designer.component-CUHptbP4.mjs.map → acorex-platform-layout-widgets-text-block-widget-designer.component-ndOUSFi9.mjs.map} +1 -1
- package/fesm2022/acorex-platform-layout-widgets.mjs +742 -892
- 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 +40 -40
- package/fesm2022/acorex-platform-runtime.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-default-entity-master-create-view.component-eGzN6g2Y.mjs → acorex-platform-themes-default-entity-master-create-view.component-Fnj54AxV.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-entity-master-create-view.component-eGzN6g2Y.mjs.map → acorex-platform-themes-default-entity-master-create-view.component-Fnj54AxV.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-default-entity-master-list-view.component-nDHfQQ3O.mjs → acorex-platform-themes-default-entity-master-list-view.component-C60W6UnN.mjs} +60 -13
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-C60W6UnN.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-modify-view.component-HJyalvcu.mjs → acorex-platform-themes-default-entity-master-modify-view.component-B3NyKGIG.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-entity-master-modify-view.component-HJyalvcu.mjs.map → acorex-platform-themes-default-entity-master-modify-view.component-B3NyKGIG.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-default-entity-master-single-view.component-e7m70Wls.mjs → acorex-platform-themes-default-entity-master-single-view.component-B8gx5cG7.mjs} +7 -7
- package/fesm2022/{acorex-platform-themes-default-entity-master-single-view.component-e7m70Wls.mjs.map → acorex-platform-themes-default-entity-master-single-view.component-B8gx5cG7.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-default-error-401.component-CoBaQFTn.mjs → acorex-platform-themes-default-error-401.component-CcvGfdhu.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-error-401.component-CoBaQFTn.mjs.map → acorex-platform-themes-default-error-401.component-CcvGfdhu.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-default-error-404.component-BLlVOsS2.mjs → acorex-platform-themes-default-error-404.component-4-CaEsnV.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-error-404.component-BLlVOsS2.mjs.map → acorex-platform-themes-default-error-404.component-4-CaEsnV.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-default-error-offline.component-CybYQI9F.mjs → acorex-platform-themes-default-error-offline.component-BNecbFEj.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-error-offline.component-CybYQI9F.mjs.map → acorex-platform-themes-default-error-offline.component-BNecbFEj.mjs.map} +1 -1
- 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-ReKSoVeN.mjs → acorex-platform-themes-shared-icon-chooser-view.component-Dc_Txe32.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-shared-icon-chooser-view.component-ReKSoVeN.mjs.map → acorex-platform-themes-shared-icon-chooser-view.component-Dc_Txe32.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-column.component-B2HDyY2z.mjs → acorex-platform-themes-shared-theme-color-chooser-column.component-hgWLhhle.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-column.component-B2HDyY2z.mjs.map → acorex-platform-themes-shared-theme-color-chooser-column.component-hgWLhhle.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-view.component-CeZxa49U.mjs → acorex-platform-themes-shared-theme-color-chooser-view.component-CY3JZK_W.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-view.component-CeZxa49U.mjs.map → acorex-platform-themes-shared-theme-color-chooser-view.component-CY3JZK_W.mjs.map} +1 -1
- package/fesm2022/acorex-platform-themes-shared.mjs +41 -41
- package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
- package/fesm2022/acorex-platform-workflow.mjs +25 -25
- package/fesm2022/acorex-platform-workflow.mjs.map +1 -1
- package/layout/builder/README.md +1577 -2
- package/layout/builder/index.d.ts +182 -125
- package/layout/components/index.d.ts +8 -805
- package/layout/entity/index.d.ts +2 -2
- package/layout/widgets/index.d.ts +11 -36
- package/package.json +9 -9
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-nDHfQQ3O.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$1 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';
|
|
@@ -8,20 +8,20 @@ import * as i5 from '@acorex/core/translation';
|
|
|
8
8
|
import { AXTranslationModule, AXTranslationService } from '@acorex/core/translation';
|
|
9
9
|
import * as i2 from '@acorex/components/skeleton';
|
|
10
10
|
import { AXSkeletonModule } from '@acorex/components/skeleton';
|
|
11
|
-
import * as i4 from '@acorex/core/format';
|
|
11
|
+
import * as i4$1 from '@acorex/core/format';
|
|
12
12
|
import { AXFormatModule } from '@acorex/core/format';
|
|
13
13
|
import { getSystemActions, AXPExpressionEvaluatorService, AXPContextStore, AXPGridLayoutDirective } from '@acorex/platform/core';
|
|
14
14
|
import { AXPWorkflowService } from '@acorex/platform/workflow';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i4 from '@angular/common';
|
|
16
16
|
import { CommonModule } from '@angular/common';
|
|
17
17
|
import * as i0 from '@angular/core';
|
|
18
|
-
import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule,
|
|
18
|
+
import { input, ChangeDetectionStrategy, ViewEncapsulation, Component, inject, signal, effect, InjectionToken, computed, Injectable, Directive, viewChild, contentChild, ElementRef, output, model, Injector, ViewContainerRef, runInInjectionContext, Optional, Inject, NgModule, untracked, EventEmitter, Output, linkedSignal, ViewChildren, Input } from '@angular/core';
|
|
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
22
|
import * as i8 from '@acorex/components/badge';
|
|
23
23
|
import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
|
|
24
|
-
import * as i4$
|
|
24
|
+
import * as i4$2 from '@acorex/components/search-box';
|
|
25
25
|
import { AXSearchBoxModule } from '@acorex/components/search-box';
|
|
26
26
|
import * as i2$2 from '@acorex/components/tree-view';
|
|
27
27
|
import { AXTreeViewModule } from '@acorex/components/tree-view';
|
|
@@ -31,11 +31,11 @@ import * as i3 from '@acorex/components/switch';
|
|
|
31
31
|
import { AXSwitchModule } from '@acorex/components/switch';
|
|
32
32
|
import * as i3$3 from '@angular/cdk/drag-drop';
|
|
33
33
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
34
|
-
import * as i1
|
|
34
|
+
import * as i1 from '@angular/forms';
|
|
35
35
|
import { FormsModule } from '@angular/forms';
|
|
36
|
-
import { cloneDeep, sortBy, isEmpty, isNil, isEqual,
|
|
36
|
+
import { cloneDeep, sortBy, isEmpty, isNil, isEqual, camelCase, merge, capitalize, unionBy, isArray, set } from 'lodash-es';
|
|
37
37
|
import * as i2$4 from '@acorex/components/form';
|
|
38
|
-
import { AXFormModule
|
|
38
|
+
import { AXFormModule } from '@acorex/components/form';
|
|
39
39
|
import * as i4$4 from '@acorex/components/text-box';
|
|
40
40
|
import { AXTextBoxModule } from '@acorex/components/text-box';
|
|
41
41
|
import * as i2$3 from '@acorex/components/check-box';
|
|
@@ -43,22 +43,16 @@ import { AXCheckBoxModule } from '@acorex/components/check-box';
|
|
|
43
43
|
import * as i3$1 from '@acorex/components/label';
|
|
44
44
|
import { AXLabelModule } from '@acorex/components/label';
|
|
45
45
|
import * as i3$2 from '@acorex/platform/layout/widget-core';
|
|
46
|
-
import { AXPWidgetCoreModule,
|
|
47
|
-
import * as i4$
|
|
46
|
+
import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
|
|
47
|
+
import * as i4$3 from '@acorex/components/data-table';
|
|
48
48
|
import { AXDataTableModule } from '@acorex/components/data-table';
|
|
49
|
-
import * as i4$3 from '@acorex/components/dropdown-button';
|
|
50
49
|
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
|
|
51
50
|
import { AXBasePageComponent } from '@acorex/components/page';
|
|
52
51
|
import { AXPopupService } from '@acorex/components/popup';
|
|
53
|
-
import
|
|
54
|
-
import
|
|
55
|
-
import { AXValidationModule } from '@acorex/core/validation';
|
|
56
|
-
import * as i1$3 from '@acorex/components/step-wizard';
|
|
57
|
-
import { AXStepWizardComponent, AXStepWizardModule } from '@acorex/components/step-wizard';
|
|
58
|
-
import { AXPStickyDirective, AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPFileStorageService } from '@acorex/platform/common';
|
|
59
|
-
import * as i5$3 from '@acorex/components/select-box';
|
|
52
|
+
import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
|
|
53
|
+
import * as i5$2 from '@acorex/components/select-box';
|
|
60
54
|
import { AXSelectBoxModule } from '@acorex/components/select-box';
|
|
61
|
-
import * as i1$
|
|
55
|
+
import * as i1$2 from '@acorex/components/accordion';
|
|
62
56
|
import { AXAccordionModule } from '@acorex/components/accordion';
|
|
63
57
|
import * as i2$5 from '@acorex/components/tabs';
|
|
64
58
|
import { AXTabsModule } from '@acorex/components/tabs';
|
|
@@ -67,16 +61,17 @@ import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
|
|
|
67
61
|
import * as i4$5 from '@acorex/components/popover';
|
|
68
62
|
import { AXPopoverModule } from '@acorex/components/popover';
|
|
69
63
|
import { AXSelectionListModule } from '@acorex/components/selection-list';
|
|
70
|
-
import * as i5$
|
|
64
|
+
import * as i5$3 from '@acorex/components/tag-box';
|
|
71
65
|
import { AXTagBoxModule } from '@acorex/components/tag-box';
|
|
72
66
|
import { AXCalendarService } from '@acorex/core/date-time';
|
|
73
|
-
import
|
|
67
|
+
import { AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPFileStorageService } from '@acorex/platform/common';
|
|
68
|
+
import * as i1$3 from '@acorex/components/image-editor';
|
|
74
69
|
import { AXImageEditorContainerComponent, AXImageEditorModule } from '@acorex/components/image-editor';
|
|
75
70
|
import * as i3$4 from '@acorex/components/toolbar';
|
|
76
71
|
import { AXToolBarModule } from '@acorex/components/toolbar';
|
|
77
72
|
import { BehaviorSubject, timer, Subject, takeUntil } from 'rxjs';
|
|
78
73
|
import { tap } from 'rxjs/operators';
|
|
79
|
-
import * as i1$
|
|
74
|
+
import * as i1$4 from '@acorex/components/avatar';
|
|
80
75
|
import { AXAvatarModule } from '@acorex/components/avatar';
|
|
81
76
|
import * as i3$5 from '@acorex/components/image';
|
|
82
77
|
import { AXImageModule } from '@acorex/components/image';
|
|
@@ -95,10 +90,10 @@ class AXPStateMessageComponent {
|
|
|
95
90
|
// Optional styling
|
|
96
91
|
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
97
92
|
}
|
|
98
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
99
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
93
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPStateMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
94
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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 }); }
|
|
100
95
|
}
|
|
101
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
96
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPStateMessageComponent, decorators: [{
|
|
102
97
|
type: Component,
|
|
103
98
|
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"] }]
|
|
104
99
|
}] });
|
|
@@ -232,10 +227,10 @@ class AXPActivityLogComponent {
|
|
|
232
227
|
const currentIndex = this.activities().findIndex(a => a.id === activity.id);
|
|
233
228
|
return currentIndex > 0; // Can compare if not the first activity
|
|
234
229
|
}
|
|
235
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
236
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
230
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
231
|
+
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 }); }
|
|
237
232
|
}
|
|
238
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
233
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
|
|
239
234
|
type: Component,
|
|
240
235
|
args: [{ selector: 'axp-activity-log', standalone: true, imports: [
|
|
241
236
|
CommonModule,
|
|
@@ -276,10 +271,10 @@ class AXPTaskBadgeService {
|
|
|
276
271
|
this.computedCache.set(key, total);
|
|
277
272
|
return total;
|
|
278
273
|
}
|
|
279
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
280
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
274
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
275
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeService, providedIn: 'root' }); }
|
|
281
276
|
}
|
|
282
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
277
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeService, decorators: [{
|
|
283
278
|
type: Injectable,
|
|
284
279
|
args: [{ providedIn: 'root' }]
|
|
285
280
|
}], ctorParameters: () => [] });
|
|
@@ -310,10 +305,10 @@ class AXPTaskBadgeDirective {
|
|
|
310
305
|
const node = signal[SIGNAL];
|
|
311
306
|
signalSetFn(node, value);
|
|
312
307
|
}
|
|
313
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
314
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
308
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
309
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", 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 }); }
|
|
315
310
|
}
|
|
316
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
311
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTaskBadgeDirective, decorators: [{
|
|
317
312
|
type: Directive,
|
|
318
313
|
args: [{
|
|
319
314
|
selector: '[axp-task-badge]',
|
|
@@ -335,10 +330,10 @@ class AXPMenuBadgeHelper {
|
|
|
335
330
|
}
|
|
336
331
|
|
|
337
332
|
class AXPThemeLayoutPagePrimaryActionsComponent {
|
|
338
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
339
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
333
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
334
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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 }); }
|
|
340
335
|
}
|
|
341
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
336
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, decorators: [{
|
|
342
337
|
type: Component,
|
|
343
338
|
args: [{
|
|
344
339
|
standalone: true,
|
|
@@ -349,10 +344,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
349
344
|
}]
|
|
350
345
|
}] });
|
|
351
346
|
class AXPThemeLayoutPageSecondaryActionsComponent {
|
|
352
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
353
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
347
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
348
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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 }); }
|
|
354
349
|
}
|
|
355
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
350
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, decorators: [{
|
|
356
351
|
type: Component,
|
|
357
352
|
args: [{
|
|
358
353
|
standalone: true,
|
|
@@ -371,8 +366,8 @@ class AXPThemeLayoutActionsComponent {
|
|
|
371
366
|
this.secondaryContent = contentChild(AXPThemeLayoutPageSecondaryActionsComponent, ...(ngDevMode ? [{ debugName: "secondaryContent" }] : []));
|
|
372
367
|
this.hasSecondary = computed(() => this.secondaryContent() != null, ...(ngDevMode ? [{ debugName: "hasSecondary" }] : []));
|
|
373
368
|
}
|
|
374
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
375
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
369
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
370
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", 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: `
|
|
376
371
|
|
|
377
372
|
<ng-template #primary>
|
|
378
373
|
<ng-content select="axp-layout-actions-primary"></ng-content>
|
|
@@ -385,7 +380,7 @@ class AXPThemeLayoutActionsComponent {
|
|
|
385
380
|
<ng-content></ng-content>
|
|
386
381
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
387
382
|
}
|
|
388
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutActionsComponent, decorators: [{
|
|
389
384
|
type: Component,
|
|
390
385
|
args: [{
|
|
391
386
|
imports: [],
|
|
@@ -413,10 +408,10 @@ class AXPThemeLayoutBlockComponent {
|
|
|
413
408
|
this.elementRef = inject(ElementRef);
|
|
414
409
|
this.hostElement = this.elementRef.nativeElement;
|
|
415
410
|
}
|
|
416
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
417
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
411
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
412
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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 }); }
|
|
418
413
|
}
|
|
419
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
414
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutBlockComponent, decorators: [{
|
|
420
415
|
type: Component,
|
|
421
416
|
args: [{
|
|
422
417
|
standalone: true,
|
|
@@ -452,14 +447,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
452
447
|
}] });
|
|
453
448
|
|
|
454
449
|
class AXPThemeLayoutFooterComponent {
|
|
455
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
456
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
450
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
451
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutFooterComponent, isStandalone: true, selector: "axp-layout-footer, axp-layout-page-footer", ngImport: i0, template: `
|
|
457
452
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
458
453
|
<ng-content></ng-content>
|
|
459
454
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
460
455
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
461
456
|
}
|
|
462
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
457
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutFooterComponent, decorators: [{
|
|
463
458
|
type: Component,
|
|
464
459
|
args: [{
|
|
465
460
|
imports: [],
|
|
@@ -484,8 +479,8 @@ class AXPThemeLayoutPageHeaderComponent {
|
|
|
484
479
|
this.breadcrumbs = viewChild('breadcrumbs', ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
485
480
|
this.navButton = viewChild('navButton', ...(ngDevMode ? [{ debugName: "navButton" }] : []));
|
|
486
481
|
}
|
|
487
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
488
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
482
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
483
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.4", 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: `
|
|
489
484
|
<ng-template #breadcrumbs>
|
|
490
485
|
<ng-content select="axp-layout-breadcrumbs"></ng-content>
|
|
491
486
|
</ng-template>
|
|
@@ -510,7 +505,7 @@ class AXPThemeLayoutPageHeaderComponent {
|
|
|
510
505
|
</ng-template>
|
|
511
506
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
512
507
|
}
|
|
513
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, decorators: [{
|
|
514
509
|
type: Component,
|
|
515
510
|
args: [{
|
|
516
511
|
imports: [],
|
|
@@ -545,14 +540,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
545
540
|
}]
|
|
546
541
|
}] });
|
|
547
542
|
class AXPThemeLayoutHeaderComponent {
|
|
548
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
549
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
543
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutHeaderComponent, isStandalone: true, selector: "axp-layout-header", ngImport: i0, template: `
|
|
550
545
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
551
546
|
<ng-content></ng-content>
|
|
552
547
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
553
548
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
554
549
|
}
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
550
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutHeaderComponent, decorators: [{
|
|
556
551
|
type: Component,
|
|
557
552
|
args: [{
|
|
558
553
|
imports: [],
|
|
@@ -569,10 +564,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
569
564
|
}] });
|
|
570
565
|
|
|
571
566
|
class AXPThemeLayoutListComponent {
|
|
572
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
573
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
567
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
568
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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 }); }
|
|
574
569
|
}
|
|
575
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
570
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListComponent, decorators: [{
|
|
576
571
|
type: Component,
|
|
577
572
|
args: [{
|
|
578
573
|
standalone: true,
|
|
@@ -583,10 +578,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
583
578
|
}]
|
|
584
579
|
}] });
|
|
585
580
|
class AXPThemeLayoutListItemsGroupComponent {
|
|
586
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
587
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
582
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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 }); }
|
|
588
583
|
}
|
|
589
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
584
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, decorators: [{
|
|
590
585
|
type: Component,
|
|
591
586
|
args: [{
|
|
592
587
|
standalone: true,
|
|
@@ -597,10 +592,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
597
592
|
}]
|
|
598
593
|
}] });
|
|
599
594
|
class AXPThemeLayoutListItemComponent {
|
|
600
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
601
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
595
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
596
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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 }); }
|
|
602
597
|
}
|
|
603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
598
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutListItemComponent, decorators: [{
|
|
604
599
|
type: Component,
|
|
605
600
|
args: [{
|
|
606
601
|
standalone: true,
|
|
@@ -612,13 +607,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
612
607
|
}] });
|
|
613
608
|
|
|
614
609
|
class AXPThemeLayoutSectionComponent {
|
|
615
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
616
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
610
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
611
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutSectionComponent, isStandalone: true, selector: "axp-layout-section", ngImport: i0, template: `
|
|
617
612
|
<ng-content select="axp-layout-header"></ng-content>
|
|
618
613
|
<ng-content select="axp-layout-content"></ng-content>
|
|
619
614
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
620
615
|
}
|
|
621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutSectionComponent, decorators: [{
|
|
622
617
|
type: Component,
|
|
623
618
|
args: [{
|
|
624
619
|
imports: [],
|
|
@@ -634,15 +629,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
634
629
|
}] });
|
|
635
630
|
|
|
636
631
|
class AXPThemeLayoutStartSideComponent {
|
|
637
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
638
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
632
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutStartSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
633
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side, axp-layout-start-side", ngImport: i0, template: `
|
|
639
634
|
<ng-content select="axp-layout-header"></ng-content>
|
|
640
635
|
<ng-content select="axp-layout-content"></ng-content>
|
|
641
636
|
<ng-content select="axp-layout-footer"></ng-content>
|
|
642
637
|
<ng-content></ng-content>
|
|
643
638
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
644
639
|
}
|
|
645
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
640
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutStartSideComponent, decorators: [{
|
|
646
641
|
type: Component,
|
|
647
642
|
args: [{
|
|
648
643
|
imports: [],
|
|
@@ -659,14 +654,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
659
654
|
}]
|
|
660
655
|
}] });
|
|
661
656
|
class AXPThemeLayoutEndSideComponent {
|
|
662
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
663
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
657
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutEndSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
658
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side, axp-layout-end-side", ngImport: i0, template: `
|
|
664
659
|
<ng-content select="axp-layout-header"></ng-content>
|
|
665
660
|
<ng-content select="axp-layout-content"></ng-content>
|
|
666
661
|
<ng-content select="axp-layout-footer"></ng-content>
|
|
667
662
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
668
663
|
}
|
|
669
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutEndSideComponent, decorators: [{
|
|
670
665
|
type: Component,
|
|
671
666
|
args: [{
|
|
672
667
|
imports: [],
|
|
@@ -683,14 +678,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
683
678
|
}] });
|
|
684
679
|
|
|
685
680
|
class AXPThemeLayoutToolbarComponent {
|
|
686
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
687
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
681
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
682
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", type: AXPThemeLayoutToolbarComponent, isStandalone: true, selector: "axp-layout-toolbar", ngImport: i0, template: `
|
|
688
683
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
689
684
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
690
685
|
<ng-content></ng-content>
|
|
691
686
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
692
687
|
}
|
|
693
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
688
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutToolbarComponent, decorators: [{
|
|
694
689
|
type: Component,
|
|
695
690
|
args: [{
|
|
696
691
|
imports: [],
|
|
@@ -725,10 +720,10 @@ class AXPThemeLayoutContainerComponent {
|
|
|
725
720
|
ngOnDestroy() {
|
|
726
721
|
this.mutationObserver?.disconnect();
|
|
727
722
|
}
|
|
728
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
729
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
723
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
724
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.4", 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 }); }
|
|
730
725
|
}
|
|
731
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
726
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPThemeLayoutContainerComponent, decorators: [{
|
|
732
727
|
type: Component,
|
|
733
728
|
args: [{
|
|
734
729
|
standalone: true,
|
|
@@ -993,10 +988,10 @@ class AXPCategoryTreeComponent {
|
|
|
993
988
|
await this.loadRootNodes();
|
|
994
989
|
}
|
|
995
990
|
}
|
|
996
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
997
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
991
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
992
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 </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 }); }
|
|
998
993
|
}
|
|
999
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
994
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
|
|
1000
995
|
type: Component,
|
|
1001
996
|
args: [{ selector: 'axp-category-tree', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
|
|
1002
997
|
CommonModule,
|
|
@@ -1035,10 +1030,10 @@ class AXPQueryColumnsComponent {
|
|
|
1035
1030
|
moveItemInArray(columns, event.previousIndex, event.currentIndex);
|
|
1036
1031
|
this.columns.set(columns);
|
|
1037
1032
|
}
|
|
1038
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1033
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1034
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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.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: "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" }] }); }
|
|
1040
1035
|
}
|
|
1041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1036
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
|
|
1042
1037
|
type: Component,
|
|
1043
1038
|
args: [{ selector: 'axp-query-columns', imports: [
|
|
1044
1039
|
CommonModule,
|
|
@@ -1166,16 +1161,16 @@ class AXPCompareViewComponent {
|
|
|
1166
1161
|
}
|
|
1167
1162
|
ngOnDestroy() {
|
|
1168
1163
|
}
|
|
1169
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1170
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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:
|
|
1164
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1165
|
+
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:
|
|
1171
1166
|
// Angular
|
|
1172
1167
|
CommonModule }, { kind: "ngmodule", type:
|
|
1173
1168
|
// ACoreX
|
|
1174
1169
|
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$3.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:
|
|
1175
1170
|
// Platform
|
|
1176
|
-
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:
|
|
1171
|
+
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 }); }
|
|
1177
1172
|
}
|
|
1178
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1173
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
|
|
1179
1174
|
type: Component,
|
|
1180
1175
|
args: [{ selector: 'axp-compare-view', imports: [
|
|
1181
1176
|
// Angular
|
|
@@ -1193,10 +1188,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
1193
1188
|
}] });
|
|
1194
1189
|
|
|
1195
1190
|
class AXPComponentSlot {
|
|
1196
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1197
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1191
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1192
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.4", type: AXPComponentSlot, isStandalone: true, ngImport: i0 }); }
|
|
1198
1193
|
}
|
|
1199
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlot, decorators: [{
|
|
1200
1195
|
type: Directive
|
|
1201
1196
|
}] });
|
|
1202
1197
|
|
|
@@ -1216,10 +1211,10 @@ class AXPComponentSlotRegistryService {
|
|
|
1216
1211
|
get(slotName) {
|
|
1217
1212
|
return this.registry.get(slotName) || [];
|
|
1218
1213
|
}
|
|
1219
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1220
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1214
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1215
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotRegistryService, providedIn: 'root' }); }
|
|
1221
1216
|
}
|
|
1222
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1217
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotRegistryService, decorators: [{
|
|
1223
1218
|
type: Injectable,
|
|
1224
1219
|
args: [{
|
|
1225
1220
|
providedIn: 'root'
|
|
@@ -1318,10 +1313,10 @@ class AXPComponentSlotDirective {
|
|
|
1318
1313
|
return condition(this.contextStore.data());
|
|
1319
1314
|
//return condition(this.context());
|
|
1320
1315
|
}
|
|
1321
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1322
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
1316
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1317
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.4", 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 }); }
|
|
1323
1318
|
}
|
|
1324
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1319
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotDirective, decorators: [{
|
|
1325
1320
|
type: Directive,
|
|
1326
1321
|
args: [{
|
|
1327
1322
|
selector: 'axp-component-slot',
|
|
@@ -1381,11 +1376,11 @@ class AXPComponentSlotModule {
|
|
|
1381
1376
|
f();
|
|
1382
1377
|
});
|
|
1383
1378
|
}
|
|
1384
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1385
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
1386
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
1379
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule, deps: [{ token: 'AXPComponentSlotModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1380
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule, declarations: [AXPComponentSlotDirective], exports: [AXPComponentSlotDirective] }); }
|
|
1381
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule }); }
|
|
1387
1382
|
}
|
|
1388
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPComponentSlotModule, decorators: [{
|
|
1389
1384
|
type: NgModule,
|
|
1390
1385
|
args: [{
|
|
1391
1386
|
declarations: [AXPComponentSlotDirective],
|
|
@@ -1615,10 +1610,10 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1615
1610
|
this.config().dataSource.filter(filter);
|
|
1616
1611
|
this.config().dataSource.refresh();
|
|
1617
1612
|
}
|
|
1618
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1619
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1613
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
1614
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 [dataSource]=\"config().categoryFilter!.dataSource\" [config]=\"categoryTreeConfig()\"\n [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n </axp-category-tree>\n </div>\n }\n\n <!-- Main Data Area -->\n <div class=\"axp-main-data-area\">\n @if (hasSearch()) {\n <div class=\"ax-w-full ax-mb-2\">\n <ax-search-box [placeholder]=\"searchPlaceholder()\" [value]=\"searchTerm\"\n (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n\n <ax-data-table #grid [showFooter]=\"false\" class=\"ax-h-[50vh]\" [paging]=\"true\"\n [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n [parentField]=\"config().parentField\" (selectedRowsChange)=\"handleSelectedRowsChange($event)\"\n (onRowClick)=\"handleRowClick($event)\" (onRowDbClick)=\"handleRowDbClick($event)\">\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 [expandHandler]=\"$index === 0 && config().parentField ? true : false\"\n [caption]=\"col.title | translate | async\" [node]=\"{\n path: col.name,\n type: col.widget.type,\n options: col.widget.options,\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 look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n (onClick)=\"handleCloseClick()\">\n </ax-button>\n <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n </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>", 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$1.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 }); }
|
|
1620
1615
|
}
|
|
1621
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1616
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
|
|
1622
1617
|
type: Component,
|
|
1623
1618
|
args: [{ selector: 'axp-data-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1624
1619
|
CommonModule,
|
|
@@ -1684,1900 +1679,16 @@ class AXPDataSelectorService {
|
|
|
1684
1679
|
};
|
|
1685
1680
|
return this.open(enhancedConfig);
|
|
1686
1681
|
}
|
|
1687
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1688
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1683
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorService, providedIn: 'root' }); }
|
|
1689
1684
|
}
|
|
1690
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1685
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDataSelectorService, decorators: [{
|
|
1691
1686
|
type: Injectable,
|
|
1692
1687
|
args: [{
|
|
1693
1688
|
providedIn: 'root'
|
|
1694
1689
|
}]
|
|
1695
1690
|
}] });
|
|
1696
1691
|
|
|
1697
|
-
class AXPDynamicDialogService {
|
|
1698
|
-
constructor() {
|
|
1699
|
-
this.popupService = inject(AXPopupService);
|
|
1700
|
-
}
|
|
1701
|
-
/**
|
|
1702
|
-
* Show a dynamic dialog with the given configuration
|
|
1703
|
-
* @param config Dialog configuration including fields, validation, and UI options
|
|
1704
|
-
* @returns Promise resolving to dialog reference for controlling the dialog
|
|
1705
|
-
*/
|
|
1706
|
-
async showDialog(config) {
|
|
1707
|
-
const component = await Promise.resolve().then(function () { return dynamicDialog_component; }).then(c => c.AXPDynamicDialogComponent);
|
|
1708
|
-
return new Promise(async (resolve) => {
|
|
1709
|
-
// Open popup and wait for it to close
|
|
1710
|
-
await this.popupService.open(component, {
|
|
1711
|
-
title: config.title,
|
|
1712
|
-
size: config.size || 'md',
|
|
1713
|
-
closeButton: config.closeButton,
|
|
1714
|
-
closeOnBackdropClick: false,
|
|
1715
|
-
draggable: false,
|
|
1716
|
-
data: {
|
|
1717
|
-
config,
|
|
1718
|
-
dialogResult: null,
|
|
1719
|
-
isSubmittingFromDialog: false,
|
|
1720
|
-
callBack: (result) => {
|
|
1721
|
-
resolve(result);
|
|
1722
|
-
}
|
|
1723
|
-
}
|
|
1724
|
-
});
|
|
1725
|
-
});
|
|
1726
|
-
}
|
|
1727
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicDialogService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1728
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicDialogService, providedIn: 'root' }); }
|
|
1729
|
-
}
|
|
1730
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicDialogService, decorators: [{
|
|
1731
|
-
type: Injectable,
|
|
1732
|
-
args: [{
|
|
1733
|
-
providedIn: 'root'
|
|
1734
|
-
}]
|
|
1735
|
-
}] });
|
|
1736
|
-
|
|
1737
|
-
class AXPDynamicFormBuilderService {
|
|
1738
|
-
constructor() {
|
|
1739
|
-
//#region ---- Services & Dependencies ----
|
|
1740
|
-
this.dialogService = inject(AXPDynamicDialogService);
|
|
1741
|
-
//#endregion
|
|
1742
|
-
//#region ---- Caching ----
|
|
1743
|
-
this.widgetTreeCache = new Map();
|
|
1744
|
-
this.formDefinitionCache = new Map();
|
|
1745
|
-
}
|
|
1746
|
-
//#endregion
|
|
1747
|
-
//#region ---- Public Methods ----
|
|
1748
|
-
/**
|
|
1749
|
-
* Create a new form builder
|
|
1750
|
-
*/
|
|
1751
|
-
form() {
|
|
1752
|
-
return new FormBuilder(this);
|
|
1753
|
-
}
|
|
1754
|
-
/**
|
|
1755
|
-
* Export form definition to AXPWidgetNode
|
|
1756
|
-
*/
|
|
1757
|
-
exportFormDefinition(formDefinition) {
|
|
1758
|
-
return this.serializeToWidgetTree(formDefinition);
|
|
1759
|
-
}
|
|
1760
|
-
/**
|
|
1761
|
-
* Import form definition from AXPWidgetNode
|
|
1762
|
-
*/
|
|
1763
|
-
importFormDefinition(widgetTree) {
|
|
1764
|
-
// Validate the widget tree first
|
|
1765
|
-
if (!this.validateFormWidgetTree(widgetTree)) {
|
|
1766
|
-
throw new Error('Invalid widget tree structure for form definition');
|
|
1767
|
-
}
|
|
1768
|
-
return this.deserializeFromWidgetTree(widgetTree);
|
|
1769
|
-
}
|
|
1770
|
-
/**
|
|
1771
|
-
* Export widget tree to AXPWidgetNode (deep clone)
|
|
1772
|
-
*/
|
|
1773
|
-
exportWidgetTree(widgetTree) {
|
|
1774
|
-
return this.deepCloneWidgetNode(widgetTree);
|
|
1775
|
-
}
|
|
1776
|
-
/**
|
|
1777
|
-
* Import widget tree from AXPWidgetNode (with validation)
|
|
1778
|
-
*/
|
|
1779
|
-
importWidgetTree(widgetTree) {
|
|
1780
|
-
// Validate structure recursively
|
|
1781
|
-
this.validateWidgetTreeStructure(widgetTree);
|
|
1782
|
-
return this.deepCloneWidgetNode(widgetTree);
|
|
1783
|
-
}
|
|
1784
|
-
/**
|
|
1785
|
-
* Create a new dialog builder
|
|
1786
|
-
*/
|
|
1787
|
-
dialog() {
|
|
1788
|
-
return new DialogBuilder(this.dialogService, this);
|
|
1789
|
-
}
|
|
1790
|
-
/**
|
|
1791
|
-
* Convert AXPDynamicFormDefinition to AXPWidgetNode tree structure
|
|
1792
|
-
* Groups become Grid Layouts with Grid Items
|
|
1793
|
-
* Fields become Form Field widgets with Editor widgets as children
|
|
1794
|
-
*/
|
|
1795
|
-
serializeToWidgetTree(formDefinition) {
|
|
1796
|
-
// Create cache key based on form definition content
|
|
1797
|
-
const cacheKey = this.createFormDefinitionCacheKey(formDefinition);
|
|
1798
|
-
// Check cache first
|
|
1799
|
-
if (this.widgetTreeCache.has(cacheKey)) {
|
|
1800
|
-
return this.widgetTreeCache.get(cacheKey);
|
|
1801
|
-
}
|
|
1802
|
-
// Generate widget tree
|
|
1803
|
-
const widgetTree = {
|
|
1804
|
-
type: 'grid-layout',
|
|
1805
|
-
name: 'dynamic-form-container',
|
|
1806
|
-
options: {
|
|
1807
|
-
title: 'Dynamic Form',
|
|
1808
|
-
grid: {
|
|
1809
|
-
default: {
|
|
1810
|
-
columns: 1,
|
|
1811
|
-
gap: '1rem'
|
|
1812
|
-
}
|
|
1813
|
-
}
|
|
1814
|
-
},
|
|
1815
|
-
children: formDefinition.groups.map(group => this.createGroupAsFieldsetWidget(group))
|
|
1816
|
-
};
|
|
1817
|
-
// Cache the result
|
|
1818
|
-
this.widgetTreeCache.set(cacheKey, widgetTree);
|
|
1819
|
-
return widgetTree;
|
|
1820
|
-
}
|
|
1821
|
-
/**
|
|
1822
|
-
* Convert AXPWidgetNode tree back to AXPDynamicFormDefinition
|
|
1823
|
-
* Parses Grid Layouts back to Groups
|
|
1824
|
-
* Parses Form Field widgets back to Fields
|
|
1825
|
-
*/
|
|
1826
|
-
deserializeFromWidgetTree(widgetTree) {
|
|
1827
|
-
// Create cache key based on widget tree content
|
|
1828
|
-
const cacheKey = this.createWidgetTreeCacheKey(widgetTree);
|
|
1829
|
-
// Check cache first
|
|
1830
|
-
if (this.formDefinitionCache.has(cacheKey)) {
|
|
1831
|
-
return this.formDefinitionCache.get(cacheKey);
|
|
1832
|
-
}
|
|
1833
|
-
// Parse widget tree
|
|
1834
|
-
const groups = [];
|
|
1835
|
-
if (widgetTree.children) {
|
|
1836
|
-
widgetTree.children.forEach(child => {
|
|
1837
|
-
if (child.type === 'fieldset-layout') {
|
|
1838
|
-
const group = this.extractGroupFromFieldset(child);
|
|
1839
|
-
groups.push(group);
|
|
1840
|
-
}
|
|
1841
|
-
});
|
|
1842
|
-
}
|
|
1843
|
-
const formDefinition = { groups };
|
|
1844
|
-
// Cache the result
|
|
1845
|
-
this.formDefinitionCache.set(cacheKey, formDefinition);
|
|
1846
|
-
return formDefinition;
|
|
1847
|
-
}
|
|
1848
|
-
/**
|
|
1849
|
-
* Validate that a widget tree represents a valid dynamic form structure
|
|
1850
|
-
*/
|
|
1851
|
-
validateFormWidgetTree(widgetTree) {
|
|
1852
|
-
if (!widgetTree || widgetTree.type !== 'grid-layout') {
|
|
1853
|
-
return false;
|
|
1854
|
-
}
|
|
1855
|
-
if (!widgetTree.children || widgetTree.children.length === 0) {
|
|
1856
|
-
return true; // Empty form is valid
|
|
1857
|
-
}
|
|
1858
|
-
// Check that all children are fieldset-layout widgets
|
|
1859
|
-
return widgetTree.children.every(child => child.type === 'fieldset-layout' &&
|
|
1860
|
-
child.children &&
|
|
1861
|
-
child.children.every(formField => formField.type === 'form-field' &&
|
|
1862
|
-
formField.children &&
|
|
1863
|
-
formField.children.length > 0));
|
|
1864
|
-
}
|
|
1865
|
-
/**
|
|
1866
|
-
* Convert a single group to Fieldset widget structure
|
|
1867
|
-
*/
|
|
1868
|
-
createGroupAsFieldsetWidget(group) {
|
|
1869
|
-
// Determine columns count from layout or default to 1
|
|
1870
|
-
const columnsCount = 1;
|
|
1871
|
-
return {
|
|
1872
|
-
type: 'fieldset-layout',
|
|
1873
|
-
name: group.name,
|
|
1874
|
-
options: {
|
|
1875
|
-
title: group.title,
|
|
1876
|
-
description: group.description,
|
|
1877
|
-
cols: columnsCount
|
|
1878
|
-
},
|
|
1879
|
-
children: this.createFieldWidgets(group.parameters, columnsCount)
|
|
1880
|
-
};
|
|
1881
|
-
}
|
|
1882
|
-
/**
|
|
1883
|
-
* Convert fields to Form Field widgets
|
|
1884
|
-
*/
|
|
1885
|
-
createFieldWidgets(fields, columnsCount) {
|
|
1886
|
-
return fields.map(field => this.createFormFieldWidget(field));
|
|
1887
|
-
}
|
|
1888
|
-
/**
|
|
1889
|
-
* Convert a single field to Form Field widget with editor as child
|
|
1890
|
-
*/
|
|
1891
|
-
createFormFieldWidget(field) {
|
|
1892
|
-
return {
|
|
1893
|
-
type: 'form-field',
|
|
1894
|
-
name: field.path,
|
|
1895
|
-
options: {
|
|
1896
|
-
label: field.title,
|
|
1897
|
-
description: field.description,
|
|
1898
|
-
showLabel: true
|
|
1899
|
-
},
|
|
1900
|
-
children: [field.widget] // The editor widget becomes a child of form-field
|
|
1901
|
-
};
|
|
1902
|
-
}
|
|
1903
|
-
/**
|
|
1904
|
-
* Extract group information from Grid Layout widget
|
|
1905
|
-
*/
|
|
1906
|
-
extractGroupFromFieldset(fieldsetNode) {
|
|
1907
|
-
const columnsCount = fieldsetNode.options?.['cols'] || 1;
|
|
1908
|
-
// Extract fields directly from fieldset children
|
|
1909
|
-
const fields = [];
|
|
1910
|
-
if (fieldsetNode.children) {
|
|
1911
|
-
fieldsetNode.children.forEach(formField => {
|
|
1912
|
-
if (formField.type === 'form-field' && formField.children && formField.children.length > 0) {
|
|
1913
|
-
const field = this.extractFieldFromFormWidget(formField);
|
|
1914
|
-
if (field) {
|
|
1915
|
-
fields.push(field);
|
|
1916
|
-
}
|
|
1917
|
-
}
|
|
1918
|
-
});
|
|
1919
|
-
}
|
|
1920
|
-
return {
|
|
1921
|
-
name: fieldsetNode.name || `group-${Date.now()}`,
|
|
1922
|
-
title: fieldsetNode.options?.['title'],
|
|
1923
|
-
description: fieldsetNode.options?.['description'],
|
|
1924
|
-
parameters: fields,
|
|
1925
|
-
};
|
|
1926
|
-
}
|
|
1927
|
-
/**
|
|
1928
|
-
* Extract field information from Form Field widget
|
|
1929
|
-
*/
|
|
1930
|
-
extractFieldFromFormWidget(formFieldNode) {
|
|
1931
|
-
if (!formFieldNode.children || formFieldNode.children.length === 0) {
|
|
1932
|
-
return null;
|
|
1933
|
-
}
|
|
1934
|
-
const editorWidget = formFieldNode.children[0];
|
|
1935
|
-
return {
|
|
1936
|
-
path: formFieldNode.name || editorWidget.name || `field-${Date.now()}`,
|
|
1937
|
-
title: formFieldNode.options?.['label'],
|
|
1938
|
-
description: formFieldNode.options?.['description'],
|
|
1939
|
-
widget: editorWidget,
|
|
1940
|
-
mode: formFieldNode.mode
|
|
1941
|
-
};
|
|
1942
|
-
}
|
|
1943
|
-
/**
|
|
1944
|
-
* Create cache key for form definition
|
|
1945
|
-
*/
|
|
1946
|
-
createFormDefinitionCacheKey(formDefinition) {
|
|
1947
|
-
// Create a hash-like key instead of full JSON string
|
|
1948
|
-
const keyParts = [];
|
|
1949
|
-
keyParts.push(`groups:${formDefinition.groups.length}`);
|
|
1950
|
-
formDefinition.groups.forEach((group, groupIndex) => {
|
|
1951
|
-
keyParts.push(`g${groupIndex}:${group.name}:${group.parameters.length}`);
|
|
1952
|
-
group.parameters.forEach((param, paramIndex) => {
|
|
1953
|
-
keyParts.push(`p${groupIndex}.${paramIndex}:${param.path}:${param.widget.type}`);
|
|
1954
|
-
});
|
|
1955
|
-
});
|
|
1956
|
-
if (formDefinition.mode) {
|
|
1957
|
-
keyParts.push(`mode:${formDefinition.mode}`);
|
|
1958
|
-
}
|
|
1959
|
-
// Join with delimiter and create a shorter hash
|
|
1960
|
-
const keyString = keyParts.join('|');
|
|
1961
|
-
// If still too long, create a simple hash
|
|
1962
|
-
if (keyString.length > 100) {
|
|
1963
|
-
return this.createSimpleHash(keyString);
|
|
1964
|
-
}
|
|
1965
|
-
return keyString;
|
|
1966
|
-
}
|
|
1967
|
-
/**
|
|
1968
|
-
* Create cache key for widget tree
|
|
1969
|
-
*/
|
|
1970
|
-
createWidgetTreeCacheKey(widgetTree) {
|
|
1971
|
-
// Create a hash-like key instead of full JSON string
|
|
1972
|
-
const keyParts = [];
|
|
1973
|
-
keyParts.push(`type:${widgetTree.type}`);
|
|
1974
|
-
if (widgetTree.name) {
|
|
1975
|
-
keyParts.push(`name:${widgetTree.name}`);
|
|
1976
|
-
}
|
|
1977
|
-
if (widgetTree.children) {
|
|
1978
|
-
keyParts.push(`children:${widgetTree.children.length}`);
|
|
1979
|
-
widgetTree.children.forEach((child, index) => {
|
|
1980
|
-
keyParts.push(`c${index}:${child.type}`);
|
|
1981
|
-
if (child.children) {
|
|
1982
|
-
keyParts.push(`cc${index}:${child.children.length}`);
|
|
1983
|
-
child.children.forEach((grandChild, gIndex) => {
|
|
1984
|
-
keyParts.push(`gc${index}.${gIndex}:${grandChild.type}`);
|
|
1985
|
-
if (grandChild.children) {
|
|
1986
|
-
keyParts.push(`gcc${index}.${gIndex}:${grandChild.children.length}`);
|
|
1987
|
-
}
|
|
1988
|
-
});
|
|
1989
|
-
}
|
|
1990
|
-
});
|
|
1991
|
-
}
|
|
1992
|
-
// Join with delimiter and create a shorter hash
|
|
1993
|
-
const keyString = keyParts.join('|');
|
|
1994
|
-
// If still too long, create a simple hash
|
|
1995
|
-
if (keyString.length > 100) {
|
|
1996
|
-
return this.createSimpleHash(keyString);
|
|
1997
|
-
}
|
|
1998
|
-
return keyString;
|
|
1999
|
-
}
|
|
2000
|
-
/**
|
|
2001
|
-
* Clear all caches
|
|
2002
|
-
*/
|
|
2003
|
-
clearCaches() {
|
|
2004
|
-
this.widgetTreeCache.clear();
|
|
2005
|
-
this.formDefinitionCache.clear();
|
|
2006
|
-
}
|
|
2007
|
-
/**
|
|
2008
|
-
* Get cache statistics
|
|
2009
|
-
*/
|
|
2010
|
-
getCacheStats() {
|
|
2011
|
-
return {
|
|
2012
|
-
widgetTreeCacheSize: this.widgetTreeCache.size,
|
|
2013
|
-
formDefinitionCacheSize: this.formDefinitionCache.size
|
|
2014
|
-
};
|
|
2015
|
-
}
|
|
2016
|
-
/**
|
|
2017
|
-
* Create a simple hash from a string
|
|
2018
|
-
*/
|
|
2019
|
-
createSimpleHash(str) {
|
|
2020
|
-
let hash = 0;
|
|
2021
|
-
if (str.length === 0)
|
|
2022
|
-
return hash.toString();
|
|
2023
|
-
for (let i = 0; i < str.length; i++) {
|
|
2024
|
-
const char = str.charCodeAt(i);
|
|
2025
|
-
hash = ((hash << 5) - hash) + char;
|
|
2026
|
-
hash = hash & hash; // Convert to 32-bit integer
|
|
2027
|
-
}
|
|
2028
|
-
return Math.abs(hash).toString(36); // Convert to base36 for shorter string
|
|
2029
|
-
}
|
|
2030
|
-
/**
|
|
2031
|
-
* Validate widget tree structure recursively
|
|
2032
|
-
*/
|
|
2033
|
-
validateWidgetTreeStructure(node, path = 'root') {
|
|
2034
|
-
if (!node || typeof node !== 'object') {
|
|
2035
|
-
throw new Error(`${path} must be an object`);
|
|
2036
|
-
}
|
|
2037
|
-
if (!node.type || typeof node.type !== 'string') {
|
|
2038
|
-
throw new Error(`${path} must have a valid type`);
|
|
2039
|
-
}
|
|
2040
|
-
// Validate children if they exist
|
|
2041
|
-
if (node.children !== undefined) {
|
|
2042
|
-
if (!Array.isArray(node.children)) {
|
|
2043
|
-
throw new Error(`${path}.children must be an array`);
|
|
2044
|
-
}
|
|
2045
|
-
node.children.forEach((child, index) => {
|
|
2046
|
-
this.validateWidgetTreeStructure(child, `${path}.children[${index}]`);
|
|
2047
|
-
});
|
|
2048
|
-
}
|
|
2049
|
-
// Validate options if they exist
|
|
2050
|
-
if (node.options !== undefined && node.options !== null) {
|
|
2051
|
-
if (typeof node.options !== 'object') {
|
|
2052
|
-
throw new Error(`${path}.options must be an object`);
|
|
2053
|
-
}
|
|
2054
|
-
}
|
|
2055
|
-
// Validate other properties if they exist
|
|
2056
|
-
if (node.name !== undefined && typeof node.name !== 'string') {
|
|
2057
|
-
throw new Error(`${path}.name must be a string`);
|
|
2058
|
-
}
|
|
2059
|
-
if (node.path !== undefined && typeof node.path !== 'string') {
|
|
2060
|
-
throw new Error(`${path}.path must be a string`);
|
|
2061
|
-
}
|
|
2062
|
-
if (node.mode !== undefined && typeof node.mode !== 'string') {
|
|
2063
|
-
throw new Error(`${path}.mode must be a string`);
|
|
2064
|
-
}
|
|
2065
|
-
}
|
|
2066
|
-
/**
|
|
2067
|
-
* Deep clone AXPWidgetNode
|
|
2068
|
-
*/
|
|
2069
|
-
deepCloneWidgetNode(node) {
|
|
2070
|
-
return {
|
|
2071
|
-
type: node.type,
|
|
2072
|
-
mode: node.mode,
|
|
2073
|
-
path: node.path,
|
|
2074
|
-
name: node.name,
|
|
2075
|
-
defaultValue: node.defaultValue,
|
|
2076
|
-
formula: node.formula,
|
|
2077
|
-
options: node.options ? JSON.parse(JSON.stringify(node.options)) : undefined,
|
|
2078
|
-
triggers: node.triggers ? JSON.parse(JSON.stringify(node.triggers)) : undefined,
|
|
2079
|
-
meta: node.meta ? JSON.parse(JSON.stringify(node.meta)) : undefined,
|
|
2080
|
-
valueTransforms: node.valueTransforms ? JSON.parse(JSON.stringify(node.valueTransforms)) : undefined,
|
|
2081
|
-
children: node.children ? node.children.map(child => this.deepCloneWidgetNode(child)) : undefined
|
|
2082
|
-
};
|
|
2083
|
-
}
|
|
2084
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2085
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicFormBuilderService, providedIn: 'root' }); }
|
|
2086
|
-
}
|
|
2087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicFormBuilderService, decorators: [{
|
|
2088
|
-
type: Injectable,
|
|
2089
|
-
args: [{
|
|
2090
|
-
providedIn: 'root',
|
|
2091
|
-
}]
|
|
2092
|
-
}] });
|
|
2093
|
-
//#region ---- Form Builder Implementation ----
|
|
2094
|
-
class FormBuilder {
|
|
2095
|
-
constructor(service) {
|
|
2096
|
-
this.service = service;
|
|
2097
|
-
this.state = {
|
|
2098
|
-
groups: [],
|
|
2099
|
-
layoutConfig: {
|
|
2100
|
-
positions: {
|
|
2101
|
-
sm: { colSpan: 12 },
|
|
2102
|
-
md: { colSpan: 8 },
|
|
2103
|
-
lg: { colSpan: 6 },
|
|
2104
|
-
xl: { colSpan: 5 },
|
|
2105
|
-
xxl: { colSpan: 4 },
|
|
2106
|
-
},
|
|
2107
|
-
},
|
|
2108
|
-
look: 'container',
|
|
2109
|
-
};
|
|
2110
|
-
}
|
|
2111
|
-
group(name, delegate) {
|
|
2112
|
-
const groupBuilder = new GroupBuilder(this, name);
|
|
2113
|
-
if (delegate) {
|
|
2114
|
-
delegate(groupBuilder);
|
|
2115
|
-
}
|
|
2116
|
-
this.addGroup(groupBuilder.build());
|
|
2117
|
-
return this;
|
|
2118
|
-
}
|
|
2119
|
-
layout(config) {
|
|
2120
|
-
this.state.layoutConfig = { ...this.state.layoutConfig, ...config };
|
|
2121
|
-
return this;
|
|
2122
|
-
}
|
|
2123
|
-
look(look) {
|
|
2124
|
-
this.state.look = look;
|
|
2125
|
-
return this;
|
|
2126
|
-
}
|
|
2127
|
-
mode(mode) {
|
|
2128
|
-
this.state.mode = mode;
|
|
2129
|
-
return this;
|
|
2130
|
-
}
|
|
2131
|
-
build() {
|
|
2132
|
-
return {
|
|
2133
|
-
groups: this.state.groups,
|
|
2134
|
-
mode: this.state.mode,
|
|
2135
|
-
};
|
|
2136
|
-
}
|
|
2137
|
-
/**
|
|
2138
|
-
* Export the current form definition to AXPWidgetNode
|
|
2139
|
-
*/
|
|
2140
|
-
export() {
|
|
2141
|
-
const formDefinition = this.build();
|
|
2142
|
-
// Use the service method to convert to widget tree
|
|
2143
|
-
return this.service.serializeToWidgetTree(formDefinition);
|
|
2144
|
-
}
|
|
2145
|
-
/**
|
|
2146
|
-
* Import form definition from AXPWidgetNode and rebuild the form
|
|
2147
|
-
*/
|
|
2148
|
-
import(widgetTree) {
|
|
2149
|
-
try {
|
|
2150
|
-
// Use the service method to convert widget tree to form definition
|
|
2151
|
-
const formDefinition = this.service.deserializeFromWidgetTree(widgetTree);
|
|
2152
|
-
// Reset the builder state
|
|
2153
|
-
this.state = {
|
|
2154
|
-
groups: [],
|
|
2155
|
-
layoutConfig: {
|
|
2156
|
-
positions: {
|
|
2157
|
-
sm: { colSpan: 12 },
|
|
2158
|
-
md: { colSpan: 8 },
|
|
2159
|
-
lg: { colSpan: 6 },
|
|
2160
|
-
xl: { colSpan: 5 },
|
|
2161
|
-
xxl: { colSpan: 4 },
|
|
2162
|
-
},
|
|
2163
|
-
},
|
|
2164
|
-
look: 'container',
|
|
2165
|
-
};
|
|
2166
|
-
// Import groups
|
|
2167
|
-
if (formDefinition.groups && Array.isArray(formDefinition.groups)) {
|
|
2168
|
-
formDefinition.groups.forEach((group) => {
|
|
2169
|
-
const groupBuilder = new GroupBuilder(this, group.name);
|
|
2170
|
-
if (group.title) {
|
|
2171
|
-
groupBuilder.title(group.title);
|
|
2172
|
-
}
|
|
2173
|
-
if (group.description) {
|
|
2174
|
-
groupBuilder.description(group.description);
|
|
2175
|
-
}
|
|
2176
|
-
if (group.mode) {
|
|
2177
|
-
groupBuilder.mode(group.mode);
|
|
2178
|
-
}
|
|
2179
|
-
// Import fields
|
|
2180
|
-
if (group.parameters && Array.isArray(group.parameters)) {
|
|
2181
|
-
group.parameters.forEach((param) => {
|
|
2182
|
-
groupBuilder.field(param.path, (fieldBuilder) => {
|
|
2183
|
-
if (param.title) {
|
|
2184
|
-
fieldBuilder.title(param.title);
|
|
2185
|
-
}
|
|
2186
|
-
if (param.description) {
|
|
2187
|
-
fieldBuilder.description(param.description);
|
|
2188
|
-
}
|
|
2189
|
-
if (param.mode) {
|
|
2190
|
-
fieldBuilder.mode(param.mode);
|
|
2191
|
-
}
|
|
2192
|
-
if (param.layout) {
|
|
2193
|
-
fieldBuilder.layout(param.layout);
|
|
2194
|
-
}
|
|
2195
|
-
// Set the widget
|
|
2196
|
-
if (param.widget) {
|
|
2197
|
-
// Use the widget method to set the widget type and options
|
|
2198
|
-
fieldBuilder.widget(param.widget.type, param.widget.options);
|
|
2199
|
-
}
|
|
2200
|
-
});
|
|
2201
|
-
});
|
|
2202
|
-
}
|
|
2203
|
-
this.addGroup(groupBuilder.build());
|
|
2204
|
-
});
|
|
2205
|
-
}
|
|
2206
|
-
// Import form-level properties
|
|
2207
|
-
if (formDefinition.mode) {
|
|
2208
|
-
this.state.mode = formDefinition.mode;
|
|
2209
|
-
}
|
|
2210
|
-
return this;
|
|
2211
|
-
}
|
|
2212
|
-
catch (error) {
|
|
2213
|
-
throw new Error(`Failed to import form definition: ${error instanceof Error ? error.message : 'Unknown error'}`);
|
|
2214
|
-
}
|
|
2215
|
-
}
|
|
2216
|
-
addGroup(group) {
|
|
2217
|
-
this.state.groups.push(group);
|
|
2218
|
-
}
|
|
2219
|
-
}
|
|
2220
|
-
//#endregion
|
|
2221
|
-
//#region ---- Group Builder Implementation ----
|
|
2222
|
-
class GroupBuilder {
|
|
2223
|
-
constructor(formBuilder, name) {
|
|
2224
|
-
this.formBuilder = formBuilder;
|
|
2225
|
-
this.groupState = {
|
|
2226
|
-
name: '',
|
|
2227
|
-
title: '',
|
|
2228
|
-
description: '',
|
|
2229
|
-
parameters: [],
|
|
2230
|
-
};
|
|
2231
|
-
this.groupState.name = name;
|
|
2232
|
-
}
|
|
2233
|
-
title(title) {
|
|
2234
|
-
this.groupState.title = title;
|
|
2235
|
-
return this;
|
|
2236
|
-
}
|
|
2237
|
-
description(description) {
|
|
2238
|
-
this.groupState.description = description;
|
|
2239
|
-
return this;
|
|
2240
|
-
}
|
|
2241
|
-
mode(mode) {
|
|
2242
|
-
this.groupState.mode = mode;
|
|
2243
|
-
return this;
|
|
2244
|
-
}
|
|
2245
|
-
field(path, delegate) {
|
|
2246
|
-
const fieldBuilder = new FieldBuilder(this, path);
|
|
2247
|
-
if (delegate) {
|
|
2248
|
-
delegate(fieldBuilder);
|
|
2249
|
-
}
|
|
2250
|
-
this.addField(fieldBuilder.build());
|
|
2251
|
-
return this;
|
|
2252
|
-
}
|
|
2253
|
-
group(name, delegate) {
|
|
2254
|
-
const nestedGroupBuilder = new GroupBuilder(this.formBuilder, name);
|
|
2255
|
-
if (delegate) {
|
|
2256
|
-
delegate(nestedGroupBuilder);
|
|
2257
|
-
}
|
|
2258
|
-
this.addGroup(nestedGroupBuilder.build());
|
|
2259
|
-
return this;
|
|
2260
|
-
}
|
|
2261
|
-
build() {
|
|
2262
|
-
return {
|
|
2263
|
-
name: this.groupState.name,
|
|
2264
|
-
title: this.groupState.title,
|
|
2265
|
-
description: this.groupState.description,
|
|
2266
|
-
parameters: this.groupState.parameters,
|
|
2267
|
-
mode: this.groupState.mode,
|
|
2268
|
-
};
|
|
2269
|
-
}
|
|
2270
|
-
addField(field) {
|
|
2271
|
-
this.groupState.parameters.push(field);
|
|
2272
|
-
}
|
|
2273
|
-
addGroup(group) {
|
|
2274
|
-
// For nested groups, we add them to the parent form builder
|
|
2275
|
-
this.formBuilder['addGroup'](group);
|
|
2276
|
-
}
|
|
2277
|
-
}
|
|
2278
|
-
//#endregion
|
|
2279
|
-
//#region ---- Field Builder Implementation ----
|
|
2280
|
-
class FieldBuilder {
|
|
2281
|
-
constructor(groupBuilder, path) {
|
|
2282
|
-
this.groupBuilder = groupBuilder;
|
|
2283
|
-
this.fieldState = {
|
|
2284
|
-
path: '',
|
|
2285
|
-
title: '',
|
|
2286
|
-
description: '',
|
|
2287
|
-
defaultValue: undefined,
|
|
2288
|
-
hidden: undefined,
|
|
2289
|
-
readonly: undefined,
|
|
2290
|
-
disabled: undefined,
|
|
2291
|
-
widget: undefined,
|
|
2292
|
-
};
|
|
2293
|
-
this.fieldState.path = path;
|
|
2294
|
-
this.fieldState.title = path;
|
|
2295
|
-
}
|
|
2296
|
-
//#region ---- Utility Methods ----
|
|
2297
|
-
/**
|
|
2298
|
-
* Merge provided widget options with field-level options
|
|
2299
|
-
*/
|
|
2300
|
-
mergeWithFieldOptions(options) {
|
|
2301
|
-
return {
|
|
2302
|
-
hidden: this.fieldState.hidden,
|
|
2303
|
-
readonly: this.fieldState.readonly,
|
|
2304
|
-
disabled: this.fieldState.disabled,
|
|
2305
|
-
...options,
|
|
2306
|
-
};
|
|
2307
|
-
}
|
|
2308
|
-
//#endregion
|
|
2309
|
-
title(title) {
|
|
2310
|
-
this.fieldState.title = title;
|
|
2311
|
-
return this;
|
|
2312
|
-
}
|
|
2313
|
-
description(description) {
|
|
2314
|
-
this.fieldState.description = description;
|
|
2315
|
-
return this;
|
|
2316
|
-
}
|
|
2317
|
-
mode(mode) {
|
|
2318
|
-
this.fieldState.mode = mode;
|
|
2319
|
-
return this;
|
|
2320
|
-
}
|
|
2321
|
-
options(options) {
|
|
2322
|
-
this.fieldState.defaultValue = options['defaultValue'];
|
|
2323
|
-
this.fieldState.hidden = options['hidden'];
|
|
2324
|
-
this.fieldState.readonly = options['readonly'];
|
|
2325
|
-
this.fieldState.disabled = options['disabled'];
|
|
2326
|
-
return this;
|
|
2327
|
-
}
|
|
2328
|
-
layout(value) {
|
|
2329
|
-
if (typeof value === 'number') {
|
|
2330
|
-
this.fieldState.layout = {
|
|
2331
|
-
positions: {
|
|
2332
|
-
sm: { colSpan: 12 },
|
|
2333
|
-
md: { colSpan: 12 },
|
|
2334
|
-
lg: { colSpan: value },
|
|
2335
|
-
xl: { colSpan: value },
|
|
2336
|
-
xxl: { colSpan: value },
|
|
2337
|
-
}
|
|
2338
|
-
};
|
|
2339
|
-
}
|
|
2340
|
-
else {
|
|
2341
|
-
this.fieldState.layout = value;
|
|
2342
|
-
}
|
|
2343
|
-
return this;
|
|
2344
|
-
}
|
|
2345
|
-
textBox(options) {
|
|
2346
|
-
this.fieldState.widget = {
|
|
2347
|
-
type: 'text-editor',
|
|
2348
|
-
path: this.fieldState.path,
|
|
2349
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2350
|
-
options: this.mergeWithFieldOptions(options),
|
|
2351
|
-
};
|
|
2352
|
-
return this;
|
|
2353
|
-
}
|
|
2354
|
-
largeTextBox(options) {
|
|
2355
|
-
this.fieldState.widget = {
|
|
2356
|
-
type: 'large-text-editor',
|
|
2357
|
-
path: this.fieldState.path,
|
|
2358
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2359
|
-
options: this.mergeWithFieldOptions(options),
|
|
2360
|
-
};
|
|
2361
|
-
return this;
|
|
2362
|
-
}
|
|
2363
|
-
richText(options) {
|
|
2364
|
-
this.fieldState.widget = {
|
|
2365
|
-
type: 'rich-text-editor',
|
|
2366
|
-
path: this.fieldState.path,
|
|
2367
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2368
|
-
options: this.mergeWithFieldOptions(options),
|
|
2369
|
-
};
|
|
2370
|
-
return this;
|
|
2371
|
-
}
|
|
2372
|
-
passwordBox(options) {
|
|
2373
|
-
this.fieldState.widget = {
|
|
2374
|
-
type: 'password-editor',
|
|
2375
|
-
path: this.fieldState.path,
|
|
2376
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2377
|
-
options: this.mergeWithFieldOptions(options),
|
|
2378
|
-
};
|
|
2379
|
-
return this;
|
|
2380
|
-
}
|
|
2381
|
-
selectBox(options) {
|
|
2382
|
-
this.fieldState.widget = {
|
|
2383
|
-
type: 'select-editor',
|
|
2384
|
-
path: this.fieldState.path,
|
|
2385
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2386
|
-
options: this.mergeWithFieldOptions(options),
|
|
2387
|
-
};
|
|
2388
|
-
return this;
|
|
2389
|
-
}
|
|
2390
|
-
selectionList(options) {
|
|
2391
|
-
this.fieldState.widget = {
|
|
2392
|
-
type: 'selection-list-editor',
|
|
2393
|
-
path: this.fieldState.path,
|
|
2394
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2395
|
-
options: this.mergeWithFieldOptions(options),
|
|
2396
|
-
};
|
|
2397
|
-
return this;
|
|
2398
|
-
}
|
|
2399
|
-
lookupBox(options) {
|
|
2400
|
-
this.fieldState.widget = {
|
|
2401
|
-
type: 'lookup-editor',
|
|
2402
|
-
path: this.fieldState.path,
|
|
2403
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2404
|
-
options: this.mergeWithFieldOptions(options),
|
|
2405
|
-
};
|
|
2406
|
-
return this;
|
|
2407
|
-
}
|
|
2408
|
-
numberBox(options) {
|
|
2409
|
-
this.fieldState.widget = {
|
|
2410
|
-
type: 'number-editor',
|
|
2411
|
-
path: this.fieldState.path,
|
|
2412
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2413
|
-
options: this.mergeWithFieldOptions(options),
|
|
2414
|
-
};
|
|
2415
|
-
return this;
|
|
2416
|
-
}
|
|
2417
|
-
dateTimeBox(options) {
|
|
2418
|
-
this.fieldState.widget = {
|
|
2419
|
-
type: 'date-time-editor',
|
|
2420
|
-
path: this.fieldState.path,
|
|
2421
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2422
|
-
options: this.mergeWithFieldOptions(options),
|
|
2423
|
-
};
|
|
2424
|
-
return this;
|
|
2425
|
-
}
|
|
2426
|
-
toggleSwitch(options) {
|
|
2427
|
-
this.fieldState.widget = {
|
|
2428
|
-
type: 'toggle-editor',
|
|
2429
|
-
path: this.fieldState.path,
|
|
2430
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2431
|
-
options: this.mergeWithFieldOptions(options),
|
|
2432
|
-
};
|
|
2433
|
-
return this;
|
|
2434
|
-
}
|
|
2435
|
-
colorBox(options) {
|
|
2436
|
-
this.fieldState.widget = {
|
|
2437
|
-
type: 'color-editor',
|
|
2438
|
-
path: this.fieldState.path,
|
|
2439
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2440
|
-
options: this.mergeWithFieldOptions(options),
|
|
2441
|
-
};
|
|
2442
|
-
return this;
|
|
2443
|
-
}
|
|
2444
|
-
widget(type, options) {
|
|
2445
|
-
this.fieldState.widget = {
|
|
2446
|
-
type,
|
|
2447
|
-
path: this.fieldState.path,
|
|
2448
|
-
defaultValue: this.fieldState.defaultValue,
|
|
2449
|
-
options: this.mergeWithFieldOptions(options),
|
|
2450
|
-
};
|
|
2451
|
-
return this;
|
|
2452
|
-
}
|
|
2453
|
-
build() {
|
|
2454
|
-
return {
|
|
2455
|
-
path: this.fieldState.path,
|
|
2456
|
-
title: this.fieldState.title,
|
|
2457
|
-
description: this.fieldState.description,
|
|
2458
|
-
widget: this.fieldState.widget,
|
|
2459
|
-
layout: this.fieldState.layout,
|
|
2460
|
-
mode: this.fieldState.mode,
|
|
2461
|
-
};
|
|
2462
|
-
}
|
|
2463
|
-
}
|
|
2464
|
-
//#endregion
|
|
2465
|
-
//#region ---- Dialog Builder Implementation ----
|
|
2466
|
-
class DialogBuilder extends FormBuilder {
|
|
2467
|
-
constructor(dialogService, formService) {
|
|
2468
|
-
super(formService);
|
|
2469
|
-
this.dialogService = dialogService;
|
|
2470
|
-
this.formService = formService;
|
|
2471
|
-
this.dialogState = {
|
|
2472
|
-
groups: [],
|
|
2473
|
-
steps: [],
|
|
2474
|
-
layoutConfig: {
|
|
2475
|
-
positions: {
|
|
2476
|
-
sm: { colSpan: 12 },
|
|
2477
|
-
md: { colSpan: 8 },
|
|
2478
|
-
lg: { colSpan: 6 },
|
|
2479
|
-
xl: { colSpan: 5 },
|
|
2480
|
-
xxl: { colSpan: 4 },
|
|
2481
|
-
},
|
|
2482
|
-
},
|
|
2483
|
-
look: 'container',
|
|
2484
|
-
mode: 'edit',
|
|
2485
|
-
closeButton: false,
|
|
2486
|
-
title: '',
|
|
2487
|
-
message: '',
|
|
2488
|
-
size: 'md',
|
|
2489
|
-
context: {},
|
|
2490
|
-
actions: {
|
|
2491
|
-
footer: {
|
|
2492
|
-
prefix: [],
|
|
2493
|
-
suffix: [],
|
|
2494
|
-
},
|
|
2495
|
-
},
|
|
2496
|
-
};
|
|
2497
|
-
}
|
|
2498
|
-
// Override to keep chaining within dialog context
|
|
2499
|
-
group(name, delegate) {
|
|
2500
|
-
super.group(name, delegate);
|
|
2501
|
-
return this;
|
|
2502
|
-
}
|
|
2503
|
-
step(id, delegate) {
|
|
2504
|
-
const builder = new StepBuilder(this, id);
|
|
2505
|
-
if (delegate) {
|
|
2506
|
-
delegate(builder);
|
|
2507
|
-
}
|
|
2508
|
-
this.dialogState.steps.push(builder.build());
|
|
2509
|
-
return this;
|
|
2510
|
-
}
|
|
2511
|
-
stepperDirection(direction) {
|
|
2512
|
-
this.dialogState.stepperDirection = direction;
|
|
2513
|
-
return this;
|
|
2514
|
-
}
|
|
2515
|
-
guardNext(guard) {
|
|
2516
|
-
this.dialogState.guardNext = guard;
|
|
2517
|
-
return this;
|
|
2518
|
-
}
|
|
2519
|
-
// Ensure dialog state mirrors form state and chaining type stays IDialogBuilder
|
|
2520
|
-
layout(config) {
|
|
2521
|
-
super.layout(config);
|
|
2522
|
-
this.dialogState.layoutConfig = { ...this.dialogState.layoutConfig, ...config };
|
|
2523
|
-
return this;
|
|
2524
|
-
}
|
|
2525
|
-
look(look) {
|
|
2526
|
-
super.look(look);
|
|
2527
|
-
this.dialogState.look = look;
|
|
2528
|
-
return this;
|
|
2529
|
-
}
|
|
2530
|
-
mode(mode) {
|
|
2531
|
-
console.log(mode);
|
|
2532
|
-
super.mode(mode);
|
|
2533
|
-
this.dialogState.mode = mode;
|
|
2534
|
-
return this;
|
|
2535
|
-
}
|
|
2536
|
-
closeButton(closeButton) {
|
|
2537
|
-
this.dialogState.closeButton = closeButton;
|
|
2538
|
-
return this;
|
|
2539
|
-
}
|
|
2540
|
-
title(title) {
|
|
2541
|
-
this.dialogState.title = title;
|
|
2542
|
-
return this;
|
|
2543
|
-
}
|
|
2544
|
-
message(message) {
|
|
2545
|
-
this.dialogState.message = message;
|
|
2546
|
-
return this;
|
|
2547
|
-
}
|
|
2548
|
-
size(size) {
|
|
2549
|
-
this.dialogState.size = size;
|
|
2550
|
-
return this;
|
|
2551
|
-
}
|
|
2552
|
-
context(context) {
|
|
2553
|
-
this.dialogState.context = context;
|
|
2554
|
-
return this;
|
|
2555
|
-
}
|
|
2556
|
-
actions(delegate) {
|
|
2557
|
-
const actionBuilder = new ActionBuilder(this);
|
|
2558
|
-
if (delegate) {
|
|
2559
|
-
delegate(actionBuilder);
|
|
2560
|
-
}
|
|
2561
|
-
return this;
|
|
2562
|
-
}
|
|
2563
|
-
async show() {
|
|
2564
|
-
const built = this.build();
|
|
2565
|
-
const hasSteps = this.dialogState.steps.length > 0;
|
|
2566
|
-
const config = {
|
|
2567
|
-
title: this.dialogState.title,
|
|
2568
|
-
message: this.dialogState.message,
|
|
2569
|
-
closeButton: this.dialogState.closeButton,
|
|
2570
|
-
definition: hasSteps
|
|
2571
|
-
? {
|
|
2572
|
-
steps: this.dialogState.steps.map((s) => ({
|
|
2573
|
-
id: s.id,
|
|
2574
|
-
title: s.title,
|
|
2575
|
-
description: s.description,
|
|
2576
|
-
icon: s.icon,
|
|
2577
|
-
groups: s.groups,
|
|
2578
|
-
})),
|
|
2579
|
-
}
|
|
2580
|
-
: {
|
|
2581
|
-
steps: [
|
|
2582
|
-
{
|
|
2583
|
-
id: 'form',
|
|
2584
|
-
groups: built.groups,
|
|
2585
|
-
},
|
|
2586
|
-
],
|
|
2587
|
-
},
|
|
2588
|
-
context: this.dialogState.context,
|
|
2589
|
-
size: this.dialogState.size,
|
|
2590
|
-
actions: this.dialogState.actions,
|
|
2591
|
-
layoutConfig: this.dialogState.layoutConfig,
|
|
2592
|
-
layoutLook: this.dialogState.look,
|
|
2593
|
-
mode: this.dialogState.mode,
|
|
2594
|
-
stepper: hasSteps
|
|
2595
|
-
? {
|
|
2596
|
-
guardNext: this.dialogState.guardNext,
|
|
2597
|
-
stepperDirection: this.dialogState.stepperDirection,
|
|
2598
|
-
}
|
|
2599
|
-
: undefined,
|
|
2600
|
-
};
|
|
2601
|
-
return await this.dialogService.showDialog(config);
|
|
2602
|
-
}
|
|
2603
|
-
}
|
|
2604
|
-
//#endregion
|
|
2605
|
-
//#region ---- Action Builder Implementation ----
|
|
2606
|
-
class ActionBuilder {
|
|
2607
|
-
constructor(dialogBuilder) {
|
|
2608
|
-
this.dialogBuilder = dialogBuilder;
|
|
2609
|
-
}
|
|
2610
|
-
cancel(text) {
|
|
2611
|
-
if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
|
|
2612
|
-
this.dialogBuilder['dialogState'].actions.footer.suffix = [];
|
|
2613
|
-
}
|
|
2614
|
-
this.dialogBuilder['dialogState'].actions.footer.suffix.push({
|
|
2615
|
-
title: text || '@general:actions.cancel.title',
|
|
2616
|
-
icon: 'fa-times',
|
|
2617
|
-
color: 'default',
|
|
2618
|
-
command: { name: 'cancel' },
|
|
2619
|
-
});
|
|
2620
|
-
return this;
|
|
2621
|
-
}
|
|
2622
|
-
submit(text) {
|
|
2623
|
-
if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
|
|
2624
|
-
this.dialogBuilder['dialogState'].actions.footer.suffix = [];
|
|
2625
|
-
}
|
|
2626
|
-
this.dialogBuilder['dialogState'].actions.footer.suffix.push({
|
|
2627
|
-
title: text || '@general:actions.submit.title',
|
|
2628
|
-
icon: 'fa-check',
|
|
2629
|
-
color: 'primary',
|
|
2630
|
-
command: { name: 'submit', options: { validate: true } },
|
|
2631
|
-
});
|
|
2632
|
-
return this;
|
|
2633
|
-
}
|
|
2634
|
-
custom(action) {
|
|
2635
|
-
if (!this.dialogBuilder['dialogState'].actions.footer.suffix) {
|
|
2636
|
-
this.dialogBuilder['dialogState'].actions.footer.suffix = [];
|
|
2637
|
-
}
|
|
2638
|
-
this.dialogBuilder['dialogState'].actions.footer.suffix.push(action);
|
|
2639
|
-
return this;
|
|
2640
|
-
}
|
|
2641
|
-
}
|
|
2642
|
-
// #region ---- Step Builder Implementation ----
|
|
2643
|
-
class StepBuilder {
|
|
2644
|
-
constructor(dialogBuilder, id) {
|
|
2645
|
-
this.dialogBuilder = dialogBuilder;
|
|
2646
|
-
this.stepState = {
|
|
2647
|
-
id: '',
|
|
2648
|
-
groups: [],
|
|
2649
|
-
};
|
|
2650
|
-
this.stepState.id = id;
|
|
2651
|
-
}
|
|
2652
|
-
title(title) {
|
|
2653
|
-
this.stepState.title = title;
|
|
2654
|
-
return this;
|
|
2655
|
-
}
|
|
2656
|
-
description(description) {
|
|
2657
|
-
this.stepState.description = description;
|
|
2658
|
-
return this;
|
|
2659
|
-
}
|
|
2660
|
-
icon(icon) {
|
|
2661
|
-
this.stepState.icon = icon;
|
|
2662
|
-
return this;
|
|
2663
|
-
}
|
|
2664
|
-
group(name, delegate) {
|
|
2665
|
-
const groupBuilder = new GroupBuilder(this.dialogBuilder, name);
|
|
2666
|
-
if (delegate) {
|
|
2667
|
-
delegate(groupBuilder);
|
|
2668
|
-
}
|
|
2669
|
-
this.stepState.groups.push(groupBuilder.build());
|
|
2670
|
-
return this;
|
|
2671
|
-
}
|
|
2672
|
-
build() {
|
|
2673
|
-
return this.stepState;
|
|
2674
|
-
}
|
|
2675
|
-
}
|
|
2676
|
-
|
|
2677
|
-
class AXPDynamicFormComponent {
|
|
2678
|
-
constructor() {
|
|
2679
|
-
this.evaluatorService = inject(AXPExpressionEvaluatorService);
|
|
2680
|
-
this.formBuilderService = inject(AXPDynamicFormBuilderService);
|
|
2681
|
-
/**
|
|
2682
|
-
* Tracks the latest scheduled evaluation to ensure last-write-wins for async evaluate
|
|
2683
|
-
*/
|
|
2684
|
-
this.evaluationRunId = 0;
|
|
2685
|
-
//#region ---- Inputs ----
|
|
2686
|
-
/**
|
|
2687
|
-
* Form definition containing groups and fields OR widget tree
|
|
2688
|
-
*/
|
|
2689
|
-
this.data = input.required(...(ngDevMode ? [{ debugName: "data" }] : []));
|
|
2690
|
-
/**
|
|
2691
|
-
* Form context/model data
|
|
2692
|
-
*/
|
|
2693
|
-
this.context = input.required(...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
2694
|
-
/**
|
|
2695
|
-
* Form appearance and density styling (normal, compact, spacious)
|
|
2696
|
-
*/
|
|
2697
|
-
this.layoutLook = input('fieldset', ...(ngDevMode ? [{ debugName: "layoutLook" }] : []));
|
|
2698
|
-
/**
|
|
2699
|
-
* Default form mode. Can be overridden by section/group and field.
|
|
2700
|
-
*/
|
|
2701
|
-
this.mode = input('edit', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
2702
|
-
this.widgetTree = signal(null, ...(ngDevMode ? [{ debugName: "widgetTree" }] : []));
|
|
2703
|
-
/**
|
|
2704
|
-
* Convert and evaluate data when inputs change
|
|
2705
|
-
*/
|
|
2706
|
-
this.conversionEffect = effect(() => {
|
|
2707
|
-
const inputData = this.data();
|
|
2708
|
-
const ctx = this.context();
|
|
2709
|
-
const look = this.layoutLook();
|
|
2710
|
-
const runId = ++this.evaluationRunId;
|
|
2711
|
-
(async () => {
|
|
2712
|
-
// First evaluate expressions if needed
|
|
2713
|
-
const evaluated = await this.expressionEvaluator(inputData, ctx);
|
|
2714
|
-
// Ignore stale results
|
|
2715
|
-
if (runId !== this.evaluationRunId) {
|
|
2716
|
-
return;
|
|
2717
|
-
}
|
|
2718
|
-
// Convert to widget tree (this will also apply the layout look)
|
|
2719
|
-
const tree = this.convertToWidgetTree(evaluated);
|
|
2720
|
-
// Update widget tree
|
|
2721
|
-
const prev = this.widgetTree();
|
|
2722
|
-
if (!isEqual(prev, tree)) {
|
|
2723
|
-
this.widgetTree.set(tree);
|
|
2724
|
-
}
|
|
2725
|
-
})();
|
|
2726
|
-
}, ...(ngDevMode ? [{ debugName: "conversionEffect" }] : []));
|
|
2727
|
-
//#endregion
|
|
2728
|
-
//#region ---- Outputs ----
|
|
2729
|
-
/**
|
|
2730
|
-
* Emitted when form context changes
|
|
2731
|
-
*/
|
|
2732
|
-
this.contextChange = output();
|
|
2733
|
-
/**
|
|
2734
|
-
* Emitted when context change is initiated
|
|
2735
|
-
*/
|
|
2736
|
-
this.contextInitiated = output();
|
|
2737
|
-
/**
|
|
2738
|
-
* Emitted when form becomes valid/invalid
|
|
2739
|
-
*/
|
|
2740
|
-
this.validityChange = output();
|
|
2741
|
-
//#endregion
|
|
2742
|
-
//#region ---- Properties ----
|
|
2743
|
-
this.form = viewChild(AXFormComponent, ...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
2744
|
-
this.container = viewChild(AXPWidgetContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
|
|
2745
|
-
/**
|
|
2746
|
-
* Internal context signal for reactivity
|
|
2747
|
-
*/
|
|
2748
|
-
this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
|
|
2749
|
-
//#endregion
|
|
2750
|
-
//#region ---- Computed Properties ----
|
|
2751
|
-
/**
|
|
2752
|
-
* Host classes based on layout look and mode
|
|
2753
|
-
*/
|
|
2754
|
-
this.hostClasses = computed(() => {
|
|
2755
|
-
const classes = ['axp-dynamic-form'];
|
|
2756
|
-
const look = this.layoutLook();
|
|
2757
|
-
const mode = this.mode();
|
|
2758
|
-
if (look && look !== 'fieldset') {
|
|
2759
|
-
classes.push(`--look-${look}`);
|
|
2760
|
-
}
|
|
2761
|
-
if (mode && mode !== 'edit') {
|
|
2762
|
-
classes.push(`--mode-${mode}`);
|
|
2763
|
-
}
|
|
2764
|
-
return classes.join(' ');
|
|
2765
|
-
}, ...(ngDevMode ? [{ debugName: "hostClasses" }] : []));
|
|
2766
|
-
//#endregion
|
|
2767
|
-
//#region ---- Effects ----
|
|
2768
|
-
/**
|
|
2769
|
-
* Effect to sync context changes
|
|
2770
|
-
*/
|
|
2771
|
-
this.#contextSyncEffect = effect(() => {
|
|
2772
|
-
const ctx = this.context() ?? {};
|
|
2773
|
-
const prev = this.internalContext() ?? {};
|
|
2774
|
-
if (!isEqual(prev, ctx)) {
|
|
2775
|
-
this.internalContext.set(ctx);
|
|
2776
|
-
}
|
|
2777
|
-
}, ...(ngDevMode ? [{ debugName: "#contextSyncEffect" }] : []));
|
|
2778
|
-
/**
|
|
2779
|
-
* Effect to handle widget tree status changes
|
|
2780
|
-
*/
|
|
2781
|
-
this.#widgetStatusEffect = effect(() => {
|
|
2782
|
-
const widgetTree = this.widgetTree();
|
|
2783
|
-
if (widgetTree) {
|
|
2784
|
-
this.container()?.builderService.setStatus(AXPPageStatus.Rendered);
|
|
2785
|
-
}
|
|
2786
|
-
}, ...(ngDevMode ? [{ debugName: "#widgetStatusEffect" }] : []));
|
|
2787
|
-
}
|
|
2788
|
-
//#endregion
|
|
2789
|
-
//#region ---- Widget Tree Conversion ----
|
|
2790
|
-
/**
|
|
2791
|
-
* Convert input data to widget tree
|
|
2792
|
-
*/
|
|
2793
|
-
convertToWidgetTree(data) {
|
|
2794
|
-
let widgetTree;
|
|
2795
|
-
// Check if it's already a widget tree
|
|
2796
|
-
if ('type' in data && 'children' in data) {
|
|
2797
|
-
widgetTree = data;
|
|
2798
|
-
}
|
|
2799
|
-
else {
|
|
2800
|
-
// Convert form definition to widget tree
|
|
2801
|
-
widgetTree = this.formBuilderService.serializeToWidgetTree(data);
|
|
2802
|
-
}
|
|
2803
|
-
// Apply layout look to all fieldset widgets in the tree
|
|
2804
|
-
this.applyLayoutLookToWidgetTree(widgetTree, this.layoutLook());
|
|
2805
|
-
return widgetTree;
|
|
2806
|
-
}
|
|
2807
|
-
async expressionEvaluator(expression, context) {
|
|
2808
|
-
const scope = {
|
|
2809
|
-
context: {
|
|
2810
|
-
eval: (path) => get(context, path),
|
|
2811
|
-
},
|
|
2812
|
-
};
|
|
2813
|
-
return await this.evaluatorService.evaluate(expression, scope);
|
|
2814
|
-
}
|
|
2815
|
-
/**
|
|
2816
|
-
* Apply layout look to all fieldset widgets in the widget tree
|
|
2817
|
-
*/
|
|
2818
|
-
applyLayoutLookToWidgetTree(node, look) {
|
|
2819
|
-
// Apply look to fieldset-layout widgets
|
|
2820
|
-
if (node.type === 'fieldset-layout') {
|
|
2821
|
-
if (!node.options) {
|
|
2822
|
-
node.options = {};
|
|
2823
|
-
}
|
|
2824
|
-
node.options['look'] = look;
|
|
2825
|
-
}
|
|
2826
|
-
// Recursively apply to children
|
|
2827
|
-
if (node.children) {
|
|
2828
|
-
node.children.forEach(child => this.applyLayoutLookToWidgetTree(child, look));
|
|
2829
|
-
}
|
|
2830
|
-
}
|
|
2831
|
-
//#endregion
|
|
2832
|
-
//#region ---- Lifecycle Methods ----
|
|
2833
|
-
ngOnInit() {
|
|
2834
|
-
// Initialize internal context with input context
|
|
2835
|
-
this.internalContext.set(this.context() ?? {});
|
|
2836
|
-
}
|
|
2837
|
-
//#endregion
|
|
2838
|
-
//#region ---- Effects ----
|
|
2839
|
-
/**
|
|
2840
|
-
* Effect to sync context changes
|
|
2841
|
-
*/
|
|
2842
|
-
#contextSyncEffect;
|
|
2843
|
-
/**
|
|
2844
|
-
* Effect to handle widget tree status changes
|
|
2845
|
-
*/
|
|
2846
|
-
#widgetStatusEffect;
|
|
2847
|
-
//#endregion
|
|
2848
|
-
//#region ---- Event Handlers ----
|
|
2849
|
-
/**
|
|
2850
|
-
* Handle context change events from widget container
|
|
2851
|
-
*/
|
|
2852
|
-
handleContextChanged(event) {
|
|
2853
|
-
if (event.state === 'initiated') {
|
|
2854
|
-
this.contextInitiated.emit(event.data);
|
|
2855
|
-
}
|
|
2856
|
-
else {
|
|
2857
|
-
this.internalContext.set(event.data ?? {});
|
|
2858
|
-
this.contextChange.emit(this.internalContext());
|
|
2859
|
-
}
|
|
2860
|
-
}
|
|
2861
|
-
//#endregion
|
|
2862
|
-
//#region ---- Public Methods ----
|
|
2863
|
-
/**
|
|
2864
|
-
* Get the form component instance
|
|
2865
|
-
*/
|
|
2866
|
-
getForm() {
|
|
2867
|
-
return this.form();
|
|
2868
|
-
}
|
|
2869
|
-
/**
|
|
2870
|
-
* Get the widget container component instance
|
|
2871
|
-
*/
|
|
2872
|
-
getContainer() {
|
|
2873
|
-
return this.container();
|
|
2874
|
-
}
|
|
2875
|
-
/**
|
|
2876
|
-
* Get current form context
|
|
2877
|
-
*/
|
|
2878
|
-
getContext() {
|
|
2879
|
-
return this.internalContext();
|
|
2880
|
-
}
|
|
2881
|
-
/**
|
|
2882
|
-
* Update form context programmatically
|
|
2883
|
-
*/
|
|
2884
|
-
updateContext(context) {
|
|
2885
|
-
this.internalContext.set(context);
|
|
2886
|
-
}
|
|
2887
|
-
/**
|
|
2888
|
-
* Get the current widget tree
|
|
2889
|
-
*/
|
|
2890
|
-
getWidgetTree() {
|
|
2891
|
-
return this.widgetTree();
|
|
2892
|
-
}
|
|
2893
|
-
/**
|
|
2894
|
-
* Validate the form
|
|
2895
|
-
*/
|
|
2896
|
-
async validate() {
|
|
2897
|
-
const form = this.form();
|
|
2898
|
-
if (form) {
|
|
2899
|
-
const isValid = await form.validate();
|
|
2900
|
-
this.validityChange.emit(isValid.result);
|
|
2901
|
-
return isValid.result;
|
|
2902
|
-
}
|
|
2903
|
-
return false;
|
|
2904
|
-
}
|
|
2905
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2906
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPDynamicFormComponent, isStandalone: true, selector: "axp-dynamic-form", inputs: { data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, layoutLook: { classPropertyName: "layoutLook", publicName: "layoutLook", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextChange: "contextChange", contextInitiated: "contextInitiated", validityChange: "validityChange" }, host: { properties: { "class": "hostClasses()" }, classAttribute: "axp-dynamic-form" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }, { propertyName: "container", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n <axp-widgets-container [context]=\"internalContext()\" (onContextChanged)=\"handleContextChanged($event)\">\n @if (widgetTree()) {\n <ng-container axp-widget-renderer [node]=\"widgetTree()!\" [mode]=\"mode()\"></ng-container>\n }\n </axp-widgets-container>\n</ax-form>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type:
|
|
2907
|
-
// ACoreX
|
|
2908
|
-
AXFormModule }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type:
|
|
2909
|
-
// Platform
|
|
2910
|
-
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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2911
|
-
}
|
|
2912
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicFormComponent, decorators: [{
|
|
2913
|
-
type: Component,
|
|
2914
|
-
args: [{ standalone: true, selector: 'axp-dynamic-form', imports: [
|
|
2915
|
-
CommonModule,
|
|
2916
|
-
// ACoreX
|
|
2917
|
-
AXFormModule,
|
|
2918
|
-
// Platform
|
|
2919
|
-
AXPWidgetCoreModule,
|
|
2920
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
2921
|
-
class: 'axp-dynamic-form',
|
|
2922
|
-
'[class]': 'hostClasses()',
|
|
2923
|
-
}, template: "<ax-form>\n <axp-widgets-container [context]=\"internalContext()\" (onContextChanged)=\"handleContextChanged($event)\">\n @if (widgetTree()) {\n <ng-container axp-widget-renderer [node]=\"widgetTree()!\" [mode]=\"mode()\"></ng-container>\n }\n </axp-widgets-container>\n</ax-form>\n" }]
|
|
2924
|
-
}] });
|
|
2925
|
-
|
|
2926
|
-
//#endregion
|
|
2927
|
-
class AXPDynamicFormStepperComponent {
|
|
2928
|
-
constructor() {
|
|
2929
|
-
//#region ---- Inputs ----
|
|
2930
|
-
/**
|
|
2931
|
-
* Stepper definition providing steps metadata and behavior configuration
|
|
2932
|
-
*/
|
|
2933
|
-
this.definition = input.required(...(ngDevMode ? [{ debugName: "definition" }] : []));
|
|
2934
|
-
/**
|
|
2935
|
-
* Shared root context for all steps
|
|
2936
|
-
*/
|
|
2937
|
-
this.context = input.required(...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
2938
|
-
/**
|
|
2939
|
-
* Optional pass-through layout props for inner forms
|
|
2940
|
-
*/
|
|
2941
|
-
this.layoutLook = input('container', ...(ngDevMode ? [{ debugName: "layoutLook" }] : []));
|
|
2942
|
-
this.stepperDirection = input('horizontal', ...(ngDevMode ? [{ debugName: "stepperDirection" }] : []));
|
|
2943
|
-
this.layoutConfig = input(...(ngDevMode ? [undefined, { debugName: "layoutConfig" }] : []));
|
|
2944
|
-
/**
|
|
2945
|
-
* Optional guard that controls advancing to the next step (async only)
|
|
2946
|
-
*/
|
|
2947
|
-
this.guardNext = input(...(ngDevMode ? [undefined, { debugName: "guardNext" }] : []));
|
|
2948
|
-
//#endregion
|
|
2949
|
-
//#region ---- Outputs ----
|
|
2950
|
-
/**
|
|
2951
|
-
* Emits when the shared root context changes
|
|
2952
|
-
*/
|
|
2953
|
-
this.contextChange = output();
|
|
2954
|
-
/**
|
|
2955
|
-
* Emits when the active step changes
|
|
2956
|
-
*/
|
|
2957
|
-
this.stepChange = output();
|
|
2958
|
-
/**
|
|
2959
|
-
* Emits after successful finish
|
|
2960
|
-
*/
|
|
2961
|
-
this.finished = output();
|
|
2962
|
-
/**
|
|
2963
|
-
* Emits when cancelled by API
|
|
2964
|
-
*/
|
|
2965
|
-
this.cancel = output();
|
|
2966
|
-
/**
|
|
2967
|
-
* Emits when navigation is blocked by validation or policy
|
|
2968
|
-
*/
|
|
2969
|
-
this.navigationBlocked = output();
|
|
2970
|
-
//#endregion
|
|
2971
|
-
//#region ---- State ----
|
|
2972
|
-
/**
|
|
2973
|
-
* Internal reactive copy of the shared context
|
|
2974
|
-
*/
|
|
2975
|
-
this.internalContext = signal({}, ...(ngDevMode ? [{ debugName: "internalContext" }] : []));
|
|
2976
|
-
/**
|
|
2977
|
-
* Active step index
|
|
2978
|
-
*/
|
|
2979
|
-
this.currentStepIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentStepIndex" }] : []));
|
|
2980
|
-
/**
|
|
2981
|
-
* Navigation lock while async guards are pending
|
|
2982
|
-
*/
|
|
2983
|
-
this.navigationLocked = signal(false, ...(ngDevMode ? [{ debugName: "navigationLocked" }] : []));
|
|
2984
|
-
/**
|
|
2985
|
-
* Reference to underlying step wizard to sync visual navigation
|
|
2986
|
-
*/
|
|
2987
|
-
this.wizard = viewChild(AXStepWizardComponent, ...(ngDevMode ? [{ debugName: "wizard" }] : []));
|
|
2988
|
-
/**
|
|
2989
|
-
* References to rendered dynamic forms (usually one active)
|
|
2990
|
-
*/
|
|
2991
|
-
this.forms = viewChildren(AXPDynamicFormComponent, ...(ngDevMode ? [{ debugName: "forms" }] : []));
|
|
2992
|
-
//#endregion
|
|
2993
|
-
//#region ---- Computed Properties ----
|
|
2994
|
-
this.steps = computed(() => this.definition().steps ?? [], ...(ngDevMode ? [{ debugName: "steps" }] : []));
|
|
2995
|
-
this.stepCount = computed(() => this.steps().length, ...(ngDevMode ? [{ debugName: "stepCount" }] : []));
|
|
2996
|
-
this.currentStep = computed(() => this.steps()[this.currentStepIndex()] ?? undefined, ...(ngDevMode ? [{ debugName: "currentStep" }] : []));
|
|
2997
|
-
this.isFirstComputed = computed(() => this.currentStepIndex() === 0, ...(ngDevMode ? [{ debugName: "isFirstComputed" }] : []));
|
|
2998
|
-
this.isLastComputed = computed(() => this.currentStepIndex() === Math.max(0, this.stepCount() - 1), ...(ngDevMode ? [{ debugName: "isLastComputed" }] : []));
|
|
2999
|
-
/**
|
|
3000
|
-
* Non-undefined layout config for inner dynamic forms
|
|
3001
|
-
*/
|
|
3002
|
-
this.effectiveLayoutConfig = computed(() => this.layoutConfig() ?? {
|
|
3003
|
-
positions: {
|
|
3004
|
-
sm: { colSpan: 12 },
|
|
3005
|
-
md: { colSpan: 8 },
|
|
3006
|
-
lg: { colSpan: 6 },
|
|
3007
|
-
xl: { colSpan: 5 },
|
|
3008
|
-
xxl: { colSpan: 4 },
|
|
3009
|
-
},
|
|
3010
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveLayoutConfig" }] : []));
|
|
3011
|
-
//#endregion
|
|
3012
|
-
//#region ---- Effects ----
|
|
3013
|
-
/**
|
|
3014
|
-
* Keep internal context in sync with input context
|
|
3015
|
-
*/
|
|
3016
|
-
this.#contextSync = effect(() => {
|
|
3017
|
-
const ctx = this.context();
|
|
3018
|
-
this.internalContext.set(ctx ?? {});
|
|
3019
|
-
}, ...(ngDevMode ? [{ debugName: "#contextSync" }] : []));
|
|
3020
|
-
}
|
|
3021
|
-
//#endregion
|
|
3022
|
-
//#region ---- Effects ----
|
|
3023
|
-
/**
|
|
3024
|
-
* Keep internal context in sync with input context
|
|
3025
|
-
*/
|
|
3026
|
-
#contextSync;
|
|
3027
|
-
//#endregion
|
|
3028
|
-
//#region ---- Public API ----
|
|
3029
|
-
/**
|
|
3030
|
-
* Returns the current step pointer
|
|
3031
|
-
*/
|
|
3032
|
-
getCurrentStep() {
|
|
3033
|
-
const step = this.currentStep();
|
|
3034
|
-
return { index: this.currentStepIndex(), id: step?.id ?? '' };
|
|
3035
|
-
}
|
|
3036
|
-
/**
|
|
3037
|
-
* Public helpers for templates/consumers
|
|
3038
|
-
*/
|
|
3039
|
-
isFirst() {
|
|
3040
|
-
return this.currentStepIndex() === 0;
|
|
3041
|
-
}
|
|
3042
|
-
isLast() {
|
|
3043
|
-
return this.currentStepIndex() === Math.max(0, this.stepCount() - 1);
|
|
3044
|
-
}
|
|
3045
|
-
/**
|
|
3046
|
-
* Returns the root context
|
|
3047
|
-
*/
|
|
3048
|
-
getContext() {
|
|
3049
|
-
return this.internalContext();
|
|
3050
|
-
}
|
|
3051
|
-
/**
|
|
3052
|
-
* Replaces the root context programmatically
|
|
3053
|
-
*/
|
|
3054
|
-
setContext(ctx) {
|
|
3055
|
-
this.internalContext.set(ctx ?? {});
|
|
3056
|
-
this.contextChange.emit(this.internalContext());
|
|
3057
|
-
}
|
|
3058
|
-
/**
|
|
3059
|
-
* Validates the current step.
|
|
3060
|
-
*/
|
|
3061
|
-
async validateCurrentStep() {
|
|
3062
|
-
const instances = this.forms();
|
|
3063
|
-
if (!instances || instances.length === 0) {
|
|
3064
|
-
return true;
|
|
3065
|
-
}
|
|
3066
|
-
const index = this.currentStepIndex();
|
|
3067
|
-
const form = instances[index] ?? instances[0];
|
|
3068
|
-
if (form && typeof form.validate === 'function') {
|
|
3069
|
-
return await form.validate();
|
|
3070
|
-
}
|
|
3071
|
-
return true;
|
|
3072
|
-
}
|
|
3073
|
-
/**
|
|
3074
|
-
* Attempts to advance to the next step applying validation and guard
|
|
3075
|
-
*/
|
|
3076
|
-
async next() {
|
|
3077
|
-
if (this.navigationLocked()) {
|
|
3078
|
-
return;
|
|
3079
|
-
}
|
|
3080
|
-
const valid = await this.validateCurrentStep();
|
|
3081
|
-
if (!valid) {
|
|
3082
|
-
const step = this.currentStep();
|
|
3083
|
-
if (step) {
|
|
3084
|
-
this.navigationBlocked.emit({ reason: 'invalid', stepId: step.id });
|
|
3085
|
-
}
|
|
3086
|
-
return;
|
|
3087
|
-
}
|
|
3088
|
-
const index = this.currentStepIndex();
|
|
3089
|
-
const step = this.steps()[index];
|
|
3090
|
-
if (!step) {
|
|
3091
|
-
return;
|
|
3092
|
-
}
|
|
3093
|
-
const event = { index, id: step.id, fullContext: this.internalContext() };
|
|
3094
|
-
const guard = this.guardNext();
|
|
3095
|
-
if (guard) {
|
|
3096
|
-
try {
|
|
3097
|
-
this.navigationLocked.set(true);
|
|
3098
|
-
const allowed = await guard(event);
|
|
3099
|
-
if (!allowed) {
|
|
3100
|
-
return;
|
|
3101
|
-
}
|
|
3102
|
-
}
|
|
3103
|
-
finally {
|
|
3104
|
-
this.navigationLocked.set(false);
|
|
3105
|
-
}
|
|
3106
|
-
}
|
|
3107
|
-
// Context is already synced through onStepContextChange
|
|
3108
|
-
this.contextChange.emit(this.internalContext());
|
|
3109
|
-
// Advance
|
|
3110
|
-
if (index < this.stepCount() - 1) {
|
|
3111
|
-
this.#activateStep(index + 1);
|
|
3112
|
-
// Sync visual wizard
|
|
3113
|
-
this.wizard()?.next();
|
|
3114
|
-
}
|
|
3115
|
-
}
|
|
3116
|
-
/**
|
|
3117
|
-
* Goes back to the previous step if possible
|
|
3118
|
-
*/
|
|
3119
|
-
async previous() {
|
|
3120
|
-
if (this.navigationLocked()) {
|
|
3121
|
-
return;
|
|
3122
|
-
}
|
|
3123
|
-
const index = this.currentStepIndex();
|
|
3124
|
-
if (index <= 0) {
|
|
3125
|
-
return;
|
|
3126
|
-
}
|
|
3127
|
-
const current = this.steps()[index];
|
|
3128
|
-
if (current && current.canGoBack === false) {
|
|
3129
|
-
this.navigationBlocked.emit({ reason: 'cannot-go-back', stepId: current.id, targetIndex: index - 1 });
|
|
3130
|
-
return;
|
|
3131
|
-
}
|
|
3132
|
-
this.#activateStep(index - 1);
|
|
3133
|
-
// Sync visual wizard
|
|
3134
|
-
this.wizard()?.previous();
|
|
3135
|
-
}
|
|
3136
|
-
/**
|
|
3137
|
-
* Navigates to a specific step by id or index
|
|
3138
|
-
*/
|
|
3139
|
-
async goTo(stepIdOrIndex) {
|
|
3140
|
-
if (typeof stepIdOrIndex === 'number') {
|
|
3141
|
-
await this.#attemptNavigateToIndex(stepIdOrIndex);
|
|
3142
|
-
return;
|
|
3143
|
-
}
|
|
3144
|
-
const idx = this.steps().findIndex((s) => s.id === stepIdOrIndex);
|
|
3145
|
-
if (idx >= 0) {
|
|
3146
|
-
await this.#attemptNavigateToIndex(idx);
|
|
3147
|
-
}
|
|
3148
|
-
}
|
|
3149
|
-
/**
|
|
3150
|
-
* Validates all steps and emits finished when successful
|
|
3151
|
-
*/
|
|
3152
|
-
async finish() {
|
|
3153
|
-
// MVP: assume all steps valid
|
|
3154
|
-
this.finished.emit(this.internalContext());
|
|
3155
|
-
}
|
|
3156
|
-
/**
|
|
3157
|
-
* Emits cancel event without state changes
|
|
3158
|
-
*/
|
|
3159
|
-
cancelFlow() {
|
|
3160
|
-
this.cancel.emit();
|
|
3161
|
-
}
|
|
3162
|
-
//#endregion
|
|
3163
|
-
//#region ---- Utilities ----
|
|
3164
|
-
#activateStep(index) {
|
|
3165
|
-
this.currentStepIndex.set(index);
|
|
3166
|
-
const step = this.steps()[index];
|
|
3167
|
-
if (step?.dataPath) {
|
|
3168
|
-
// Ensure the path exists for binding
|
|
3169
|
-
this.#ensurePath(step.dataPath);
|
|
3170
|
-
}
|
|
3171
|
-
if (step) {
|
|
3172
|
-
this.stepChange.emit({ index, id: step.id });
|
|
3173
|
-
}
|
|
3174
|
-
}
|
|
3175
|
-
/**
|
|
3176
|
-
* Attempts navigation to a specific index while enforcing linear/skip/back rules and validation.
|
|
3177
|
-
*/
|
|
3178
|
-
async #attemptNavigateToIndex(targetIndex) {
|
|
3179
|
-
if (targetIndex < 0 || targetIndex >= this.stepCount()) {
|
|
3180
|
-
return;
|
|
3181
|
-
}
|
|
3182
|
-
const currentIndex = this.currentStepIndex();
|
|
3183
|
-
if (targetIndex === currentIndex) {
|
|
3184
|
-
return;
|
|
3185
|
-
}
|
|
3186
|
-
const steps = this.steps();
|
|
3187
|
-
const current = steps[currentIndex];
|
|
3188
|
-
const target = steps[targetIndex];
|
|
3189
|
-
if (!current || !target) {
|
|
3190
|
-
return;
|
|
3191
|
-
}
|
|
3192
|
-
// Moving backward: ensure all steps between have canGoBack !== false
|
|
3193
|
-
if (targetIndex < currentIndex) {
|
|
3194
|
-
for (let i = currentIndex; i > targetIndex; i--) {
|
|
3195
|
-
const step = steps[i];
|
|
3196
|
-
if (step && step.canGoBack === false) {
|
|
3197
|
-
this.navigationBlocked.emit({ reason: 'cannot-go-back', stepId: step.id, targetIndex });
|
|
3198
|
-
return;
|
|
3199
|
-
}
|
|
3200
|
-
}
|
|
3201
|
-
this.#activateStep(targetIndex);
|
|
3202
|
-
const w = this.wizard();
|
|
3203
|
-
if (w && typeof w.goStep === 'function') {
|
|
3204
|
-
w.goStep(targetIndex);
|
|
3205
|
-
}
|
|
3206
|
-
else {
|
|
3207
|
-
this.wizard()?.previous();
|
|
3208
|
-
}
|
|
3209
|
-
return;
|
|
3210
|
-
}
|
|
3211
|
-
// Moving forward: enforce linear and canSkip
|
|
3212
|
-
const isLinear = !!this.definition().linear;
|
|
3213
|
-
if (isLinear && targetIndex > currentIndex + 1) {
|
|
3214
|
-
this.navigationBlocked.emit({ reason: 'linear', stepId: current.id, targetIndex });
|
|
3215
|
-
return;
|
|
3216
|
-
}
|
|
3217
|
-
// Check skipped steps for canSkip
|
|
3218
|
-
for (let i = currentIndex + 1; i < targetIndex; i++) {
|
|
3219
|
-
const step = steps[i];
|
|
3220
|
-
if (step && step.canSkip !== true) {
|
|
3221
|
-
this.navigationBlocked.emit({ reason: 'cannot-skip', stepId: step.id, targetIndex });
|
|
3222
|
-
return;
|
|
3223
|
-
}
|
|
3224
|
-
}
|
|
3225
|
-
// Forward navigation should validate current step and pass guard
|
|
3226
|
-
const valid = await this.validateCurrentStep();
|
|
3227
|
-
if (!valid) {
|
|
3228
|
-
this.navigationBlocked.emit({ reason: 'invalid', stepId: current.id, targetIndex });
|
|
3229
|
-
return;
|
|
3230
|
-
}
|
|
3231
|
-
const guard = this.guardNext();
|
|
3232
|
-
if (guard) {
|
|
3233
|
-
try {
|
|
3234
|
-
this.navigationLocked.set(true);
|
|
3235
|
-
const allowed = await guard({ index: currentIndex, id: current.id, fullContext: this.internalContext() });
|
|
3236
|
-
if (!allowed) {
|
|
3237
|
-
return;
|
|
3238
|
-
}
|
|
3239
|
-
}
|
|
3240
|
-
finally {
|
|
3241
|
-
this.navigationLocked.set(false);
|
|
3242
|
-
}
|
|
3243
|
-
}
|
|
3244
|
-
this.#activateStep(targetIndex);
|
|
3245
|
-
const w = this.wizard();
|
|
3246
|
-
if (w && typeof w.goStep === 'function') {
|
|
3247
|
-
w.goStep(targetIndex);
|
|
3248
|
-
}
|
|
3249
|
-
else {
|
|
3250
|
-
this.wizard()?.next();
|
|
3251
|
-
}
|
|
3252
|
-
}
|
|
3253
|
-
#readStepSlice(path) {
|
|
3254
|
-
const root = this.internalContext();
|
|
3255
|
-
if (!path) {
|
|
3256
|
-
return { slice: root, exists: true };
|
|
3257
|
-
}
|
|
3258
|
-
const parts = path.split('.').filter(Boolean);
|
|
3259
|
-
let node = root;
|
|
3260
|
-
for (const key of parts) {
|
|
3261
|
-
if (node == null || typeof node !== 'object') {
|
|
3262
|
-
return { slice: undefined, exists: false };
|
|
3263
|
-
}
|
|
3264
|
-
node = node[key];
|
|
3265
|
-
}
|
|
3266
|
-
return { slice: node, exists: node !== undefined };
|
|
3267
|
-
}
|
|
3268
|
-
#writeStepSlice(path, value) {
|
|
3269
|
-
if (!path) {
|
|
3270
|
-
// Replace full root with value only if value is an object
|
|
3271
|
-
if (value && typeof value === 'object') {
|
|
3272
|
-
this.internalContext.set(value);
|
|
3273
|
-
}
|
|
3274
|
-
return;
|
|
3275
|
-
}
|
|
3276
|
-
const root = { ...this.internalContext() };
|
|
3277
|
-
const parts = path.split('.').filter(Boolean);
|
|
3278
|
-
let node = root;
|
|
3279
|
-
for (let i = 0; i < parts.length; i++) {
|
|
3280
|
-
const key = parts[i];
|
|
3281
|
-
if (i === parts.length - 1) {
|
|
3282
|
-
node[key] = value;
|
|
3283
|
-
}
|
|
3284
|
-
else {
|
|
3285
|
-
node[key] = node[key] && typeof node[key] === 'object' ? { ...node[key] } : {};
|
|
3286
|
-
node = node[key];
|
|
3287
|
-
}
|
|
3288
|
-
}
|
|
3289
|
-
this.internalContext.set(root);
|
|
3290
|
-
}
|
|
3291
|
-
#ensurePath(path) {
|
|
3292
|
-
const root = { ...this.internalContext() };
|
|
3293
|
-
const parts = path.split('.').filter(Boolean);
|
|
3294
|
-
let node = root;
|
|
3295
|
-
for (const key of parts) {
|
|
3296
|
-
if (!node[key] || typeof node[key] !== 'object') {
|
|
3297
|
-
node[key] = {};
|
|
3298
|
-
}
|
|
3299
|
-
node = node[key];
|
|
3300
|
-
}
|
|
3301
|
-
this.internalContext.set(root);
|
|
3302
|
-
}
|
|
3303
|
-
/**
|
|
3304
|
-
* Handle per-step context changes and keep internal root context in sync.
|
|
3305
|
-
*/
|
|
3306
|
-
onStepContextChange(stepId, stepContext) {
|
|
3307
|
-
const step = this.steps().find((s) => s.id === stepId);
|
|
3308
|
-
if (!step) {
|
|
3309
|
-
return;
|
|
3310
|
-
}
|
|
3311
|
-
this.#writeStepSlice(step.dataPath, stepContext);
|
|
3312
|
-
this.contextChange.emit(this.internalContext());
|
|
3313
|
-
}
|
|
3314
|
-
/**
|
|
3315
|
-
* Exposes reading a step slice to the template
|
|
3316
|
-
*/
|
|
3317
|
-
readStepSlice(path) {
|
|
3318
|
-
return this.#readStepSlice(path);
|
|
3319
|
-
}
|
|
3320
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicFormStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3321
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPDynamicFormStepperComponent, isStandalone: true, selector: "axp-dynamic-form-stepper", inputs: { definition: { classPropertyName: "definition", publicName: "definition", isSignal: true, isRequired: true, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: true, transformFunction: null }, layoutLook: { classPropertyName: "layoutLook", publicName: "layoutLook", isSignal: true, isRequired: false, transformFunction: null }, stepperDirection: { classPropertyName: "stepperDirection", publicName: "stepperDirection", isSignal: true, isRequired: false, transformFunction: null }, layoutConfig: { classPropertyName: "layoutConfig", publicName: "layoutConfig", isSignal: true, isRequired: false, transformFunction: null }, guardNext: { classPropertyName: "guardNext", publicName: "guardNext", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { contextChange: "contextChange", stepChange: "stepChange", finished: "finished", cancel: "cancel", navigationBlocked: "navigationBlocked" }, host: { properties: { "class.--vertical": "stepperDirection() === 'vertical'" }, classAttribute: "axp-dynamic-form-stepper" }, viewQueries: [{ propertyName: "wizard", first: true, predicate: AXStepWizardComponent, descendants: true, isSignal: true }, { propertyName: "forms", predicate: AXPDynamicFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-step-wizard\n class=\"ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n #sticky=\"axpSticky\"\n [axpSticky]=\"'ax-bg-lightest ax-shadow-md ax-pt-4'\"\n [stickyParent]=\"'.ax-popup-body-container'\"\n #wizard\n [content]=\"wizardContent\"\n [stickyOffset]=\"100\"\n [look]=\"'text-line'\"\n [orientation]=\"stepperDirection()\"\n>\n @for (step of steps(); track step.id) {\n <ax-step-wizard-item [label]=\"(step.title || '' | translate | async)!\" [id]=\"step.id\">\n @if (step.icon) {\n <ax-icon [class]=\"step.icon\"></ax-icon>\n }\n <ax-content>\n <axp-dynamic-form\n [data]=\"{ groups: step.groups }\"\n [context]=\"readStepSlice(step.dataPath).slice\"\n [layoutLook]=\"layoutLook()\"\n (contextChange)=\"onStepContextChange(step.id, $event)\"\n ></axp-dynamic-form>\n </ax-content>\n </ax-step-wizard-item>\n }\n</ax-step-wizard>\n\n<ng-template [axStepWizardContent] #wizardContent=\"axStepWizardContent\"></ng-template>\n", styles: [".axp-dynamic-form-stepper.--vertical{display:flex;gap:1rem}.axp-dynamic-form-stepper.--vertical ax-step-wizard{width:unset}.axp-dynamic-form-stepper.--vertical ax-content{flex:1 1 auto}.axp-dynamic-form-stepper axp-layout-section{margin-bottom:.75rem}.axp-dynamic-form-stepper axp-layout-section axp-layout-header{margin-bottom:.5rem;gap:0px;padding:.5rem;padding:0}.axp-dynamic-form-stepper axp-layout-section axp-layout-header axp-layout-title{padding-bottom:1rem;font-size:1.25rem;line-height:1.75rem;font-weight:700}.axp-dynamic-form-stepper axp-layout-section axp-layout-header axp-layout-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-dynamic-form-stepper axp-layout-section axp-layout-section axp-layout-content{padding:0}.axp-dynamic-form-stepper axp-layout-section axp-layout-section axp-layout-content .__field-container{padding:0!important}.axp-dynamic-form-stepper ax-step-wizard{margin-bottom:2rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXStepWizardModule }, { kind: "component", type: i1$3.AXStepWizardComponent, selector: "ax-step-wizard", inputs: ["connector", "scrollToStep", "size", "look", "changeStep", "orientation", "content"], outputs: ["stepChanged"] }, { kind: "component", type: i1$3.AXStepWizardItemComponent, selector: "ax-step-wizard-item", inputs: ["disabled", "color", "step", "label", "description", "customTemplate", "active", "passed", "look", "state", "id"], outputs: ["activeChange", "passedChange", "lookChange", "stateChange"] }, { kind: "directive", type: i1$3.AXStepWizardContentDirective, selector: "[axStepWizardContent]", inputs: ["axStepWizardContent"], exportAs: ["axStepWizardContent"] }, { kind: "component", type: AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["data", "context", "layoutLook", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPStickyDirective, selector: "[axpSticky]", inputs: ["axpSticky", "stickyOffset", "stickyParent", "stickyTarget"], outputs: ["isStickyChange"], exportAs: ["axpSticky"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3322
|
-
}
|
|
3323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicFormStepperComponent, decorators: [{
|
|
3324
|
-
type: Component,
|
|
3325
|
-
args: [{ standalone: true, selector: 'axp-dynamic-form-stepper', imports: [
|
|
3326
|
-
CommonModule,
|
|
3327
|
-
AXStepWizardModule,
|
|
3328
|
-
AXPDynamicFormComponent,
|
|
3329
|
-
AXDecoratorModule,
|
|
3330
|
-
AXTranslationModule,
|
|
3331
|
-
AXPStickyDirective,
|
|
3332
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
3333
|
-
class: 'axp-dynamic-form-stepper',
|
|
3334
|
-
'[class.--vertical]': "stepperDirection() === 'vertical'",
|
|
3335
|
-
}, template: "<ax-step-wizard\n class=\"ax-sticky ax-top-0 ax-z-10 ax-transition-all\"\n #sticky=\"axpSticky\"\n [axpSticky]=\"'ax-bg-lightest ax-shadow-md ax-pt-4'\"\n [stickyParent]=\"'.ax-popup-body-container'\"\n #wizard\n [content]=\"wizardContent\"\n [stickyOffset]=\"100\"\n [look]=\"'text-line'\"\n [orientation]=\"stepperDirection()\"\n>\n @for (step of steps(); track step.id) {\n <ax-step-wizard-item [label]=\"(step.title || '' | translate | async)!\" [id]=\"step.id\">\n @if (step.icon) {\n <ax-icon [class]=\"step.icon\"></ax-icon>\n }\n <ax-content>\n <axp-dynamic-form\n [data]=\"{ groups: step.groups }\"\n [context]=\"readStepSlice(step.dataPath).slice\"\n [layoutLook]=\"layoutLook()\"\n (contextChange)=\"onStepContextChange(step.id, $event)\"\n ></axp-dynamic-form>\n </ax-content>\n </ax-step-wizard-item>\n }\n</ax-step-wizard>\n\n<ng-template [axStepWizardContent] #wizardContent=\"axStepWizardContent\"></ng-template>\n", styles: [".axp-dynamic-form-stepper.--vertical{display:flex;gap:1rem}.axp-dynamic-form-stepper.--vertical ax-step-wizard{width:unset}.axp-dynamic-form-stepper.--vertical ax-content{flex:1 1 auto}.axp-dynamic-form-stepper axp-layout-section{margin-bottom:.75rem}.axp-dynamic-form-stepper axp-layout-section axp-layout-header{margin-bottom:.5rem;gap:0px;padding:.5rem;padding:0}.axp-dynamic-form-stepper axp-layout-section axp-layout-header axp-layout-title{padding-bottom:1rem;font-size:1.25rem;line-height:1.75rem;font-weight:700}.axp-dynamic-form-stepper axp-layout-section axp-layout-header axp-layout-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-dynamic-form-stepper axp-layout-section axp-layout-section axp-layout-content{padding:0}.axp-dynamic-form-stepper axp-layout-section axp-layout-section axp-layout-content .__field-container{padding:0!important}.axp-dynamic-form-stepper ax-step-wizard{margin-bottom:2rem}\n"] }]
|
|
3336
|
-
}] });
|
|
3337
|
-
|
|
3338
|
-
class AXPDynamicDialogComponent extends AXBasePageComponent {
|
|
3339
|
-
constructor() {
|
|
3340
|
-
super(...arguments);
|
|
3341
|
-
this.dynamicForm = viewChild(AXPDynamicFormComponent, ...(ngDevMode ? [{ debugName: "dynamicForm" }] : []));
|
|
3342
|
-
this.stepper = viewChild(AXPDynamicFormStepperComponent, ...(ngDevMode ? [{ debugName: "stepper" }] : []));
|
|
3343
|
-
this.isSubmitting = signal(false, ...(ngDevMode ? [{ debugName: "isSubmitting" }] : []));
|
|
3344
|
-
this.previousContext = signal({}, ...(ngDevMode ? [{ debugName: "previousContext" }] : []));
|
|
3345
|
-
this.formData = signal({}, ...(ngDevMode ? [{ debugName: "formData" }] : []));
|
|
3346
|
-
// This will be set by the popup service automatically
|
|
3347
|
-
this.dialogResult = null;
|
|
3348
|
-
this.isSubmittingFromDialog = false;
|
|
3349
|
-
this.callBack = () => { };
|
|
3350
|
-
//#region ---- Computed Properties ----
|
|
3351
|
-
/**
|
|
3352
|
-
* Form context for widget container
|
|
3353
|
-
*/
|
|
3354
|
-
this.formContext = computed(() => this.formData(), ...(ngDevMode ? [{ debugName: "formContext" }] : []));
|
|
3355
|
-
/**
|
|
3356
|
-
* Combined loading state from both signal and dialog
|
|
3357
|
-
*/
|
|
3358
|
-
this.isFormLoading = computed(() => this.isSubmitting() || this.isSubmittingFromDialog, ...(ngDevMode ? [{ debugName: "isFormLoading" }] : []));
|
|
3359
|
-
this.defaultLayout = () => ({
|
|
3360
|
-
positions: {
|
|
3361
|
-
sm: { colSpan: 12 },
|
|
3362
|
-
md: { colSpan: 8 },
|
|
3363
|
-
lg: { colSpan: 6 },
|
|
3364
|
-
xl: { colSpan: 5 },
|
|
3365
|
-
xxl: { colSpan: 4 },
|
|
3366
|
-
},
|
|
3367
|
-
});
|
|
3368
|
-
/**
|
|
3369
|
-
* Determine rendering mode and effective definitions
|
|
3370
|
-
*/
|
|
3371
|
-
this.hasLegacyForm = computed(() => !!this.config.formDefinition, ...(ngDevMode ? [{ debugName: "hasLegacyForm" }] : []));
|
|
3372
|
-
this.providedDefinition = computed(() => this.config.definition, ...(ngDevMode ? [{ debugName: "providedDefinition" }] : []));
|
|
3373
|
-
this.providedMode = computed(() => this.config.mode || 'edit', ...(ngDevMode ? [{ debugName: "providedMode" }] : []));
|
|
3374
|
-
this.isStepperDefinition = computed(() => {
|
|
3375
|
-
const def = this.providedDefinition();
|
|
3376
|
-
return !!def && Array.isArray(def?.steps) && def.steps.length > 1;
|
|
3377
|
-
}, ...(ngDevMode ? [{ debugName: "isStepperDefinition" }] : []));
|
|
3378
|
-
this.shouldRenderForm = computed(() => {
|
|
3379
|
-
if (this.hasLegacyForm())
|
|
3380
|
-
return true;
|
|
3381
|
-
const def = this.providedDefinition();
|
|
3382
|
-
// Render form when definition is form-like or single/no step
|
|
3383
|
-
if (!def)
|
|
3384
|
-
return false;
|
|
3385
|
-
if (Array.isArray(def?.steps)) {
|
|
3386
|
-
return def.steps.length <= 1;
|
|
3387
|
-
}
|
|
3388
|
-
// No steps property -> treat as AXPDynamicFormDefinition
|
|
3389
|
-
return true;
|
|
3390
|
-
}, ...(ngDevMode ? [{ debugName: "shouldRenderForm" }] : []));
|
|
3391
|
-
this.effectiveFormDefinition = computed(() => {
|
|
3392
|
-
if (this.config.formDefinition)
|
|
3393
|
-
return this.config.formDefinition;
|
|
3394
|
-
const def = this.providedDefinition();
|
|
3395
|
-
if (!def)
|
|
3396
|
-
return undefined;
|
|
3397
|
-
if (Array.isArray(def?.steps)) {
|
|
3398
|
-
// Single-step stepper -> convert to form def
|
|
3399
|
-
const step = def.steps[0];
|
|
3400
|
-
return step ? { groups: step.groups } : undefined;
|
|
3401
|
-
}
|
|
3402
|
-
return def;
|
|
3403
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveFormDefinition" }] : []));
|
|
3404
|
-
this.resolvedFormDefinition = computed(() => {
|
|
3405
|
-
return (this.effectiveFormDefinition() ?? { groups: [] });
|
|
3406
|
-
}, ...(ngDevMode ? [{ debugName: "resolvedFormDefinition" }] : []));
|
|
3407
|
-
this.effectiveLayoutLook = computed(() => this.config.layoutLook ?? 'container', ...(ngDevMode ? [{ debugName: "effectiveLayoutLook" }] : []));
|
|
3408
|
-
this.effectiveLayoutConfig = computed(() => this.config.layoutConfig ?? this.defaultLayout(), ...(ngDevMode ? [{ debugName: "effectiveLayoutConfig" }] : []));
|
|
3409
|
-
// Stepper-only
|
|
3410
|
-
this.stepperGuardNext = computed(() => this.config.stepper?.guardNext, ...(ngDevMode ? [{ debugName: "stepperGuardNext" }] : []));
|
|
3411
|
-
this.stepperDirection = computed(() => this.config.stepper?.stepperDirection ?? 'horizontal', ...(ngDevMode ? [{ debugName: "stepperDirection" }] : []));
|
|
3412
|
-
this.stepperDefinition = computed(() => {
|
|
3413
|
-
const def = this.providedDefinition();
|
|
3414
|
-
return (def ?? { steps: [] });
|
|
3415
|
-
}, ...(ngDevMode ? [{ debugName: "stepperDefinition" }] : []));
|
|
3416
|
-
this.stepperIsFirst = computed(() => this.stepper()?.isFirst() ?? true, ...(ngDevMode ? [{ debugName: "stepperIsFirst" }] : []));
|
|
3417
|
-
this.stepperIsLast = computed(() => this.stepper()?.isLast() ?? false, ...(ngDevMode ? [{ debugName: "stepperIsLast" }] : []));
|
|
3418
|
-
/**
|
|
3419
|
-
* Effective form direction when rendering dynamic-form (single-step or legacy form).
|
|
3420
|
-
* If a single-step definition is provided and that step specifies formDirection, use it.
|
|
3421
|
-
*/
|
|
3422
|
-
this.effectiveFormDirection = computed(() => {
|
|
3423
|
-
if (this.hasLegacyForm()) {
|
|
3424
|
-
return 'vertical';
|
|
3425
|
-
}
|
|
3426
|
-
const def = this.providedDefinition();
|
|
3427
|
-
if (def && Array.isArray(def?.steps) && def.steps.length === 1) {
|
|
3428
|
-
return def.steps[0]?.formDirection ?? 'vertical';
|
|
3429
|
-
}
|
|
3430
|
-
return 'vertical';
|
|
3431
|
-
}, ...(ngDevMode ? [{ debugName: "effectiveFormDirection" }] : []));
|
|
3432
|
-
/**
|
|
3433
|
-
* Footer actions for dynamic button system
|
|
3434
|
-
*/
|
|
3435
|
-
this.footerPrefixActions = computed(() => this.config.actions?.footer?.prefix || [], ...(ngDevMode ? [{ debugName: "footerPrefixActions" }] : []));
|
|
3436
|
-
this.footerSuffixActions = computed(() => this.config.actions?.footer?.suffix || [], ...(ngDevMode ? [{ debugName: "footerSuffixActions" }] : []));
|
|
3437
|
-
this.visibleFooterPrefixActions = computed(() => {
|
|
3438
|
-
const prefixFooterActions = this.footerPrefixActions();
|
|
3439
|
-
return prefixFooterActions.filter((action) => action.visible != false);
|
|
3440
|
-
}, ...(ngDevMode ? [{ debugName: "visibleFooterPrefixActions" }] : []));
|
|
3441
|
-
this.visibleFooterSuffixActions = computed(() => {
|
|
3442
|
-
const suffixFooterActions = this.footerSuffixActions();
|
|
3443
|
-
return suffixFooterActions.filter((action) => action.visible != false);
|
|
3444
|
-
}, ...(ngDevMode ? [{ debugName: "visibleFooterSuffixActions" }] : []));
|
|
3445
|
-
this.hasFooterActions = computed(() => {
|
|
3446
|
-
const prefixActions = this.visibleFooterPrefixActions();
|
|
3447
|
-
const suffixActions = this.visibleFooterSuffixActions();
|
|
3448
|
-
return prefixActions.length > 0 || suffixActions.length > 0;
|
|
3449
|
-
}, ...(ngDevMode ? [{ debugName: "hasFooterActions" }] : []));
|
|
3450
|
-
/** Stepper footer: choose a single confirm action from provided suffix actions (first visible). */
|
|
3451
|
-
this.confirmAction = computed(() => {
|
|
3452
|
-
const items = this.footerSuffixActions();
|
|
3453
|
-
return items.find((a) => a.visible !== false);
|
|
3454
|
-
}, ...(ngDevMode ? [{ debugName: "confirmAction" }] : []));
|
|
3455
|
-
this.confirmActionTitle = computed(() => this.confirmAction()?.title ?? 'Confirm', ...(ngDevMode ? [{ debugName: "confirmActionTitle" }] : []));
|
|
3456
|
-
}
|
|
3457
|
-
//#endregion
|
|
3458
|
-
//#region ---- Lifecycle Methods ----
|
|
3459
|
-
ngOnInit() {
|
|
3460
|
-
this.formData.set(this.config.context ?? {});
|
|
3461
|
-
}
|
|
3462
|
-
//#endregion
|
|
3463
|
-
//#region ---- Event Handlers ----
|
|
3464
|
-
handleContextInitiated(context) {
|
|
3465
|
-
this.previousContext.set(context);
|
|
3466
|
-
}
|
|
3467
|
-
handleContextChanged(context) {
|
|
3468
|
-
this.formData.set(context);
|
|
3469
|
-
}
|
|
3470
|
-
//#endregion
|
|
3471
|
-
//#region ---- Action Execution ----
|
|
3472
|
-
/**
|
|
3473
|
-
* Execute a dynamic action
|
|
3474
|
-
*/
|
|
3475
|
-
async executeAction(action) {
|
|
3476
|
-
if (action.command) {
|
|
3477
|
-
// Execute the command if provided
|
|
3478
|
-
await this.executeCommand(action.command);
|
|
3479
|
-
}
|
|
3480
|
-
else {
|
|
3481
|
-
// Handle custom action logic here
|
|
3482
|
-
const result = {
|
|
3483
|
-
context: this.formData(),
|
|
3484
|
-
action: action.name || action.title,
|
|
3485
|
-
};
|
|
3486
|
-
this.close(result);
|
|
3487
|
-
}
|
|
3488
|
-
}
|
|
3489
|
-
/**
|
|
3490
|
-
* Execute a command
|
|
3491
|
-
*/
|
|
3492
|
-
async executeCommand(command) {
|
|
3493
|
-
// Handle command execution logic here
|
|
3494
|
-
if (command.options?.['validate'] == true) {
|
|
3495
|
-
if (!(await this.isFormValid())) {
|
|
3496
|
-
return;
|
|
3497
|
-
}
|
|
3498
|
-
}
|
|
3499
|
-
//
|
|
3500
|
-
if (command.name == 'cancel') {
|
|
3501
|
-
this.close();
|
|
3502
|
-
}
|
|
3503
|
-
const result = {
|
|
3504
|
-
context: this.formData(),
|
|
3505
|
-
action: command.name,
|
|
3506
|
-
};
|
|
3507
|
-
// Store result in component property and popup data
|
|
3508
|
-
this.dialogResult = result;
|
|
3509
|
-
// Store in popup data for DialogRef access
|
|
3510
|
-
if (this.data) {
|
|
3511
|
-
this.data.context = result.context;
|
|
3512
|
-
this.data.action = result.action;
|
|
3513
|
-
}
|
|
3514
|
-
// Call the callback with DialogRef
|
|
3515
|
-
this.callBack({
|
|
3516
|
-
close: (result) => {
|
|
3517
|
-
this.close(result);
|
|
3518
|
-
},
|
|
3519
|
-
context: () => {
|
|
3520
|
-
return this.formData();
|
|
3521
|
-
},
|
|
3522
|
-
action: () => {
|
|
3523
|
-
return result.action;
|
|
3524
|
-
},
|
|
3525
|
-
setLoading: (loading) => {
|
|
3526
|
-
this.isSubmitting.set(loading);
|
|
3527
|
-
},
|
|
3528
|
-
});
|
|
3529
|
-
}
|
|
3530
|
-
//#endregion
|
|
3531
|
-
//#region ---- Public Methods ----
|
|
3532
|
-
/**
|
|
3533
|
-
* Check if form is valid
|
|
3534
|
-
*/
|
|
3535
|
-
async isFormValid() {
|
|
3536
|
-
if (this.isStepperDefinition()) {
|
|
3537
|
-
return (await this.stepper()?.validateCurrentStep()) ?? false;
|
|
3538
|
-
}
|
|
3539
|
-
return (await this.dynamicForm()?.validate()) ?? false;
|
|
3540
|
-
}
|
|
3541
|
-
/** Stepper navigation handlers */
|
|
3542
|
-
goPrev() {
|
|
3543
|
-
this.stepper()?.previous();
|
|
3544
|
-
}
|
|
3545
|
-
goNext() {
|
|
3546
|
-
this.stepper()?.next();
|
|
3547
|
-
}
|
|
3548
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicDialogComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
3549
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", type: AXPDynamicDialogComponent, isStandalone: true, selector: "axp-dynamic-dialog", inputs: { config: "config" }, viewQueries: [{ propertyName: "dynamicForm", first: true, predicate: AXPDynamicFormComponent, descendants: true, isSignal: true }, { propertyName: "stepper", first: true, predicate: AXPDynamicFormStepperComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "@if (shouldRenderForm()) {\n <div class=\"ax-p-4\">\n <axp-dynamic-form\n [data]=\"resolvedFormDefinition()\"\n [context]=\"formContext()\"\n [mode]=\"providedMode()\"\n [layoutLook]=\"effectiveLayoutLook()\"\n (contextChange)=\"handleContextChanged($event)\"\n (contextInitiated)=\"handleContextInitiated($event)\"\n >\n </axp-dynamic-form>\n </div>\n\n <ax-footer>\n <ax-prefix>\n <ng-container *ngTemplateOutlet=\"footerPrefixActions\"></ng-container>\n </ax-prefix>\n <ax-suffix>\n <ng-container *ngTemplateOutlet=\"footerSuffixActions\"></ng-container>\n </ax-suffix>\n </ax-footer>\n} @else {\n <div class=\"ax-p-4\">\n <axp-dynamic-form-stepper\n #stepperRef\n [definition]=\"stepperDefinition()\"\n [context]=\"formContext()\"\n [layoutLook]=\"effectiveLayoutLook()\"\n [layoutConfig]=\"effectiveLayoutConfig()\"\n [stepperDirection]=\"stepperDirection()\"\n [guardNext]=\"stepperGuardNext()\"\n (contextChange)=\"handleContextChanged($event)\"\n >\n </axp-dynamic-form-stepper>\n </div>\n\n <ax-footer>\n <ax-prefix>\n <ax-button\n [disabled]=\"stepperIsFirst()\"\n [text]=\"'@general:actions.previous.title' | translate | async\"\n [look]=\"'outline'\"\n (onClick)=\"goPrev()\"\n ></ax-button>\n </ax-prefix>\n <ax-suffix>\n @if (!stepperIsLast()) {\n <ax-button\n [text]=\"'@general:actions.next.title' | translate | async\"\n [color]=\"'primary'\"\n (onClick)=\"goNext()\"\n ></ax-button>\n } @else {\n <ax-suffix>\n <ng-container *ngTemplateOutlet=\"footerSuffixActions\"></ng-container>\n </ax-suffix>\n }\n </ax-suffix>\n </ax-footer>\n}\n<!-- Footer Prefix Actions -->\n<ng-template #footerPrefixActions>\n @for (action of visibleFooterPrefixActions(); track $index) {\n <ax-button\n [disabled]=\"action.disabled || isFormLoading()\"\n [text]=\"(action.title | translate | async)!\"\n [look]=\"'outline'\"\n [color]=\"action.color\"\n (onClick)=\"executeAction(action)\"\n >\n @if (isFormLoading() && action.command?.name != 'cancel') {\n <ax-loading></ax-loading>\n }\n <ax-prefix>\n <i class=\"{{ action.icon }}\"></i>\n </ax-prefix>\n </ax-button>\n }\n</ng-template>\n\n<!-- Footer Suffix Actions -->\n<ng-template #footerSuffixActions>\n @for (action of visibleFooterSuffixActions(); track $index) {\n @if (action?.items && (action?.items?.length ?? 0) > 0) {\n <ax-dropdown-button\n [disabled]=\"action.disabled || isSubmitting()\"\n [text]=\"(action.title | translate | async)!\"\n [look]=\"'solid'\"\n [color]=\"action.color\"\n (onClick)=\"executeAction(action)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <ax-icon icon=\"{{ action.icon }}\"></ax-icon>\n </ax-prefix>\n }\n <ax-button-item-list>\n @for (sub of action?.items; track $index) {\n <ax-button-item\n [text]=\"(sub.title | translate | async)!\"\n [color]=\"sub.color\"\n [disabled]=\"sub.disabled\"\n (onClick)=\"executeAction(sub)\"\n >\n @if (sub.icon) {\n <ax-prefix>\n <ax-icon icon=\"{{ sub.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n @if (sub.break) {\n <ax-divider></ax-divider>\n }\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n } @else {\n <ax-button\n [disabled]=\"action.disabled || isSubmitting()\"\n [text]=\"(action.title | translate | async)!\"\n [look]=\"'solid'\"\n [color]=\"action.color\"\n (onClick)=\"executeAction(action)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <ax-icon icon=\"{{ action.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button>\n }\n }\n</ng-template>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type:
|
|
3550
|
-
//
|
|
3551
|
-
AXFormModule }, { kind: "ngmodule", type: AXValidationModule }, { kind: "component", type: AXPDynamicFormComponent, selector: "axp-dynamic-form", inputs: ["data", "context", "layoutLook", "mode"], outputs: ["contextChange", "contextInitiated", "validityChange"] }, { kind: "component", type: AXPDynamicFormStepperComponent, selector: "axp-dynamic-form-stepper", inputs: ["definition", "context", "layoutLook", "stepperDirection", "layoutConfig", "guardNext"], outputs: ["contextChange", "stepChange", "finished", "cancel", "navigationBlocked"] }, { 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: 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: AXDropdownButtonModule }, { kind: "component", type: i4$3.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "color", "look", "text", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i5$2.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3552
|
-
}
|
|
3553
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImport: i0, type: AXPDynamicDialogComponent, decorators: [{
|
|
3554
|
-
type: Component,
|
|
3555
|
-
args: [{ selector: 'axp-dynamic-dialog', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3556
|
-
CommonModule,
|
|
3557
|
-
//
|
|
3558
|
-
AXFormModule,
|
|
3559
|
-
AXValidationModule,
|
|
3560
|
-
AXPDynamicFormComponent,
|
|
3561
|
-
AXPDynamicFormStepperComponent,
|
|
3562
|
-
AXDecoratorModule,
|
|
3563
|
-
AXButtonModule,
|
|
3564
|
-
AXDropdownButtonModule,
|
|
3565
|
-
AXDropdownModule,
|
|
3566
|
-
AXLoadingModule,
|
|
3567
|
-
AXTranslationModule,
|
|
3568
|
-
], template: "@if (shouldRenderForm()) {\n <div class=\"ax-p-4\">\n <axp-dynamic-form\n [data]=\"resolvedFormDefinition()\"\n [context]=\"formContext()\"\n [mode]=\"providedMode()\"\n [layoutLook]=\"effectiveLayoutLook()\"\n (contextChange)=\"handleContextChanged($event)\"\n (contextInitiated)=\"handleContextInitiated($event)\"\n >\n </axp-dynamic-form>\n </div>\n\n <ax-footer>\n <ax-prefix>\n <ng-container *ngTemplateOutlet=\"footerPrefixActions\"></ng-container>\n </ax-prefix>\n <ax-suffix>\n <ng-container *ngTemplateOutlet=\"footerSuffixActions\"></ng-container>\n </ax-suffix>\n </ax-footer>\n} @else {\n <div class=\"ax-p-4\">\n <axp-dynamic-form-stepper\n #stepperRef\n [definition]=\"stepperDefinition()\"\n [context]=\"formContext()\"\n [layoutLook]=\"effectiveLayoutLook()\"\n [layoutConfig]=\"effectiveLayoutConfig()\"\n [stepperDirection]=\"stepperDirection()\"\n [guardNext]=\"stepperGuardNext()\"\n (contextChange)=\"handleContextChanged($event)\"\n >\n </axp-dynamic-form-stepper>\n </div>\n\n <ax-footer>\n <ax-prefix>\n <ax-button\n [disabled]=\"stepperIsFirst()\"\n [text]=\"'@general:actions.previous.title' | translate | async\"\n [look]=\"'outline'\"\n (onClick)=\"goPrev()\"\n ></ax-button>\n </ax-prefix>\n <ax-suffix>\n @if (!stepperIsLast()) {\n <ax-button\n [text]=\"'@general:actions.next.title' | translate | async\"\n [color]=\"'primary'\"\n (onClick)=\"goNext()\"\n ></ax-button>\n } @else {\n <ax-suffix>\n <ng-container *ngTemplateOutlet=\"footerSuffixActions\"></ng-container>\n </ax-suffix>\n }\n </ax-suffix>\n </ax-footer>\n}\n<!-- Footer Prefix Actions -->\n<ng-template #footerPrefixActions>\n @for (action of visibleFooterPrefixActions(); track $index) {\n <ax-button\n [disabled]=\"action.disabled || isFormLoading()\"\n [text]=\"(action.title | translate | async)!\"\n [look]=\"'outline'\"\n [color]=\"action.color\"\n (onClick)=\"executeAction(action)\"\n >\n @if (isFormLoading() && action.command?.name != 'cancel') {\n <ax-loading></ax-loading>\n }\n <ax-prefix>\n <i class=\"{{ action.icon }}\"></i>\n </ax-prefix>\n </ax-button>\n }\n</ng-template>\n\n<!-- Footer Suffix Actions -->\n<ng-template #footerSuffixActions>\n @for (action of visibleFooterSuffixActions(); track $index) {\n @if (action?.items && (action?.items?.length ?? 0) > 0) {\n <ax-dropdown-button\n [disabled]=\"action.disabled || isSubmitting()\"\n [text]=\"(action.title | translate | async)!\"\n [look]=\"'solid'\"\n [color]=\"action.color\"\n (onClick)=\"executeAction(action)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <ax-icon icon=\"{{ action.icon }}\"></ax-icon>\n </ax-prefix>\n }\n <ax-button-item-list>\n @for (sub of action?.items; track $index) {\n <ax-button-item\n [text]=\"(sub.title | translate | async)!\"\n [color]=\"sub.color\"\n [disabled]=\"sub.disabled\"\n (onClick)=\"executeAction(sub)\"\n >\n @if (sub.icon) {\n <ax-prefix>\n <ax-icon icon=\"{{ sub.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n @if (sub.break) {\n <ax-divider></ax-divider>\n }\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n } @else {\n <ax-button\n [disabled]=\"action.disabled || isSubmitting()\"\n [text]=\"(action.title | translate | async)!\"\n [look]=\"'solid'\"\n [color]=\"action.color\"\n (onClick)=\"executeAction(action)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <ax-icon icon=\"{{ action.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button>\n }\n }\n</ng-template>\n" }]
|
|
3569
|
-
}], propDecorators: { config: [{
|
|
3570
|
-
type: Input,
|
|
3571
|
-
args: [{ required: true }]
|
|
3572
|
-
}] } });
|
|
3573
|
-
|
|
3574
|
-
var dynamicDialog_component = /*#__PURE__*/Object.freeze({
|
|
3575
|
-
__proto__: null,
|
|
3576
|
-
AXPDynamicDialogComponent: AXPDynamicDialogComponent
|
|
3577
|
-
});
|
|
3578
|
-
|
|
3579
|
-
//#endregion
|
|
3580
|
-
|
|
3581
1692
|
class AXPWidgetPropertyViewerService {
|
|
3582
1693
|
constructor() {
|
|
3583
1694
|
//#region ---- Services & Dependencies ----
|
|
@@ -3600,10 +1711,10 @@ class AXPWidgetPropertyViewerService {
|
|
|
3600
1711
|
});
|
|
3601
1712
|
return result.data || null;
|
|
3602
1713
|
}
|
|
3603
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3604
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1714
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1715
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerService, providedIn: 'root' }); }
|
|
3605
1716
|
}
|
|
3606
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1717
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerService, decorators: [{
|
|
3607
1718
|
type: Injectable,
|
|
3608
1719
|
args: [{
|
|
3609
1720
|
providedIn: 'root'
|
|
@@ -3622,7 +1733,7 @@ function convertDesignerFieldToFormField(field) {
|
|
|
3622
1733
|
description: field.description,
|
|
3623
1734
|
widget: field.widget,
|
|
3624
1735
|
mode: field.mode,
|
|
3625
|
-
layout: field.layout
|
|
1736
|
+
layout: field.layout,
|
|
3626
1737
|
};
|
|
3627
1738
|
}
|
|
3628
1739
|
/**
|
|
@@ -3642,7 +1753,7 @@ function convertDesignerGroupToFormGroup(group) {
|
|
|
3642
1753
|
*/
|
|
3643
1754
|
function convertDesignerStateToFormDefinition(state) {
|
|
3644
1755
|
return {
|
|
3645
|
-
groups: state.groups.map(convertDesignerGroupToFormGroup)
|
|
1756
|
+
groups: state.groups.map(convertDesignerGroupToFormGroup),
|
|
3646
1757
|
};
|
|
3647
1758
|
}
|
|
3648
1759
|
//#endregion
|
|
@@ -3658,9 +1769,8 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3658
1769
|
//#endregion
|
|
3659
1770
|
//#region ---- Services & Dependencies ----
|
|
3660
1771
|
this.widgetRegistry = inject(AXPWidgetRegistryService);
|
|
3661
|
-
this.formBuilderService = inject(
|
|
1772
|
+
this.formBuilderService = inject(AXPLayoutBuilderService);
|
|
3662
1773
|
this.widgetPropertyViewerService = inject(AXPWidgetPropertyViewerService);
|
|
3663
|
-
this.dialogService = inject(AXPDynamicDialogService);
|
|
3664
1774
|
//#endregion
|
|
3665
1775
|
//#region ---- Class Properties ----
|
|
3666
1776
|
// Designer state
|
|
@@ -3672,8 +1782,8 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3672
1782
|
this.availableWidgets = computed(() => {
|
|
3673
1783
|
return this.widgetRegistry
|
|
3674
1784
|
.all()
|
|
3675
|
-
.filter(widget => widget.groups?.includes(AXPWidgetGroupEnum.FormElement) && widget.type === 'editor')
|
|
3676
|
-
.map(widget => ({
|
|
1785
|
+
.filter((widget) => widget.groups?.includes(AXPWidgetGroupEnum.FormElement) && widget.type === 'editor')
|
|
1786
|
+
.map((widget) => ({
|
|
3677
1787
|
name: widget.name,
|
|
3678
1788
|
title: widget.title,
|
|
3679
1789
|
icon: widget.icon,
|
|
@@ -3684,9 +1794,9 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3684
1794
|
}, ...(ngDevMode ? [{ debugName: "availableWidgets" }] : []));
|
|
3685
1795
|
// Widget options for select box
|
|
3686
1796
|
this.widgetOptions = computed(() => {
|
|
3687
|
-
return this.availableWidgets().map(w => ({
|
|
1797
|
+
return this.availableWidgets().map((w) => ({
|
|
3688
1798
|
value: w.name,
|
|
3689
|
-
text: w.title
|
|
1799
|
+
text: w.title,
|
|
3690
1800
|
}));
|
|
3691
1801
|
}, ...(ngDevMode ? [{ debugName: "widgetOptions" }] : []));
|
|
3692
1802
|
// Get all fields from all groups
|
|
@@ -3701,21 +1811,21 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3701
1811
|
const formDef = this.formDefinition();
|
|
3702
1812
|
if (!formDef?.groups)
|
|
3703
1813
|
return [];
|
|
3704
|
-
return formDef.groups.map(group => ({
|
|
1814
|
+
return formDef.groups.map((group) => ({
|
|
3705
1815
|
id: `group-${group.name}`,
|
|
3706
1816
|
name: group.name,
|
|
3707
1817
|
title: group.title,
|
|
3708
1818
|
description: group.description,
|
|
3709
1819
|
mode: group.mode,
|
|
3710
|
-
fields: group.parameters.map(param => ({
|
|
1820
|
+
fields: group.parameters.map((param) => ({
|
|
3711
1821
|
id: `field-${param.path}`,
|
|
3712
1822
|
name: param.path,
|
|
3713
1823
|
title: param.title || '',
|
|
3714
1824
|
description: param.description,
|
|
3715
1825
|
widget: param.widget,
|
|
3716
1826
|
mode: param.mode,
|
|
3717
|
-
layout: param.layout
|
|
3718
|
-
}))
|
|
1827
|
+
layout: param.layout,
|
|
1828
|
+
})),
|
|
3719
1829
|
}));
|
|
3720
1830
|
}, ...(ngDevMode ? [{ debugName: "designerGroups" }] : []));
|
|
3721
1831
|
//#endregion
|
|
@@ -3726,7 +1836,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3726
1836
|
this.logFormDefinitionChanges = effect(() => {
|
|
3727
1837
|
const formDef = this.formDefinition();
|
|
3728
1838
|
console.log('formDefinition changed to:', formDef);
|
|
3729
|
-
console.log('formDefinition groups details:', formDef.groups?.map(g => ({ name: g.name })));
|
|
1839
|
+
console.log('formDefinition groups details:', formDef.groups?.map((g) => ({ name: g.name })));
|
|
3730
1840
|
}, ...(ngDevMode ? [{ debugName: "logFormDefinitionChanges" }] : []));
|
|
3731
1841
|
/**
|
|
3732
1842
|
* Effect to sync form definition model to designer state
|
|
@@ -3772,25 +1882,25 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3772
1882
|
* Set the form definition (converted to designer state)
|
|
3773
1883
|
*/
|
|
3774
1884
|
setFormDefinition(definition) {
|
|
3775
|
-
const groups = definition.groups.map(group => ({
|
|
1885
|
+
const groups = definition.groups.map((group) => ({
|
|
3776
1886
|
id: this.generateId(),
|
|
3777
1887
|
name: group.name,
|
|
3778
1888
|
title: group.title,
|
|
3779
1889
|
description: group.description,
|
|
3780
1890
|
mode: group.mode,
|
|
3781
|
-
fields: group.parameters.map(param => ({
|
|
1891
|
+
fields: group.parameters.map((param) => ({
|
|
3782
1892
|
id: this.generateId(),
|
|
3783
1893
|
name: param.path,
|
|
3784
1894
|
title: param.title || '',
|
|
3785
1895
|
description: param.description,
|
|
3786
1896
|
widget: param.widget,
|
|
3787
1897
|
mode: param.mode,
|
|
3788
|
-
layout: param.layout
|
|
3789
|
-
}))
|
|
1898
|
+
layout: param.layout,
|
|
1899
|
+
})),
|
|
3790
1900
|
}));
|
|
3791
1901
|
this.designerState.set({
|
|
3792
1902
|
groups,
|
|
3793
|
-
mode: 'designer'
|
|
1903
|
+
mode: 'designer',
|
|
3794
1904
|
});
|
|
3795
1905
|
}
|
|
3796
1906
|
/**
|
|
@@ -3805,35 +1915,40 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3805
1915
|
updatedGroups.push({
|
|
3806
1916
|
name: 'default-group',
|
|
3807
1917
|
title: 'Default Group',
|
|
3808
|
-
parameters: [
|
|
1918
|
+
parameters: [
|
|
1919
|
+
{
|
|
3809
1920
|
path: field.name,
|
|
3810
1921
|
title: field.title,
|
|
3811
1922
|
description: field.description,
|
|
3812
1923
|
widget: field.widget,
|
|
3813
1924
|
mode: field.mode,
|
|
3814
|
-
layout: field.layout
|
|
3815
|
-
}
|
|
1925
|
+
layout: field.layout,
|
|
1926
|
+
},
|
|
1927
|
+
],
|
|
3816
1928
|
});
|
|
3817
1929
|
}
|
|
3818
1930
|
else {
|
|
3819
1931
|
// Add to first group
|
|
3820
1932
|
updatedGroups[0] = {
|
|
3821
1933
|
...updatedGroups[0],
|
|
3822
|
-
parameters: [
|
|
1934
|
+
parameters: [
|
|
1935
|
+
...updatedGroups[0].parameters,
|
|
1936
|
+
{
|
|
3823
1937
|
path: field.name,
|
|
3824
1938
|
title: field.title,
|
|
3825
1939
|
description: field.description,
|
|
3826
1940
|
widget: field.widget,
|
|
3827
1941
|
mode: field.mode,
|
|
3828
|
-
layout: field.layout
|
|
3829
|
-
}
|
|
1942
|
+
layout: field.layout,
|
|
1943
|
+
},
|
|
1944
|
+
],
|
|
3830
1945
|
};
|
|
3831
1946
|
}
|
|
3832
1947
|
// Set flag to prevent external sync during internal update
|
|
3833
1948
|
this.isInternalUpdate = true;
|
|
3834
1949
|
this.formDefinition.set({
|
|
3835
1950
|
...currentDefinition,
|
|
3836
|
-
groups: updatedGroups
|
|
1951
|
+
groups: updatedGroups,
|
|
3837
1952
|
});
|
|
3838
1953
|
// Reset flag after a delay
|
|
3839
1954
|
setTimeout(() => {
|
|
@@ -3847,22 +1962,24 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3847
1962
|
*/
|
|
3848
1963
|
updateField(fieldId, updates) {
|
|
3849
1964
|
const currentDefinition = this.formDefinition();
|
|
3850
|
-
const updatedGroups = currentDefinition.groups.map(group => ({
|
|
1965
|
+
const updatedGroups = currentDefinition.groups.map((group) => ({
|
|
3851
1966
|
...group,
|
|
3852
|
-
parameters: group.parameters.map(param => param.path === fieldId
|
|
3853
|
-
|
|
3854
|
-
|
|
3855
|
-
|
|
3856
|
-
|
|
3857
|
-
|
|
3858
|
-
|
|
3859
|
-
|
|
1967
|
+
parameters: group.parameters.map((param) => param.path === fieldId
|
|
1968
|
+
? {
|
|
1969
|
+
...param,
|
|
1970
|
+
title: updates.title ?? param.title,
|
|
1971
|
+
description: updates.description ?? param.description,
|
|
1972
|
+
widget: updates.widget ?? param.widget,
|
|
1973
|
+
mode: updates.mode ?? param.mode,
|
|
1974
|
+
layout: updates.layout ?? param.layout,
|
|
1975
|
+
}
|
|
1976
|
+
: param),
|
|
3860
1977
|
}));
|
|
3861
1978
|
// Set flag to prevent external sync during internal update
|
|
3862
1979
|
this.isInternalUpdate = true;
|
|
3863
1980
|
this.formDefinition.set({
|
|
3864
1981
|
...currentDefinition,
|
|
3865
|
-
groups: updatedGroups
|
|
1982
|
+
groups: updatedGroups,
|
|
3866
1983
|
});
|
|
3867
1984
|
// Reset flag after a delay
|
|
3868
1985
|
setTimeout(() => {
|
|
@@ -3875,15 +1992,15 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3875
1992
|
*/
|
|
3876
1993
|
removeField(fieldId) {
|
|
3877
1994
|
const currentDefinition = this.formDefinition();
|
|
3878
|
-
const updatedGroups = currentDefinition.groups.map(group => ({
|
|
1995
|
+
const updatedGroups = currentDefinition.groups.map((group) => ({
|
|
3879
1996
|
...group,
|
|
3880
|
-
parameters: group.parameters.filter(param => param.path !== fieldId)
|
|
1997
|
+
parameters: group.parameters.filter((param) => param.path !== fieldId),
|
|
3881
1998
|
}));
|
|
3882
1999
|
// Set flag to prevent external sync during internal update
|
|
3883
2000
|
this.isInternalUpdate = true;
|
|
3884
2001
|
this.formDefinition.set({
|
|
3885
2002
|
...currentDefinition,
|
|
3886
|
-
groups: updatedGroups
|
|
2003
|
+
groups: updatedGroups,
|
|
3887
2004
|
});
|
|
3888
2005
|
// Reset flag after a delay
|
|
3889
2006
|
setTimeout(() => {
|
|
@@ -3908,19 +2025,19 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3908
2025
|
name: group.name,
|
|
3909
2026
|
title: group.title,
|
|
3910
2027
|
description: group.description,
|
|
3911
|
-
parameters: group.fields.map(field => ({
|
|
2028
|
+
parameters: group.fields.map((field) => ({
|
|
3912
2029
|
path: field.name,
|
|
3913
2030
|
title: field.title,
|
|
3914
2031
|
description: field.description,
|
|
3915
2032
|
widget: field.widget,
|
|
3916
2033
|
mode: field.mode,
|
|
3917
|
-
layout: field.layout
|
|
2034
|
+
layout: field.layout,
|
|
3918
2035
|
})),
|
|
3919
2036
|
mode: group.mode,
|
|
3920
2037
|
});
|
|
3921
2038
|
this.formDefinition.set({
|
|
3922
2039
|
...currentDefinition,
|
|
3923
|
-
groups: updatedGroups
|
|
2040
|
+
groups: updatedGroups,
|
|
3924
2041
|
});
|
|
3925
2042
|
}
|
|
3926
2043
|
/**
|
|
@@ -3929,10 +2046,10 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3929
2046
|
*/
|
|
3930
2047
|
removeGroup(groupName) {
|
|
3931
2048
|
const currentDefinition = this.formDefinition();
|
|
3932
|
-
const updatedGroups = currentDefinition.groups.filter(group => group.name !== groupName);
|
|
2049
|
+
const updatedGroups = currentDefinition.groups.filter((group) => group.name !== groupName);
|
|
3933
2050
|
this.formDefinition.set({
|
|
3934
2051
|
...currentDefinition,
|
|
3935
|
-
groups: updatedGroups
|
|
2052
|
+
groups: updatedGroups,
|
|
3936
2053
|
});
|
|
3937
2054
|
}
|
|
3938
2055
|
/**
|
|
@@ -3948,7 +2065,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3948
2065
|
updatedGroups.splice(toIndex, 0, movedGroup);
|
|
3949
2066
|
this.formDefinition.set({
|
|
3950
2067
|
...currentDefinition,
|
|
3951
|
-
groups: updatedGroups
|
|
2068
|
+
groups: updatedGroups,
|
|
3952
2069
|
});
|
|
3953
2070
|
}
|
|
3954
2071
|
/**
|
|
@@ -3960,7 +2077,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3960
2077
|
console.log('updateGroup called with:', { groupName, updates });
|
|
3961
2078
|
const currentDefinition = this.formDefinition();
|
|
3962
2079
|
console.log('Current definition before update:', currentDefinition);
|
|
3963
|
-
const updatedGroups = currentDefinition.groups.map(group => {
|
|
2080
|
+
const updatedGroups = currentDefinition.groups.map((group) => {
|
|
3964
2081
|
if (group.name === groupName) {
|
|
3965
2082
|
const updatedGroup = {
|
|
3966
2083
|
...group,
|
|
@@ -3975,7 +2092,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3975
2092
|
});
|
|
3976
2093
|
const newDefinition = {
|
|
3977
2094
|
...currentDefinition,
|
|
3978
|
-
groups: updatedGroups
|
|
2095
|
+
groups: updatedGroups,
|
|
3979
2096
|
};
|
|
3980
2097
|
console.log('New definition after update:', newDefinition);
|
|
3981
2098
|
// Set flag to prevent external sync during internal update
|
|
@@ -3997,26 +2114,28 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3997
2114
|
const currentDefinition = this.formDefinition();
|
|
3998
2115
|
let fieldToMove = null;
|
|
3999
2116
|
// Find and remove the field from its current group
|
|
4000
|
-
const updatedGroups = currentDefinition.groups.map(group => {
|
|
4001
|
-
const fieldIndex = group.parameters.findIndex(param => param.path === fieldName);
|
|
2117
|
+
const updatedGroups = currentDefinition.groups.map((group) => {
|
|
2118
|
+
const fieldIndex = group.parameters.findIndex((param) => param.path === fieldName);
|
|
4002
2119
|
if (fieldIndex !== -1) {
|
|
4003
2120
|
fieldToMove = group.parameters[fieldIndex];
|
|
4004
2121
|
return {
|
|
4005
2122
|
...group,
|
|
4006
|
-
parameters: group.parameters.filter((_, index) => index !== fieldIndex)
|
|
2123
|
+
parameters: group.parameters.filter((_, index) => index !== fieldIndex),
|
|
4007
2124
|
};
|
|
4008
2125
|
}
|
|
4009
2126
|
return group;
|
|
4010
2127
|
});
|
|
4011
2128
|
// Add the field to the target group
|
|
4012
2129
|
if (fieldToMove) {
|
|
4013
|
-
const finalGroups = updatedGroups.map(group => group.name === targetGroupName
|
|
4014
|
-
|
|
4015
|
-
|
|
4016
|
-
|
|
2130
|
+
const finalGroups = updatedGroups.map((group) => group.name === targetGroupName
|
|
2131
|
+
? {
|
|
2132
|
+
...group,
|
|
2133
|
+
parameters: [...group.parameters, fieldToMove],
|
|
2134
|
+
}
|
|
2135
|
+
: group);
|
|
4017
2136
|
this.formDefinition.set({
|
|
4018
2137
|
...currentDefinition,
|
|
4019
|
-
groups: finalGroups
|
|
2138
|
+
groups: finalGroups,
|
|
4020
2139
|
});
|
|
4021
2140
|
}
|
|
4022
2141
|
}
|
|
@@ -4024,38 +2143,44 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4024
2143
|
//#region ---- Event Handlers ----
|
|
4025
2144
|
async handleAddGroupClick() {
|
|
4026
2145
|
try {
|
|
4027
|
-
//
|
|
4028
|
-
const dialogRef = await this.formBuilderService
|
|
4029
|
-
.
|
|
4030
|
-
.
|
|
4031
|
-
|
|
4032
|
-
|
|
4033
|
-
|
|
4034
|
-
.
|
|
4035
|
-
|
|
4036
|
-
|
|
4037
|
-
|
|
4038
|
-
|
|
4039
|
-
|
|
4040
|
-
|
|
4041
|
-
|
|
4042
|
-
|
|
4043
|
-
|
|
4044
|
-
|
|
2146
|
+
// Create dialog using new Layout Builder API
|
|
2147
|
+
const dialogRef = await this.formBuilderService
|
|
2148
|
+
.create()
|
|
2149
|
+
.dialog((dialog) => {
|
|
2150
|
+
dialog
|
|
2151
|
+
.setTitle('Add Group')
|
|
2152
|
+
.setSize('md')
|
|
2153
|
+
.setCloseButton(true)
|
|
2154
|
+
.setContext({ name: '', title: '', description: '' })
|
|
2155
|
+
.content((layoutBuilder) => {
|
|
2156
|
+
layoutBuilder.flex((flex) => {
|
|
2157
|
+
flex
|
|
2158
|
+
.setDirection('column')
|
|
2159
|
+
.setGap('16px')
|
|
2160
|
+
.formField('Group Name', (field) => {
|
|
2161
|
+
field.path('name');
|
|
2162
|
+
field.textBox({
|
|
2163
|
+
placeholder: 'Enter group name (used as identifier)',
|
|
2164
|
+
validations: [{ rule: 'required' }],
|
|
2165
|
+
});
|
|
2166
|
+
})
|
|
2167
|
+
.formField('Group Title', (field) => {
|
|
2168
|
+
field.path('title');
|
|
2169
|
+
field.textBox({
|
|
2170
|
+
placeholder: 'Enter group display title',
|
|
2171
|
+
});
|
|
2172
|
+
})
|
|
2173
|
+
.formField('Group Description', (field) => {
|
|
2174
|
+
field.path('description');
|
|
2175
|
+
field.largeTextBox({
|
|
2176
|
+
placeholder: 'Enter group description (optional)',
|
|
2177
|
+
rows: 3,
|
|
2178
|
+
});
|
|
2179
|
+
});
|
|
4045
2180
|
});
|
|
4046
2181
|
})
|
|
4047
|
-
.
|
|
4048
|
-
field.title('Group Description')
|
|
4049
|
-
.largeTextBox({
|
|
4050
|
-
placeholder: 'Enter group description (optional)',
|
|
4051
|
-
rows: 3
|
|
4052
|
-
});
|
|
4053
|
-
});
|
|
2182
|
+
.setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.add.title'));
|
|
4054
2183
|
})
|
|
4055
|
-
.context({ name: '', title: '', description: '' })
|
|
4056
|
-
.actions(actions => actions
|
|
4057
|
-
.cancel('@general:actions.cancel.title')
|
|
4058
|
-
.submit('@general:actions.add.title'))
|
|
4059
2184
|
.show();
|
|
4060
2185
|
// Get the form data from the dialog
|
|
4061
2186
|
const formData = dialogRef.context();
|
|
@@ -4074,9 +2199,9 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4074
2199
|
positions: {
|
|
4075
2200
|
sm: { colSpan: 12 },
|
|
4076
2201
|
md: { colSpan: 6 },
|
|
4077
|
-
lg: { colSpan: 4 }
|
|
4078
|
-
}
|
|
4079
|
-
}
|
|
2202
|
+
lg: { colSpan: 4 },
|
|
2203
|
+
},
|
|
2204
|
+
},
|
|
4080
2205
|
};
|
|
4081
2206
|
this.addGroup(newGroup);
|
|
4082
2207
|
}
|
|
@@ -4087,35 +2212,41 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4087
2212
|
}
|
|
4088
2213
|
async handleAddFieldToGroup(group) {
|
|
4089
2214
|
try {
|
|
4090
|
-
//
|
|
4091
|
-
const dialogRef = await this.formBuilderService
|
|
4092
|
-
.
|
|
4093
|
-
.
|
|
4094
|
-
|
|
4095
|
-
|
|
4096
|
-
|
|
4097
|
-
.
|
|
4098
|
-
|
|
4099
|
-
|
|
4100
|
-
|
|
4101
|
-
|
|
2215
|
+
// Create dialog using new Layout Builder API
|
|
2216
|
+
const dialogRef = await this.formBuilderService
|
|
2217
|
+
.create()
|
|
2218
|
+
.dialog((dialog) => {
|
|
2219
|
+
dialog
|
|
2220
|
+
.setTitle(`Add Field to ${group.title || group.name}`)
|
|
2221
|
+
.setSize('sm')
|
|
2222
|
+
.setCloseButton(true)
|
|
2223
|
+
.setContext({ title: '', widgetType: '' })
|
|
2224
|
+
.content((layoutBuilder) => {
|
|
2225
|
+
layoutBuilder.flex((flex) => {
|
|
2226
|
+
flex
|
|
2227
|
+
.setDirection('column')
|
|
2228
|
+
.setGap('16px')
|
|
2229
|
+
.formField('Field Title', (field) => {
|
|
2230
|
+
field.path('title');
|
|
2231
|
+
field.textBox({
|
|
2232
|
+
placeholder: 'Enter field title',
|
|
2233
|
+
validations: [{ rule: 'required' }],
|
|
2234
|
+
});
|
|
2235
|
+
})
|
|
2236
|
+
.formField('Widget Type', (field) => {
|
|
2237
|
+
field.path('widgetType');
|
|
2238
|
+
field.selectBox({
|
|
2239
|
+
valueField: 'value',
|
|
2240
|
+
textField: 'text',
|
|
2241
|
+
dataSource: this.widgetOptions(),
|
|
2242
|
+
placeholder: 'Select widget type',
|
|
2243
|
+
validations: [{ rule: 'required' }],
|
|
2244
|
+
});
|
|
2245
|
+
});
|
|
4102
2246
|
});
|
|
4103
2247
|
})
|
|
4104
|
-
.
|
|
4105
|
-
field.title('Widget Type')
|
|
4106
|
-
.selectBox({
|
|
4107
|
-
valueField: 'value',
|
|
4108
|
-
textField: 'text',
|
|
4109
|
-
dataSource: this.widgetOptions(),
|
|
4110
|
-
placeholder: 'Select widget type',
|
|
4111
|
-
validations: [{ rule: 'required' }]
|
|
4112
|
-
});
|
|
4113
|
-
});
|
|
2248
|
+
.setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.add.title'));
|
|
4114
2249
|
})
|
|
4115
|
-
.context({ title: '', widgetType: '' })
|
|
4116
|
-
.actions(actions => actions
|
|
4117
|
-
.cancel('@general:actions.cancel.title')
|
|
4118
|
-
.submit('@general:actions.add.title'))
|
|
4119
2250
|
.show();
|
|
4120
2251
|
// Get the form data from the dialog
|
|
4121
2252
|
const formData = dialogRef.context();
|
|
@@ -4141,10 +2272,10 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4141
2272
|
name: this.deriveKey(formData.title),
|
|
4142
2273
|
options: {
|
|
4143
2274
|
// Add validations to widget options
|
|
4144
|
-
validations: []
|
|
4145
|
-
}
|
|
2275
|
+
validations: [],
|
|
2276
|
+
},
|
|
4146
2277
|
},
|
|
4147
|
-
layout: { positions: { sm: { colSpan: 12 } } } // Default full width
|
|
2278
|
+
layout: { positions: { sm: { colSpan: 12 } } }, // Default full width
|
|
4148
2279
|
};
|
|
4149
2280
|
this.addFieldToGroup(field, group.name);
|
|
4150
2281
|
}
|
|
@@ -4160,7 +2291,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4160
2291
|
title: `Edit Field: ${field.title}`,
|
|
4161
2292
|
widget: field.widget,
|
|
4162
2293
|
mode: 'advanced',
|
|
4163
|
-
size: 'md'
|
|
2294
|
+
size: 'md',
|
|
4164
2295
|
});
|
|
4165
2296
|
if (result && result.values) {
|
|
4166
2297
|
// Update the field with the new widget options
|
|
@@ -4168,7 +2299,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4168
2299
|
widget: {
|
|
4169
2300
|
...field.widget,
|
|
4170
2301
|
options: result.values.options || field.widget.options,
|
|
4171
|
-
}
|
|
2302
|
+
},
|
|
4172
2303
|
});
|
|
4173
2304
|
}
|
|
4174
2305
|
}
|
|
@@ -4183,33 +2314,39 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4183
2314
|
async handleGroupEdit(group) {
|
|
4184
2315
|
// Similar to field edit but for group properties
|
|
4185
2316
|
try {
|
|
4186
|
-
const dialogRef = await this.formBuilderService
|
|
4187
|
-
.
|
|
4188
|
-
.
|
|
4189
|
-
|
|
4190
|
-
|
|
4191
|
-
|
|
4192
|
-
.
|
|
4193
|
-
|
|
4194
|
-
|
|
4195
|
-
|
|
4196
|
-
});
|
|
2317
|
+
const dialogRef = await this.formBuilderService
|
|
2318
|
+
.create()
|
|
2319
|
+
.dialog((dialog) => {
|
|
2320
|
+
dialog
|
|
2321
|
+
.setTitle(`Edit Group: ${group.title || group.name}`)
|
|
2322
|
+
.setSize('md')
|
|
2323
|
+
.setCloseButton(true)
|
|
2324
|
+
.setContext({
|
|
2325
|
+
title: group.title || '',
|
|
2326
|
+
description: group.description || '',
|
|
4197
2327
|
})
|
|
4198
|
-
.
|
|
4199
|
-
|
|
4200
|
-
|
|
4201
|
-
|
|
4202
|
-
|
|
2328
|
+
.content((layoutBuilder) => {
|
|
2329
|
+
layoutBuilder.flex((flex) => {
|
|
2330
|
+
flex
|
|
2331
|
+
.setDirection('column')
|
|
2332
|
+
.setGap('16px')
|
|
2333
|
+
.formField('Group Title', (field) => {
|
|
2334
|
+
field.path('title');
|
|
2335
|
+
field.textBox({
|
|
2336
|
+
placeholder: 'Enter group display title',
|
|
2337
|
+
});
|
|
2338
|
+
})
|
|
2339
|
+
.formField('Group Description', (field) => {
|
|
2340
|
+
field.path('description');
|
|
2341
|
+
field.largeTextBox({
|
|
2342
|
+
placeholder: 'Enter group description (optional)',
|
|
2343
|
+
rows: 3,
|
|
2344
|
+
});
|
|
2345
|
+
});
|
|
4203
2346
|
});
|
|
4204
|
-
})
|
|
4205
|
-
|
|
4206
|
-
.context({
|
|
4207
|
-
title: group.title || '',
|
|
4208
|
-
description: group.description || ''
|
|
2347
|
+
})
|
|
2348
|
+
.setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.save.title'));
|
|
4209
2349
|
})
|
|
4210
|
-
.actions(actions => actions
|
|
4211
|
-
.cancel('@general:actions.cancel.title')
|
|
4212
|
-
.submit('@general:actions.save.title'))
|
|
4213
2350
|
.show();
|
|
4214
2351
|
const formData = dialogRef.context();
|
|
4215
2352
|
const action = dialogRef.action();
|
|
@@ -4217,7 +2354,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4217
2354
|
if (action !== 'cancel' && formData) {
|
|
4218
2355
|
this.updateGroup(group.name, {
|
|
4219
2356
|
title: formData.title,
|
|
4220
|
-
description: formData.description
|
|
2357
|
+
description: formData.description,
|
|
4221
2358
|
});
|
|
4222
2359
|
}
|
|
4223
2360
|
}
|
|
@@ -4239,103 +2376,89 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4239
2376
|
async handleFieldLayoutEdit(field, group) {
|
|
4240
2377
|
try {
|
|
4241
2378
|
const currentLayout = field.layout || { positions: {} };
|
|
4242
|
-
//
|
|
4243
|
-
const dialogRef = await this.formBuilderService
|
|
4244
|
-
.
|
|
4245
|
-
.
|
|
4246
|
-
|
|
4247
|
-
|
|
4248
|
-
|
|
4249
|
-
.
|
|
4250
|
-
|
|
4251
|
-
|
|
4252
|
-
|
|
4253
|
-
|
|
4254
|
-
|
|
4255
|
-
.
|
|
4256
|
-
|
|
4257
|
-
|
|
4258
|
-
|
|
4259
|
-
|
|
4260
|
-
|
|
4261
|
-
.
|
|
4262
|
-
|
|
4263
|
-
.numberBox({
|
|
4264
|
-
placeholder: 'How many columns to span (1-12)'
|
|
4265
|
-
});
|
|
4266
|
-
})
|
|
4267
|
-
.field('md_colStart', field => {
|
|
4268
|
-
field.title('Medium Screens - Column Start')
|
|
4269
|
-
.numberBox({
|
|
4270
|
-
placeholder: 'Starting column position (1-12)'
|
|
4271
|
-
});
|
|
4272
|
-
})
|
|
4273
|
-
.field('lg_colSpan', field => {
|
|
4274
|
-
field.title('Large Screens - Column Span')
|
|
4275
|
-
.numberBox({
|
|
4276
|
-
placeholder: 'How many columns to span (1-12)'
|
|
4277
|
-
});
|
|
4278
|
-
})
|
|
4279
|
-
.field('lg_colStart', field => {
|
|
4280
|
-
field.title('Large Screens - Column Start')
|
|
4281
|
-
.numberBox({
|
|
4282
|
-
placeholder: 'Starting column position (1-12)'
|
|
4283
|
-
});
|
|
4284
|
-
})
|
|
4285
|
-
.field('xl_colSpan', field => {
|
|
4286
|
-
field.title('Extra Large Screens - Column Span')
|
|
4287
|
-
.numberBox({
|
|
4288
|
-
placeholder: 'How many columns to span (1-12)'
|
|
4289
|
-
});
|
|
4290
|
-
})
|
|
4291
|
-
.field('xl_colStart', field => {
|
|
4292
|
-
field.title('Extra Large Screens - Column Start')
|
|
4293
|
-
.numberBox({
|
|
4294
|
-
placeholder: 'Starting column position (1-12)'
|
|
4295
|
-
});
|
|
2379
|
+
// Create dialog using new Layout Builder API
|
|
2380
|
+
const dialogRef = await this.formBuilderService
|
|
2381
|
+
.create()
|
|
2382
|
+
.dialog((dialog) => {
|
|
2383
|
+
dialog
|
|
2384
|
+
.setTitle(`Field Layout Settings - ${field.title || field.name}`)
|
|
2385
|
+
.setSize('lg')
|
|
2386
|
+
.setCloseButton(true)
|
|
2387
|
+
.setContext({
|
|
2388
|
+
sm_colSpan: currentLayout.positions?.sm?.colSpan,
|
|
2389
|
+
sm_colStart: currentLayout.positions?.sm?.colStart,
|
|
2390
|
+
md_colSpan: currentLayout.positions?.md?.colSpan,
|
|
2391
|
+
md_colStart: currentLayout.positions?.md?.colStart,
|
|
2392
|
+
lg_colSpan: currentLayout.positions?.lg?.colSpan,
|
|
2393
|
+
lg_colStart: currentLayout.positions?.lg?.colStart,
|
|
2394
|
+
xl_colSpan: currentLayout.positions?.xl?.colSpan,
|
|
2395
|
+
xl_colStart: currentLayout.positions?.xl?.colStart,
|
|
2396
|
+
xxl_colSpan: currentLayout.positions?.xxl?.colSpan,
|
|
2397
|
+
xxl_colStart: currentLayout.positions?.xxl?.colStart,
|
|
2398
|
+
xxxl_colSpan: currentLayout.positions?.xxxl?.colSpan,
|
|
2399
|
+
xxxl_colStart: currentLayout.positions?.xxxl?.colStart,
|
|
4296
2400
|
})
|
|
4297
|
-
.
|
|
4298
|
-
|
|
4299
|
-
|
|
4300
|
-
|
|
4301
|
-
|
|
4302
|
-
|
|
4303
|
-
|
|
4304
|
-
|
|
4305
|
-
|
|
4306
|
-
|
|
4307
|
-
|
|
4308
|
-
|
|
4309
|
-
|
|
4310
|
-
|
|
4311
|
-
|
|
4312
|
-
|
|
2401
|
+
.content((layoutBuilder) => {
|
|
2402
|
+
layoutBuilder.flex((flex) => {
|
|
2403
|
+
flex
|
|
2404
|
+
.setDirection('column')
|
|
2405
|
+
.setGap('16px')
|
|
2406
|
+
.formField('Responsive Layout Configuration (12-Column Grid)', (f) => {
|
|
2407
|
+
f.setShowLabel(false);
|
|
2408
|
+
f.customWidget('spacer');
|
|
2409
|
+
})
|
|
2410
|
+
.formField('Small Screens - Column Span', (f) => {
|
|
2411
|
+
f.path('sm_colSpan');
|
|
2412
|
+
f.numberBox({ placeholder: 'How many columns to span (1-12)' });
|
|
2413
|
+
})
|
|
2414
|
+
.formField('Small Screens - Column Start', (f) => {
|
|
2415
|
+
f.path('sm_colStart');
|
|
2416
|
+
f.numberBox({ placeholder: 'Starting column position (1-12)' });
|
|
2417
|
+
})
|
|
2418
|
+
.formField('Medium Screens - Column Span', (f) => {
|
|
2419
|
+
f.path('md_colSpan');
|
|
2420
|
+
f.numberBox({ placeholder: 'How many columns to span (1-12)' });
|
|
2421
|
+
})
|
|
2422
|
+
.formField('Medium Screens - Column Start', (f) => {
|
|
2423
|
+
f.path('md_colStart');
|
|
2424
|
+
f.numberBox({ placeholder: 'Starting column position (1-12)' });
|
|
2425
|
+
})
|
|
2426
|
+
.formField('Large Screens - Column Span', (f) => {
|
|
2427
|
+
f.path('lg_colSpan');
|
|
2428
|
+
f.numberBox({ placeholder: 'How many columns to span (1-12)' });
|
|
2429
|
+
})
|
|
2430
|
+
.formField('Large Screens - Column Start', (f) => {
|
|
2431
|
+
f.path('lg_colStart');
|
|
2432
|
+
f.numberBox({ placeholder: 'Starting column position (1-12)' });
|
|
2433
|
+
})
|
|
2434
|
+
.formField('Extra Large Screens - Column Span', (f) => {
|
|
2435
|
+
f.path('xl_colSpan');
|
|
2436
|
+
f.numberBox({ placeholder: 'How many columns to span (1-12)' });
|
|
2437
|
+
})
|
|
2438
|
+
.formField('Extra Large Screens - Column Start', (f) => {
|
|
2439
|
+
f.path('xl_colStart');
|
|
2440
|
+
f.numberBox({ placeholder: 'Starting column position (1-12)' });
|
|
2441
|
+
})
|
|
2442
|
+
.formField('2x Large Screens - Column Span', (f) => {
|
|
2443
|
+
f.path('xxl_colSpan');
|
|
2444
|
+
f.numberBox({ placeholder: 'How many columns to span (1-12)' });
|
|
2445
|
+
})
|
|
2446
|
+
.formField('2x Large Screens - Column Start', (f) => {
|
|
2447
|
+
f.path('xxl_colStart');
|
|
2448
|
+
f.numberBox({ placeholder: 'Starting column position (1-12)' });
|
|
2449
|
+
})
|
|
2450
|
+
.formField('3x Large Screens - Column Span', (f) => {
|
|
2451
|
+
f.path('xxxl_colSpan');
|
|
2452
|
+
f.numberBox({ placeholder: 'How many columns to span (1-12)' });
|
|
2453
|
+
})
|
|
2454
|
+
.formField('3x Large Screens - Column Start', (f) => {
|
|
2455
|
+
f.path('xxxl_colStart');
|
|
2456
|
+
f.numberBox({ placeholder: 'Starting column position (1-12)' });
|
|
2457
|
+
});
|
|
4313
2458
|
});
|
|
4314
2459
|
})
|
|
4315
|
-
.
|
|
4316
|
-
field.title('3x Large Screens - Column Start')
|
|
4317
|
-
.numberBox({
|
|
4318
|
-
placeholder: 'Starting column position (1-12)'
|
|
4319
|
-
});
|
|
4320
|
-
});
|
|
4321
|
-
})
|
|
4322
|
-
.context({
|
|
4323
|
-
sm_colSpan: currentLayout.positions?.sm?.colSpan,
|
|
4324
|
-
sm_colStart: currentLayout.positions?.sm?.colStart,
|
|
4325
|
-
md_colSpan: currentLayout.positions?.md?.colSpan,
|
|
4326
|
-
md_colStart: currentLayout.positions?.md?.colStart,
|
|
4327
|
-
lg_colSpan: currentLayout.positions?.lg?.colSpan,
|
|
4328
|
-
lg_colStart: currentLayout.positions?.lg?.colStart,
|
|
4329
|
-
xl_colSpan: currentLayout.positions?.xl?.colSpan,
|
|
4330
|
-
xl_colStart: currentLayout.positions?.xl?.colStart,
|
|
4331
|
-
xxl_colSpan: currentLayout.positions?.xxl?.colSpan,
|
|
4332
|
-
xxl_colStart: currentLayout.positions?.xxl?.colStart,
|
|
4333
|
-
xxxl_colSpan: currentLayout.positions?.xxxl?.colSpan,
|
|
4334
|
-
xxxl_colStart: currentLayout.positions?.xxxl?.colStart,
|
|
2460
|
+
.setActions((actions) => actions.cancel('@general:actions.cancel.title').submit('@general:actions.apply.title'));
|
|
4335
2461
|
})
|
|
4336
|
-
.actions(actions => actions
|
|
4337
|
-
.cancel('@general:actions.cancel.title')
|
|
4338
|
-
.submit('@general:actions.apply.title'))
|
|
4339
2462
|
.show();
|
|
4340
2463
|
// Get the form data and action BEFORE closing
|
|
4341
2464
|
const formData = dialogRef.context();
|
|
@@ -4345,7 +2468,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4345
2468
|
dialogRef.close();
|
|
4346
2469
|
if (action !== 'cancel' && formData) {
|
|
4347
2470
|
const newLayout = {
|
|
4348
|
-
positions: {}
|
|
2471
|
+
positions: {},
|
|
4349
2472
|
};
|
|
4350
2473
|
// Build the layout object from form data
|
|
4351
2474
|
if (formData.sm_colSpan || formData.sm_colStart) {
|
|
@@ -4410,17 +2533,17 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4410
2533
|
return;
|
|
4411
2534
|
if (event.previousContainer === event.container) {
|
|
4412
2535
|
// Same container - just reorder within group
|
|
4413
|
-
const targetGroup = formDef.groups.find(g => g.name === targetGroupName);
|
|
2536
|
+
const targetGroup = formDef.groups.find((g) => g.name === targetGroupName);
|
|
4414
2537
|
if (!targetGroup)
|
|
4415
2538
|
return;
|
|
4416
2539
|
const parameters = [...targetGroup.parameters];
|
|
4417
2540
|
moveItemInArray(parameters, event.previousIndex, event.currentIndex);
|
|
4418
|
-
const updatedGroups = formDef.groups.map(g => g.name === targetGroupName ? { ...g, parameters } : g);
|
|
2541
|
+
const updatedGroups = formDef.groups.map((g) => (g.name === targetGroupName ? { ...g, parameters } : g));
|
|
4419
2542
|
// Set flag to prevent external sync during internal update
|
|
4420
2543
|
this.isInternalUpdate = true;
|
|
4421
2544
|
this.formDefinition.set({
|
|
4422
2545
|
...formDef,
|
|
4423
|
-
groups: updatedGroups
|
|
2546
|
+
groups: updatedGroups,
|
|
4424
2547
|
});
|
|
4425
2548
|
// Reset flag after a delay
|
|
4426
2549
|
setTimeout(() => {
|
|
@@ -4431,8 +2554,8 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4431
2554
|
// Different containers - move field between groups
|
|
4432
2555
|
const sourceGroupName = event.previousContainer.id.replace('group-', '').replace('-fields', '');
|
|
4433
2556
|
const targetGroupName = event.container.id.replace('group-', '').replace('-fields', '');
|
|
4434
|
-
const sourceGroup = formDef.groups.find(g => g.name === sourceGroupName);
|
|
4435
|
-
const targetGroup = formDef.groups.find(g => g.name === targetGroupName);
|
|
2557
|
+
const sourceGroup = formDef.groups.find((g) => g.name === sourceGroupName);
|
|
2558
|
+
const targetGroup = formDef.groups.find((g) => g.name === targetGroupName);
|
|
4436
2559
|
if (!sourceGroup || !targetGroup)
|
|
4437
2560
|
return;
|
|
4438
2561
|
// Get the field being moved
|
|
@@ -4444,7 +2567,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4444
2567
|
const updatedTargetParams = [...targetGroup.parameters];
|
|
4445
2568
|
updatedTargetParams.splice(event.currentIndex, 0, fieldToMove);
|
|
4446
2569
|
// Update both groups
|
|
4447
|
-
const updatedGroups = formDef.groups.map(g => {
|
|
2570
|
+
const updatedGroups = formDef.groups.map((g) => {
|
|
4448
2571
|
if (g.name === sourceGroupName) {
|
|
4449
2572
|
return { ...g, parameters: updatedSourceParams };
|
|
4450
2573
|
}
|
|
@@ -4457,7 +2580,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4457
2580
|
this.isInternalUpdate = true;
|
|
4458
2581
|
this.formDefinition.set({
|
|
4459
2582
|
...formDef,
|
|
4460
|
-
groups: updatedGroups
|
|
2583
|
+
groups: updatedGroups,
|
|
4461
2584
|
});
|
|
4462
2585
|
// Reset flag after a delay
|
|
4463
2586
|
setTimeout(() => {
|
|
@@ -4471,57 +2594,97 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4471
2594
|
// Check if form has content
|
|
4472
2595
|
if (!formDef.groups || formDef.groups.length === 0) {
|
|
4473
2596
|
// Show empty state message
|
|
4474
|
-
const dialogRef = await this.formBuilderService
|
|
4475
|
-
.
|
|
4476
|
-
.
|
|
4477
|
-
|
|
4478
|
-
|
|
4479
|
-
|
|
4480
|
-
|
|
2597
|
+
const dialogRef = await this.formBuilderService
|
|
2598
|
+
.create()
|
|
2599
|
+
.dialog((dialog) => {
|
|
2600
|
+
dialog
|
|
2601
|
+
.setTitle('Form Preview')
|
|
2602
|
+
.setSize('md')
|
|
2603
|
+
.setCloseButton(true)
|
|
2604
|
+
.setContext({})
|
|
2605
|
+
.setActions((actions) => actions.cancel('@general:actions.close.title'));
|
|
2606
|
+
})
|
|
4481
2607
|
.show();
|
|
4482
2608
|
dialogRef.close();
|
|
4483
2609
|
return;
|
|
4484
2610
|
}
|
|
4485
|
-
// Create a dynamic form using the current definition
|
|
4486
|
-
const dialogRef = await this.formBuilderService
|
|
4487
|
-
.
|
|
4488
|
-
.
|
|
4489
|
-
|
|
4490
|
-
|
|
4491
|
-
|
|
4492
|
-
|
|
4493
|
-
|
|
4494
|
-
|
|
4495
|
-
|
|
4496
|
-
|
|
4497
|
-
|
|
4498
|
-
|
|
4499
|
-
|
|
4500
|
-
|
|
4501
|
-
|
|
4502
|
-
|
|
4503
|
-
|
|
4504
|
-
|
|
4505
|
-
|
|
4506
|
-
|
|
4507
|
-
|
|
4508
|
-
|
|
4509
|
-
|
|
4510
|
-
|
|
4511
|
-
|
|
4512
|
-
|
|
4513
|
-
|
|
4514
|
-
|
|
4515
|
-
|
|
4516
|
-
|
|
4517
|
-
|
|
4518
|
-
|
|
4519
|
-
|
|
4520
|
-
|
|
4521
|
-
|
|
4522
|
-
|
|
4523
|
-
|
|
4524
|
-
|
|
2611
|
+
// Create a dynamic form using the current definition with new Layout Builder
|
|
2612
|
+
const dialogRef = await this.formBuilderService
|
|
2613
|
+
.create()
|
|
2614
|
+
.dialog((dialog) => {
|
|
2615
|
+
dialog
|
|
2616
|
+
.setTitle('Form Preview')
|
|
2617
|
+
.setSize('lg')
|
|
2618
|
+
.setCloseButton(true)
|
|
2619
|
+
.setContext({})
|
|
2620
|
+
.content((layoutBuilder) => {
|
|
2621
|
+
layoutBuilder.flex((mainFlex) => {
|
|
2622
|
+
mainFlex.setDirection('column').setGap('20px');
|
|
2623
|
+
for (const group of formDef.groups) {
|
|
2624
|
+
mainFlex.fieldset((fieldset) => {
|
|
2625
|
+
if (group.title)
|
|
2626
|
+
fieldset.setTitle(group.title);
|
|
2627
|
+
if (group.description)
|
|
2628
|
+
fieldset.setDescription(group.description);
|
|
2629
|
+
fieldset.setCols(12);
|
|
2630
|
+
for (const param of group.parameters) {
|
|
2631
|
+
fieldset.formField(param.title || param.path, (f) => {
|
|
2632
|
+
f.path(param.path);
|
|
2633
|
+
if (param.layout) {
|
|
2634
|
+
console.log(`Preview: Applying layout to field ${param.path}:`, param.layout);
|
|
2635
|
+
f.layout(param.layout);
|
|
2636
|
+
}
|
|
2637
|
+
// Map widget types to builder methods
|
|
2638
|
+
const widgetType = param.widget?.type;
|
|
2639
|
+
const opts = param.widget?.options || {};
|
|
2640
|
+
switch (widgetType) {
|
|
2641
|
+
case 'text-editor':
|
|
2642
|
+
f.textBox(opts);
|
|
2643
|
+
break;
|
|
2644
|
+
case 'large-text-editor':
|
|
2645
|
+
f.largeTextBox(opts);
|
|
2646
|
+
break;
|
|
2647
|
+
case 'rich-text-editor':
|
|
2648
|
+
f.richText(opts);
|
|
2649
|
+
break;
|
|
2650
|
+
case 'password-editor':
|
|
2651
|
+
f.passwordBox(opts);
|
|
2652
|
+
break;
|
|
2653
|
+
case 'number-editor':
|
|
2654
|
+
f.numberBox(opts);
|
|
2655
|
+
break;
|
|
2656
|
+
case 'select-editor':
|
|
2657
|
+
f.selectBox(opts);
|
|
2658
|
+
break;
|
|
2659
|
+
case 'lookup-editor':
|
|
2660
|
+
f.lookupBox(opts);
|
|
2661
|
+
break;
|
|
2662
|
+
case 'selection-list-editor':
|
|
2663
|
+
f.selectionList(opts);
|
|
2664
|
+
break;
|
|
2665
|
+
case 'date-time-editor':
|
|
2666
|
+
f.dateTimeBox(opts);
|
|
2667
|
+
break;
|
|
2668
|
+
case 'toggle-editor':
|
|
2669
|
+
f.toggleSwitch(opts);
|
|
2670
|
+
break;
|
|
2671
|
+
case 'color-editor':
|
|
2672
|
+
f.colorBox(opts);
|
|
2673
|
+
break;
|
|
2674
|
+
default:
|
|
2675
|
+
f.customWidget(widgetType, opts);
|
|
2676
|
+
break;
|
|
2677
|
+
}
|
|
2678
|
+
});
|
|
2679
|
+
}
|
|
2680
|
+
});
|
|
2681
|
+
}
|
|
2682
|
+
});
|
|
2683
|
+
})
|
|
2684
|
+
.setActions((actions) => actions.cancel('@general:actions.close.title'));
|
|
2685
|
+
})
|
|
2686
|
+
.show();
|
|
2687
|
+
dialogRef.close();
|
|
4525
2688
|
}
|
|
4526
2689
|
catch (error) {
|
|
4527
2690
|
console.error('Error showing preview:', error);
|
|
@@ -4537,7 +2700,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4537
2700
|
if (!/^[a-zA-Z_]/.test(k))
|
|
4538
2701
|
k = `_${k}`;
|
|
4539
2702
|
const groups = this.formDefinition().groups || [];
|
|
4540
|
-
const exists = (candidate) => groups.some(group => group.parameters.some(param => param.path === candidate));
|
|
2703
|
+
const exists = (candidate) => groups.some((group) => group.parameters.some((param) => param.path === candidate));
|
|
4541
2704
|
if (!exists(k))
|
|
4542
2705
|
return k;
|
|
4543
2706
|
let i = 1;
|
|
@@ -4549,11 +2712,11 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4549
2712
|
return `field_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
|
|
4550
2713
|
}
|
|
4551
2714
|
getWidgetIcon(widgetName) {
|
|
4552
|
-
const widget = this.availableWidgets().find(w => w.name === widgetName);
|
|
2715
|
+
const widget = this.availableWidgets().find((w) => w.name === widgetName);
|
|
4553
2716
|
return widget?.icon ?? 'fa-light fa-square';
|
|
4554
2717
|
}
|
|
4555
2718
|
getWidgetTitle(widgetName) {
|
|
4556
|
-
const widget = this.availableWidgets().find(w => w.name === widgetName);
|
|
2719
|
+
const widget = this.availableWidgets().find((w) => w.name === widgetName);
|
|
4557
2720
|
return widget?.title ?? widgetName;
|
|
4558
2721
|
}
|
|
4559
2722
|
getWidgetNode(field) {
|
|
@@ -4567,7 +2730,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4567
2730
|
if (!/^[a-zA-Z_]/.test(k))
|
|
4568
2731
|
k = `_${k}`;
|
|
4569
2732
|
const groups = this.formDefinition().groups || [];
|
|
4570
|
-
const exists = (candidate) => groups.some(group => group.name === candidate);
|
|
2733
|
+
const exists = (candidate) => groups.some((group) => group.name === candidate);
|
|
4571
2734
|
if (!exists(k))
|
|
4572
2735
|
return k;
|
|
4573
2736
|
let i = 1;
|
|
@@ -4576,31 +2739,36 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4576
2739
|
return `${k}${i}`;
|
|
4577
2740
|
}
|
|
4578
2741
|
getGroupOptions() {
|
|
4579
|
-
return this.formDefinition().groups.map(group => ({
|
|
2742
|
+
return this.formDefinition().groups.map((group) => ({
|
|
4580
2743
|
value: group.name,
|
|
4581
|
-
text: group.title || group.name
|
|
2744
|
+
text: group.title || group.name,
|
|
4582
2745
|
}));
|
|
4583
2746
|
}
|
|
4584
2747
|
addFieldToGroup(field, groupName) {
|
|
4585
2748
|
const currentDefinition = this.formDefinition();
|
|
4586
|
-
const updatedGroups = currentDefinition.groups.map(group => group.name === groupName
|
|
4587
|
-
|
|
4588
|
-
|
|
4589
|
-
|
|
4590
|
-
|
|
4591
|
-
|
|
4592
|
-
|
|
4593
|
-
|
|
4594
|
-
|
|
4595
|
-
|
|
4596
|
-
|
|
2749
|
+
const updatedGroups = currentDefinition.groups.map((group) => group.name === groupName
|
|
2750
|
+
? {
|
|
2751
|
+
...group,
|
|
2752
|
+
parameters: [
|
|
2753
|
+
...group.parameters,
|
|
2754
|
+
{
|
|
2755
|
+
path: field.name,
|
|
2756
|
+
title: field.title,
|
|
2757
|
+
description: field.description,
|
|
2758
|
+
widget: field.widget,
|
|
2759
|
+
mode: field.mode,
|
|
2760
|
+
layout: field.layout,
|
|
2761
|
+
},
|
|
2762
|
+
],
|
|
2763
|
+
}
|
|
2764
|
+
: group);
|
|
4597
2765
|
this.formDefinition.set({
|
|
4598
2766
|
...currentDefinition,
|
|
4599
|
-
groups: updatedGroups
|
|
2767
|
+
groups: updatedGroups,
|
|
4600
2768
|
});
|
|
4601
2769
|
}
|
|
4602
2770
|
getAllGroupDropLists() {
|
|
4603
|
-
return this.designerGroups().map(group => `group-${group.name}-fields`);
|
|
2771
|
+
return this.designerGroups().map((group) => `group-${group.name}-fields`);
|
|
4604
2772
|
}
|
|
4605
2773
|
/**
|
|
4606
2774
|
* Get the grid column count for a group (always 12 columns)
|
|
@@ -4616,18 +2784,18 @@ class AXPDynamicFormDesignerComponent {
|
|
|
4616
2784
|
return {
|
|
4617
2785
|
positions: {
|
|
4618
2786
|
sm: { colSpan: 6 }, // Half width on small screens (6/12)
|
|
4619
|
-
md: { colSpan: 3 }, // 1/4 width on medium screens (3/12)
|
|
2787
|
+
md: { colSpan: 3 }, // 1/4 width on medium screens (3/12)
|
|
4620
2788
|
lg: { colSpan: 3 }, // 1/4 width on large screens (3/12)
|
|
4621
2789
|
xl: { colSpan: 3 }, // 1/4 width on xl screens (3/12)
|
|
4622
2790
|
xxl: { colSpan: 3 }, // 1/4 width on xxl screens (3/12)
|
|
4623
|
-
xxxl: { colSpan: 3 } // 1/4 width on xxxl screens (3/12)
|
|
4624
|
-
}
|
|
2791
|
+
xxxl: { colSpan: 3 }, // 1/4 width on xxxl screens (3/12)
|
|
2792
|
+
},
|
|
4625
2793
|
};
|
|
4626
2794
|
}
|
|
4627
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4628
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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: i1.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2795
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDynamicFormDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2796
|
+
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 }); }
|
|
4629
2797
|
}
|
|
4630
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2798
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPDynamicFormDesignerComponent, decorators: [{
|
|
4631
2799
|
type: Component,
|
|
4632
2800
|
args: [{ selector: 'axp-dynamic-form-designer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
4633
2801
|
CommonModule,
|
|
@@ -4645,9 +2813,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
4645
2813
|
}, 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"] }]
|
|
4646
2814
|
}] });
|
|
4647
2815
|
|
|
4648
|
-
//#region ---- Imports ----
|
|
4649
|
-
//#endregion
|
|
4650
|
-
|
|
4651
2816
|
//#endregion
|
|
4652
2817
|
//#region ---- Injection Tokens ----
|
|
4653
2818
|
/**
|
|
@@ -4898,8 +3063,8 @@ class AXPExtraPropertiesComponent {
|
|
|
4898
3063
|
i++;
|
|
4899
3064
|
return `${k}${i}`;
|
|
4900
3065
|
}
|
|
4901
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4902
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3066
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3067
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: `
|
|
4903
3068
|
<div class="ax-grid ax-grid-cols-12 ax-gap-4">
|
|
4904
3069
|
<axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
|
|
4905
3070
|
<div cdkDropList (cdkDropListDropped)="handleDrop($event)" class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
|
|
@@ -4989,9 +3154,9 @@ class AXPExtraPropertiesComponent {
|
|
|
4989
3154
|
</axp-widgets-container>
|
|
4990
3155
|
</div>
|
|
4991
3156
|
|
|
4992
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1
|
|
3157
|
+
`, 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$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", "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 }); }
|
|
4993
3158
|
}
|
|
4994
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3159
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
|
|
4995
3160
|
type: Component,
|
|
4996
3161
|
args: [{
|
|
4997
3162
|
selector: 'axp-extra-properties',
|
|
@@ -5202,10 +3367,10 @@ class AXPWidgetPropertyViewerComponent {
|
|
|
5202
3367
|
handleCollapsedChange(group, collapsed) {
|
|
5203
3368
|
this.groupCollapsedStates.set(group, collapsed);
|
|
5204
3369
|
}
|
|
5205
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 class=\"ax-h-fit\" [look]=\"'flat'\">\n @for (group of groups(); track $index) {\n <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\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>", 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$2.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$2.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$5.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 }); }
|
|
5207
3372
|
}
|
|
5208
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3373
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
|
|
5209
3374
|
type: Component,
|
|
5210
3375
|
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 class=\"ax-h-fit\" [look]=\"'flat'\">\n @for (group of groups(); track $index) {\n <ax-accordion-item class=\"!ax-mb-0\" [caption]=\"group.title\" [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\">\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>", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"] }]
|
|
5211
3376
|
}], ctorParameters: () => [], propDecorators: { onChanged: [{
|
|
@@ -5337,10 +3502,10 @@ class AXPExtraPropertiesSchemaComponent {
|
|
|
5337
3502
|
i++;
|
|
5338
3503
|
return `${k}${i}`;
|
|
5339
3504
|
}
|
|
5340
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5341
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.3", 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$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$3.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", "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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3505
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3506
|
+
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", "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 }); }
|
|
5342
3507
|
}
|
|
5343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3508
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
|
|
5344
3509
|
type: Component,
|
|
5345
3510
|
args: [{ selector: 'axp-extra-properties-schema', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
5346
3511
|
CommonModule,
|
|
@@ -5458,8 +3623,8 @@ class AXPExtraPropertiesValuesComponent {
|
|
|
5458
3623
|
}
|
|
5459
3624
|
return node;
|
|
5460
3625
|
}
|
|
5461
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5462
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3626
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3627
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: `
|
|
5463
3628
|
<div class="ax-grid ax-grid-cols-12 ax-gap-4">
|
|
5464
3629
|
<axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
|
|
5465
3630
|
<div class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
|
|
@@ -5491,7 +3656,7 @@ class AXPExtraPropertiesValuesComponent {
|
|
|
5491
3656
|
</div>
|
|
5492
3657
|
`, 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$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"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5493
3658
|
}
|
|
5494
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3659
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPExtraPropertiesValuesComponent, decorators: [{
|
|
5495
3660
|
type: Component,
|
|
5496
3661
|
args: [{
|
|
5497
3662
|
selector: 'axp-extra-properties-values',
|
|
@@ -5766,10 +3931,10 @@ class AXPQueryFiltersComponent {
|
|
|
5766
3931
|
}
|
|
5767
3932
|
}
|
|
5768
3933
|
#effect2;
|
|
5769
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5770
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3934
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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.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: 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: i4$5.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"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { 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: i8.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 }); }
|
|
5771
3936
|
}
|
|
5772
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3937
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
|
|
5773
3938
|
type: Component,
|
|
5774
3939
|
args: [{ selector: 'axp-query-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
5775
3940
|
CommonModule,
|
|
@@ -5795,7 +3960,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
5795
3960
|
this.fileStorage = inject(AXPFileStorageService);
|
|
5796
3961
|
this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : []));
|
|
5797
3962
|
this.showHistory = input(true, ...(ngDevMode ? [{ debugName: "showHistory" }] : []));
|
|
5798
|
-
this.look = input('
|
|
3963
|
+
this.look = input('blank', ...(ngDevMode ? [{ debugName: "look" }] : []));
|
|
5799
3964
|
this.container = viewChild(AXImageEditorContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
|
|
5800
3965
|
this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : []));
|
|
5801
3966
|
this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : []));
|
|
@@ -5837,10 +4002,10 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
5837
4002
|
URL.revokeObjectURL(prev);
|
|
5838
4003
|
}
|
|
5839
4004
|
}
|
|
5840
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5841
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4005
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4006
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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: `
|
|
5842
4007
|
<ax-form class="ax-flex ax-justify-center">
|
|
5843
|
-
<ax-form-field>
|
|
4008
|
+
<ax-form-field class="ax-p-2">
|
|
5844
4009
|
<ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
|
|
5845
4010
|
<ax-header>
|
|
5846
4011
|
<ax-toolbar>
|
|
@@ -5855,22 +4020,19 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
5855
4020
|
</ax-image-editor-container>
|
|
5856
4021
|
</ax-form-field>
|
|
5857
4022
|
</ax-form>
|
|
5858
|
-
<ax-footer class="ax-flex ax-justify-end ax-gap-2
|
|
4023
|
+
<ax-footer class="ax-flex ax-justify-end ax-gap-2">
|
|
5859
4024
|
<ax-suffix>
|
|
5860
|
-
<ax-button
|
|
4025
|
+
<ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
|
|
5861
4026
|
</ax-button>
|
|
5862
|
-
<ax-button look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
|
|
4027
|
+
<ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
|
|
5863
4028
|
</ax-button>
|
|
5864
4029
|
</ax-suffix>
|
|
5865
4030
|
</ax-footer>
|
|
5866
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$
|
|
4031
|
+
`, 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$3.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$3.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$3.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$4.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" }] }); }
|
|
5867
4032
|
}
|
|
5868
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4033
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
|
|
5869
4034
|
type: Component,
|
|
5870
|
-
args: [{
|
|
5871
|
-
standalone: true,
|
|
5872
|
-
selector: 'axp-image-editor-popup',
|
|
5873
|
-
imports: [
|
|
4035
|
+
args: [{ standalone: true, selector: 'axp-image-editor-popup', imports: [
|
|
5874
4036
|
CommonModule,
|
|
5875
4037
|
AXImageEditorModule,
|
|
5876
4038
|
AXFormModule,
|
|
@@ -5878,10 +4040,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
5878
4040
|
AXDecoratorModule,
|
|
5879
4041
|
AXButtonModule,
|
|
5880
4042
|
AXTranslationModule,
|
|
5881
|
-
],
|
|
5882
|
-
template: `
|
|
4043
|
+
], template: `
|
|
5883
4044
|
<ax-form class="ax-flex ax-justify-center">
|
|
5884
|
-
<ax-form-field>
|
|
4045
|
+
<ax-form-field class="ax-p-2">
|
|
5885
4046
|
<ax-image-editor-container #container [look]="look()" (onValueChanged)="handleValueChanged($event)">
|
|
5886
4047
|
<ax-header>
|
|
5887
4048
|
<ax-toolbar>
|
|
@@ -5896,16 +4057,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
5896
4057
|
</ax-image-editor-container>
|
|
5897
4058
|
</ax-form-field>
|
|
5898
4059
|
</ax-form>
|
|
5899
|
-
<ax-footer class="ax-flex ax-justify-end ax-gap-2
|
|
4060
|
+
<ax-footer class="ax-flex ax-justify-end ax-gap-2">
|
|
5900
4061
|
<ax-suffix>
|
|
5901
|
-
<ax-button
|
|
4062
|
+
<ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
|
|
5902
4063
|
</ax-button>
|
|
5903
|
-
<ax-button look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
|
|
4064
|
+
<ax-button color="primary" look="solid" (onClick)="handleSave()" [text]="'@general:actions.save.title' | translate | async">
|
|
5904
4065
|
</ax-button>
|
|
5905
4066
|
</ax-suffix>
|
|
5906
4067
|
</ax-footer>
|
|
5907
|
-
`,
|
|
5908
|
-
}]
|
|
4068
|
+
`, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"] }]
|
|
5909
4069
|
}] });
|
|
5910
4070
|
|
|
5911
4071
|
var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
|
|
@@ -5930,10 +4090,10 @@ class AXPImageEditorService {
|
|
|
5930
4090
|
});
|
|
5931
4091
|
return result?.data?.data?.image ?? null;
|
|
5932
4092
|
}
|
|
5933
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5934
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
4093
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4094
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorService, providedIn: 'root' }); }
|
|
5935
4095
|
}
|
|
5936
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4096
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPImageEditorService, decorators: [{
|
|
5937
4097
|
type: Injectable,
|
|
5938
4098
|
args: [{ providedIn: 'root' }]
|
|
5939
4099
|
}] });
|
|
@@ -5962,8 +4122,8 @@ class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
|
5962
4122
|
mode: 'update'
|
|
5963
4123
|
});
|
|
5964
4124
|
}
|
|
5965
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5966
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
4125
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4126
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.4", 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: `
|
|
5967
4127
|
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
5968
4128
|
<axp-widget-property-viewer
|
|
5969
4129
|
[widget]="widget()"
|
|
@@ -5987,9 +4147,9 @@ class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
|
5987
4147
|
</ax-button>
|
|
5988
4148
|
</ax-suffix>
|
|
5989
4149
|
</ax-footer>
|
|
5990
|
-
`, 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:
|
|
4150
|
+
`, 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 }); }
|
|
5991
4151
|
}
|
|
5992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
|
|
5993
4153
|
type: Component,
|
|
5994
4154
|
args: [{
|
|
5995
4155
|
selector: 'axp-widget-property-viewer-popup',
|
|
@@ -6081,10 +4241,10 @@ class AXPQuerySortsComponent {
|
|
|
6081
4241
|
});
|
|
6082
4242
|
});
|
|
6083
4243
|
}
|
|
6084
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6085
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4244
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4245
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 }); }
|
|
6086
4246
|
}
|
|
6087
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4247
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
|
|
6088
4248
|
type: Component,
|
|
6089
4249
|
args: [{ selector: 'axp-query-sorts', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
6090
4250
|
CdkDropList,
|
|
@@ -6171,8 +4331,8 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
|
6171
4331
|
metadata: this.config?.metadata
|
|
6172
4332
|
});
|
|
6173
4333
|
}
|
|
6174
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6175
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4334
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4335
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", type: AXPTemplateViewerComponent, isStandalone: true, selector: "axp-template-viewer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: `
|
|
6176
4336
|
<div class="ax-p-4 ax-min-h-64">
|
|
6177
4337
|
<ax-form #form>
|
|
6178
4338
|
<axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)" >
|
|
@@ -6191,9 +4351,9 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
|
6191
4351
|
</ax-suffix>
|
|
6192
4352
|
</ax-footer>
|
|
6193
4353
|
}
|
|
6194
|
-
`, 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$4.AXFormComponent, selector: "ax-form", inputs: ["labelMode", "look", "messageStyle", "updateOn"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type:
|
|
4354
|
+
`, 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$4.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 }); }
|
|
6195
4355
|
}
|
|
6196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4356
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
|
|
6197
4357
|
type: Component,
|
|
6198
4358
|
args: [{
|
|
6199
4359
|
selector: 'axp-template-viewer',
|
|
@@ -6262,10 +4422,10 @@ class AXPTemplateViewerService {
|
|
|
6262
4422
|
showActions: false
|
|
6263
4423
|
});
|
|
6264
4424
|
}
|
|
6265
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6266
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
4425
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4426
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerService, providedIn: 'root' }); }
|
|
6267
4427
|
}
|
|
6268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4428
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPTemplateViewerService, decorators: [{
|
|
6269
4429
|
type: Injectable,
|
|
6270
4430
|
args: [{
|
|
6271
4431
|
providedIn: 'root'
|
|
@@ -6405,10 +4565,10 @@ class AXPUserAvatarService {
|
|
|
6405
4565
|
throw error;
|
|
6406
4566
|
}
|
|
6407
4567
|
}
|
|
6408
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6409
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
4568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4569
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarService, providedIn: 'root' }); }
|
|
6410
4570
|
}
|
|
6411
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarService, decorators: [{
|
|
6412
4572
|
type: Injectable,
|
|
6413
4573
|
args: [{
|
|
6414
4574
|
providedIn: 'root',
|
|
@@ -6430,7 +4590,7 @@ class AXPUserAvatarComponent {
|
|
|
6430
4590
|
this.isOnline = computed(() => this.userInfo()?.status === 'online', ...(ngDevMode ? [{ debugName: "isOnline" }] : []));
|
|
6431
4591
|
this.avatarText = computed(() => this.getInitials(), ...(ngDevMode ? [{ debugName: "avatarText" }] : []));
|
|
6432
4592
|
this.avatarColor = computed(() => this.pickColor(this.avatarText()), ...(ngDevMode ? [{ debugName: "avatarColor" }] : []));
|
|
6433
|
-
this.hasPicture = signal(
|
|
4593
|
+
this.hasPicture = signal(true, ...(ngDevMode ? [{ debugName: "hasPicture" }] : []));
|
|
6434
4594
|
}
|
|
6435
4595
|
onImageError(event) {
|
|
6436
4596
|
this.hasPicture.set(false);
|
|
@@ -6498,17 +4658,12 @@ class AXPUserAvatarComponent {
|
|
|
6498
4658
|
const idx = this.hashString(initials) % colors.length;
|
|
6499
4659
|
return colors[idx];
|
|
6500
4660
|
}
|
|
6501
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6502
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4661
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4662
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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(hasPicture()){\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-->\n", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$4.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 }); }
|
|
6503
4663
|
}
|
|
6504
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4664
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
|
|
6505
4665
|
type: Component,
|
|
6506
|
-
args: [{ selector: 'axp-user-avatar', imports: [
|
|
6507
|
-
AXAvatarModule,
|
|
6508
|
-
AXDecoratorModule,
|
|
6509
|
-
AXImageModule,
|
|
6510
|
-
AXBadgeModule
|
|
6511
|
-
], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n @if(hasPicture()){\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-->\n" }]
|
|
4666
|
+
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(hasPicture()){\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-->\n" }]
|
|
6512
4667
|
}] });
|
|
6513
4668
|
|
|
6514
4669
|
class AXPQueryViewsComponent {
|
|
@@ -6543,10 +4698,10 @@ class AXPQueryViewsComponent {
|
|
|
6543
4698
|
handleActiveChange(e) {
|
|
6544
4699
|
console.log(e);
|
|
6545
4700
|
}
|
|
6546
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6547
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4701
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4702
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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$5.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i2$5.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 }); }
|
|
6548
4703
|
}
|
|
6549
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4704
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPQueryViewsComponent, decorators: [{
|
|
6550
4705
|
type: Component,
|
|
6551
4706
|
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" }]
|
|
6552
4707
|
}] });
|
|
@@ -6597,10 +4752,10 @@ class AXPWidgetItemComponent {
|
|
|
6597
4752
|
getIconClass() {
|
|
6598
4753
|
return this.widget().icon || 'fa-light fa-document';
|
|
6599
4754
|
}
|
|
6600
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
6601
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4755
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4756
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.4", 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 }); }
|
|
6602
4757
|
}
|
|
6603
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4758
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.4", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
|
|
6604
4759
|
type: Component,
|
|
6605
4760
|
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>" }]
|
|
6606
4761
|
}] });
|
|
@@ -6609,5 +4764,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.3", ngImpor
|
|
|
6609
4764
|
* Generated bundle index. Do not edit.
|
|
6610
4765
|
*/
|
|
6611
4766
|
|
|
6612
|
-
export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService,
|
|
4767
|
+
export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, 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 };
|
|
6613
4768
|
//# sourceMappingURL=acorex-platform-layout-components.mjs.map
|