@acorex/platform 20.6.0-next.2 → 20.6.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/common/index.d.ts +7 -3
- package/core/index.d.ts +210 -56
- package/fesm2022/acorex-platform-auth.mjs +19 -19
- package/fesm2022/acorex-platform-auth.mjs.map +1 -1
- package/fesm2022/{acorex-platform-common-common-settings.provider-CLb2KMfv.mjs → acorex-platform-common-common-settings.provider-zhqNP3xb.mjs} +28 -4
- package/fesm2022/acorex-platform-common-common-settings.provider-zhqNP3xb.mjs.map +1 -0
- package/fesm2022/acorex-platform-common.mjs +104 -103
- package/fesm2022/acorex-platform-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-core.mjs +279 -78
- package/fesm2022/acorex-platform-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-domain.mjs +65 -20
- package/fesm2022/acorex-platform-domain.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-builder.mjs +56 -135
- package/fesm2022/acorex-platform-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-components.mjs +1322 -409
- package/fesm2022/acorex-platform-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-designer.mjs +73 -73
- package/fesm2022/acorex-platform-layout-designer.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-entity.mjs +7736 -3813
- package/fesm2022/acorex-platform-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-views.mjs +58 -40
- package/fesm2022/acorex-platform-layout-views.mjs.map +1 -1
- package/fesm2022/acorex-platform-layout-widget-core.mjs +91 -82
- package/fesm2022/acorex-platform-layout-widget-core.mjs.map +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-button-widget-designer.component-lHfg4JFJ.mjs → acorex-platform-layout-widgets-button-widget-designer.component-C3VoBb_b.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-button-widget-designer.component-lHfg4JFJ.mjs.map → acorex-platform-layout-widgets-button-widget-designer.component-C3VoBb_b.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CMSnecnD.mjs → acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-fhhZOWul.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-CMSnecnD.mjs.map → acorex-platform-layout-widgets-extra-properties-schema-widget-edit.component-fhhZOWul.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-DN-sIFYe.mjs → acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-C3Qbs0fz.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-DN-sIFYe.mjs.map → acorex-platform-layout-widgets-extra-properties-schema-widget-view.component-C3Qbs0fz.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-Bn9w0SEz.mjs → acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-CngQBUlN.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-Bn9w0SEz.mjs.map → acorex-platform-layout-widgets-extra-properties-values-widget-edit.component-CngQBUlN.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-view.component-B8mgcvoX.mjs → acorex-platform-layout-widgets-extra-properties-values-widget-view.component-DSNo9e4W.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-values-widget-view.component-B8mgcvoX.mjs.map → acorex-platform-layout-widgets-extra-properties-values-widget-view.component-DSNo9e4W.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-edit.component-Bhof2SY8.mjs → acorex-platform-layout-widgets-extra-properties-widget-edit.component-CL0CwEHX.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-edit.component-Bhof2SY8.mjs.map → acorex-platform-layout-widgets-extra-properties-widget-edit.component-CL0CwEHX.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-view.component-CeQIvKVV.mjs → acorex-platform-layout-widgets-extra-properties-widget-view.component-B6Fi0xTw.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-extra-properties-widget-view.component-CeQIvKVV.mjs.map → acorex-platform-layout-widgets-extra-properties-widget-view.component-B6Fi0xTw.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-file-list-popup.component-BOP7jFp4.mjs → acorex-platform-layout-widgets-file-list-popup.component-D0y-9nE5.mjs} +6 -6
- package/fesm2022/{acorex-platform-layout-widgets-file-list-popup.component-BOP7jFp4.mjs.map → acorex-platform-layout-widgets-file-list-popup.component-D0y-9nE5.mjs.map} +1 -1
- package/fesm2022/acorex-platform-layout-widgets-image-preview.popup-V31OpYah.mjs +30 -0
- package/fesm2022/acorex-platform-layout-widgets-image-preview.popup-V31OpYah.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-page-widget-designer.component-C57lyBs3.mjs → acorex-platform-layout-widgets-page-widget-designer.component-BtZMBxYp.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-page-widget-designer.component-C57lyBs3.mjs.map → acorex-platform-layout-widgets-page-widget-designer.component-BtZMBxYp.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-edit-popup.component-fr77M8Z0.mjs → acorex-platform-layout-widgets-tabular-data-edit-popup.component-m8rHZP8L.mjs} +6 -6
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-m8rHZP8L.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-tabular-data-view-popup.component-CvZTRhct.mjs → acorex-platform-layout-widgets-tabular-data-view-popup.component-y8vjUiVs.mjs} +5 -5
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-view-popup.component-y8vjUiVs.mjs.map +1 -0
- package/fesm2022/{acorex-platform-layout-widgets-text-block-widget-designer.component-DHES_0ot.mjs → acorex-platform-layout-widgets-text-block-widget-designer.component-Df1BFkSa.mjs} +4 -4
- package/fesm2022/{acorex-platform-layout-widgets-text-block-widget-designer.component-DHES_0ot.mjs.map → acorex-platform-layout-widgets-text-block-widget-designer.component-Df1BFkSa.mjs.map} +1 -1
- package/fesm2022/acorex-platform-layout-widgets.mjs +3809 -2060
- 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 +119 -43
- package/fesm2022/acorex-platform-runtime.mjs.map +1 -1
- package/fesm2022/{acorex-platform-themes-default-entity-master-create-view.component-C_XmJV7Y.mjs → acorex-platform-themes-default-entity-master-create-view.component-mARj77Mr.mjs} +30 -9
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-mARj77Mr.mjs.map +1 -0
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-D5K0XUqM.mjs +1522 -0
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-D5K0XUqM.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-modify-view.component-DJPDil7w.mjs → acorex-platform-themes-default-entity-master-modify-view.component-BTA6h7Xd.mjs} +4 -4
- package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-BTA6h7Xd.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-entity-master-single-view.component-BArdGNfr.mjs → acorex-platform-themes-default-entity-master-single-view.component-B_P0a5KW.mjs} +7 -7
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-B_P0a5KW.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-default-error-401.component-D7rEInHg.mjs → acorex-platform-themes-default-error-401.component-cfREo88K.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-error-401.component-D7rEInHg.mjs.map → acorex-platform-themes-default-error-401.component-cfREo88K.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-default-error-404.component-BTZlVrd8.mjs → acorex-platform-themes-default-error-404.component-CdCV5ZoA.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-error-404.component-BTZlVrd8.mjs.map → acorex-platform-themes-default-error-404.component-CdCV5ZoA.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-default-error-offline.component-BhvEi6nX.mjs → acorex-platform-themes-default-error-offline.component-E7SzBcAt.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-default-error-offline.component-BhvEi6nX.mjs.map → acorex-platform-themes-default-error-offline.component-E7SzBcAt.mjs.map} +1 -1
- package/fesm2022/acorex-platform-themes-default.mjs +156 -53
- package/fesm2022/acorex-platform-themes-default.mjs.map +1 -1
- package/fesm2022/acorex-platform-themes-shared-icon-chooser-column.component-C0EpfU2k.mjs +55 -0
- package/fesm2022/acorex-platform-themes-shared-icon-chooser-column.component-C0EpfU2k.mjs.map +1 -0
- package/fesm2022/{acorex-platform-themes-shared-icon-chooser-view.component-BXV40gay.mjs → acorex-platform-themes-shared-icon-chooser-view.component-9W52W6Nu.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-shared-icon-chooser-view.component-BXV40gay.mjs.map → acorex-platform-themes-shared-icon-chooser-view.component-9W52W6Nu.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-column.component-BpIf4s53.mjs → acorex-platform-themes-shared-theme-color-chooser-column.component-DTnfRy5f.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-column.component-BpIf4s53.mjs.map → acorex-platform-themes-shared-theme-color-chooser-column.component-DTnfRy5f.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-view.component-C9gvfQfX.mjs → acorex-platform-themes-shared-theme-color-chooser-view.component-DY0JtT1v.mjs} +4 -4
- package/fesm2022/{acorex-platform-themes-shared-theme-color-chooser-view.component-C9gvfQfX.mjs.map → acorex-platform-themes-shared-theme-color-chooser-view.component-DY0JtT1v.mjs.map} +1 -1
- package/fesm2022/acorex-platform-themes-shared.mjs +58 -153
- package/fesm2022/acorex-platform-themes-shared.mjs.map +1 -1
- package/fesm2022/acorex-platform-workflow.mjs +327 -151
- package/fesm2022/acorex-platform-workflow.mjs.map +1 -1
- package/layout/builder/index.d.ts +6 -33
- package/layout/components/index.d.ts +306 -61
- package/layout/designer/index.d.ts +1 -1
- package/layout/entity/index.d.ts +595 -94
- package/layout/views/index.d.ts +6 -58
- package/layout/widget-core/index.d.ts +31 -26
- package/layout/widgets/README.md +0 -1
- package/layout/widgets/index.d.ts +325 -99
- package/package.json +1 -1
- package/runtime/index.d.ts +36 -8
- package/themes/default/index.d.ts +32 -77
- package/themes/shared/index.d.ts +1 -39
- package/workflow/index.d.ts +909 -457
- package/fesm2022/acorex-platform-common-common-settings.provider-CLb2KMfv.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-entity-create-entity.command-BsLbiAdA.mjs +0 -52
- package/fesm2022/acorex-platform-layout-entity-create-entity.command-BsLbiAdA.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-edit-popup.component-fr77M8Z0.mjs.map +0 -1
- package/fesm2022/acorex-platform-layout-widgets-tabular-data-view-popup.component-CvZTRhct.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-create-view.component-C_XmJV7Y.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-BkY9HXcT.mjs +0 -782
- package/fesm2022/acorex-platform-themes-default-entity-master-list-view.component-BkY9HXcT.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-modify-view.component-DJPDil7w.mjs.map +0 -1
- package/fesm2022/acorex-platform-themes-default-entity-master-single-view.component-BArdGNfr.mjs.map +0 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import * as i5$
|
|
1
|
+
import * as i5$2 from '@acorex/components/button';
|
|
2
2
|
import { AXButtonModule } from '@acorex/components/button';
|
|
3
3
|
import * as i1$2 from '@acorex/cdk/common';
|
|
4
4
|
import { AXCommonModule } from '@acorex/cdk/common';
|
|
@@ -15,18 +15,18 @@ import { AXPWorkflowService } from '@acorex/platform/workflow';
|
|
|
15
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, EventEmitter, untracked, Output, linkedSignal, HostListener, 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 i1 from '@acorex/components/badge';
|
|
23
23
|
import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
|
|
24
|
-
import * as i4$2 from '@acorex/components/search-box';
|
|
25
|
-
import { AXSearchBoxModule } from '@acorex/components/search-box';
|
|
26
|
-
import * as i2$2 from '@acorex/components/tree-view';
|
|
27
|
-
import { AXTreeViewModule } from '@acorex/components/tree-view';
|
|
28
24
|
import * as i6 from '@acorex/components/dropdown';
|
|
29
25
|
import { AXDropdownModule } from '@acorex/components/dropdown';
|
|
26
|
+
import * as i5$1 from '@acorex/components/search-box';
|
|
27
|
+
import { AXSearchBoxModule } from '@acorex/components/search-box';
|
|
28
|
+
import * as i2$2 from '@acorex/components/tree-view-legacy';
|
|
29
|
+
import { AXTreeViewLegacyModule } from '@acorex/components/tree-view-legacy';
|
|
30
30
|
import * as i2$3 from '@acorex/components/popover';
|
|
31
31
|
import { AXPopoverModule } from '@acorex/components/popover';
|
|
32
32
|
import * as i3 from '@acorex/components/switch';
|
|
@@ -35,34 +35,34 @@ import * as i3$3 from '@angular/cdk/drag-drop';
|
|
|
35
35
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, DragDropModule } from '@angular/cdk/drag-drop';
|
|
36
36
|
import * as i1$1 from '@angular/forms';
|
|
37
37
|
import { FormsModule } from '@angular/forms';
|
|
38
|
-
import { cloneDeep, sortBy, isEmpty,
|
|
39
|
-
import * as i2$
|
|
38
|
+
import { cloneDeep, sortBy, isNil, isEmpty, merge, unionBy, isArray, set, isEqual, get, camelCase, capitalize } from 'lodash-es';
|
|
39
|
+
import * as i2$6 from '@acorex/components/form';
|
|
40
40
|
import { AXFormModule } from '@acorex/components/form';
|
|
41
|
-
import * as i4$
|
|
41
|
+
import * as i4$3 from '@acorex/components/text-box';
|
|
42
42
|
import { AXTextBoxModule } from '@acorex/components/text-box';
|
|
43
43
|
import * as i2$4 from '@acorex/components/check-box';
|
|
44
44
|
import { AXCheckBoxModule } from '@acorex/components/check-box';
|
|
45
45
|
import * as i3$1 from '@acorex/components/label';
|
|
46
46
|
import { AXLabelModule } from '@acorex/components/label';
|
|
47
47
|
import * as i3$2 from '@acorex/platform/layout/widget-core';
|
|
48
|
-
import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetGroupEnum, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
|
|
49
|
-
import * as i4$
|
|
48
|
+
import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetGroupEnum, createStringProperty, AXPWidgetsCatalog } from '@acorex/platform/layout/widget-core';
|
|
49
|
+
import * as i4$2 from '@acorex/components/data-table';
|
|
50
50
|
import { AXDataTableModule } from '@acorex/components/data-table';
|
|
51
51
|
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
|
|
52
52
|
import { AXBasePageComponent } from '@acorex/components/page';
|
|
53
53
|
import { AXPopupService } from '@acorex/components/popup';
|
|
54
54
|
import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
|
|
55
55
|
import { AXPLayoutBuilderService } from '@acorex/platform/layout/builder';
|
|
56
|
-
import * as i5$2 from '@acorex/components/select-box';
|
|
57
|
-
import { AXSelectBoxModule } from '@acorex/components/select-box';
|
|
58
56
|
import * as i1$3 from '@acorex/components/accordion';
|
|
59
57
|
import { AXAccordionModule } from '@acorex/components/accordion';
|
|
60
|
-
import * as i2$
|
|
58
|
+
import * as i2$5 from '@acorex/components/tabs';
|
|
61
59
|
import { AXTabsModule } from '@acorex/components/tabs';
|
|
60
|
+
import * as i5$3 from '@acorex/components/select-box';
|
|
61
|
+
import { AXSelectBoxModule } from '@acorex/components/select-box';
|
|
62
62
|
import * as i7 from '@acorex/cdk/list-navigation';
|
|
63
63
|
import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
|
|
64
64
|
import { AXSelectionListModule } from '@acorex/components/selection-list';
|
|
65
|
-
import * as i5$
|
|
65
|
+
import * as i5$4 from '@acorex/components/tag-box';
|
|
66
66
|
import { AXTagBoxModule } from '@acorex/components/tag-box';
|
|
67
67
|
import { AXCalendarService } from '@acorex/core/date-time';
|
|
68
68
|
import { AXPFilterOperatorMiddlewareService, ALL_DEFAULT_OPERATORS, AXPFileStorageService } from '@acorex/platform/common';
|
|
@@ -91,10 +91,10 @@ class AXPStateMessageComponent {
|
|
|
91
91
|
// Optional styling
|
|
92
92
|
this.variant = input('default', ...(ngDevMode ? [{ debugName: "variant" }] : []));
|
|
93
93
|
}
|
|
94
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
95
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.
|
|
94
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStateMessageComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
95
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", type: AXPStateMessageComponent, isStandalone: true, selector: "axp-state-message", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, description: { classPropertyName: "description", publicName: "description", isSignal: true, isRequired: false, transformFunction: null }, variant: { classPropertyName: "variant", publicName: "variant", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-variant]=\"variant()\">\n <div class=\"__icon\" *ngIf=\"icon()\">\n <i [class]=\"icon()\"></i>\n </div>\n <div class=\"__content\">\n <h3 class=\"__title\" *ngIf=\"title()\">{{ title() | translate | async }}</h3>\n <p class=\"__description\" *ngIf=\"description()\">{{ description() | translate | async }}</p>\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-variant=compact]{padding:1.5rem .75rem}.axp-state-message[data-variant=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-variant=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-variant=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-variant=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-variant=minimal]{padding:1rem .5rem}.axp-state-message[data-variant=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-variant=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-variant=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-variant=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
96
96
|
}
|
|
97
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
97
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPStateMessageComponent, decorators: [{
|
|
98
98
|
type: Component,
|
|
99
99
|
args: [{ selector: 'axp-state-message', standalone: true, imports: [CommonModule, AXTranslationModule], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"axp-state-message\" [attr.data-mode]=\"mode()\" [attr.data-variant]=\"variant()\">\n <div class=\"__icon\" *ngIf=\"icon()\">\n <i [class]=\"icon()\"></i>\n </div>\n <div class=\"__content\">\n <h3 class=\"__title\" *ngIf=\"title()\">{{ title() | translate | async }}</h3>\n <p class=\"__description\" *ngIf=\"description()\">{{ description() | translate | async }}</p>\n <div class=\"__actions\">\n <ng-content select=\"[slot=actions]\"></ng-content>\n </div>\n </div>\n</div>\n", styles: [".axp-state-message{display:flex;height:100%;flex-direction:column;align-items:center;justify-content:center;padding:3rem 1rem;text-align:center}.axp-state-message .__icon{margin-bottom:1rem}.axp-state-message .__icon i{opacity:74%;display:block;font-weight:400;font-size:2.25rem!important;line-height:2.5rem!important}.axp-state-message .__content{max-width:28rem}.axp-state-message .__title{margin-bottom:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:500}.axp-state-message .__description{margin-bottom:1rem;opacity:74%;display:block;font-weight:400;font-size:.875rem!important;line-height:1.25rem!important}.axp-state-message .__actions{display:flex;flex-direction:column;align-items:center;gap:.5rem}.axp-state-message[data-mode=empty] .__icon i{--tw-text-opacity: 1;color:rgb(156 163 175 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__icon i{--tw-text-opacity: 1;color:rgb(239 68 68 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=error] .__title{--tw-text-opacity: 1;color:rgb(220 38 38 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=loading] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__icon i{--tw-text-opacity: 1;color:rgb(249 115 22 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=warning] .__title{--tw-text-opacity: 1;color:rgb(234 88 12 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__icon i{--tw-text-opacity: 1;color:rgb(59 130 246 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=info] .__title{--tw-text-opacity: 1;color:rgb(37 99 235 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__icon i{--tw-text-opacity: 1;color:rgb(34 197 94 / var(--tw-text-opacity, 1))}.axp-state-message[data-mode=success] .__title{--tw-text-opacity: 1;color:rgb(22 163 74 / var(--tw-text-opacity, 1))}.axp-state-message[data-variant=compact]{padding:1.5rem .75rem}.axp-state-message[data-variant=compact] .__icon{margin-bottom:.5rem}.axp-state-message[data-variant=compact] .__icon i{font-size:1.5rem!important;line-height:2rem!important}.axp-state-message[data-variant=compact] .__title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem}.axp-state-message[data-variant=compact] .__description{margin-bottom:.5rem;font-size:.75rem;line-height:1rem}.axp-state-message[data-variant=minimal]{padding:1rem .5rem}.axp-state-message[data-variant=minimal] .__icon{margin-bottom:.25rem}.axp-state-message[data-variant=minimal] .__icon i{font-size:1.25rem!important;line-height:1.75rem!important}.axp-state-message[data-variant=minimal] .__title{margin-bottom:.25rem;font-size:.875rem;line-height:1.25rem}.axp-state-message[data-variant=minimal] .__description{margin-bottom:.25rem;font-size:.75rem;line-height:1rem}\n"] }]
|
|
100
100
|
}], propDecorators: { mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], description: [{ type: i0.Input, args: [{ isSignal: true, alias: "description", required: false }] }], variant: [{ type: i0.Input, args: [{ isSignal: true, alias: "variant", required: false }] }] } });
|
|
@@ -228,10 +228,10 @@ class AXPActivityLogComponent {
|
|
|
228
228
|
const currentIndex = this.activities().findIndex(a => a.id === activity.id);
|
|
229
229
|
return currentIndex > 0; // Can compare if not the first activity
|
|
230
230
|
}
|
|
231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n <!-- Activity Log Content -->\n <div class=\"__content\">\n <!-- Loading State -->\n @if (loading()) {\n <div class=\"__loading\">\n @for (item of [1, 2, 3, 4]; track $index) {\n <div class=\"__item\">\n <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n <div class=\"__content\">\n <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Activity Feed -->\n @if (!loading() && activities().length > 0) {\n <div class=\"__feed\">\n @for (activity of activities(); track activity.id) {\n @let changeClasses = getChangeClasses(activity.changeType);\n @let isItemExpanded = isExpanded(activity.id);\n @let hasExpandableContentItem = hasExpandableContent(activity);\n <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n <div class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }} fa-solid\"></i>\n </div>\n\n <!-- Activity Content -->\n <div class=\"__content\">\n <!-- Main Activity Info -->\n <div class=\"__main-info\">\n <!-- User and Action with Toggle Button -->\n <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n <span class=\"__user-name\">{{ activity.user.title }}</span>\n <span class=\"__action-type\">\n {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n </span>\n <span class=\"__action-text\">\n {{ activity.title | translate | async }}\n </span>\n\n <!-- Compare Button -->\n @if (canCompare(activity)) {\n <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n <i class=\"fa-solid fa-code-compare\"></i>\n </button>\n }\n\n <!-- Toggle Button (only show if there's expandable content) -->\n @if (hasExpandableContentItem) {\n <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n [class.fa-chevron-up]=\"isItemExpanded\"></i>\n </button>\n }\n </div>\n\n <!-- Expandable Description/Changes -->\n @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n @for (change of activity.changes; track $index) {\n @let changeClasses = getChangeClasses(change.type);\n <div class=\"__action-line\">\n <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n </div>\n <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Time -->\n <div class=\"__time\">\n {{ activity.date | format: 'datetime' : 'short' | async }}\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty State -->\n @if (!loading() && activities().length === 0) {\n <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n </axp-state-message>\n }\n </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
231
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPActivityLogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
232
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPActivityLogComponent, isStandalone: true, selector: "axp-activity-log", inputs: { activities: { classPropertyName: "activities", publicName: "activities", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-activity-log ax-accent2\" *translate=\"let t\">\n <!-- Activity Log Content -->\n <div class=\"__content\">\n <!-- Loading State -->\n @if (loading()) {\n <div class=\"__loading\">\n @for (item of [1, 2, 3, 4]; track $index) {\n <div class=\"__item\">\n <ax-skeleton [animated]=\"true\" class=\"__avatar\"></ax-skeleton>\n <div class=\"__content\">\n <ax-skeleton [animated]=\"true\" class=\"__title\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__subtitle\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__description\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"__time\"></ax-skeleton>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Activity Feed -->\n @if (!loading() && activities().length > 0) {\n <div class=\"__feed\">\n @for (activity of activities(); track activity.id) {\n @let changeClasses = getChangeClasses(activity.changeType);\n @let isItemExpanded = isExpanded(activity.id);\n @let hasExpandableContentItem = hasExpandableContent(activity);\n <div class=\"__item\" [class.__collapsed]=\"!isItemExpanded\" [class.__expandable]=\"hasExpandableContentItem\">\n <div class=\"ax-size-10 ax-rounded-full ax-border ax-flex ax-items-center ax-justify-center ax-lightest-surface\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }} fa-solid\"></i>\n </div>\n\n <!-- Activity Content -->\n <div class=\"__content\">\n <!-- Main Activity Info -->\n <div class=\"__main-info\">\n <!-- User and Action with Toggle Button -->\n <div class=\"__action-line __header-line\" (click)=\"toggleExpanded(activity.id)\">\n <span class=\"__user-name\">{{ activity.user.title }}</span>\n <span class=\"__action-type\">\n {{ t(`@general:actions.${activity.changeType}.title`) | async }}\n </span>\n <span class=\"__action-text\">\n {{ activity.title | translate | async }}\n </span>\n\n <!-- Compare Button -->\n @if (canCompare(activity)) {\n <button type=\"button\" class=\"__compare-button\" (click)=\"handleCompare(activity, $event)\"\n [attr.aria-label]=\"t('compare.title', { scope: i18nScope }) | async\">\n <i class=\"fa-solid fa-code-compare\"></i>\n </button>\n }\n\n <!-- Toggle Button (only show if there's expandable content) -->\n @if (hasExpandableContentItem) {\n <button type=\"button\" class=\"__toggle-button\" [attr.aria-expanded]=\"isItemExpanded\"\n [attr.aria-label]=\"isItemExpanded ? 'Collapse details' : 'Expand details'\">\n <i class=\"fa-solid\" [class.fa-chevron-down]=\"!isItemExpanded\"\n [class.fa-chevron-up]=\"isItemExpanded\"></i>\n </button>\n }\n </div>\n\n <!-- Expandable Description/Changes -->\n @if (hasExpandableContentItem && isItemExpanded && activity.changes.length > 0) {\n <div class=\"__action-lines __expandable-content\" [class.__animated]=\"shouldAnimate(activity.id)\">\n @for (change of activity.changes; track $index) {\n @let changeClasses = getChangeClasses(change.type);\n <div class=\"__action-line\">\n <div class=\"ax-rounded-full ax-size-7 ax-grid ax-place-items-center\">\n <i class=\"{{ changeClasses.icon }} {{ changeClasses.text }}\"></i>\n </div>\n <span class=\"__action-text\">{{ change.description | translate | async }}</span>\n </div>\n }\n </div>\n }\n </div>\n\n <!-- Time -->\n <div class=\"__time\">\n {{ activity.date | format: 'datetime' : 'short' | async }}\n </div>\n </div>\n </div>\n }\n </div>\n }\n\n <!-- Empty State -->\n @if (!loading() && activities().length === 0) {\n <axp-state-message icon=\"fa-light fa-history\" [title]=\"'@activity-log:components.activity-log.empty-states.no-history.title'\"\n [description]=\"'@activity-log:components.activity-log.empty-states.no-history.description'\">\n </axp-state-message>\n }\n </div>\n</div>\n\n<!-- \n\nax-success-surface\nax-primary-surface\nax-danger-surface\nax-warning-surface\nax-info-surface\nax-muted-surface\nax-text-success\n\n -->", styles: [".axp-activity-log{height:100%;width:100%}.axp-activity-log .__content .__loading>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item{display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__loading .__item .__avatar{height:3rem;width:3rem;flex-shrink:0;border-radius:9999px}.axp-activity-log .__content .__loading .__item .__content{flex:1 1 0%}.axp-activity-log .__content .__loading .__item .__content>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__loading .__item .__content .__title{height:1rem;width:75%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__subtitle{height:.75rem;width:50%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__description{height:.75rem;width:83.333333%;border-radius:.25rem}.axp-activity-log .__content .__loading .__item .__content .__time{height:.75rem;width:25%;border-radius:.25rem}.axp-activity-log .__content .__feed{position:relative}.axp-activity-log .__content .__feed>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(1.5rem * calc(1 - var(--tw-space-y-reverse)));margin-bottom:calc(1.5rem * var(--tw-space-y-reverse))}.axp-activity-log .__content .__feed:before{content:\"\";position:absolute;inset-inline-start:1.25rem;top:.5rem;bottom:.5rem;width:0px;border-left:1px solid rgba(var(--ax-sys-color-border-surface));z-index:0}.axp-activity-log .__content .__feed .__item{position:relative;display:flex;align-items:flex-start;gap:1rem}.axp-activity-log .__content .__feed .__item axp-user-avatar{position:relative;z-index:10}.axp-activity-log .__content .__feed .__item .__content{min-width:0px;flex:1 1 0%}.axp-activity-log .__content .__feed .__item .__content .__main-info{margin-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{margin-top:.25rem;display:flex;flex-wrap:wrap;align-items:center;gap:.25rem;line-height:1.5}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__user-name{font-weight:600}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-type,.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line{align-items:center;border-radius:.375rem;padding:.25rem .5rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line:hover{background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button{margin-left:.5rem;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-primary-500),var(--tw-text-opacity, 1))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:hover{background-color:rgb(var(--ax-sys-color-primary-surface));color:rgb(var(--ax-sys-color-on-primary-surface));border-color:rgb(var(--ax-sys-color-border-primary-surface))}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__compare-button i{font-size:.75rem;line-height:1rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button{margin-left:auto;border-radius:9999px;padding:.25rem;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;width:1.5rem;height:1.5rem;align-items:center;justify-content:center}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button:focus{outline:2px solid transparent;outline-offset:2px;--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);box-shadow:var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow, 0 0 #0000);--tw-ring-opacity: 1;--tw-ring-color: rgba(var(--ax-sys-color-primary-500), var(--tw-ring-opacity, 1));--tw-ring-offset-width: 1px}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line.__header-line .__toggle-button i{font-size:.75rem;line-height:1rem;transition-property:transform;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines{margin-top:.5rem;margin-bottom:.5rem;display:flex;flex-direction:column;font-size:.875rem;line-height:1.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content{overflow:hidden}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines.__expandable-content.__animated{transition-property:all;transition-duration:.3s;transition-timing-function:cubic-bezier(.4,0,.2,1);animation-duration:.3s;animation-timing-function:cubic-bezier(.4,0,.2,1);animation:slideDown .3s ease-out}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line{display:flex;align-items:center;gap:.5rem;padding-top:.25rem;padding-bottom:.25rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-lines .__action-line .__action-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;opacity:.85}.axp-activity-log .__content .__feed .__item .__content .__time{padding-left:.5rem;padding-right:.5rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-activity-log .__content .__feed .__item.__collapsed .__expandable-content{display:none}.axp-activity-log .__content .__feed .__item.__expandable .__header-line{cursor:pointer}@media (min-width: 640px){.axp-activity-log .__content .__feed .__item{gap:.625rem}.axp-activity-log .__content .__feed .__item .__content .__main-info .__action-line{flex-wrap:nowrap}}@keyframes slideDown{0%{opacity:0;max-height:0;transform:translateY(-10px)}to{opacity:1;max-height:200px;transform:translateY(0)}}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXFormatModule }, { kind: "ngmodule", type: AXTagModule }, { kind: "ngmodule", type: AXAccordionCdkModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4$1.AXFormatPipe, name: "format" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
233
233
|
}
|
|
234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPActivityLogComponent, decorators: [{
|
|
235
235
|
type: Component,
|
|
236
236
|
args: [{ selector: 'axp-activity-log', standalone: true, imports: [
|
|
237
237
|
CommonModule,
|
|
@@ -272,10 +272,10 @@ class AXPTaskBadgeService {
|
|
|
272
272
|
this.computedCache.set(key, total);
|
|
273
273
|
return total;
|
|
274
274
|
}
|
|
275
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
276
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
275
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTaskBadgeService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
276
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTaskBadgeService, providedIn: 'root' }); }
|
|
277
277
|
}
|
|
278
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
278
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTaskBadgeService, decorators: [{
|
|
279
279
|
type: Injectable,
|
|
280
280
|
args: [{ providedIn: 'root' }]
|
|
281
281
|
}], ctorParameters: () => [] });
|
|
@@ -306,10 +306,10 @@ class AXPTaskBadgeDirective {
|
|
|
306
306
|
const node = signal[SIGNAL];
|
|
307
307
|
signalSetFn(node, value);
|
|
308
308
|
}
|
|
309
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
310
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
309
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTaskBadgeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
310
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", type: AXPTaskBadgeDirective, isStandalone: true, selector: "[axp-task-badge]", inputs: { badgeKey: { classPropertyName: "badgeKey", publicName: "badgeKey", isSignal: true, isRequired: false, transformFunction: null }, count: { classPropertyName: "count", publicName: "axp-task-badge", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0 }); }
|
|
311
311
|
}
|
|
312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
312
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTaskBadgeDirective, decorators: [{
|
|
313
313
|
type: Directive,
|
|
314
314
|
args: [{
|
|
315
315
|
selector: '[axp-task-badge]',
|
|
@@ -331,10 +331,10 @@ class AXPMenuBadgeHelper {
|
|
|
331
331
|
}
|
|
332
332
|
|
|
333
333
|
class AXPThemeLayoutPagePrimaryActionsComponent {
|
|
334
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
335
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
334
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
335
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutPagePrimaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-primary", ngImport: i0, template: `<ng-content select="ax-button,ax-dropdown-button"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
336
336
|
}
|
|
337
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
337
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutPagePrimaryActionsComponent, decorators: [{
|
|
338
338
|
type: Component,
|
|
339
339
|
args: [{
|
|
340
340
|
standalone: true,
|
|
@@ -345,10 +345,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
345
345
|
}]
|
|
346
346
|
}] });
|
|
347
347
|
class AXPThemeLayoutPageSecondaryActionsComponent {
|
|
348
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
349
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
348
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
349
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutPageSecondaryActionsComponent, isStandalone: true, selector: "axp-layout-actions-secondary", ngImport: i0, template: `<ng-content select="ax-button-item,ax-divider,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
350
350
|
}
|
|
351
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
351
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutPageSecondaryActionsComponent, decorators: [{
|
|
352
352
|
type: Component,
|
|
353
353
|
args: [{
|
|
354
354
|
standalone: true,
|
|
@@ -367,8 +367,8 @@ class AXPThemeLayoutActionsComponent {
|
|
|
367
367
|
this.secondaryContent = contentChild(AXPThemeLayoutPageSecondaryActionsComponent, ...(ngDevMode ? [{ debugName: "secondaryContent" }] : []));
|
|
368
368
|
this.hasSecondary = computed(() => this.secondaryContent() != null, ...(ngDevMode ? [{ debugName: "hasSecondary" }] : []));
|
|
369
369
|
}
|
|
370
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
371
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
370
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
371
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", type: AXPThemeLayoutActionsComponent, isStandalone: true, selector: "axp-layout-actions", queries: [{ propertyName: "primaryContent", first: true, predicate: AXPThemeLayoutPagePrimaryActionsComponent, descendants: true, isSignal: true }, { propertyName: "secondaryContent", first: true, predicate: AXPThemeLayoutPageSecondaryActionsComponent, descendants: true, isSignal: true }], viewQueries: [{ propertyName: "primaryTemplate", first: true, predicate: ["primary"], descendants: true, isSignal: true }, { propertyName: "secondaryTemplate", first: true, predicate: ["secondary"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
372
372
|
|
|
373
373
|
<ng-template #primary>
|
|
374
374
|
<ng-content select="axp-layout-actions-primary"></ng-content>
|
|
@@ -381,7 +381,7 @@ class AXPThemeLayoutActionsComponent {
|
|
|
381
381
|
<ng-content></ng-content>
|
|
382
382
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
383
383
|
}
|
|
384
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
384
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutActionsComponent, decorators: [{
|
|
385
385
|
type: Component,
|
|
386
386
|
args: [{
|
|
387
387
|
imports: [],
|
|
@@ -409,10 +409,10 @@ class AXPThemeLayoutBlockComponent {
|
|
|
409
409
|
this.elementRef = inject(ElementRef);
|
|
410
410
|
this.hostElement = this.elementRef.nativeElement;
|
|
411
411
|
}
|
|
412
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
413
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
412
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutBlockComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
413
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutBlockComponent, isStandalone: true, selector: "\n\n axp-page-content, \n axp-page-footer-container,\n axp-page-footer,\n axp-page-header,\n axp-page-header-container,\n axp-page-toolbar,\n\n axp-layout-content, \n axp-layout-page-content, \n\n axp-layout-sections,\n axp-layout-body,\n axp-layout-page-body,\n axp-layout-prefix,\n axp-layout-suffix,\n axp-layout-title-bar,\n axp-layout-title, \n axp-layout-title-actions, \n axp-layout-nav-button, \n axp-layout-description, \n axp-layout-breadcrumbs,\n axp-layout-list-action,\n ", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
414
414
|
}
|
|
415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
415
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutBlockComponent, decorators: [{
|
|
416
416
|
type: Component,
|
|
417
417
|
args: [{
|
|
418
418
|
standalone: true,
|
|
@@ -448,14 +448,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
448
448
|
}] });
|
|
449
449
|
|
|
450
450
|
class AXPThemeLayoutFooterComponent {
|
|
451
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
451
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
452
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutFooterComponent, isStandalone: true, selector: "axp-layout-footer, axp-layout-page-footer", ngImport: i0, template: `
|
|
453
453
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
454
454
|
<ng-content></ng-content>
|
|
455
455
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
456
456
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
457
457
|
}
|
|
458
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
458
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutFooterComponent, decorators: [{
|
|
459
459
|
type: Component,
|
|
460
460
|
args: [{
|
|
461
461
|
imports: [],
|
|
@@ -480,8 +480,8 @@ class AXPThemeLayoutPageHeaderComponent {
|
|
|
480
480
|
this.breadcrumbs = viewChild('breadcrumbs', ...(ngDevMode ? [{ debugName: "breadcrumbs" }] : []));
|
|
481
481
|
this.navButton = viewChild('navButton', ...(ngDevMode ? [{ debugName: "navButton" }] : []));
|
|
482
482
|
}
|
|
483
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
484
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.
|
|
483
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
484
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", type: AXPThemeLayoutPageHeaderComponent, isStandalone: true, selector: "axp-layout-page-header", viewQueries: [{ propertyName: "title", first: true, predicate: ["title"], descendants: true, isSignal: true }, { propertyName: "description", first: true, predicate: ["description"], descendants: true, isSignal: true }, { propertyName: "actions", first: true, predicate: ["actions"], descendants: true, isSignal: true }, { propertyName: "navbar", first: true, predicate: ["navbar"], descendants: true, isSignal: true }, { propertyName: "breadcrumbs", first: true, predicate: ["breadcrumbs"], descendants: true, isSignal: true }, { propertyName: "navButton", first: true, predicate: ["navButton"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
485
485
|
<ng-template #breadcrumbs>
|
|
486
486
|
<ng-content select="axp-layout-breadcrumbs"></ng-content>
|
|
487
487
|
</ng-template>
|
|
@@ -506,7 +506,7 @@ class AXPThemeLayoutPageHeaderComponent {
|
|
|
506
506
|
</ng-template>
|
|
507
507
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
508
508
|
}
|
|
509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
509
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutPageHeaderComponent, decorators: [{
|
|
510
510
|
type: Component,
|
|
511
511
|
args: [{
|
|
512
512
|
imports: [],
|
|
@@ -541,14 +541,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
541
541
|
}]
|
|
542
542
|
}], propDecorators: { title: [{ type: i0.ViewChild, args: ['title', { isSignal: true }] }], description: [{ type: i0.ViewChild, args: ['description', { isSignal: true }] }], actions: [{ type: i0.ViewChild, args: ['actions', { isSignal: true }] }], navbar: [{ type: i0.ViewChild, args: ['navbar', { isSignal: true }] }], breadcrumbs: [{ type: i0.ViewChild, args: ['breadcrumbs', { isSignal: true }] }], navButton: [{ type: i0.ViewChild, args: ['navButton', { isSignal: true }] }] } });
|
|
543
543
|
class AXPThemeLayoutHeaderComponent {
|
|
544
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
545
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
544
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
545
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutHeaderComponent, isStandalone: true, selector: "axp-layout-header", ngImport: i0, template: `
|
|
546
546
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
547
547
|
<ng-content></ng-content>
|
|
548
548
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
549
549
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
550
550
|
}
|
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
551
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutHeaderComponent, decorators: [{
|
|
552
552
|
type: Component,
|
|
553
553
|
args: [{
|
|
554
554
|
imports: [],
|
|
@@ -565,10 +565,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
565
565
|
}] });
|
|
566
566
|
|
|
567
567
|
class AXPThemeLayoutListComponent {
|
|
568
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
569
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
568
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
569
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutListComponent, isStandalone: true, selector: "axp-layout-list", ngImport: i0, template: `<ng-content select="axp-layout-list-item,axp-layout-list-group,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
570
570
|
}
|
|
571
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutListComponent, decorators: [{
|
|
572
572
|
type: Component,
|
|
573
573
|
args: [{
|
|
574
574
|
standalone: true,
|
|
@@ -579,10 +579,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
579
579
|
}]
|
|
580
580
|
}] });
|
|
581
581
|
class AXPThemeLayoutListItemsGroupComponent {
|
|
582
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
583
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
582
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
583
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutListItemsGroupComponent, isStandalone: true, selector: "axp-layout-list-group", ngImport: i0, template: `<ng-content select="axp-layout-list-item, axp-layout-title, axp-layout-header ,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
584
584
|
}
|
|
585
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutListItemsGroupComponent, decorators: [{
|
|
586
586
|
type: Component,
|
|
587
587
|
args: [{
|
|
588
588
|
standalone: true,
|
|
@@ -593,10 +593,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
593
593
|
}]
|
|
594
594
|
}] });
|
|
595
595
|
class AXPThemeLayoutListItemComponent {
|
|
596
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
597
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
596
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutListItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
597
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutListItemComponent, isStandalone: true, selector: "axp-layout-list-item", ngImport: i0, template: `<ng-content select="axp-layout-content,axp-layout-prefix,axp-layout-suffix,ng-container"></ng-content>`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
598
598
|
}
|
|
599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
599
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutListItemComponent, decorators: [{
|
|
600
600
|
type: Component,
|
|
601
601
|
args: [{
|
|
602
602
|
standalone: true,
|
|
@@ -608,13 +608,13 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
608
608
|
}] });
|
|
609
609
|
|
|
610
610
|
class AXPThemeLayoutSectionComponent {
|
|
611
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
612
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
611
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
612
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutSectionComponent, isStandalone: true, selector: "axp-layout-section", ngImport: i0, template: `
|
|
613
613
|
<ng-content select="axp-layout-header"></ng-content>
|
|
614
614
|
<ng-content select="axp-layout-content"></ng-content>
|
|
615
615
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
616
616
|
}
|
|
617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
617
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutSectionComponent, decorators: [{
|
|
618
618
|
type: Component,
|
|
619
619
|
args: [{
|
|
620
620
|
imports: [],
|
|
@@ -630,15 +630,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
630
630
|
}] });
|
|
631
631
|
|
|
632
632
|
class AXPThemeLayoutStartSideComponent {
|
|
633
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
634
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
633
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutStartSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
634
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutStartSideComponent, isStandalone: true, selector: "axp-layout-page-start-side, axp-layout-start-side", ngImport: i0, template: `
|
|
635
635
|
<ng-content select="axp-layout-header"></ng-content>
|
|
636
636
|
<ng-content select="axp-layout-content"></ng-content>
|
|
637
637
|
<ng-content select="axp-layout-footer"></ng-content>
|
|
638
638
|
<ng-content></ng-content>
|
|
639
639
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
640
640
|
}
|
|
641
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
641
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutStartSideComponent, decorators: [{
|
|
642
642
|
type: Component,
|
|
643
643
|
args: [{
|
|
644
644
|
imports: [],
|
|
@@ -655,14 +655,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
655
655
|
}]
|
|
656
656
|
}] });
|
|
657
657
|
class AXPThemeLayoutEndSideComponent {
|
|
658
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
659
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
658
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutEndSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
659
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutEndSideComponent, isStandalone: true, selector: "axp-layout-page-end-side, axp-layout-end-side", ngImport: i0, template: `
|
|
660
660
|
<ng-content select="axp-layout-header"></ng-content>
|
|
661
661
|
<ng-content select="axp-layout-content"></ng-content>
|
|
662
662
|
<ng-content select="axp-layout-footer"></ng-content>
|
|
663
663
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
664
664
|
}
|
|
665
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
665
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutEndSideComponent, decorators: [{
|
|
666
666
|
type: Component,
|
|
667
667
|
args: [{
|
|
668
668
|
imports: [],
|
|
@@ -679,14 +679,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
679
679
|
}] });
|
|
680
680
|
|
|
681
681
|
class AXPThemeLayoutToolbarComponent {
|
|
682
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
683
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
682
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutToolbarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
683
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutToolbarComponent, isStandalone: true, selector: "axp-layout-toolbar", ngImport: i0, template: `
|
|
684
684
|
<ng-content select="axp-layout-prefix"></ng-content>
|
|
685
685
|
<ng-content select="axp-layout-suffix"></ng-content>
|
|
686
686
|
<ng-content></ng-content>
|
|
687
687
|
`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
688
688
|
}
|
|
689
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
689
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutToolbarComponent, decorators: [{
|
|
690
690
|
type: Component,
|
|
691
691
|
args: [{
|
|
692
692
|
imports: [],
|
|
@@ -721,10 +721,10 @@ class AXPThemeLayoutContainerComponent {
|
|
|
721
721
|
ngOnDestroy() {
|
|
722
722
|
this.mutationObserver?.disconnect();
|
|
723
723
|
}
|
|
724
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
725
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
724
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutContainerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
725
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.12", type: AXPThemeLayoutContainerComponent, isStandalone: true, selector: "axp-layout-container", ngImport: i0, template: '<ng-content></ng-content>', isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
726
726
|
}
|
|
727
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
727
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPThemeLayoutContainerComponent, decorators: [{
|
|
728
728
|
type: Component,
|
|
729
729
|
args: [{
|
|
730
730
|
standalone: true,
|
|
@@ -786,7 +786,7 @@ class AXPCategoryTreeComponent {
|
|
|
786
786
|
title: '@general:terms.interface.selection.all-items',
|
|
787
787
|
description: '',
|
|
788
788
|
parentId: undefined,
|
|
789
|
-
|
|
789
|
+
childrenCount: 0,
|
|
790
790
|
expand: true,
|
|
791
791
|
children: [],
|
|
792
792
|
},
|
|
@@ -873,7 +873,7 @@ class AXPCategoryTreeComponent {
|
|
|
873
873
|
title: node.title,
|
|
874
874
|
description: node.description,
|
|
875
875
|
parentId: node.parentId,
|
|
876
|
-
|
|
876
|
+
childrenCount: node.childrenCount,
|
|
877
877
|
};
|
|
878
878
|
this.nodeClick.emit(entity);
|
|
879
879
|
this.events().onNodeClick?.(entity);
|
|
@@ -886,7 +886,7 @@ class AXPCategoryTreeComponent {
|
|
|
886
886
|
title: node.title,
|
|
887
887
|
description: node.description,
|
|
888
888
|
parentId: node.parentId,
|
|
889
|
-
|
|
889
|
+
childrenCount: node.childrenCount,
|
|
890
890
|
};
|
|
891
891
|
this.collapseChange.emit(entity);
|
|
892
892
|
this.events().onCollapseChange?.(entity);
|
|
@@ -925,7 +925,7 @@ class AXPCategoryTreeComponent {
|
|
|
925
925
|
title: node.title,
|
|
926
926
|
description: node.description,
|
|
927
927
|
parentId: node.parentId,
|
|
928
|
-
|
|
928
|
+
childrenCount: node.childrenCount,
|
|
929
929
|
};
|
|
930
930
|
this.nodeCreate.emit(entity);
|
|
931
931
|
this.events().onNodeCreate?.(entity);
|
|
@@ -939,7 +939,7 @@ class AXPCategoryTreeComponent {
|
|
|
939
939
|
title: node.title,
|
|
940
940
|
description: node.description,
|
|
941
941
|
parentId: node.parentId,
|
|
942
|
-
|
|
942
|
+
childrenCount: node.childrenCount,
|
|
943
943
|
};
|
|
944
944
|
this.nodeUpdate.emit(entity);
|
|
945
945
|
this.events().onNodeUpdate?.(entity);
|
|
@@ -953,7 +953,7 @@ class AXPCategoryTreeComponent {
|
|
|
953
953
|
title: node.title,
|
|
954
954
|
description: node.description,
|
|
955
955
|
parentId: node.parentId,
|
|
956
|
-
|
|
956
|
+
childrenCount: node.childrenCount,
|
|
957
957
|
};
|
|
958
958
|
this.nodeDelete.emit(entity);
|
|
959
959
|
this.events().onNodeDelete?.(entity);
|
|
@@ -961,11 +961,11 @@ class AXPCategoryTreeComponent {
|
|
|
961
961
|
//#endregion
|
|
962
962
|
//#region ---- Utility Methods ----
|
|
963
963
|
convertEntitiesToTreeNodes(entities) {
|
|
964
|
-
return entities.map(entity => ({
|
|
964
|
+
return entities.map((entity) => ({
|
|
965
965
|
...entity,
|
|
966
|
-
children: entity.
|
|
966
|
+
children: entity.childrenCount > 0 ? [] : undefined, // Set children to empty array if has children, undefined if no children
|
|
967
967
|
expand: false,
|
|
968
|
-
hasChild: entity.
|
|
968
|
+
hasChild: entity.childrenCount > 0, // Set hasChild based on childrenCount
|
|
969
969
|
}));
|
|
970
970
|
}
|
|
971
971
|
updateNodeChildren(parentId, children) {
|
|
@@ -1021,15 +1021,15 @@ class AXPCategoryTreeComponent {
|
|
|
1021
1021
|
// Clear the loading state
|
|
1022
1022
|
this.isLoading.set(false);
|
|
1023
1023
|
}
|
|
1024
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1025
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1024
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1025
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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-legacy\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"config().showCheckbox || false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"config().textField || 'title'\"\n [valueField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view-legacy>\n </div>\n } @else {\n <axp-state-message\n [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n [title]=\"emptyStateTitle()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"actions().createLabel || '@general:actions.add-new.title'\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\n <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"actions().createChildLabel || 'Add New Child'\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"actions().updateLabel || 'Edit'\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canDelete) {\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(item, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"actions().deleteLabel || 'Delete'\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n } @else if (item.id === 'root' && actions().canCreate) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTreeViewLegacyModule }, { kind: "component", type: i2$2.AXTreeViewLegacyComponent, selector: "ax-tree-view-legacy", inputs: ["items", "showCheckbox", "hasCheckboxField", "selectionMode", "selectionBehavior", "selectionScope", "focusNodeEnabled", "valueField", "textField", "visibleField", "disableField", "hasChildField", "selectedField", "expandedField", "tooltipField", "childrenField", "activeField", "indeterminateField", "parentField", "iconField", "toggleIcons", "look", "showEmptyNodeMassage", "itemTemplate", "emptyTemplate", "expandOn"], outputs: ["onSelectionChanged", "onItemSelectedChanged", "onNodeClick", "onCollapsedChanged", "onNodedbClick"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n axp-page-content, \n axp-page-footer-container,\n axp-page-footer,\n axp-page-header,\n axp-page-header-container,\n axp-page-toolbar,\n\n axp-layout-content, \n axp-layout-page-content, \n\n axp-layout-sections,\n axp-layout-body,\n axp-layout-page-body,\n axp-layout-prefix,\n axp-layout-suffix,\n axp-layout-title-bar,\n axp-layout-title, \n axp-layout-title-actions, \n axp-layout-nav-button, \n axp-layout-description, \n axp-layout-breadcrumbs,\n axp-layout-list-action,\n " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i5$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i5$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i6.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1026
1026
|
}
|
|
1027
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1027
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
|
|
1028
1028
|
type: Component,
|
|
1029
1029
|
args: [{ selector: 'axp-category-tree', standalone: true, encapsulation: ViewEncapsulation.None, imports: [
|
|
1030
1030
|
CommonModule,
|
|
1031
1031
|
AXDecoratorModule,
|
|
1032
|
-
|
|
1032
|
+
AXTreeViewLegacyModule,
|
|
1033
1033
|
AXSkeletonModule,
|
|
1034
1034
|
AXPThemeLayoutBlockComponent,
|
|
1035
1035
|
AXSearchBoxModule,
|
|
@@ -1039,7 +1039,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1039
1039
|
AXButtonModule,
|
|
1040
1040
|
AXDropdownModule,
|
|
1041
1041
|
AXPStateMessageComponent,
|
|
1042
|
-
], template: "<axp-layout-header>\n <axp-layout-toolbar>\n @if (config().searchable) {\n <ax-search-box\n (onValueChanged)=\"handleSearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"config().searchPlaceholder! | translate | async\"\n >\n </ax-search-box>\n }\n </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"config().showCheckbox || false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"config().textField || 'title'\"\n [valueField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view>\n </div>\n } @else {\n <axp-state-message\n [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n [title]=\"emptyStateTitle()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"actions().createLabel || '@general:actions.add-new.title'\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\n <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"actions().createChildLabel || 'Add New Child'\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"actions().updateLabel || 'Edit'\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canDelete) {\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(item, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"actions().deleteLabel || 'Delete'\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n } @else if (item.id === 'root' && actions().canCreate) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n" }]
|
|
1042
|
+
], template: "<axp-layout-header>\n <axp-layout-toolbar>\n @if (config().searchable) {\n <ax-search-box\n (onValueChanged)=\"handleSearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"config().searchPlaceholder! | translate | async\"\n >\n </ax-search-box>\n }\n </axp-layout-toolbar>\n</axp-layout-header>\n\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"ax-p-4 ax-flex ax-flex-col ax-gap-3\" [class.ax-pt-2]=\"config().searchable\">\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"ax-w-full ax-h-6 ax-rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div class=\"ax-px-4 ax-max-h-[calc(100vh-250px)] ax-overflow-auto\" [class.ax-pt-2]=\"config().searchable\">\n <ax-tree-view-legacy\n (onNodeClick)=\"handleNodeClick($event)\"\n (onCollapsedChanged)=\"handleCollapseChanged($event)\"\n [showCheckbox]=\"config().showCheckbox || false\"\n [itemTemplate]=\"itemTemplate\"\n #treeRef\n [textField]=\"config().textField || 'title'\"\n [valueField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\n [items]=\"treeItems()\"\n #tree\n >\n </ax-tree-view-legacy>\n </div>\n } @else {\n <axp-state-message\n [icon]=\"config().emptyStateIcon || 'fa-light fa-folder-open'\"\n [title]=\"emptyStateTitle()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"actions().createLabel || '@general:actions.add-new.title'\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n }\n\n <ng-template #itemTemplate let-item>\n <div class=\"ax-flex ax-items-center ax-justify-between ax-w-full ax-gap-2 ax-overflow-hidden\">\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-min-w-0\">\n <ax-icon class=\"fas ax-text-warning fa-folder\"></ax-icon>\n <span class=\"ax-truncate\">{{ item.title | translate | async }}</span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (actions().canCreateChild || actions().canUpdate || actions().canDelete) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" color=\"default\" look=\"blank\" (onClick)=\"$event.nativeEvent.stopPropagation()\">\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"actions().createChildLabel || 'Add New Child'\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"actions().updateLabel || 'Edit'\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canDelete) {\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(item, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"actions().deleteLabel || 'Delete'\"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n }\n } @else if (item.id === 'root' && actions().canCreate) {\n <div class=\"ax-flex ax-items-center ax-gap-1\">\n <ax-button class=\"ax-xs\" (onClick)=\"handleCreateRootClick($event)\" look=\"blank\" color=\"default\">\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n" }]
|
|
1043
1043
|
}], propDecorators: { dataSource: [{ type: i0.Input, args: [{ isSignal: true, alias: "dataSource", required: true }] }], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: false }] }], actions: [{ type: i0.Input, args: [{ isSignal: true, alias: "actions", required: false }] }], events: [{ type: i0.Input, args: [{ isSignal: true, alias: "events", required: false }] }], nodeClick: [{ type: i0.Output, args: ["nodeClick"] }], nodeSelect: [{ type: i0.Output, args: ["nodeSelect"] }], nodeCreate: [{ type: i0.Output, args: ["nodeCreate"] }], nodeUpdate: [{ type: i0.Output, args: ["nodeUpdate"] }], nodeDelete: [{ type: i0.Output, args: ["nodeDelete"] }], searchChange: [{ type: i0.Output, args: ["searchChange"] }], collapseChange: [{ type: i0.Output, args: ["collapseChange"] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }] } });
|
|
1044
1044
|
|
|
1045
1045
|
//#region ---- Tree Node Interface ----
|
|
@@ -1069,10 +1069,14 @@ class AXPColorPalettePickerComponent {
|
|
|
1069
1069
|
* Make the palette readonly
|
|
1070
1070
|
*/
|
|
1071
1071
|
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
1072
|
+
/**
|
|
1073
|
+
* Show empty/null option to clear selection
|
|
1074
|
+
*/
|
|
1075
|
+
this.allowClear = input(true, ...(ngDevMode ? [{ debugName: "allowClear" }] : []));
|
|
1072
1076
|
//#endregion
|
|
1073
1077
|
//#region ---- Outputs ----
|
|
1074
1078
|
/**
|
|
1075
|
-
* Emits when a color is selected
|
|
1079
|
+
* Emits when a color is selected or cleared (null/undefined)
|
|
1076
1080
|
*/
|
|
1077
1081
|
this.colorSelected = output();
|
|
1078
1082
|
}
|
|
@@ -1087,13 +1091,13 @@ class AXPColorPalettePickerComponent {
|
|
|
1087
1091
|
}
|
|
1088
1092
|
this.colorSelected.emit(color);
|
|
1089
1093
|
}
|
|
1090
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1091
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1094
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPalettePickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1095
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPColorPalettePickerComponent, isStandalone: true, selector: "axp-color-palette-picker", inputs: { colors: { classPropertyName: "colors", publicName: "colors", isSignal: true, isRequired: false, transformFunction: null }, selectedColor: { classPropertyName: "selectedColor", publicName: "selectedColor", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, allowClear: { classPropertyName: "allowClear", publicName: "allowClear", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { colorSelected: "colorSelected" }, ngImport: i0, template: "<div class=\"axp-color-palette-picker\">\n <div class=\"__swatches\">\n @if (allowClear()) {\n <button type=\"button\" class=\"__swatch __empty\"\n [class.__selected]=\"selectedColor() === null || selectedColor() === undefined\"\n [class.__disabled]=\"disabled() || readonly()\" [disabled]=\"disabled() || readonly()\"\n (click)=\"handleColorSelect(null)\">\n @if (selectedColor() === null || selectedColor() === undefined) {\n <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 13l4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n } @else {\n <svg class=\"__clear-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </button>\n }\n @for (color of colors(); track color) {\n <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n @if (selectedColor() === color) {\n <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </button>\n }\n </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}.axp-color-palette-picker .__swatches .__swatch.__empty{border-width:2px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-color:var(--ax-color-border);background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,var(--ax-color-border) 2px,var(--ax-color-border) 4px)}.axp-color-palette-picker .__swatches .__swatch.__empty:hover:not(.__disabled){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty .__clear-icon{height:1rem;width:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty.__selected .__checkmark{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1092
1096
|
}
|
|
1093
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1097
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColorPalettePickerComponent, decorators: [{
|
|
1094
1098
|
type: Component,
|
|
1095
|
-
args: [{ selector: 'axp-color-palette-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"axp-color-palette-picker\">\n <div class=\"__swatches\">\n @for (color of colors(); track color) {\n <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n @if (selectedColor() === color) {\n <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </button>\n }\n </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}\n"] }]
|
|
1096
|
-
}], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], colorSelected: [{ type: i0.Output, args: ["colorSelected"] }] } });
|
|
1099
|
+
args: [{ selector: 'axp-color-palette-picker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule], template: "<div class=\"axp-color-palette-picker\">\n <div class=\"__swatches\">\n @if (allowClear()) {\n <button type=\"button\" class=\"__swatch __empty\"\n [class.__selected]=\"selectedColor() === null || selectedColor() === undefined\"\n [class.__disabled]=\"disabled() || readonly()\" [disabled]=\"disabled() || readonly()\"\n (click)=\"handleColorSelect(null)\">\n @if (selectedColor() === null || selectedColor() === undefined) {\n <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 13l4 4L19 7\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n } @else {\n <svg class=\"__clear-icon\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M18 6L6 18M6 6l12 12\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </button>\n }\n @for (color of colors(); track color) {\n <button type=\"button\" class=\"__swatch\" [class.__selected]=\"selectedColor() === color\"\n [class.__disabled]=\"disabled() || readonly()\" [style.background-color]=\"color\"\n [disabled]=\"disabled() || readonly()\" (click)=\"handleColorSelect(color)\">\n @if (selectedColor() === color) {\n <svg class=\"__checkmark\" viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n <path d=\"M5 13l4 4L19 7\" stroke=\"white\" stroke-width=\"2\" stroke-linecap=\"round\"\n stroke-linejoin=\"round\" />\n </svg>\n }\n </button>\n }\n </div>\n</div>", styles: [".axp-color-palette-picker{width:100%}.axp-color-palette-picker .__swatches{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:.5rem}.axp-color-palette-picker .__swatches .__swatch{height:1.5rem;width:1.5rem;border-radius:9999px;border-width:2px;border-color:transparent;cursor:pointer;transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s;display:flex;align-items:center;justify-content:center;position:relative}.axp-color-palette-picker .__swatches .__swatch:hover:not(.__disabled){--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-hover)}.axp-color-palette-picker .__swatches .__swatch:focus-visible:not(.__disabled){outline:2px solid var(--ax-color-primary);outline-offset:2px;box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20)}.axp-color-palette-picker .__swatches .__swatch.__selected{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);box-shadow:0 0 0 4px var(--ax-color-primary-alpha-20);outline:1px solid var(--ax-color-border);outline-offset:0}.axp-color-palette-picker .__swatches .__swatch.__disabled{cursor:not-allowed;opacity:.5}.axp-color-palette-picker .__swatches .__swatch .__checkmark{height:1.25rem;width:1.25rem;filter:drop-shadow(0 1px 2px rgba(0,0,0,.6)) drop-shadow(0 0 1px rgba(255,255,255,.3))}.axp-color-palette-picker .__swatches .__swatch.__empty{border-width:2px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lightest-surface),var(--tw-bg-opacity, 1));border-color:var(--ax-color-border);background-image:repeating-linear-gradient(45deg,transparent,transparent 2px,var(--ax-color-border) 2px,var(--ax-color-border) 4px)}.axp-color-palette-picker .__swatches .__swatch.__empty:hover:not(.__disabled){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty .__clear-icon{height:1rem;width:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-color-palette-picker .__swatches .__swatch.__empty.__selected .__checkmark{filter:drop-shadow(0 1px 2px rgba(0,0,0,.3))}\n"] }]
|
|
1100
|
+
}], propDecorators: { colors: [{ type: i0.Input, args: [{ isSignal: true, alias: "colors", required: false }] }], selectedColor: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedColor", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], allowClear: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowClear", required: false }] }], colorSelected: [{ type: i0.Output, args: ["colorSelected"] }] } });
|
|
1097
1101
|
|
|
1098
1102
|
class AXPColumnItemListComponent {
|
|
1099
1103
|
constructor() {
|
|
@@ -1121,8 +1125,8 @@ class AXPColumnItemListComponent {
|
|
|
1121
1125
|
// console.log(event);
|
|
1122
1126
|
this.morePopover()?.close();
|
|
1123
1127
|
}
|
|
1124
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1125
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1128
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColumnItemListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1129
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPColumnItemListComponent, isStandalone: true, selector: "axp-column-item-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, viewQueries: [{ propertyName: "moreButton", first: true, predicate: ["moreButton"], descendants: true, isSignal: true }, { propertyName: "morePopover", first: true, predicate: ["morePopover"], descendants: true, isSignal: true }], ngImport: i0, template: `
|
|
1126
1130
|
<div class="ax-flex ax-gap-1 ax-items-center">
|
|
1127
1131
|
@if (items().length === 0) {
|
|
1128
1132
|
<span class="ax-text-muted">---</span>
|
|
@@ -1160,9 +1164,9 @@ class AXPColumnItemListComponent {
|
|
|
1160
1164
|
</div>
|
|
1161
1165
|
</div>
|
|
1162
1166
|
</ax-popover>
|
|
1163
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$
|
|
1167
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1164
1168
|
}
|
|
1165
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1169
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPColumnItemListComponent, decorators: [{
|
|
1166
1170
|
type: Component,
|
|
1167
1171
|
args: [{
|
|
1168
1172
|
selector: 'axp-column-item-list',
|
|
@@ -1228,10 +1232,10 @@ class AXPQueryColumnsComponent {
|
|
|
1228
1232
|
moveItemInArray(columns, event.previousIndex, event.currentIndex);
|
|
1229
1233
|
this.columns.set(columns);
|
|
1230
1234
|
}
|
|
1231
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1232
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1235
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPQueryColumnsComponent, isStandalone: true, selector: "axp-query-columns", inputs: { columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { columns: "columnsChange" }, ngImport: i0, template: "<div class=\"ax-flex ax-flex-col ax-gap-4 ax-select-none\" cdkDropList (cdkDropListDropped)=\"drop($event)\">\n <div class=\"ax-flex ax-flex-col ax-gap-3 ax-w-full ax-sorted-list ax-max-h-[calc(100vh-280px)] ax-overflow-auto\">\n @for (item of columns(); track item.name) {\n <div class=\"ax-flex ax-py-1 ax-items-center ax-justify-between\" cdkDrag cdkDragBoundary=\".ax-sorted-list\">\n <div class=\"ax-flex ax-items-center ax-gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move\"></ax-icon>\n <p class=\"ax-font-medium ax-text-sm\">{{ item.title | translate | async }}</p>\n </div>\n <ax-switch\n class=\"ax-sm\"\n [ngModel]=\"item.visible\"\n (onValueChanged)=\"handleVisibilityChange($event, item.name)\"\n ></ax-switch>\n </div>\n }\n </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXSwitchModule }, { kind: "component", type: i3.AXSwitchComponent, selector: "ax-switch", inputs: ["disabled", "readonly", "color", "tabIndex", "value", "name", "isLoading"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged", "readonlyChange", "disabledChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
|
|
1233
1237
|
}
|
|
1234
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1238
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
|
|
1235
1239
|
type: Component,
|
|
1236
1240
|
args: [{ selector: 'axp-query-columns', imports: [
|
|
1237
1241
|
CommonModule,
|
|
@@ -1359,8 +1363,8 @@ class AXPCompareViewComponent {
|
|
|
1359
1363
|
}
|
|
1360
1364
|
ngOnDestroy() {
|
|
1361
1365
|
}
|
|
1362
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1363
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"], dependencies: [{ kind: "ngmodule", type:
|
|
1366
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCompareViewComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1367
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPCompareViewComponent, isStandalone: true, selector: "axp-compare-view", inputs: { inputs: { classPropertyName: "inputs", publicName: "inputs", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position: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: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: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:
|
|
1364
1368
|
// Angular
|
|
1365
1369
|
CommonModule }, { kind: "ngmodule", type:
|
|
1366
1370
|
// ACoreX
|
|
@@ -1368,7 +1372,7 @@ class AXPCompareViewComponent {
|
|
|
1368
1372
|
// Platform
|
|
1369
1373
|
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 }); }
|
|
1370
1374
|
}
|
|
1371
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1375
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
|
|
1372
1376
|
type: Component,
|
|
1373
1377
|
args: [{ selector: 'axp-compare-view', imports: [
|
|
1374
1378
|
// Angular
|
|
@@ -1382,14 +1386,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1382
1386
|
AXTranslationModule,
|
|
1383
1387
|
// Platform
|
|
1384
1388
|
AXPWidgetCoreModule
|
|
1385
|
-
], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position:-webkit-sticky;position:sticky;top:0;z-index:20}.axp-compare-view .__table .__thead .__header-row .__field-header{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;text-align:left;font-weight:700;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));position:-webkit-sticky;position:sticky;left:0;z-index:25}.axp-compare-view .__table .__thead .__header-row .__object-header{position:relative;border-bottom-width:1px;padding:.75rem 1rem;text-align:center;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface));min-width:250px;width:250px}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:600}.axp-compare-view .__table .__thead .__header-row .__object-header .__object-description{margin-top:.25rem;font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button{display:flex;width:1.5rem;height:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:9999px;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-light-surface),var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;position:absolute;top:50%;inset-inline-end:0px;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.axp-compare-view .__table .__thead .__header-row .__object-header .__remove-object-button:hover{--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-danger-100),var(--tw-bg-opacity, 1));--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-danger-600),var(--tw-text-opacity, 1))}.axp-compare-view .__table .__tbody .__row{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.2s;animation-duration:.2s}.axp-compare-view .__table .__tbody .__row.__row--odd{background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-compare-view .__table .__tbody .__row.__row--has-differences{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{background-color:rgba(var(--ax-sys-color-warning-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values{border-left-width:4px;--tw-border-opacity: 1;border-left-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{background-color:rgba(var(--ax-sys-color-success-500),var(--tw-bg-opacity, 1));--tw-bg-opacity: .05}.axp-compare-view .__table .__tbody .__row .__field-cell{width:14rem;border-bottom-width:1px;border-right-width:1px;padding:.75rem 1rem;vertical-align:top;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:-webkit-sticky;position:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
|
|
1389
|
+
], encapsulation: ViewEncapsulation.None, providers: [], template: "<!--\n #region ---- Compare View Table Layout ----\n-->\n<div class=\"axp-compare-view\">\n <div class=\"__table-container\">\n <table class=\"__table\">\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <th class=\"__field-header\">\n <ax-check-box\n [value]=\"showOnlyChanges()\"\n (valueChange)=\"toggleShowOnlyChanges()\"\n class=\"__show-changes-toggle\"\n >\n <ax-label>\n {{ '@activity-log:components.compare-view.show-only-differences' | translate | async }}\n </ax-label>\n </ax-check-box>\n </th>\n @for (obj of remainingObjects(); track obj.id) {\n <th class=\"__object-header\" [attr.data-id]=\"obj.id\">\n <div class=\"__object-title\" [title]=\"obj.description\">\n <span>{{ obj.title | translate | async }}</span>\n @if (remainingObjects().length > 2) {\n <span class=\"__remove-object-button\" (click)=\"removeObject(obj.id)\">\n <i class=\"fa-light fa-times\"></i>\n </span>\n }\n </div>\n </th>\n }\n </tr>\n </thead>\n <tbody class=\"__tbody\">\n @for (field of filteredFields(); track field.path; let i = $index) {\n <tr\n class=\"__row\"\n [class.__row--odd]=\"i % 2 === 1\"\n [class.__row--has-differences]=\"hasUnequalValues(field.path)\"\n [class.__row--has-equal-values]=\"hasEqualValues(field.path)\"\n >\n <td class=\"__field-cell\">\n <div class=\"__field-content\">\n <div class=\"__field-title\">\n {{ field.title | translate | async }}\n </div>\n @if (field.description) {\n <div class=\"__field-description\">{{ field.description }}</div>\n }\n </div>\n </td>\n @for (obj of remainingObjects(); track obj.id; let objIndex = $index) {\n <td\n class=\"__object-cell\"\n [attr.data-id]=\"obj.id\"\n [class.__cell--changed]=\"hasValueChangedFromPrevious(field.path, objIndex) && isChangesMode()\"\n >\n @if (obj.context[field.path] !== undefined) {\n <div class=\"__object-content\">\n <axp-widgets-container [context]=\"obj.context\">\n <ng-container axp-widget-renderer [node]=\"field.widget\" [mode]=\"'view'\"></ng-container>\n </axp-widgets-container>\n </div>\n } @else {\n <div class=\"__object-placeholder\">---</div>\n }\n @if (hasValueChangingToNext(field.path, objIndex) && isChangesMode()) {\n <div class=\"__change-indicator\">\n <i class=\"fa-light fa-arrow-right\"></i>\n </div>\n }\n </td>\n }\n </tr>\n }\n </tbody>\n </table>\n </div>\n</div>\n<!--\n #endregion\n-->\n", styles: [".axp-compare-view{display:flex;height:100%;width:100%;flex-direction:column;border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));position:relative}.axp-compare-view .__filter-controls{flex-shrink:0;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-light-surface));color:rgb(var(--ax-sys-color-on-light-surface));border-color:rgb(var(--ax-sys-color-border-light-surface))}.axp-compare-view .__filter-controls .__show-changes-toggle{font-size:.875rem;line-height:1.25rem}.axp-compare-view .__table-container{flex:1 1 0%;overflow:auto;position:relative}.axp-compare-view .__table{width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.axp-compare-view .__table .__thead{position: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: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:sticky;left:0;z-index:15}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content{display:flex;flex-direction:column;gap:.25rem}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-title{font-weight:500}.axp-compare-view .__table .__tbody .__row .__field-cell .__field-content .__field-description{font-size:.75rem;line-height:1rem;opacity:.75}.axp-compare-view .__table .__tbody .__row .__object-cell{border-bottom-width:1px;padding:.75rem 1rem;text-align:center;vertical-align:middle;position:relative}.axp-compare-view .__table .__tbody .__row .__object-cell.__cell--changed .__object-content{border-width:1px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-warning-200),var(--tw-border-opacity, 1));padding:.5rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-content{position:relative;display:flex;align-items:center;justify-content:center}.axp-compare-view .__table .__tbody .__row .__object-cell .__change-indicator{position:absolute;inset-inline-end:-.25rem;top:50%;--tw-translate-y: -50%;transform:translate(var(--tw-translate-x),var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));line-height:1rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-warning-500),var(--tw-text-opacity, 1));font-size:.875rem}.axp-compare-view .__table .__tbody .__row .__object-cell .__object-placeholder{opacity:.75}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-warning-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-differences .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-warning-900),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell{border-inline-start-width:4px;--tw-border-opacity: 1;border-inline-start-color:rgba(var(--ax-sys-color-success-500),var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-50),var(--tw-bg-opacity, 1))}.axp-compare-view .__table .__tbody .__row.__row--has-equal-values .__field-cell:is(.ax-dark *){--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-success-900),var(--tw-bg-opacity, 1))}\n"] }]
|
|
1386
1390
|
}], propDecorators: { inputs: [{ type: i0.Input, args: [{ isSignal: true, alias: "inputs", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
1387
1391
|
|
|
1388
1392
|
class AXPComponentSlot {
|
|
1389
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1390
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
1393
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlot, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1394
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.12", type: AXPComponentSlot, isStandalone: true, ngImport: i0 }); }
|
|
1391
1395
|
}
|
|
1392
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1396
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlot, decorators: [{
|
|
1393
1397
|
type: Directive
|
|
1394
1398
|
}] });
|
|
1395
1399
|
|
|
@@ -1409,10 +1413,10 @@ class AXPComponentSlotRegistryService {
|
|
|
1409
1413
|
get(slotName) {
|
|
1410
1414
|
return this.registry.get(slotName) || [];
|
|
1411
1415
|
}
|
|
1412
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1413
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1416
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1417
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotRegistryService, providedIn: 'root' }); }
|
|
1414
1418
|
}
|
|
1415
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1419
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotRegistryService, decorators: [{
|
|
1416
1420
|
type: Injectable,
|
|
1417
1421
|
args: [{
|
|
1418
1422
|
providedIn: 'root'
|
|
@@ -1511,10 +1515,10 @@ class AXPComponentSlotDirective {
|
|
|
1511
1515
|
return condition(this.contextStore.data());
|
|
1512
1516
|
//return condition(this.context());
|
|
1513
1517
|
}
|
|
1514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1515
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.
|
|
1518
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1519
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.12", 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 }); }
|
|
1516
1520
|
}
|
|
1517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1521
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotDirective, decorators: [{
|
|
1518
1522
|
type: Directive,
|
|
1519
1523
|
args: [{
|
|
1520
1524
|
selector: 'axp-component-slot',
|
|
@@ -1574,11 +1578,11 @@ class AXPComponentSlotModule {
|
|
|
1574
1578
|
f();
|
|
1575
1579
|
});
|
|
1576
1580
|
}
|
|
1577
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1578
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
1579
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
1581
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotModule, deps: [{ token: 'AXPComponentSlotModuleFactory', optional: true }], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1582
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotModule, declarations: [AXPComponentSlotDirective], exports: [AXPComponentSlotDirective] }); }
|
|
1583
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotModule }); }
|
|
1580
1584
|
}
|
|
1581
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1585
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPComponentSlotModule, decorators: [{
|
|
1582
1586
|
type: NgModule,
|
|
1583
1587
|
args: [{
|
|
1584
1588
|
declarations: [AXPComponentSlotDirective],
|
|
@@ -1593,8 +1597,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1593
1597
|
|
|
1594
1598
|
//#endregion
|
|
1595
1599
|
class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
1600
|
+
//#endregion
|
|
1596
1601
|
constructor() {
|
|
1597
|
-
super(
|
|
1602
|
+
super();
|
|
1598
1603
|
//#region ---- Properties ----
|
|
1599
1604
|
this.config = signal({
|
|
1600
1605
|
title: '',
|
|
@@ -1602,30 +1607,29 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1602
1607
|
columns: [],
|
|
1603
1608
|
selectionMode: 'single',
|
|
1604
1609
|
searchFields: [],
|
|
1610
|
+
initialSearchTerm: undefined,
|
|
1605
1611
|
parentField: undefined,
|
|
1606
1612
|
allowCreate: false,
|
|
1607
1613
|
filters: undefined
|
|
1608
1614
|
}, ...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1609
1615
|
this.searchTerm = '';
|
|
1616
|
+
this.searchPlaceholderText = signal('', ...(ngDevMode ? [{ debugName: "searchPlaceholderText" }] : []));
|
|
1610
1617
|
this.grid = viewChild('grid', ...(ngDevMode ? [{ debugName: "grid" }] : []));
|
|
1611
1618
|
this.initialSelectedItems = [];
|
|
1612
1619
|
this.selectedItems = signal([], ...(ngDevMode ? [{ debugName: "selectedItems" }] : []));
|
|
1613
1620
|
// Category Filter State
|
|
1614
1621
|
this.activeCategoryFilter = signal(null, ...(ngDevMode ? [{ debugName: "activeCategoryFilter" }] : []));
|
|
1622
|
+
this.placeholderUpdateToken = 0;
|
|
1623
|
+
this.initialSearchApplied = false;
|
|
1615
1624
|
//#endregion
|
|
1625
|
+
//#region ---- Services & Dependencies ----
|
|
1626
|
+
this.translationService = inject(AXTranslationService);
|
|
1616
1627
|
//#region ---- Computed Properties ----
|
|
1617
1628
|
this.allowSelect = computed(() => this.selectedItems().length > 0, ...(ngDevMode ? [{ debugName: "allowSelect" }] : []));
|
|
1618
1629
|
this.hasSearch = computed(() => {
|
|
1619
1630
|
const searchFields = this.config().searchFields;
|
|
1620
1631
|
return searchFields && searchFields.length > 0;
|
|
1621
1632
|
}, ...(ngDevMode ? [{ debugName: "hasSearch" }] : []));
|
|
1622
|
-
this.searchPlaceholder = computed(() => {
|
|
1623
|
-
const searchFields = this.config().searchFields;
|
|
1624
|
-
if (!searchFields || searchFields.length === 0) {
|
|
1625
|
-
return 'Search...';
|
|
1626
|
-
}
|
|
1627
|
-
return `Search in ${searchFields.join(', ')}...`;
|
|
1628
|
-
}, ...(ngDevMode ? [{ debugName: "searchPlaceholder" }] : []));
|
|
1629
1633
|
// Category Tree Configuration
|
|
1630
1634
|
this.categoryTreeConfig = computed(() => ({
|
|
1631
1635
|
textField: 'title',
|
|
@@ -1644,6 +1648,18 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1644
1648
|
canDelete: false,
|
|
1645
1649
|
canCreateChild: false,
|
|
1646
1650
|
}), ...(ngDevMode ? [{ debugName: "categoryTreeActions" }] : []));
|
|
1651
|
+
effect(() => {
|
|
1652
|
+
const searchFields = this.config().searchFields;
|
|
1653
|
+
void this.updateSearchPlaceholder(searchFields);
|
|
1654
|
+
});
|
|
1655
|
+
effect(() => {
|
|
1656
|
+
const initialTerm = this.config().initialSearchTerm ?? '';
|
|
1657
|
+
if (!this.initialSearchApplied && initialTerm && initialTerm.trim().length > 0) {
|
|
1658
|
+
this.initialSearchApplied = true;
|
|
1659
|
+
this.searchTerm = initialTerm;
|
|
1660
|
+
queueMicrotask(() => this.applySearchFilter(initialTerm));
|
|
1661
|
+
}
|
|
1662
|
+
});
|
|
1647
1663
|
}
|
|
1648
1664
|
//#endregion
|
|
1649
1665
|
//#region ---- Lifecycle Methods ----
|
|
@@ -1692,7 +1708,9 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1692
1708
|
}
|
|
1693
1709
|
handleChangeSearchValue(e) {
|
|
1694
1710
|
if (e.isUserInteraction) {
|
|
1695
|
-
|
|
1711
|
+
const value = e.value ?? '';
|
|
1712
|
+
this.searchTerm = value;
|
|
1713
|
+
this.applySearchFilter(value);
|
|
1696
1714
|
}
|
|
1697
1715
|
}
|
|
1698
1716
|
async handleCreateNewClick() {
|
|
@@ -1742,7 +1760,8 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1742
1760
|
if (!searchFields || searchFields.length === 0) {
|
|
1743
1761
|
return;
|
|
1744
1762
|
}
|
|
1745
|
-
|
|
1763
|
+
const normalizedTerm = isNil(searchTerm) ? '' : `${searchTerm}`.trim();
|
|
1764
|
+
if (isEmpty(normalizedTerm)) {
|
|
1746
1765
|
// Apply only base filters when search is cleared
|
|
1747
1766
|
const baseFilters = this.config().filters;
|
|
1748
1767
|
if (baseFilters) {
|
|
@@ -1756,14 +1775,20 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1756
1775
|
}
|
|
1757
1776
|
// Get base filters from config
|
|
1758
1777
|
const baseFilters = this.config().filters;
|
|
1759
|
-
// Create search
|
|
1760
|
-
const
|
|
1761
|
-
field:
|
|
1762
|
-
value:
|
|
1778
|
+
// Create search filters for all configured fields
|
|
1779
|
+
const searchFilters = searchFields.map((field) => ({
|
|
1780
|
+
field: field.name,
|
|
1781
|
+
value: normalizedTerm,
|
|
1763
1782
|
operator: { type: 'contains' }
|
|
1783
|
+
}));
|
|
1784
|
+
const orFilter = {
|
|
1785
|
+
field: null,
|
|
1786
|
+
logic: 'or',
|
|
1787
|
+
operator: null,
|
|
1788
|
+
filters: searchFilters
|
|
1764
1789
|
};
|
|
1765
1790
|
// Merge base filters with search filter
|
|
1766
|
-
const allFilters = baseFilters ? [baseFilters,
|
|
1791
|
+
const allFilters = baseFilters ? [baseFilters, orFilter] : [orFilter];
|
|
1767
1792
|
const filter = {
|
|
1768
1793
|
field: null,
|
|
1769
1794
|
logic: 'and',
|
|
@@ -1808,10 +1833,38 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
1808
1833
|
this.config().dataSource.filter(filter);
|
|
1809
1834
|
this.config().dataSource.refresh();
|
|
1810
1835
|
}
|
|
1811
|
-
|
|
1812
|
-
|
|
1836
|
+
async updateSearchPlaceholder(searchFields) {
|
|
1837
|
+
const updateToken = ++this.placeholderUpdateToken;
|
|
1838
|
+
if (!searchFields || searchFields.length === 0) {
|
|
1839
|
+
const fallback = await this.translationService.translateAsync('@general:actions.search.title');
|
|
1840
|
+
if (updateToken !== this.placeholderUpdateToken) {
|
|
1841
|
+
return;
|
|
1842
|
+
}
|
|
1843
|
+
const placeholder = fallback ? `${fallback}...` : '';
|
|
1844
|
+
this.searchPlaceholderText.set(placeholder);
|
|
1845
|
+
return;
|
|
1846
|
+
}
|
|
1847
|
+
const translatedFields = await Promise.all(searchFields.map(async (field) => {
|
|
1848
|
+
const translated = await this.translationService.translateAsync(field.title || field.name);
|
|
1849
|
+
return translated ?? field.title ?? field.name;
|
|
1850
|
+
}));
|
|
1851
|
+
const fieldsText = translatedFields
|
|
1852
|
+
.filter((value) => Boolean(value && value.trim().length > 0))
|
|
1853
|
+
.join(', ') || searchFields.map((field) => field.title || field.name).join(', ');
|
|
1854
|
+
const placeholder = await this.translationService.translateAsync('@general:widgets.lookup.search-placeholder', {
|
|
1855
|
+
params: {
|
|
1856
|
+
fields: fieldsText
|
|
1857
|
+
}
|
|
1858
|
+
});
|
|
1859
|
+
if (updateToken !== this.placeholderUpdateToken) {
|
|
1860
|
+
return;
|
|
1861
|
+
}
|
|
1862
|
+
this.searchPlaceholderText.set(placeholder ?? `Search in ${fieldsText}...`);
|
|
1863
|
+
}
|
|
1864
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1865
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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]=\"searchPlaceholderText()\" [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.dataPath || 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$2.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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$2.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "rowDetailsTemplate", "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$2.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$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 }); }
|
|
1813
1866
|
}
|
|
1814
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1867
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
|
|
1815
1868
|
type: Component,
|
|
1816
1869
|
args: [{ selector: 'axp-data-selector', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1817
1870
|
CommonModule,
|
|
@@ -1826,8 +1879,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
1826
1879
|
AXTranslationModule,
|
|
1827
1880
|
AXBadgeModule,
|
|
1828
1881
|
AXPCategoryTreeComponent,
|
|
1829
|
-
], inputs: [], template: "<div class=\"axp-data-selector\">\n <!-- Main Content Area -->\n <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n <!-- Category Filter Side Panel -->\n @if (config().categoryFilter?.enabled) {\n
|
|
1830
|
-
}], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
|
|
1882
|
+
], inputs: [], template: "<div class=\"axp-data-selector\">\n <!-- Main Content Area -->\n <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"config().categoryFilter?.enabled\">\n <!-- Category Filter Side Panel -->\n @if (config().categoryFilter?.enabled) {\n <div class=\"axp-category-filter-panel\" [style.width]=\"config().categoryFilter?.width || '300px'\">\n <axp-category-tree [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]=\"searchPlaceholderText()\" [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.dataPath || 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"] }]
|
|
1883
|
+
}], ctorParameters: () => [], propDecorators: { grid: [{ type: i0.ViewChild, args: ['grid', { isSignal: true }] }] } });
|
|
1831
1884
|
|
|
1832
1885
|
var dataSelector_component = /*#__PURE__*/Object.freeze({
|
|
1833
1886
|
__proto__: null,
|
|
@@ -1877,10 +1930,10 @@ class AXPDataSelectorService {
|
|
|
1877
1930
|
};
|
|
1878
1931
|
return this.open(enhancedConfig);
|
|
1879
1932
|
}
|
|
1880
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1881
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1933
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1934
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorService, providedIn: 'root' }); }
|
|
1882
1935
|
}
|
|
1883
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1936
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDataSelectorService, decorators: [{
|
|
1884
1937
|
type: Injectable,
|
|
1885
1938
|
args: [{
|
|
1886
1939
|
providedIn: 'root'
|
|
@@ -1917,17 +1970,238 @@ class AXPDragDropListComponent {
|
|
|
1917
1970
|
this.itemClick.emit(item);
|
|
1918
1971
|
}
|
|
1919
1972
|
}
|
|
1920
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1973
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDragDropListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1974
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDragDropListComponent, isStandalone: true, selector: "axp-drag-drop-list", inputs: { items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, listId: { classPropertyName: "listId", publicName: "listId", isSignal: true, isRequired: false, transformFunction: null }, dropListGroup: { classPropertyName: "dropListGroup", publicName: "dropListGroup", isSignal: true, isRequired: false, transformFunction: null }, orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: true, isRequired: false, transformFunction: null }, emptyMessage: { classPropertyName: "emptyMessage", publicName: "emptyMessage", isSignal: true, isRequired: false, transformFunction: null }, disable: { classPropertyName: "disable", publicName: "disable", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { items: "itemsChange", itemClick: "itemClick", dropListDropped: "dropListDropped" }, host: { classAttribute: "axp-drag-drop-list" }, ngImport: i0, template: "<div\n class=\"axp-drag-drop-list-container ax-divide-y\"\n [attr.id]=\"listId()\"\n [attr.data-orientation]=\"orientation()\"\n axDropList\n [dropListGroup]=\"dropListGroup()\"\n [dropListOrientation]=\"orientation()\"\n (dropListDropped)=\"onDrop($event)\"\n [sortingDisabled]=\"disable()\"\n>\n @if (items().length === 0) {\n <div class=\"axp-drag-drop-list-empty\">\n <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n </div>\n }\n\n @for (item of items(); track item.id; let i = $index) {\n <div\n class=\"axp-drag-drop-list-item\"\n [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n [class]=\"item.cssClass\"\n axDrag\n [dragDisabled]=\"item.disabled || false\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n <i class=\"fa-solid fa-bars\"></i>\n </div>\n\n <div class=\"axp-drag-drop-list-item-content\">\n {{ item.content }}\n </div>\n </div>\n }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px #0003;opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px #00000026;opacity:.9}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: AXDragDirective, selector: "[axDrag]", inputs: ["axDrag", "dragData", "dragDisabled", "dragTransition", "dragElementClone", "dropZoneGroup", "dragStartDelay", "dragResetOnDblClick", "dragLockAxis", "dragClonedTemplate", "dragCursor", "dragBoundary", "dragTransitionDuration"], outputs: ["dragPositionChanged"] }, { kind: "directive", type: AXDragHandleDirective, selector: "[axDragHandle]" }, { kind: "directive", type: AXDropListDirective, selector: "[axDropList]", inputs: ["axDropList", "sortingDisabled", "dropListGroup", "dropListOrientation"], outputs: ["dropListDropped"], exportAs: ["axDropList"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1922
1975
|
}
|
|
1923
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1976
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDragDropListComponent, decorators: [{
|
|
1924
1977
|
type: Component,
|
|
1925
1978
|
args: [{ selector: 'axp-drag-drop-list', standalone: true, imports: [CommonModule, AXDragDirective, AXDragHandleDirective, AXDropListDirective], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
|
|
1926
1979
|
class: 'axp-drag-drop-list',
|
|
1927
|
-
}, template: "<div\n class=\"axp-drag-drop-list-container ax-divide-y\"\n [attr.id]=\"listId()\"\n [attr.data-orientation]=\"orientation()\"\n axDropList\n [dropListGroup]=\"dropListGroup()\"\n [dropListOrientation]=\"orientation()\"\n (dropListDropped)=\"onDrop($event)\"\n [sortingDisabled]=\"disable()\"\n>\n @if (items().length === 0) {\n <div class=\"axp-drag-drop-list-empty\">\n <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n </div>\n }\n\n @for (item of items(); track item.id; let i = $index) {\n <div\n class=\"axp-drag-drop-list-item\"\n [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n [class]=\"item.cssClass\"\n axDrag\n [dragDisabled]=\"item.disabled || false\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n <i class=\"fa-solid fa-bars\"></i>\n </div>\n\n <div class=\"axp-drag-drop-list-item-content\">\n {{ item.content }}\n </div>\n </div>\n }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none
|
|
1980
|
+
}, template: "<div\n class=\"axp-drag-drop-list-container ax-divide-y\"\n [attr.id]=\"listId()\"\n [attr.data-orientation]=\"orientation()\"\n axDropList\n [dropListGroup]=\"dropListGroup()\"\n [dropListOrientation]=\"orientation()\"\n (dropListDropped)=\"onDrop($event)\"\n [sortingDisabled]=\"disable()\"\n>\n @if (items().length === 0) {\n <div class=\"axp-drag-drop-list-empty\">\n <span class=\"axp-drag-drop-list-empty-message\">{{ emptyMessage() }}</span>\n </div>\n }\n\n @for (item of items(); track item.id; let i = $index) {\n <div\n class=\"axp-drag-drop-list-item\"\n [class.axp-drag-drop-list-item-disabled]=\"item.disabled\"\n [class]=\"item.cssClass\"\n axDrag\n [dragDisabled]=\"item.disabled || false\"\n (click)=\"onItemClick(item)\"\n >\n <div class=\"axp-drag-drop-list-item-handle\" axDragHandle>\n <i class=\"fa-solid fa-bars\"></i>\n </div>\n\n <div class=\"axp-drag-drop-list-item-content\">\n {{ item.content }}\n </div>\n </div>\n }\n</div>\n", styles: [".axp-drag-drop-list{display:block;width:100%}.axp-drag-drop-list-container{display:flex;flex-direction:column;gap:.5rem;min-height:3rem;padding:.5rem;border-radius:.25rem;background-color:rgb(var(--ax-sys-color-lightest-surface));border-width:1px}.axp-drag-drop-list-container[data-orientation=horizontal]{flex-direction:row}.axp-drag-drop-list-container[data-orientation=vertical]{flex-direction:column}.axp-drag-drop-list-empty{display:flex;align-items:center;justify-content:center;width:100%;min-height:3rem;padding:1rem}.axp-drag-drop-list-empty-message{color:var(--ax-text-secondary-color, #9e9e9e);font-size:.875rem;font-style:italic}.axp-drag-drop-list-item{display:flex;align-items:center;gap:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-lightest-surface));cursor:move;transition:all .2s ease;-webkit-user-select:none;user-select:none}.axp-drag-drop-list-item.cdk-drag-preview{box-shadow:0 5px 10px #0003;opacity:.9}.axp-drag-drop-list-item.cdk-drag-placeholder{opacity:.3;border-style:dashed}.axp-drag-drop-list-item.cdk-drag-animating{transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list-item-disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.axp-drag-drop-list-item-handle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.5rem;height:1.5rem;cursor:grab;transition:color .2s ease}.axp-drag-drop-list-item-handle:active{cursor:grabbing}.axp-drag-drop-list-item-handle svg{width:100%;height:100%}.axp-drag-drop-list-item-content{flex:1;padding-bottom:2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem}.cdk-drop-list-dragging .axp-drag-drop-list-item:not(.cdk-drag-placeholder){transition:transform .25s cubic-bezier(0,0,.2,1)}.axp-drag-drop-list .cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-primary-400))}.axp-drag-drop-list-item.cdk-drag-preview,.axp-drag-drop-list-item.ax-drag-preview{border:1px dashed rgb(var(--ax-sys-color-primary-400))!important;box-shadow:0 4px 12px #00000026;opacity:.9}\n"] }]
|
|
1928
1981
|
}], propDecorators: { items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }, { type: i0.Output, args: ["itemsChange"] }], listId: [{ type: i0.Input, args: [{ isSignal: true, alias: "listId", required: false }] }], dropListGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "dropListGroup", required: false }] }], orientation: [{ type: i0.Input, args: [{ isSignal: true, alias: "orientation", required: false }] }], emptyMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "emptyMessage", required: false }] }], disable: [{ type: i0.Input, args: [{ isSignal: true, alias: "disable", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }], dropListDropped: [{ type: i0.Output, args: ["dropListDropped"] }] } });
|
|
1929
1982
|
|
|
1930
|
-
class
|
|
1983
|
+
class AXPPropertyViewerComponent {
|
|
1984
|
+
//#endregion
|
|
1985
|
+
constructor() {
|
|
1986
|
+
//#region ---- Inputs ----
|
|
1987
|
+
/**
|
|
1988
|
+
* List of tabs that should be rendered inside the property viewer.
|
|
1989
|
+
*/
|
|
1990
|
+
this.tabsInput = input([], ...(ngDevMode ? [{ debugName: "tabsInput" }] : []));
|
|
1991
|
+
/**
|
|
1992
|
+
* Determines rendering mode.
|
|
1993
|
+
*/
|
|
1994
|
+
this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
1995
|
+
//#endregion
|
|
1996
|
+
//#region ---- Outputs ----
|
|
1997
|
+
/**
|
|
1998
|
+
* Emits when property context changes.
|
|
1999
|
+
*/
|
|
2000
|
+
this.onChanged = new EventEmitter();
|
|
2001
|
+
//#endregion
|
|
2002
|
+
//#region ---- Signals ----
|
|
2003
|
+
this.currentTabIndex = signal(0, ...(ngDevMode ? [{ debugName: "currentTabIndex" }] : []));
|
|
2004
|
+
this.tabs = computed(() => {
|
|
2005
|
+
const incomingTabs = this.tabsInput() ?? [];
|
|
2006
|
+
return incomingTabs
|
|
2007
|
+
.map((tab) => ({
|
|
2008
|
+
...tab,
|
|
2009
|
+
groups: (tab.groups ?? [])
|
|
2010
|
+
.map((group) => ({
|
|
2011
|
+
...group,
|
|
2012
|
+
isCollapsed: group.isCollapsed ?? false,
|
|
2013
|
+
props: (group.props ?? []).filter((prop) => prop.visible !== false),
|
|
2014
|
+
}))
|
|
2015
|
+
.filter((group) => group.props.length > 0),
|
|
2016
|
+
}))
|
|
2017
|
+
.filter((tab) => tab.groups.length > 0);
|
|
2018
|
+
}, ...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
2019
|
+
this.groups = computed(() => {
|
|
2020
|
+
const preparedTabs = this.tabs();
|
|
2021
|
+
if (!preparedTabs.length) {
|
|
2022
|
+
return [];
|
|
2023
|
+
}
|
|
2024
|
+
const index = Math.min(this.currentTabIndex(), preparedTabs.length - 1);
|
|
2025
|
+
if (index !== this.currentTabIndex()) {
|
|
2026
|
+
this.currentTabIndex.set(index);
|
|
2027
|
+
}
|
|
2028
|
+
return preparedTabs[index].groups.map((group) => ({
|
|
2029
|
+
...group,
|
|
2030
|
+
isCollapsed: this.groupCollapsedStates.get(group.name) ?? !!group.isCollapsed,
|
|
2031
|
+
}));
|
|
2032
|
+
}, ...(ngDevMode ? [{ debugName: "groups" }] : []));
|
|
2033
|
+
this.context = signal({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
2034
|
+
//#endregion
|
|
2035
|
+
//#region ---- Properties ----
|
|
2036
|
+
this.groupCollapsedStates = new Map();
|
|
2037
|
+
effect(() => {
|
|
2038
|
+
const availableTabs = this.tabs();
|
|
2039
|
+
const availableGroups = availableTabs.flatMap((tab) => tab.groups);
|
|
2040
|
+
availableGroups.forEach((group) => {
|
|
2041
|
+
if (!this.groupCollapsedStates.has(group.name) && group.isCollapsed !== undefined) {
|
|
2042
|
+
this.groupCollapsedStates.set(group.name, !!group.isCollapsed);
|
|
2043
|
+
}
|
|
2044
|
+
});
|
|
2045
|
+
if (!availableTabs.length) {
|
|
2046
|
+
this.currentTabIndex.set(0);
|
|
2047
|
+
}
|
|
2048
|
+
else if (this.currentTabIndex() >= availableTabs.length) {
|
|
2049
|
+
this.currentTabIndex.set(0);
|
|
2050
|
+
}
|
|
2051
|
+
});
|
|
2052
|
+
}
|
|
2053
|
+
//#region ---- Public Methods ----
|
|
2054
|
+
/**
|
|
2055
|
+
* Replaces the current context with the provided value and emits an init event.
|
|
2056
|
+
*/
|
|
2057
|
+
initializeContext(value) {
|
|
2058
|
+
untracked(() => {
|
|
2059
|
+
this.context.set(cloneDeep(value ?? {}));
|
|
2060
|
+
this.onChanged.emit({ values: this.context(), mode: 'init' });
|
|
2061
|
+
});
|
|
2062
|
+
}
|
|
2063
|
+
/**
|
|
2064
|
+
* Merges the provided value into the current context and emits an update event.
|
|
2065
|
+
*/
|
|
2066
|
+
update(value) {
|
|
2067
|
+
untracked(() => {
|
|
2068
|
+
this.context.set(merge(cloneDeep(this.context()), value ?? {}));
|
|
2069
|
+
this.onChanged.emit({ values: this.context(), mode: 'update' });
|
|
2070
|
+
});
|
|
2071
|
+
}
|
|
2072
|
+
//#endregion
|
|
2073
|
+
//#region ---- Event Handlers ----
|
|
2074
|
+
/**
|
|
2075
|
+
* Handles context changes produced by rendered widgets.
|
|
2076
|
+
*/
|
|
2077
|
+
handleContextChange(event) {
|
|
2078
|
+
untracked(() => {
|
|
2079
|
+
this.context.set(event.data);
|
|
2080
|
+
this.onChanged.emit({ values: this.context(), mode: event.state === 'initiated' ? 'init' : 'update' });
|
|
2081
|
+
});
|
|
2082
|
+
}
|
|
2083
|
+
/**
|
|
2084
|
+
* Handles tab selection changes.
|
|
2085
|
+
*/
|
|
2086
|
+
handleTabChange(event) {
|
|
2087
|
+
const index = event.index;
|
|
2088
|
+
if (this.currentTabIndex() !== index) {
|
|
2089
|
+
this.currentTabIndex.set(index);
|
|
2090
|
+
}
|
|
2091
|
+
}
|
|
2092
|
+
/**
|
|
2093
|
+
* Stores collapsed state for a group.
|
|
2094
|
+
*/
|
|
2095
|
+
handleCollapsedChange(groupName, isCollapsed) {
|
|
2096
|
+
this.groupCollapsedStates.set(groupName, isCollapsed);
|
|
2097
|
+
}
|
|
2098
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2099
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPPropertyViewerComponent, isStandalone: true, selector: "axp-property-viewer", inputs: { tabsInput: { classPropertyName: "tabsInput", publicName: "tabsInput", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n @if (mode() === 'advanced') {\n <div class=\"ax-flex ax-flex-col\">\n @if (tabs().length > 1) {\n <div class=\"ax-pb-2\">\n <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n @for (tab of tabs(); track $index) {\n <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"ax-flex-1 ax-overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n @for (group of groups(); track $index) {\n <ax-accordion-item 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'\">\n </ng-container>\n }\n </div>\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n @else {\n <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n @for (group of groups(); track $index) {\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-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$3.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$3.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$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 }); }
|
|
2100
|
+
}
|
|
2101
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
|
|
2102
|
+
type: Component,
|
|
2103
|
+
args: [{ selector: 'axp-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXAccordionModule, AXTabsModule, AXPWidgetCoreModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n @if (mode() === 'advanced') {\n <div class=\"ax-flex ax-flex-col\">\n @if (tabs().length > 1) {\n <div class=\"ax-pb-2\">\n <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n @for (tab of tabs(); track $index) {\n <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"ax-flex-1 ax-overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n @for (group of groups(); track $index) {\n <ax-accordion-item 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'\">\n </ng-container>\n }\n </div>\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n @else {\n <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n @for (group of groups(); track $index) {\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-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"] }]
|
|
2104
|
+
}], ctorParameters: () => [], propDecorators: { tabsInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabsInput", required: false }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onChanged: [{
|
|
2105
|
+
type: Output
|
|
2106
|
+
}] } });
|
|
2107
|
+
|
|
2108
|
+
class AXPPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
2109
|
+
//#endregion
|
|
2110
|
+
constructor() {
|
|
2111
|
+
super();
|
|
2112
|
+
//#region ---- Inputs ----
|
|
2113
|
+
this.tabs = input.required(...(ngDevMode ? [{ debugName: "tabs" }] : []));
|
|
2114
|
+
this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
2115
|
+
this.context = input({}, ...(ngDevMode ? [{ debugName: "context" }] : []));
|
|
2116
|
+
//#endregion
|
|
2117
|
+
//#region ---- Properties ----
|
|
2118
|
+
this.propertyViewer = viewChild(AXPPropertyViewerComponent, ...(ngDevMode ? [{ debugName: "propertyViewer" }] : []));
|
|
2119
|
+
this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
|
|
2120
|
+
this.currentMode = 'init';
|
|
2121
|
+
effect(() => {
|
|
2122
|
+
const viewer = this.propertyViewer();
|
|
2123
|
+
if (!viewer) {
|
|
2124
|
+
return;
|
|
2125
|
+
}
|
|
2126
|
+
viewer.initializeContext(this.context() ?? {});
|
|
2127
|
+
});
|
|
2128
|
+
}
|
|
2129
|
+
//#region ---- Event Handlers ----
|
|
2130
|
+
handlePropertyChanged(event) {
|
|
2131
|
+
this.currentValues.set(event.values ?? {});
|
|
2132
|
+
this.currentMode = event.mode;
|
|
2133
|
+
}
|
|
2134
|
+
handleCloseClick() {
|
|
2135
|
+
this.close();
|
|
2136
|
+
}
|
|
2137
|
+
handleApplyClick() {
|
|
2138
|
+
this.close({
|
|
2139
|
+
values: this.currentValues(),
|
|
2140
|
+
mode: this.currentMode,
|
|
2141
|
+
});
|
|
2142
|
+
}
|
|
2143
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerPopupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2144
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.12", type: AXPPropertyViewerPopupComponent, isStandalone: true, selector: "axp-property-viewer-popup", inputs: { tabs: { classPropertyName: "tabs", publicName: "tabs", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, context: { classPropertyName: "context", publicName: "context", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "propertyViewer", first: true, predicate: AXPPropertyViewerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
2145
|
+
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
2146
|
+
<axp-property-viewer
|
|
2147
|
+
[tabsInput]="tabs()"
|
|
2148
|
+
[mode]="mode()"
|
|
2149
|
+
(onChanged)="handlePropertyChanged($event)"
|
|
2150
|
+
></axp-property-viewer>
|
|
2151
|
+
</div>
|
|
2152
|
+
|
|
2153
|
+
<ax-footer>
|
|
2154
|
+
<ax-suffix>
|
|
2155
|
+
<ax-button
|
|
2156
|
+
look="solid"
|
|
2157
|
+
[text]="'@general:actions.close.title' | translate | async"
|
|
2158
|
+
(onClick)="handleCloseClick()"
|
|
2159
|
+
></ax-button>
|
|
2160
|
+
<ax-button
|
|
2161
|
+
look="solid"
|
|
2162
|
+
color="primary"
|
|
2163
|
+
[text]="'@general:actions.apply.title' | translate | async"
|
|
2164
|
+
(onClick)="handleApplyClick()"
|
|
2165
|
+
></ax-button>
|
|
2166
|
+
</ax-suffix>
|
|
2167
|
+
</ax-footer>
|
|
2168
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: AXPPropertyViewerComponent, selector: "axp-property-viewer", inputs: ["tabsInput", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2169
|
+
}
|
|
2170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerPopupComponent, decorators: [{
|
|
2171
|
+
type: Component,
|
|
2172
|
+
args: [{
|
|
2173
|
+
selector: 'axp-property-viewer-popup',
|
|
2174
|
+
template: `
|
|
2175
|
+
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
2176
|
+
<axp-property-viewer
|
|
2177
|
+
[tabsInput]="tabs()"
|
|
2178
|
+
[mode]="mode()"
|
|
2179
|
+
(onChanged)="handlePropertyChanged($event)"
|
|
2180
|
+
></axp-property-viewer>
|
|
2181
|
+
</div>
|
|
2182
|
+
|
|
2183
|
+
<ax-footer>
|
|
2184
|
+
<ax-suffix>
|
|
2185
|
+
<ax-button
|
|
2186
|
+
look="solid"
|
|
2187
|
+
[text]="'@general:actions.close.title' | translate | async"
|
|
2188
|
+
(onClick)="handleCloseClick()"
|
|
2189
|
+
></ax-button>
|
|
2190
|
+
<ax-button
|
|
2191
|
+
look="solid"
|
|
2192
|
+
color="primary"
|
|
2193
|
+
[text]="'@general:actions.apply.title' | translate | async"
|
|
2194
|
+
(onClick)="handleApplyClick()"
|
|
2195
|
+
></ax-button>
|
|
2196
|
+
</ax-suffix>
|
|
2197
|
+
</ax-footer>
|
|
2198
|
+
`,
|
|
2199
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
2200
|
+
imports: [CommonModule, AXButtonModule, AXDecoratorModule, AXTranslationModule, AXPPropertyViewerComponent],
|
|
2201
|
+
}]
|
|
2202
|
+
}], ctorParameters: () => [], propDecorators: { tabs: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabs", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], context: [{ type: i0.Input, args: [{ isSignal: true, alias: "context", required: false }] }], propertyViewer: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXPPropertyViewerComponent), { isSignal: true }] }] } });
|
|
2203
|
+
|
|
2204
|
+
class AXPPropertyViewerService {
|
|
1931
2205
|
constructor() {
|
|
1932
2206
|
//#region ---- Services & Dependencies ----
|
|
1933
2207
|
this.popupService = inject(AXPopupService);
|
|
@@ -1935,27 +2209,153 @@ class AXPWidgetPropertyViewerService {
|
|
|
1935
2209
|
//#endregion
|
|
1936
2210
|
//#region ---- Public Methods ----
|
|
1937
2211
|
/**
|
|
1938
|
-
* Open
|
|
2212
|
+
* Open property viewer popup with predefined tabs and context.
|
|
1939
2213
|
*/
|
|
1940
2214
|
async open(config) {
|
|
1941
|
-
const
|
|
1942
|
-
const result = await this.popupService.open(component, {
|
|
2215
|
+
const result = await this.popupService.open(AXPPropertyViewerPopupComponent, {
|
|
1943
2216
|
title: config.title,
|
|
1944
|
-
size: config.size || '
|
|
2217
|
+
size: config.size || 'md',
|
|
1945
2218
|
data: {
|
|
1946
|
-
|
|
1947
|
-
mode: signal(config.mode || 'simple')
|
|
1948
|
-
|
|
2219
|
+
tabs: signal(config.tabs),
|
|
2220
|
+
mode: signal(config.mode || 'simple'),
|
|
2221
|
+
context: signal(config.context ?? {}),
|
|
2222
|
+
},
|
|
1949
2223
|
});
|
|
1950
2224
|
return result.data || null;
|
|
1951
2225
|
}
|
|
1952
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1953
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
2226
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2227
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerService, providedIn: 'root' }); }
|
|
1954
2228
|
}
|
|
1955
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2229
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPPropertyViewerService, decorators: [{
|
|
1956
2230
|
type: Injectable,
|
|
1957
2231
|
args: [{
|
|
1958
|
-
providedIn: 'root'
|
|
2232
|
+
providedIn: 'root',
|
|
2233
|
+
}]
|
|
2234
|
+
}] });
|
|
2235
|
+
|
|
2236
|
+
class AXPWidgetPropertyViewerService {
|
|
2237
|
+
constructor() {
|
|
2238
|
+
//#region ---- Services & Dependencies ----
|
|
2239
|
+
this.widgetRegistryService = inject(AXPWidgetRegistryService);
|
|
2240
|
+
this.propertyViewerService = inject(AXPPropertyViewerService);
|
|
2241
|
+
}
|
|
2242
|
+
//#endregion
|
|
2243
|
+
//#region ---- Public Methods ----
|
|
2244
|
+
/**
|
|
2245
|
+
* Open widget property viewer popup
|
|
2246
|
+
*/
|
|
2247
|
+
async open(config) {
|
|
2248
|
+
const widgetConfig = this.widgetRegistryService.resolve(config.widget?.type);
|
|
2249
|
+
if (!widgetConfig) {
|
|
2250
|
+
console.error(`AXPWidgetPropertyViewerService: Unable to resolve widget config for type "${config.widget?.type}"`);
|
|
2251
|
+
return null;
|
|
2252
|
+
}
|
|
2253
|
+
const custom = config.custom;
|
|
2254
|
+
const tabs = this.buildTabs(widgetConfig, custom);
|
|
2255
|
+
const context = this.buildInitialContext(widgetConfig, config.widget, custom);
|
|
2256
|
+
return await this.propertyViewerService.open({
|
|
2257
|
+
title: config.title,
|
|
2258
|
+
tabs,
|
|
2259
|
+
context,
|
|
2260
|
+
mode: config.mode,
|
|
2261
|
+
});
|
|
2262
|
+
}
|
|
2263
|
+
//#endregion
|
|
2264
|
+
//#region ---- Utility Methods ----
|
|
2265
|
+
buildTabs(config, custom) {
|
|
2266
|
+
const tabs = [
|
|
2267
|
+
{
|
|
2268
|
+
name: 'general',
|
|
2269
|
+
title: 'General',
|
|
2270
|
+
properties: config.properties ?? [],
|
|
2271
|
+
},
|
|
2272
|
+
];
|
|
2273
|
+
Object.entries(config.components ?? {}).forEach(([name, component]) => {
|
|
2274
|
+
if (component?.component && component.properties?.length) {
|
|
2275
|
+
tabs.push({
|
|
2276
|
+
name,
|
|
2277
|
+
title: component.title ?? name,
|
|
2278
|
+
properties: component.properties ?? [],
|
|
2279
|
+
});
|
|
2280
|
+
}
|
|
2281
|
+
});
|
|
2282
|
+
// Add custom properties if provided
|
|
2283
|
+
if (custom?.properties?.length) {
|
|
2284
|
+
custom.properties.forEach((entry) => {
|
|
2285
|
+
const defaultTabName = custom.defaultTab?.name ?? tabs[0]?.name ?? 'general';
|
|
2286
|
+
const defaultTabTitle = custom.defaultTab?.title ?? tabs.find((tab) => tab.name === defaultTabName)?.title ?? 'Custom';
|
|
2287
|
+
const targetTabName = entry.tab?.name ?? defaultTabName;
|
|
2288
|
+
const targetTabTitle = entry.tab?.title ?? (targetTabName === defaultTabName ? defaultTabTitle : 'Custom');
|
|
2289
|
+
let targetTab = tabs.find((tab) => tab.name === targetTabName);
|
|
2290
|
+
if (!targetTab) {
|
|
2291
|
+
targetTab = {
|
|
2292
|
+
name: targetTabName,
|
|
2293
|
+
title: targetTabTitle,
|
|
2294
|
+
properties: [],
|
|
2295
|
+
};
|
|
2296
|
+
tabs.push(targetTab);
|
|
2297
|
+
}
|
|
2298
|
+
const baseGroup = targetTab.properties[0]?.group;
|
|
2299
|
+
const defaultGroupName = custom.defaultGroup?.name ?? baseGroup?.name ?? entry.property.group?.name ?? 'custom';
|
|
2300
|
+
const defaultGroupTitle = custom.defaultGroup?.title ?? baseGroup?.title ?? entry.property.group?.title ?? 'Custom';
|
|
2301
|
+
const groupName = entry.group?.name ?? defaultGroupName;
|
|
2302
|
+
const groupTitle = entry.group?.title ?? defaultGroupTitle;
|
|
2303
|
+
targetTab.properties.push({
|
|
2304
|
+
...entry.property,
|
|
2305
|
+
group: {
|
|
2306
|
+
...entry.property.group,
|
|
2307
|
+
name: groupName,
|
|
2308
|
+
title: groupTitle,
|
|
2309
|
+
order: entry.property.group?.order ?? baseGroup?.order ?? 0,
|
|
2310
|
+
},
|
|
2311
|
+
});
|
|
2312
|
+
});
|
|
2313
|
+
}
|
|
2314
|
+
return tabs
|
|
2315
|
+
.map((tab) => {
|
|
2316
|
+
const visibleProps = (tab.properties ?? []).filter((prop) => prop.visible !== false);
|
|
2317
|
+
return {
|
|
2318
|
+
name: tab.name,
|
|
2319
|
+
title: tab.title,
|
|
2320
|
+
groups: unionBy(sortBy(visibleProps.map((prop) => ({
|
|
2321
|
+
name: prop.group.name,
|
|
2322
|
+
title: prop.group.title,
|
|
2323
|
+
isCollapsed: false,
|
|
2324
|
+
props: sortBy(visibleProps.filter((p) => p.group.name === prop.group.name && prop.visible !== false), ['order', 'title']),
|
|
2325
|
+
})), ['order', 'title']), 'name').filter((group) => group.props.length),
|
|
2326
|
+
};
|
|
2327
|
+
})
|
|
2328
|
+
.filter((tab) => tab.groups.length);
|
|
2329
|
+
}
|
|
2330
|
+
buildInitialContext(config, widget, custom) {
|
|
2331
|
+
const allProperties = [
|
|
2332
|
+
...(config.properties ?? []),
|
|
2333
|
+
...Object.values(config.components ?? {}).flatMap((component) => component?.properties ?? []),
|
|
2334
|
+
...(custom?.properties?.map((item) => item.property) ?? []),
|
|
2335
|
+
];
|
|
2336
|
+
const defaults = allProperties
|
|
2337
|
+
.filter((prop) => {
|
|
2338
|
+
const defaultValue = prop.schema.defaultValue;
|
|
2339
|
+
if (isArray(defaultValue)) {
|
|
2340
|
+
return !isEmpty(defaultValue);
|
|
2341
|
+
}
|
|
2342
|
+
return !isNil(defaultValue);
|
|
2343
|
+
})
|
|
2344
|
+
.reduce((acc, prop) => {
|
|
2345
|
+
if (prop.schema?.interface?.path) {
|
|
2346
|
+
set(acc, prop.schema.interface.path, prop.schema.defaultValue);
|
|
2347
|
+
}
|
|
2348
|
+
return acc;
|
|
2349
|
+
}, {});
|
|
2350
|
+
return merge(cloneDeep(defaults), cloneDeep(widget));
|
|
2351
|
+
}
|
|
2352
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
2353
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerService, providedIn: 'root' }); }
|
|
2354
|
+
}
|
|
2355
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerService, decorators: [{
|
|
2356
|
+
type: Injectable,
|
|
2357
|
+
args: [{
|
|
2358
|
+
providedIn: 'root',
|
|
1959
2359
|
}]
|
|
1960
2360
|
}] });
|
|
1961
2361
|
|
|
@@ -2069,6 +2469,18 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2069
2469
|
this.canDeleteGroup = computed(() => {
|
|
2070
2470
|
return this.formDefinition().groups.length > 1;
|
|
2071
2471
|
}, ...(ngDevMode ? [{ debugName: "canDeleteGroup" }] : []));
|
|
2472
|
+
// Disable preview when only one empty group exists
|
|
2473
|
+
this.isPreviewDisabled = computed(() => {
|
|
2474
|
+
const groups = this.formDefinition().groups || [];
|
|
2475
|
+
if (groups.length === 0) {
|
|
2476
|
+
return true;
|
|
2477
|
+
}
|
|
2478
|
+
if (groups.length === 1) {
|
|
2479
|
+
const [singleGroup] = groups;
|
|
2480
|
+
return !singleGroup.parameters || singleGroup.parameters.length === 0;
|
|
2481
|
+
}
|
|
2482
|
+
return false;
|
|
2483
|
+
}, ...(ngDevMode ? [{ debugName: "isPreviewDisabled" }] : []));
|
|
2072
2484
|
// Convert form definition to designer groups for template rendering
|
|
2073
2485
|
this.designerGroups = computed(() => {
|
|
2074
2486
|
const formDef = this.formDefinition();
|
|
@@ -2269,6 +2681,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2269
2681
|
...currentDefinition,
|
|
2270
2682
|
groups: updatedGroups,
|
|
2271
2683
|
});
|
|
2684
|
+
this.applyDesignerFieldUpdates(fieldId, updates);
|
|
2272
2685
|
// Reset flag after a delay
|
|
2273
2686
|
setTimeout(() => {
|
|
2274
2687
|
this.isInternalUpdate = false;
|
|
@@ -2392,6 +2805,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2392
2805
|
this.isInternalUpdate = true;
|
|
2393
2806
|
console.log('Set isInternalUpdate flag to prevent external sync');
|
|
2394
2807
|
this.formDefinition.set(newDefinition);
|
|
2808
|
+
this.applyDesignerGroupUpdates(groupName, updates);
|
|
2395
2809
|
// Reset flag after a longer delay to ensure all effects have processed
|
|
2396
2810
|
setTimeout(() => {
|
|
2397
2811
|
this.isInternalUpdate = false;
|
|
@@ -2565,6 +2979,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2565
2979
|
valueField: 'value',
|
|
2566
2980
|
textField: 'text',
|
|
2567
2981
|
dataSource: this.widgetOptions(),
|
|
2982
|
+
allowSearch: true,
|
|
2568
2983
|
placeholder: widgetTypePlaceholder,
|
|
2569
2984
|
validations: [{ rule: 'required' }],
|
|
2570
2985
|
});
|
|
@@ -2616,21 +3031,63 @@ class AXPDynamicFormDesignerComponent {
|
|
|
2616
3031
|
const title = await this.translationService.translateAsync('@dynamic-form-designer:components.fields.edit-dialog.title', {
|
|
2617
3032
|
params: { fieldName: field.title }
|
|
2618
3033
|
});
|
|
3034
|
+
const customGroup = { name: 'designer', title: 'Designer', order: 0 };
|
|
3035
|
+
const titleProperty = createStringProperty({
|
|
3036
|
+
name: 'designerFieldTitle',
|
|
3037
|
+
title: 'Field Title',
|
|
3038
|
+
path: '__designer.field.title',
|
|
3039
|
+
group: customGroup,
|
|
3040
|
+
defaultValue: field.title ?? '',
|
|
3041
|
+
});
|
|
3042
|
+
const descriptionProperty = createStringProperty({
|
|
3043
|
+
name: 'designerFieldDescription',
|
|
3044
|
+
title: 'Field Description',
|
|
3045
|
+
path: '__designer.field.description',
|
|
3046
|
+
group: customGroup,
|
|
3047
|
+
defaultValue: field.description ?? '',
|
|
3048
|
+
});
|
|
2619
3049
|
// Use the existing widget property viewer service
|
|
2620
3050
|
const result = await this.widgetPropertyViewerService.open({
|
|
2621
3051
|
title: title,
|
|
2622
3052
|
widget: field.widget,
|
|
2623
3053
|
mode: 'advanced',
|
|
2624
|
-
|
|
3054
|
+
custom: {
|
|
3055
|
+
defaultGroup: { name: customGroup.name, title: customGroup.title },
|
|
3056
|
+
properties: [
|
|
3057
|
+
{
|
|
3058
|
+
property: titleProperty,
|
|
3059
|
+
group: { name: customGroup.name, title: customGroup.title },
|
|
3060
|
+
},
|
|
3061
|
+
{
|
|
3062
|
+
property: descriptionProperty,
|
|
3063
|
+
group: { name: customGroup.name, title: customGroup.title },
|
|
3064
|
+
},
|
|
3065
|
+
],
|
|
3066
|
+
},
|
|
2625
3067
|
});
|
|
2626
3068
|
if (result && result.values) {
|
|
2627
|
-
|
|
2628
|
-
|
|
2629
|
-
widget
|
|
2630
|
-
|
|
2631
|
-
|
|
3069
|
+
console.log('handleFieldEdit - received property viewer result:', result);
|
|
3070
|
+
const updatedWidget = {
|
|
3071
|
+
...field.widget,
|
|
3072
|
+
...result.values,
|
|
3073
|
+
options: {
|
|
3074
|
+
...(field.widget.options ?? {}),
|
|
3075
|
+
...(result.values.options ?? {}),
|
|
2632
3076
|
},
|
|
2633
|
-
}
|
|
3077
|
+
};
|
|
3078
|
+
const updatedField = {
|
|
3079
|
+
widget: updatedWidget,
|
|
3080
|
+
};
|
|
3081
|
+
const updatedTitle = get(result.values, '__designer.field.title');
|
|
3082
|
+
if (typeof updatedTitle === 'string') {
|
|
3083
|
+
updatedField.title = updatedTitle;
|
|
3084
|
+
}
|
|
3085
|
+
const updatedDescription = get(result.values, '__designer.field.description');
|
|
3086
|
+
if (typeof updatedDescription === 'string') {
|
|
3087
|
+
updatedField.description = updatedDescription;
|
|
3088
|
+
}
|
|
3089
|
+
// Update the field with the merged widget configuration
|
|
3090
|
+
this.updateField(field.name, updatedField);
|
|
2634
3091
|
}
|
|
2635
3092
|
}
|
|
2636
3093
|
catch (error) {
|
|
@@ -3008,63 +3465,7 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3008
3465
|
mainFlex.setDirection('column').setGap('20px');
|
|
3009
3466
|
for (const group of formDef.groups) {
|
|
3010
3467
|
mainFlex.fieldset((fieldset) => {
|
|
3011
|
-
|
|
3012
|
-
fieldset.setTitle(group.title);
|
|
3013
|
-
if (group.description)
|
|
3014
|
-
fieldset.setDescription(group.description);
|
|
3015
|
-
if (group.look)
|
|
3016
|
-
fieldset.setLook(group.look);
|
|
3017
|
-
fieldset.setCols(12);
|
|
3018
|
-
for (const param of group.parameters) {
|
|
3019
|
-
fieldset.formField(param.title || param.path, (f) => {
|
|
3020
|
-
f.path(param.path);
|
|
3021
|
-
if (param.layout) {
|
|
3022
|
-
console.log(`Preview: Applying layout to field ${param.path}:`, param.layout);
|
|
3023
|
-
f.layout(param.layout);
|
|
3024
|
-
}
|
|
3025
|
-
// Map widget types to builder methods
|
|
3026
|
-
const widgetType = param.widget?.type;
|
|
3027
|
-
const opts = param.widget?.options || {};
|
|
3028
|
-
switch (widgetType) {
|
|
3029
|
-
case 'text-editor':
|
|
3030
|
-
f.textBox(opts);
|
|
3031
|
-
break;
|
|
3032
|
-
case 'large-text-editor':
|
|
3033
|
-
f.largeTextBox(opts);
|
|
3034
|
-
break;
|
|
3035
|
-
case 'rich-text-editor':
|
|
3036
|
-
f.richText(opts);
|
|
3037
|
-
break;
|
|
3038
|
-
case 'password-editor':
|
|
3039
|
-
f.passwordBox(opts);
|
|
3040
|
-
break;
|
|
3041
|
-
case 'number-editor':
|
|
3042
|
-
f.numberBox(opts);
|
|
3043
|
-
break;
|
|
3044
|
-
case 'select-editor':
|
|
3045
|
-
f.selectBox(opts);
|
|
3046
|
-
break;
|
|
3047
|
-
case 'lookup-editor':
|
|
3048
|
-
f.lookupBox(opts);
|
|
3049
|
-
break;
|
|
3050
|
-
case 'selection-list-editor':
|
|
3051
|
-
f.selectionList(opts);
|
|
3052
|
-
break;
|
|
3053
|
-
case 'date-time-editor':
|
|
3054
|
-
f.dateTimeBox(opts);
|
|
3055
|
-
break;
|
|
3056
|
-
case 'toggle-editor':
|
|
3057
|
-
f.toggleSwitch(opts);
|
|
3058
|
-
break;
|
|
3059
|
-
case 'color-editor':
|
|
3060
|
-
f.colorBox(opts);
|
|
3061
|
-
break;
|
|
3062
|
-
default:
|
|
3063
|
-
f.customWidget(widgetType, opts);
|
|
3064
|
-
break;
|
|
3065
|
-
}
|
|
3066
|
-
});
|
|
3067
|
-
}
|
|
3468
|
+
this.configurePreviewFieldset(fieldset, group);
|
|
3068
3469
|
});
|
|
3069
3470
|
}
|
|
3070
3471
|
});
|
|
@@ -3180,10 +3581,121 @@ class AXPDynamicFormDesignerComponent {
|
|
|
3180
3581
|
},
|
|
3181
3582
|
};
|
|
3182
3583
|
}
|
|
3183
|
-
|
|
3184
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPDynamicFormDesignerComponent, isStandalone: true, selector: "axp-dynamic-form-designer", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDefinition: "formDefinitionChange" }, host: { classAttribute: "ax-w-full ax-h-full" }, ngImport: i0, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n (onClick)=\"handlePreviewClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n </axp-state-message>\n } @else {\n <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\">\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">\n {{ group.title || group.name }}\n @if (isDefaultGroup(group.name) && !group.title) {\n <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n }\n </h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n @if (canDeleteGroup()) {\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n @if (group.fields.length === 0) {\n <axp-state-message icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\">\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3584
|
+
configurePreviewFieldset(fieldset, group) {
|
|
3585
|
+
if (group.title)
|
|
3586
|
+
fieldset.setTitle(group.title);
|
|
3587
|
+
if (group.description)
|
|
3588
|
+
fieldset.setDescription(group.description);
|
|
3589
|
+
if (group.look)
|
|
3590
|
+
fieldset.setLook(group.look);
|
|
3591
|
+
fieldset.setCols(12);
|
|
3592
|
+
for (const parameter of group.parameters) {
|
|
3593
|
+
fieldset.formField(parameter.title || parameter.path, (formField) => {
|
|
3594
|
+
this.configurePreviewFormField(formField, parameter);
|
|
3595
|
+
});
|
|
3596
|
+
}
|
|
3597
|
+
}
|
|
3598
|
+
configurePreviewFormField(formField, fieldDefinition) {
|
|
3599
|
+
formField.path(fieldDefinition.path);
|
|
3600
|
+
if (fieldDefinition.mode) {
|
|
3601
|
+
formField.mode(fieldDefinition.mode);
|
|
3602
|
+
}
|
|
3603
|
+
if (fieldDefinition.layout) {
|
|
3604
|
+
console.log(`Preview: Applying layout to field ${fieldDefinition.path}:`, fieldDefinition.layout);
|
|
3605
|
+
formField.layout(fieldDefinition.layout);
|
|
3606
|
+
}
|
|
3607
|
+
const widgetName = fieldDefinition.widget?.name ?? fieldDefinition.path;
|
|
3608
|
+
if (widgetName) {
|
|
3609
|
+
formField.name(widgetName);
|
|
3610
|
+
}
|
|
3611
|
+
this.configureFormFieldWidget(formField, fieldDefinition);
|
|
3612
|
+
}
|
|
3613
|
+
configureFormFieldWidget(formField, fieldDefinition) {
|
|
3614
|
+
const widgetNode = fieldDefinition.widget;
|
|
3615
|
+
if (!widgetNode) {
|
|
3616
|
+
formField.customWidget('text-editor', { path: fieldDefinition.path });
|
|
3617
|
+
return;
|
|
3618
|
+
}
|
|
3619
|
+
if (widgetNode.mode) {
|
|
3620
|
+
formField.mode(widgetNode.mode);
|
|
3621
|
+
}
|
|
3622
|
+
const widgetOptions = this.extractPreviewWidgetOptions(widgetNode, fieldDefinition.path);
|
|
3623
|
+
formField.customWidget(widgetNode.type, widgetOptions);
|
|
3624
|
+
}
|
|
3625
|
+
extractPreviewWidgetOptions(widgetNode, fallbackPath) {
|
|
3626
|
+
const options = cloneDeep(widgetNode.options ?? {});
|
|
3627
|
+
if (widgetNode.name && !options['name']) {
|
|
3628
|
+
options['name'] = widgetNode.name;
|
|
3629
|
+
}
|
|
3630
|
+
if (widgetNode.path || fallbackPath) {
|
|
3631
|
+
options['path'] = widgetNode.path ?? fallbackPath;
|
|
3632
|
+
}
|
|
3633
|
+
if (widgetNode.defaultValue !== undefined && options['defaultValue'] === undefined) {
|
|
3634
|
+
options['defaultValue'] = cloneDeep(widgetNode.defaultValue);
|
|
3635
|
+
}
|
|
3636
|
+
if (widgetNode.children?.length) {
|
|
3637
|
+
options['children'] = widgetNode.children.map((child) => cloneDeep(child));
|
|
3638
|
+
}
|
|
3639
|
+
return options;
|
|
3640
|
+
}
|
|
3641
|
+
applyDesignerFieldUpdates(fieldId, updates) {
|
|
3642
|
+
const currentState = this.designerState();
|
|
3643
|
+
let fieldUpdated = false;
|
|
3644
|
+
const updatedGroups = currentState.groups.map((group) => {
|
|
3645
|
+
const hasTargetField = group.fields.some((field) => field.name === fieldId);
|
|
3646
|
+
if (!hasTargetField) {
|
|
3647
|
+
return group;
|
|
3648
|
+
}
|
|
3649
|
+
fieldUpdated = true;
|
|
3650
|
+
const updatedFields = group.fields.map((field) => {
|
|
3651
|
+
if (field.name !== fieldId) {
|
|
3652
|
+
return field;
|
|
3653
|
+
}
|
|
3654
|
+
return {
|
|
3655
|
+
...field,
|
|
3656
|
+
...(updates.title !== undefined ? { title: updates.title } : {}),
|
|
3657
|
+
...(updates.description !== undefined ? { description: updates.description } : {}),
|
|
3658
|
+
...(updates.mode !== undefined ? { mode: updates.mode } : {}),
|
|
3659
|
+
...(updates.layout !== undefined ? { layout: cloneDeep(updates.layout) } : {}),
|
|
3660
|
+
...(updates.widget !== undefined ? { widget: cloneDeep(updates.widget) } : {}),
|
|
3661
|
+
};
|
|
3662
|
+
});
|
|
3663
|
+
return {
|
|
3664
|
+
...group,
|
|
3665
|
+
fields: updatedFields,
|
|
3666
|
+
};
|
|
3667
|
+
});
|
|
3668
|
+
if (fieldUpdated) {
|
|
3669
|
+
this.designerState.set({
|
|
3670
|
+
...currentState,
|
|
3671
|
+
groups: updatedGroups,
|
|
3672
|
+
});
|
|
3673
|
+
}
|
|
3674
|
+
}
|
|
3675
|
+
applyDesignerGroupUpdates(groupName, updates) {
|
|
3676
|
+
const currentState = this.designerState();
|
|
3677
|
+
const updatedGroups = currentState.groups.map((group) => {
|
|
3678
|
+
if (group.name !== groupName) {
|
|
3679
|
+
return group;
|
|
3680
|
+
}
|
|
3681
|
+
return {
|
|
3682
|
+
...group,
|
|
3683
|
+
...(updates.title !== undefined ? { title: updates.title } : {}),
|
|
3684
|
+
...(updates.description !== undefined ? { description: updates.description } : {}),
|
|
3685
|
+
...(updates.mode !== undefined ? { mode: updates.mode } : {}),
|
|
3686
|
+
...(updates.look !== undefined ? { look: updates.look } : {}),
|
|
3687
|
+
...(updates.layout !== undefined ? { layout: cloneDeep(updates.layout) } : {}),
|
|
3688
|
+
};
|
|
3689
|
+
});
|
|
3690
|
+
this.designerState.set({
|
|
3691
|
+
...currentState,
|
|
3692
|
+
groups: updatedGroups,
|
|
3693
|
+
});
|
|
3694
|
+
}
|
|
3695
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDynamicFormDesignerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3696
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPDynamicFormDesignerComponent, isStandalone: true, selector: "axp-dynamic-form-designer", inputs: { formDefinition: { classPropertyName: "formDefinition", publicName: "formDefinition", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formDefinition: "formDefinitionChange" }, host: { classAttribute: "ax-w-full ax-h-full" }, ngImport: i0, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n [disabled]=\"isPreviewDisabled()\" (onClick)=\"handlePreviewClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n </axp-state-message>\n } @else {\n <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\">\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">\n {{ group.title || group.name }}\n @if (isDefaultGroup(group.name) && !group.title) {\n <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n }\n </h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n @if (canDeleteGroup()) {\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n @if (group.fields.length === 0) {\n <axp-state-message icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\">\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;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;inset: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;inset: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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: i5.AXTranslatorDirective, selector: "[translate]" }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3185
3697
|
}
|
|
3186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3698
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPDynamicFormDesignerComponent, decorators: [{
|
|
3187
3699
|
type: Component,
|
|
3188
3700
|
args: [{ selector: 'axp-dynamic-form-designer', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3189
3701
|
CommonModule,
|
|
@@ -3198,7 +3710,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
3198
3710
|
AXPGridLayoutDirective,
|
|
3199
3711
|
], standalone: true, host: {
|
|
3200
3712
|
class: 'ax-w-full ax-h-full',
|
|
3201
|
-
}, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n (onClick)=\"handlePreviewClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n </axp-state-message>\n } @else {\n <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\">\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">\n {{ group.title || group.name }}\n @if (isDefaultGroup(group.name) && !group.title) {\n <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n }\n </h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n @if (canDeleteGroup()) {\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n @if (group.fields.length === 0) {\n <axp-state-message icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\">\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;-moz-user-select:-moz-none;user-select:none}.__field-item:hover{--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__field-item.__selected{--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab;transition:color .15s ease-in-out}.__field-item .__drag-handle:active{cursor:grabbing}.__field-item .__drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content{flex:1 1 0%}.__field-item .__item-content .__item-header{margin-bottom:.5rem;display:flex;align-items:center;gap:.75rem}.__field-item .__item-content .__item-header .__field-icon{display:flex;height:2.5rem;width:2.5rem;align-items:center;justify-content:center;border-radius:.375rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__field-item .__item-content .__item-header .__field-info{flex:1 1 0%}.__field-item .__item-content .__item-header .__field-info .__item-title{margin-bottom:.25rem;font-size:1rem;line-height:1.5rem;font-weight:600}.__field-item .__item-content .__item-header .__field-info .__widget-type{font-size:.875rem;line-height:1.25rem;font-weight:500;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__field-item .__item-content .__item-header .__field-info .__field-description{margin-top:.25rem;font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.__field-item .__item-actions{display:flex;gap:.5rem}.__group.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1);--tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.__group.cdk-drag-preview .__group-info{flex:1 1 0%}.__group.cdk-drag-preview .__group-info .__group-title{margin-bottom:.25rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.__group.cdk-drag-preview .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-preview .__fields-container{padding:.75rem}.__group.cdk-drag-preview .__fields-container .__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__field-icon{display:flex;height:2rem;width:2rem;align-items:center;justify-content:center;border-radius:.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content{flex:1 1 0%}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__item-title{margin-bottom:0;font-size:.875rem;line-height:1.25rem;font-weight:500}.__group.cdk-drag-preview .__fields-container .__field-item .__item-content .__widget-type{font-size:.75rem;line-height:1rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.__group.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__group.cdk-drag-dragging{opacity:.7}.__group:hover:not(.cdk-drag-dragging) .__group-drag-handle{--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1))}.__field-item.cdk-drag-preview{border-radius:.375rem;border-width:1px;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.__field-item.cdk-drag-placeholder{border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));opacity:.5;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}.__items-list.cdk-drop-list-dragging{position:relative;min-height:4rem}.__items-list.cdk-drop-list-dragging axp-state-message{display:none}.__items-list.cdk-drop-list-dragging:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-radius:.375rem;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1));--tw-bg-opacity: 1;background-color:rgb(250 250 250 / var(--tw-bg-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__items-list.cdk-drop-list-receiving{position:relative;min-height:4rem}.__items-list.cdk-drop-list-receiving axp-state-message{display:none}.__items-list.cdk-drop-list-receiving:has(axp-state-message):after{content:\"Drop fields here\";position:absolute;top:0;right:0;bottom:0;left:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"] }]
|
|
3713
|
+
}, template: "<div class=\"axp-dynamic-form-designer\" *translate=\"let t\">\n @if (!readonly()) {\n <div class=\"__header\">\n <div class=\"__header-left\">\n <!-- Left side can be used for other actions in the future -->\n </div>\n <div class=\"__header-right\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-group.title') | async\" [color]=\"'primary'\"\n (onClick)=\"handleAddGroupClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.preview.title') | async\" [color]=\"'success'\"\n [disabled]=\"isPreviewDisabled()\" (onClick)=\"handlePreviewClick()\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-eye\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n <div class=\"__content\">\n @if (formDefinition().groups.length === 0) {\n <axp-state-message icon=\"fa-light fa-layer-group\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.no-groups.description'\">\n </axp-state-message>\n } @else {\n <div class=\"__groups-container\" cdkDropList [cdkDropListData]=\"designerGroups()\"\n (cdkDropListDropped)=\"handleGroupDrop($event)\">\n @for (group of designerGroups(); track group.id) {\n <div class=\"__group\" cdkDrag [class.__default-group]=\"isDefaultGroup(group.name)\">\n <div class=\"__group-header\">\n @if (!readonly()) {\n <div class=\"__group-drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n }\n <div class=\"__group-info\">\n <h3 class=\"__group-title\">\n {{ group.title || group.name }}\n @if (isDefaultGroup(group.name) && !group.title) {\n <span class=\"__default-group-badge\">{{ '@dynamic-form-designer:components.designer.default-section-badge' | translate | async }}</span>\n }\n </h3>\n @if (group.description) {\n <p class=\"__group-description\">{{ group.description }}</p>\n }\n </div>\n @if (!readonly()) {\n <div class=\"__group-actions\">\n <ax-button class=\"ax-sm\" [text]=\"t('@dynamic-form-designer:actions.add-field.title') | async\"\n [color]=\"'accent2'\" (onClick)=\"handleAddFieldToGroup(group)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"info\" (onClick)=\"handleGroupLayoutEdit(group)\"\n [title]=\"t('@dynamic-form-designer:actions.layout-settings.title') | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleGroupEdit(group)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n @if (canDeleteGroup()) {\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"danger\" (onClick)=\"handleGroupRemove(group)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n }\n </div>\n }\n </div>\n\n <div class=\"__fields-container\" [attr.data-grid-columns]=\"12\">\n <div class=\"__items-list\" cdkDropList [id]=\"'group-' + group.name + '-fields'\"\n [cdkDropListData]=\"group.fields\" [cdkDropListConnectedTo]=\"getAllGroupDropLists()\"\n (cdkDropListDropped)=\"handleFieldDrop($event, group.name)\">\n @if (group.fields.length === 0) {\n <axp-state-message icon=\"fa-light fa-plus\"\n [title]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.title'\"\n [description]=\"'@dynamic-form-designer:components.groups.empty-states.empty-group.description'\">\n </axp-state-message>\n } @else {\n @for (field of group.fields; track field.id) {\n <div class=\"__field-item\" cdkDrag [class.__selected]=\"selectedFieldId() === field.id\"\n [axp-grid-layout]=\"getFieldGridLayout(group)\">\n <div class=\"__drag-handle\" cdkDragHandle>\n <ax-icon icon=\"fa-light fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n <div class=\"__item-header\">\n <div class=\"__field-icon\">\n <ax-icon [icon]=\"getWidgetIcon(field.widget.type)\"></ax-icon>\n </div>\n <div class=\"__field-info\">\n <h4 class=\"__item-title\">{{ field.title }}</h4>\n <span class=\"__widget-type\">{{ getWidgetTitle(field.widget.type) }}</span>\n @if (field.description) {\n <p class=\"__field-description\">{{ field.description }}</p>\n }\n </div>\n </div>\n </div>\n\n @if (!readonly()) {\n <div class=\"__item-actions\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent2\"\n (onClick)=\"handleFieldLayoutEdit(field, group)\"\n [title]=\"'@dynamic-form-designer:actions.configure-field-layout.title' | translate | async\">\n <ax-icon class=\"fa-light fa-grid\"></ax-icon>\n </ax-button>\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" color=\"accent3\" (onClick)=\"handleFieldEdit(field)\">\n <ax-icon class=\"fa-light fa-pencil\"></ax-icon>\n </ax-button>\n\n <ax-button [look]=\"'blank'\" class=\"ax-sm\" color=\"danger\" (onClick)=\"handleFieldRemove(field)\">\n <ax-icon class=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n }\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n </div>\n</div>", styles: [".axp-dynamic-form-designer{width:100%;border-radius:.375rem;border-width:1px;background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}.axp-dynamic-form-designer .__header{display:flex;align-items:center;justify-content:space-between;border-bottom-width:1px;padding:1rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__header .__header-left{display:flex;gap:.5rem}.axp-dynamic-form-designer .__header .__header-right{display:flex;gap:.75rem}.axp-dynamic-form-designer .__content{padding:1rem}.axp-dynamic-form-designer .__content .__groups-container{display:flex;flex-direction:column;gap:1rem}.axp-dynamic-form-designer .__content .__group{border-radius:.375rem;border-width:1px;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-dynamic-form-designer .__content .__group.__default-group{border-style:dashed;--tw-border-opacity: 1;border-color:rgb(212 212 212 / var(--tw-border-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header{display:flex;align-items:center;gap:.75rem;border-bottom-width:1px;padding:.75rem;background-color:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));border-color:rgb(var(--ax-sys-color-border-lighter-surface))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle{display:flex;height:1.5rem;width:1.5rem;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1));cursor:grab}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:active{cursor:grabbing}.axp-dynamic-form-designer .__content .__group .__group-header .__group-drag-handle:hover{--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info{flex:1 1 0%}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title{margin-bottom:.25rem;display:flex;align-items:center;gap:.5rem;font-size:1.125rem;line-height:1.75rem;font-weight:600}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-title .__default-group-badge{border-radius:.25rem;--tw-bg-opacity: 1;background-color:rgb(245 245 245 / var(--tw-bg-opacity, 1));padding:.25rem .5rem;font-size:.75rem;line-height:1rem;font-weight:400;--tw-text-opacity: 1;color:rgb(115 115 115 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-info .__group-description{font-size:.875rem;line-height:1.25rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__group-header .__group-actions{display:flex;gap:.5rem}.axp-dynamic-form-designer .__content .__group .__fields-container{padding:1rem}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list{gap:.75rem;min-height:3rem;display:flex;flex-direction:column}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty{display:flex;align-items:center;justify-content:center;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}.axp-dynamic-form-designer .__content .__group .__fields-container .__items-list:empty:before{content:\"Drop fields here\";font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"2\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"3\"] .__items-list,.axp-dynamic-form-designer .__content .__group .__fields-container[data-columns=\"4\"] .__items-list{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:.75rem}.__field-item{display:flex;align-items:center;gap:.75rem;border-radius:.375rem;border-width:1px;padding:.75rem;--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / .05);--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface));cursor:move;-webkit-user-select:none;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;inset: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;inset:0;display:flex;align-items:center;justify-content:center;border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1));font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgba(var(--ax-sys-color-accent2-500),var(--tw-text-opacity, 1));background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));margin:.5rem;z-index:-1;pointer-events:none;min-height:3rem}.__groups-container.cdk-drop-list-dragging{border-radius:.5rem;padding:.5rem;background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface));border-width:2px;border-style:dashed;--tw-border-opacity: 1;border-color:rgba(var(--ax-sys-color-accent2-500),var(--tw-border-opacity, 1))}.cdk-drop-list.cdk-drop-list-receiving{background-color:rgb(var(--ax-sys-color-accent2-lightest-surface));color:rgb(var(--ax-sys-color-on-accent2-lightest-surface));border-color:rgb(var(--ax-sys-color-border-accent2-lightest-surface))}\n"] }]
|
|
3202
3714
|
}], propDecorators: { formDefinition: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDefinition", required: false }] }, { type: i0.Output, args: ["formDefinitionChange"] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
3203
3715
|
|
|
3204
3716
|
//#endregion
|
|
@@ -3451,8 +3963,8 @@ class AXPExtraPropertiesComponent {
|
|
|
3451
3963
|
i++;
|
|
3452
3964
|
return `${k}${i}`;
|
|
3453
3965
|
}
|
|
3454
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3455
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3966
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3967
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: `
|
|
3456
3968
|
<div class="ax-grid ax-grid-cols-12 ax-gap-4">
|
|
3457
3969
|
<axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
|
|
3458
3970
|
<div cdkDropList (cdkDropListDropped)="handleDrop($event)" class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
|
|
@@ -3542,9 +4054,9 @@ class AXPExtraPropertiesComponent {
|
|
|
3542
4054
|
</axp-widgets-container>
|
|
3543
4055
|
</div>
|
|
3544
4056
|
|
|
3545
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$
|
|
4057
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.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$3.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", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: 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 }); }
|
|
3546
4058
|
}
|
|
3547
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesComponent, decorators: [{
|
|
3548
4060
|
type: Component,
|
|
3549
4061
|
args: [{
|
|
3550
4062
|
selector: 'axp-extra-properties',
|
|
@@ -3755,10 +4267,10 @@ class AXPWidgetPropertyViewerComponent {
|
|
|
3755
4267
|
handleCollapsedChange(group, collapsed) {
|
|
3756
4268
|
this.groupCollapsedStates.set(group, collapsed);
|
|
3757
4269
|
}
|
|
3758
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3759
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4270
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4271
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetPropertyViewerComponent, isStandalone: true, selector: "axp-widget-property-viewer", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, ngImport: i0, template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n @if (mode() == 'advanced') {\n <div class=\"ax-flex ax-flex-col\">\n @if (tabs().length > 1) {\n <div class=\"ax-pb-2\">\n <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n @for (tab of tabs(); track $index) {\n <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"ax-flex-1 ax-overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n @for (group of groups(); track $index) {\n <ax-accordion-item\n class=\"!ax-mb-0\"\n [caption]=\"group.title\"\n [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n >\n <div class=\"ax-flex ax-flex-col\">\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n <span class=\"ax-font-semibold\">{{ p.title }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n <!-- Simple-->\n @else {\n <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n <!-- groups -->\n @for (group of groups(); track $index) {\n <!-- props -->\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n }\n </div>\n }\n</axp-widgets-container>\n", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i1$3.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i1$3.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i2$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 }); }
|
|
3760
4272
|
}
|
|
3761
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4273
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerComponent, decorators: [{
|
|
3762
4274
|
type: Component,
|
|
3763
4275
|
args: [{ selector: 'axp-widget-property-viewer', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [CommonModule, AXAccordionModule, AXTabsModule, AXPWidgetCoreModule, AXTranslationModule], template: "<axp-widgets-container [context]=\"context()\" (onContextChanged)=\"handleContextChange($event)\">\n @if (mode() == 'advanced') {\n <div class=\"ax-flex ax-flex-col\">\n @if (tabs().length > 1) {\n <div class=\"ax-pb-2\">\n <ax-tabs look=\"default\" (onActiveTabChanged)=\"handleTabChange($event)\" [look]=\"'with-line'\">\n @for (tab of tabs(); track $index) {\n <ax-tab-item [text]=\"tab.title\" [key]=\"$index.toString()\" [active]=\"currentTabIndex() === $index\">\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"ax-flex-1 ax-overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" look=\"flat\">\n @for (group of groups(); track $index) {\n <ax-accordion-item\n class=\"!ax-mb-0\"\n [caption]=\"group.title\"\n [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n >\n <div class=\"ax-flex ax-flex-col\">\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-1 ax-py-2\">\n <span class=\"ax-font-semibold\">{{ p.title }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n <!-- Simple-->\n @else {\n <div class=\"ax-flex ax-flex-col ax-p-4 ax-gap-4\">\n <!-- groups -->\n @for (group of groups(); track $index) {\n <!-- props -->\n @for (p of group.props; track $index) {\n <div class=\"ax-flex ax-flex-col ax-gap-2\">\n <span class=\"ax-font-semibold\">{{ p.title | translate | async }}</span>\n @if (p.schema.interface) {\n <ng-container axp-widget-renderer [node]=\"p.schema.interface\" [mode]=\"'edit'\"> </ng-container>\n }\n </div>\n }\n }\n </div>\n }\n</axp-widgets-container>\n", styles: ["axp-widget-property-viewer ax-accordion-item .ax-accordion-header{font-weight:600!important}\n"] }]
|
|
3764
4276
|
}], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], onChanged: [{
|
|
@@ -3890,10 +4402,10 @@ class AXPExtraPropertiesSchemaComponent {
|
|
|
3890
4402
|
i++;
|
|
3891
4403
|
return `${k}${i}`;
|
|
3892
4404
|
}
|
|
3893
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3894
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.10", type: AXPExtraPropertiesSchemaComponent, isStandalone: true, selector: "axp-extra-properties-schema", inputs: { schema: { classPropertyName: "schema", publicName: "schema", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { schemaChange: "schemaChange" }, host: { classAttribute: "ax-flex ax-flex-1 ax-h-full ax-gap-4 ax-p-4" }, ngImport: i0, template: "<!-- Left Panel: list/manage properties -->\n<div class=\"ax-flex ax-flex-col ax-gap-3 ax-min-h-0 ax-h-full ax-w-2/3\">\n <div class=\"ax-overflow-y-auto ax-min-h-0 ax-h-full ax-pe-2 -ax-me-2\">\n <div cdkDropList (cdkDropListDropped)=\"handleDrop($event)\" class=\"ax-flex ax-flex-col ax-gap-3\">\n @for (item of schema(); track item.key) {\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center ax-rounded ax-border ax-p-3 ax-cursor-pointer ax-lightest-surface \"\n [class.!ax-lighter-surface]=\"item.key === selectedKey()\" (click)=\"handleSelect(item.key)\" cdkDrag\n [cdkDragDisabled]=\"false\">\n <div class=\"ax-col-span-12 md:ax-col-span-4 ax-flex ax-items-center ax-gap-3\">\n <ax-icon class=\"fa-solid fa-grip-dots-vertical ax-cursor-move ax-text-neutral-500\"\n cdkDragHandle></ax-icon>\n <div>\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n </div>\n </div>\n <div class=\"ax-col-span-12 md:ax-col-span-7 ax-grid ax-grid-cols-12 ax-gap-4 ax-items-center\">\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-select-box [value]=\"item.type\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\"\n (onValueChanged)=\"handleUpdateType(item.key, $event.value)\"></ax-select-box>\n </ax-form-field>\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6\">\n <ax-text-box [ngModel]=\"item.title\"\n (onValueChanged)=\"handleUpdateTitle(item.key, $event.value)\"></ax-text-box>\n </ax-form-field>\n </div>\n <div class=\"ax-hidden md:ax-block md:ax-col-span-1 md:ax-justify-self-end\">\n <ax-button look=\"blank\" color=\"danger\" (onClick)=\"handleRemove(item.key)\">\n <ax-prefix><ax-icon class=\"fa-light fa-trash-can\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n } @else {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-1 ax-rounded ax-border ax-p-3\">\n <div class=\"ax-font-semibold\">{{ item.title }}</div>\n <div class=\"ax-col-span-12 ax-text-xs ax-text-muted\">{{ item.key }}</div>\n </div>\n }\n } @empty {\n <div class=\"ax-text-sm ax-text-gray-400\">{{ '@extra-properties:messages.no-schema-fields' | translate |\n async\n }}</div>\n }\n\n @if (mode() === 'edit') {\n <div class=\"ax-grid ax-grid-cols-12 ax-gap-4 ax-items-end ax-mt-4 ax-border-t ax-border-dashed ax-pt-4\">\n <!-- Type -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.type' | translate | async }}</ax-label>\n <ax-select-box [ngModel]=\"newTypeId()\" [dataSource]=\"typeOptions()\" valueField=\"id\"\n textField=\"title\" (onValueChanged)=\"newTypeChanged($event.value)\"></ax-select-box>\n </ax-form-field>\n <!-- Title -->\n <ax-form-field class=\"ax-col-span-12 md:ax-col-span-6 lg:ax-col-span-6\">\n <ax-label>{{ '@extra-properties:labels.title' | translate | async }}</ax-label>\n <ax-text-box [ngModel]=\"newTitle()\"\n (onValueChanged)=\"handleTitleChange($event.value)\"></ax-text-box>\n </ax-form-field>\n <!-- Add -->\n <div class=\"ax-col-span-12 ax-flex ax-justify-end\">\n <ax-button look=\"solid\" (onClick)=\"handleAdd()\" [disabled]=\"!canAdd()\"\n text=\"{{ '@extra-properties:actions.add-field' | translate | async }}\">\n <ax-prefix><ax-icon class=\"fa-solid fa-add\"></ax-icon></ax-prefix>\n </ax-button>\n </div>\n </div>\n }\n </div>\n </div>\n</div>\n\n<!-- Right Panel: widget property viewer for selected item -->\n<div class=\"ax-w-1/3 ax-border ax-rounded ax-h-full ax-flex ax-flex-col ax-lightest-surface\">\n @if (mode() === 'edit' && selectedItem()) {\n <div class=\"ax-p-4 ax-font-semibold ax-border-b ax-lighter-surface\">\n {{selectedItem()?.title}}\n </div>\n <div class=\"ax-overflow-y-auto ax-flex-1\">\n <axp-widget-property-viewer [widget]=\"{ type: selectedItem()!.type, options: selectedItem()!.options }\"\n [mode]=\"'advanced'\" (onChanged)=\"handleViewerChanged($event)\" />\n </div>\n }\n @else {\n <div class=\"ax-text-sm ax-text-muted ax-p-4 ax-text-center\">{{ '@extra-properties:messages.select-field-to-edit' |\n translate | async }}</div>\n }\n</div>", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$5.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$1.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "component", type: i4$4.AXTextBoxComponent, selector: "ax-text-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "maxLength", "allowNull", "type", "autoComplete", "look", "mask-options", "class"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i5$2.AXSelectBoxComponent, selector: "ax-select-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "minValue", "maxValue", "value", "state", "name", "id", "type", "look", "multiple", "valueField", "textField", "disabledField", "textTemplate", "selectedItems", "isItemTruncated", "showItemTooltip", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: DragDropModule }, { kind: "directive", type: i3$3.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i3$3.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: i3$3.CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4405
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4406
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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$6.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$3.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", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: 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 }); }
|
|
3895
4407
|
}
|
|
3896
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4408
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesSchemaComponent, decorators: [{
|
|
3897
4409
|
type: Component,
|
|
3898
4410
|
args: [{ selector: 'axp-extra-properties-schema', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
3899
4411
|
CommonModule,
|
|
@@ -4011,8 +4523,8 @@ class AXPExtraPropertiesValuesComponent {
|
|
|
4011
4523
|
}
|
|
4012
4524
|
return node;
|
|
4013
4525
|
}
|
|
4014
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4015
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
4526
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesValuesComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4527
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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: `
|
|
4016
4528
|
<div class="ax-grid ax-grid-cols-12 ax-gap-4">
|
|
4017
4529
|
<axp-widgets-container [context]="internalContext()" (onContextChanged)="onContextChanged($event)">
|
|
4018
4530
|
<div class="ax-col-span-12 ax-flex ax-flex-col ax-gap-3">
|
|
@@ -4042,9 +4554,9 @@ class AXPExtraPropertiesValuesComponent {
|
|
|
4042
4554
|
</div>
|
|
4043
4555
|
</axp-widgets-container>
|
|
4044
4556
|
</div>
|
|
4045
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$
|
|
4557
|
+
`, 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$6.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 }); }
|
|
4046
4558
|
}
|
|
4047
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4559
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPExtraPropertiesValuesComponent, decorators: [{
|
|
4048
4560
|
type: Component,
|
|
4049
4561
|
args: [{
|
|
4050
4562
|
selector: 'axp-extra-properties-values',
|
|
@@ -4097,6 +4609,7 @@ class AXPQueryFiltersComponent {
|
|
|
4097
4609
|
this.initialFilters = input([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : []));
|
|
4098
4610
|
this.onFiltersChanged = output();
|
|
4099
4611
|
this.tagBox = viewChild('tagBox', ...(ngDevMode ? [{ debugName: "tagBox" }] : []));
|
|
4612
|
+
this.widgetRenderer = viewChild('widgetRenderer', ...(ngDevMode ? [{ debugName: "widgetRenderer" }] : []));
|
|
4100
4613
|
this.selectedField = signal(null, ...(ngDevMode ? [{ debugName: "selectedField" }] : []));
|
|
4101
4614
|
this.selectedFilters = linkedSignal(() => this.convertQueriesToDefinitions(this.initialFilters()), ...(ngDevMode ? [{ debugName: "selectedFilters", equal: isEqual }] : [{
|
|
4102
4615
|
equal: isEqual,
|
|
@@ -4157,31 +4670,75 @@ class AXPQueryFiltersComponent {
|
|
|
4157
4670
|
}));
|
|
4158
4671
|
});
|
|
4159
4672
|
};
|
|
4160
|
-
this.#
|
|
4161
|
-
|
|
4673
|
+
this.#emitFiltersEffect = effect(() => {
|
|
4674
|
+
// Prevent emitting while a filter is actively being edited
|
|
4675
|
+
const isEditing = this.activeFilter();
|
|
4676
|
+
if (isEditing) {
|
|
4677
|
+
return;
|
|
4678
|
+
}
|
|
4162
4679
|
const selectedFilters = this.selectedFilters();
|
|
4680
|
+
const context = untracked(() => this.context());
|
|
4163
4681
|
untracked(() => {
|
|
4164
|
-
|
|
4165
|
-
|
|
4166
|
-
|
|
4167
|
-
|
|
4168
|
-
|
|
4169
|
-
|
|
4170
|
-
|
|
4682
|
+
// 1. Separate "all" filter from others
|
|
4683
|
+
const allFilter = selectedFilters.find((f) => f.field === 'all');
|
|
4684
|
+
const otherFilters = selectedFilters.filter((f) => f.field !== 'all');
|
|
4685
|
+
let convertedFilters = [];
|
|
4686
|
+
// 2. Convert regular filters
|
|
4687
|
+
otherFilters.forEach((f) => {
|
|
4688
|
+
convertedFilters.push({
|
|
4689
|
+
field: f.field,
|
|
4690
|
+
operator: context[f.field]?.operation || f.operator,
|
|
4691
|
+
value: context[f.field]?.value ?? f.value, // Prefer context, fallback to filter value
|
|
4692
|
+
hidden: f.hidden,
|
|
4693
|
+
displayText: context[f.field]?.displayText,
|
|
4694
|
+
});
|
|
4695
|
+
});
|
|
4696
|
+
// 3. If "all" filter exists, create a nested filter with OR logic
|
|
4697
|
+
if (allFilter) {
|
|
4698
|
+
const allValue = allFilter.value; // Get value from filter definition
|
|
4699
|
+
const inlineFieldsFilters = this.filtersDefinitions()
|
|
4700
|
+
.filter((f) => f.filterType.inline)
|
|
4701
|
+
.map((f) => ({
|
|
4702
|
+
field: f.field,
|
|
4703
|
+
operator: { type: 'contains' },
|
|
4704
|
+
value: allValue,
|
|
4705
|
+
}));
|
|
4706
|
+
// Create a single filter with nested OR logic
|
|
4707
|
+
if (inlineFieldsFilters.length > 0) {
|
|
4708
|
+
convertedFilters.push({
|
|
4709
|
+
field: 'all',
|
|
4710
|
+
operator: { type: 'contains' },
|
|
4711
|
+
value: allValue,
|
|
4712
|
+
logic: 'or',
|
|
4713
|
+
filters: inlineFieldsFilters,
|
|
4714
|
+
hidden: false,
|
|
4715
|
+
displayText: 'All',
|
|
4716
|
+
});
|
|
4717
|
+
}
|
|
4718
|
+
}
|
|
4719
|
+
// 4. Build new context from selectedFilters (source of truth)
|
|
4171
4720
|
const newContext = {};
|
|
4172
|
-
|
|
4173
|
-
|
|
4174
|
-
|
|
4175
|
-
|
|
4176
|
-
|
|
4721
|
+
// Add context for regular filters
|
|
4722
|
+
otherFilters.forEach((f) => {
|
|
4723
|
+
newContext[f.field] = {
|
|
4724
|
+
value: context[f.field]?.value ?? f.value, // Prefer context, fallback to filter value
|
|
4725
|
+
operation: context[f.field]?.operation || f.operator,
|
|
4726
|
+
displayText: context[f.field]?.displayText,
|
|
4177
4727
|
};
|
|
4178
4728
|
});
|
|
4729
|
+
// Add context for "all" filter
|
|
4730
|
+
if (allFilter) {
|
|
4731
|
+
newContext['all'] = {
|
|
4732
|
+
value: allFilter.value,
|
|
4733
|
+
operation: { type: 'contains' },
|
|
4734
|
+
};
|
|
4735
|
+
}
|
|
4179
4736
|
this.context.set(newContext);
|
|
4180
4737
|
this.deactivateAllListItems();
|
|
4181
4738
|
this.onFiltersChanged.emit(convertedFilters);
|
|
4182
4739
|
});
|
|
4183
|
-
}, ...(ngDevMode ? [{ debugName: "#
|
|
4184
|
-
this.#
|
|
4740
|
+
}, ...(ngDevMode ? [{ debugName: "#emitFiltersEffect" }] : []));
|
|
4741
|
+
this.#updateTagsEffect = effect(() => {
|
|
4185
4742
|
const filters = this.selectedFilters();
|
|
4186
4743
|
const context = this.context();
|
|
4187
4744
|
Promise.all(filters.map(async (filter) => {
|
|
@@ -4195,7 +4752,35 @@ class AXPQueryFiltersComponent {
|
|
|
4195
4752
|
})).then((results) => {
|
|
4196
4753
|
this.asyncTags.set(results.filter((r) => !r.hidden));
|
|
4197
4754
|
});
|
|
4198
|
-
}, ...(ngDevMode ? [{ debugName: "#
|
|
4755
|
+
}, ...(ngDevMode ? [{ debugName: "#updateTagsEffect" }] : []));
|
|
4756
|
+
//#region ---- Widget Focus Effect ----
|
|
4757
|
+
/**
|
|
4758
|
+
* Auto-focus widget when component ref is ready and filter is active
|
|
4759
|
+
* This reactive approach eliminates the need for setTimeout
|
|
4760
|
+
*/
|
|
4761
|
+
this.#focusEffect = effect(() => {
|
|
4762
|
+
const renderer = this.widgetRenderer();
|
|
4763
|
+
const activeFilter = this.activeFilter();
|
|
4764
|
+
// Early return if no renderer or no active filter
|
|
4765
|
+
if (!renderer || !activeFilter) {
|
|
4766
|
+
return;
|
|
4767
|
+
}
|
|
4768
|
+
// Listen to componentRefSignal reactively
|
|
4769
|
+
const componentRef = renderer.componentRefSignal();
|
|
4770
|
+
// When componentRef is set (not null), focus the widget
|
|
4771
|
+
if (componentRef) {
|
|
4772
|
+
const componentInstance = componentRef.instance;
|
|
4773
|
+
// Try to use the component's native focus method
|
|
4774
|
+
if (componentInstance && typeof componentInstance.focus === 'function') {
|
|
4775
|
+
try {
|
|
4776
|
+
componentInstance.focus();
|
|
4777
|
+
}
|
|
4778
|
+
catch (error) {
|
|
4779
|
+
// console.error('Error focusing widget component:', error);
|
|
4780
|
+
}
|
|
4781
|
+
}
|
|
4782
|
+
}
|
|
4783
|
+
}, ...(ngDevMode ? [{ debugName: "#focusEffect" }] : []));
|
|
4199
4784
|
}
|
|
4200
4785
|
convertQueriesToDefinitions(queries) {
|
|
4201
4786
|
const definitions = this.filtersDefinitions();
|
|
@@ -4205,7 +4790,7 @@ class AXPQueryFiltersComponent {
|
|
|
4205
4790
|
field: q.field,
|
|
4206
4791
|
operator: q.operator,
|
|
4207
4792
|
value: q.value,
|
|
4208
|
-
title: definition?.title
|
|
4793
|
+
title: definition?.title ?? q.displayText ?? '',
|
|
4209
4794
|
widget: definition?.widget,
|
|
4210
4795
|
filterType: definition?.filterType,
|
|
4211
4796
|
hidden: q.hidden,
|
|
@@ -4222,22 +4807,40 @@ class AXPQueryFiltersComponent {
|
|
|
4222
4807
|
this.tagBoxInput = this.tagBox()?.getHostElement().querySelector('input');
|
|
4223
4808
|
}
|
|
4224
4809
|
handleSelectField(field) {
|
|
4225
|
-
console.log(field);
|
|
4226
4810
|
this.activeFilter.set(field);
|
|
4227
|
-
// this.inputValue.set('');
|
|
4228
4811
|
this.tagBox()?.inputValue.set('');
|
|
4229
4812
|
}
|
|
4230
4813
|
handleFieldKeyDown(e, field) {
|
|
4231
4814
|
if (e.key === 'Enter') {
|
|
4232
4815
|
this.handleSelectField(field);
|
|
4816
|
+
if (this.tagBoxInput && (field.widget.type === 'string-filter' || field.widget.type === 'number-filter')) {
|
|
4817
|
+
this.context.update((prev) => {
|
|
4818
|
+
return {
|
|
4819
|
+
...prev,
|
|
4820
|
+
[field.field]: {
|
|
4821
|
+
value: this.tagBoxInput?.value,
|
|
4822
|
+
operation: { type: 'contains' },
|
|
4823
|
+
},
|
|
4824
|
+
};
|
|
4825
|
+
});
|
|
4826
|
+
}
|
|
4233
4827
|
}
|
|
4234
4828
|
}
|
|
4235
4829
|
onContextChanged(e) {
|
|
4236
4830
|
this.context.set(e.data);
|
|
4237
4831
|
}
|
|
4238
4832
|
handleApplyFilter() {
|
|
4239
|
-
|
|
4240
|
-
|
|
4833
|
+
const reservedFitler = this.activeFilter();
|
|
4834
|
+
if (reservedFitler) {
|
|
4835
|
+
const { field } = reservedFitler;
|
|
4836
|
+
const selectedFiltersFields = this.selectedFilters().map((f) => f.field);
|
|
4837
|
+
const context = this.context();
|
|
4838
|
+
if (selectedFiltersFields.includes(field)) {
|
|
4839
|
+
this.selectedFilters.update((prev) => prev.map((f) => (f.field === field ? { ...f, value: context[field] } : f)));
|
|
4840
|
+
}
|
|
4841
|
+
else {
|
|
4842
|
+
this.selectedFilters.update((prev) => [...prev, reservedFitler]);
|
|
4843
|
+
}
|
|
4241
4844
|
this.activeFilter.set(null);
|
|
4242
4845
|
this.popover()?.close();
|
|
4243
4846
|
}
|
|
@@ -4262,12 +4865,35 @@ class AXPQueryFiltersComponent {
|
|
|
4262
4865
|
e.nativeEvent?.preventDefault();
|
|
4263
4866
|
}
|
|
4264
4867
|
}
|
|
4868
|
+
else {
|
|
4869
|
+
this.popover()?.open();
|
|
4870
|
+
}
|
|
4265
4871
|
}
|
|
4266
|
-
else {
|
|
4267
|
-
|
|
4872
|
+
else if (e.nativeEvent?.key === 'Enter' && this.tagBox()?.inputValue()?.trim()) {
|
|
4873
|
+
e.nativeEvent?.preventDefault();
|
|
4874
|
+
e.nativeEvent?.stopPropagation();
|
|
4875
|
+
this.handleAddAllInlineFilters();
|
|
4876
|
+
this.popover()?.close();
|
|
4268
4877
|
}
|
|
4269
4878
|
}
|
|
4270
|
-
|
|
4879
|
+
onEnterKeyPressed(e) {
|
|
4880
|
+
e.preventDefault();
|
|
4881
|
+
e.stopPropagation();
|
|
4882
|
+
this.handleApplyFilter();
|
|
4883
|
+
}
|
|
4884
|
+
handleTagClick(item) {
|
|
4885
|
+
if (item.field === 'all') {
|
|
4886
|
+
return;
|
|
4887
|
+
}
|
|
4888
|
+
this.activeFilter.set(item);
|
|
4889
|
+
this.popover()?.open();
|
|
4890
|
+
}
|
|
4891
|
+
handleRemoveTag(e, index) {
|
|
4892
|
+
e.preventDefault();
|
|
4893
|
+
e.stopPropagation();
|
|
4894
|
+
this.tagBox()?.removeItem(index);
|
|
4895
|
+
}
|
|
4896
|
+
#emitFiltersEffect;
|
|
4271
4897
|
handleSelectFilters(e) {
|
|
4272
4898
|
if (e.value?.length < this.selectedFilters().length) {
|
|
4273
4899
|
const hiddenFilters = this.selectedFilters().filter((f) => f.hidden);
|
|
@@ -4276,6 +4902,30 @@ class AXPQueryFiltersComponent {
|
|
|
4276
4902
|
});
|
|
4277
4903
|
}
|
|
4278
4904
|
}
|
|
4905
|
+
handleAddAllInlineFilters() {
|
|
4906
|
+
const inputValue = this.tagBox()?.inputValue();
|
|
4907
|
+
// Check if input is empty
|
|
4908
|
+
if (!inputValue?.trim()) {
|
|
4909
|
+
return;
|
|
4910
|
+
}
|
|
4911
|
+
// Remove existing "all" filter (if exists) and add new one with updated value
|
|
4912
|
+
// This creates a new reference and triggers the effect
|
|
4913
|
+
this.selectedFilters.update((prev) => {
|
|
4914
|
+
const withoutAll = prev.filter((f) => f.field !== 'all');
|
|
4915
|
+
return [
|
|
4916
|
+
...withoutAll,
|
|
4917
|
+
{
|
|
4918
|
+
title: 'All',
|
|
4919
|
+
field: 'all',
|
|
4920
|
+
operator: { type: 'contains' },
|
|
4921
|
+
value: inputValue, // Store value in filter definition
|
|
4922
|
+
widget: { type: 'text-box' },
|
|
4923
|
+
filterType: { inline: true, advance: false },
|
|
4924
|
+
},
|
|
4925
|
+
];
|
|
4926
|
+
});
|
|
4927
|
+
this.tagBox()?.inputValue.set('');
|
|
4928
|
+
}
|
|
4279
4929
|
getActiveOperator(filter) {
|
|
4280
4930
|
if (!filter) {
|
|
4281
4931
|
return undefined;
|
|
@@ -4285,15 +4935,16 @@ class AXPQueryFiltersComponent {
|
|
|
4285
4935
|
return ALL_DEFAULT_OPERATORS.find((o) => o.name === operatorType)?.title;
|
|
4286
4936
|
}
|
|
4287
4937
|
handleSelectInlineFilter(filter) {
|
|
4288
|
-
this.
|
|
4938
|
+
const inputValue = this.tagBox()?.inputValue();
|
|
4939
|
+
// Add filter with value stored in the filter definition
|
|
4940
|
+
this.selectedFilters.update((prev) => [
|
|
4289
4941
|
...prev,
|
|
4290
|
-
|
|
4291
|
-
|
|
4292
|
-
|
|
4942
|
+
{
|
|
4943
|
+
...filter,
|
|
4944
|
+
value: inputValue, // Store value in filter
|
|
4293
4945
|
},
|
|
4294
|
-
|
|
4946
|
+
]);
|
|
4295
4947
|
this.tagBox()?.inputValue.set('');
|
|
4296
|
-
this.selectedFilters.update((prev) => [...prev, filter]);
|
|
4297
4948
|
this.popover()?.close();
|
|
4298
4949
|
}
|
|
4299
4950
|
handleInlineFilterKeyDown(e, filter) {
|
|
@@ -4318,11 +4969,28 @@ class AXPQueryFiltersComponent {
|
|
|
4318
4969
|
});
|
|
4319
4970
|
}
|
|
4320
4971
|
}
|
|
4321
|
-
#
|
|
4322
|
-
|
|
4323
|
-
|
|
4972
|
+
#updateTagsEffect;
|
|
4973
|
+
//#region ---- Widget Focus Effect ----
|
|
4974
|
+
/**
|
|
4975
|
+
* Auto-focus widget when component ref is ready and filter is active
|
|
4976
|
+
* This reactive approach eliminates the need for setTimeout
|
|
4977
|
+
*/
|
|
4978
|
+
#focusEffect;
|
|
4979
|
+
async handleKeyboardEvent(event) {
|
|
4980
|
+
if (event.ctrlKey) {
|
|
4981
|
+
switch (event.code) {
|
|
4982
|
+
case 'KeyF':
|
|
4983
|
+
event.preventDefault();
|
|
4984
|
+
event.stopPropagation();
|
|
4985
|
+
this.tagBox()?.focus();
|
|
4986
|
+
break;
|
|
4987
|
+
}
|
|
4988
|
+
}
|
|
4989
|
+
}
|
|
4990
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4991
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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" }, host: { listeners: { "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetRenderer", first: true, predicate: ["widgetRenderer"], descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\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 #tagBoxComponent\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 [tagTemplate]=\"tagTemplate\"\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 >\n <ax-suffix><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n </ax-tag-box>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n [class.!ax-bg-primary]=\"item.field === 'all'\"\n [class.!ax-text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item)\"\n >\n <span>{{ item.query }}</span>\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n </div>\n </ng-template>\n</div>\n\n<ax-popover\n [offsetY]=\"activeFilter() ? -30 : 0\"\n [target]=\"tagBoxInput\"\n [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\"\n [closeOn]=\"'clickOut'\"\n (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\"\n #popover\n>\n <div\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\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n activeFilter()?.title! | translate | async\n }}</ax-header>\n <ax-content class=\"ax-p-4\">\n <div class=\"ax-mb-2\">\n <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n </div>\n <ng-container\n #widgetRenderer=\"widgetRenderer\"\n axp-widget-renderer\n [node]=\"{\n type: activeFilter()?.widget?.type || 'text-editor',\n path: activeFilter()?.field,\n options: activeFilter()?.widget?.options,\n }\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n </ax-content>\n <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n <ax-button\n class=\"ax-xs\"\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"\n ></ax-button>\n </ax-footer>\n </div>\n } @else {\n <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n <!-- @if (tagBox.inputValue()) {\n @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n tabindex=\"0\"\n (click)=\"handleSelectInlineFilter(inlineFilter)\"\n (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n >\n {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n tagBox.inputValue()\n }}'\n </div>\n }\n <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n } -->\n @for (field of filterFields(); track field.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\"\n tabindex=\"0\"\n >\n <div class=\"ax-flex ax-items-end ax-gap-2\">\n <ax-icon class=\"ax-w-5\" [class]=\"'fa-light ' + field.icon\"> </ax-icon>\n {{ field.title | translate | async }}\n </div>\n </div>\n }\n </div>\n }\n </axp-widgets-container>\n </div>\n</ax-popover>\n", styles: ["axp-query-filters{width:100%}.axp-list-items{display:flex;min-width:10rem;flex-direction:column;border-radius:.375rem;border-width:1px;padding-top:1rem;padding-bottom:1rem;--tw-shadow: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--tw-shadow-colored: 0 4px 6px -1px var(--tw-shadow-color), 0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),var(--tw-ring-shadow, 0 0 #0000),var(--tw-shadow);background-color:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));border-color:rgb(var(--ax-sys-color-border-lightest-surface))}.axp-list-items>div{min-width:7rem;cursor:pointer;padding:.5rem 1rem;text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:rgb(var(--ax-sys-color-surface));color:rgb(var(--ax-sys-color-on-surface));border-color:rgb(var(--ax-sys-color-border-surface))}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$3.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$4.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4324
4992
|
}
|
|
4325
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4993
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
|
|
4326
4994
|
type: Component,
|
|
4327
4995
|
args: [{ selector: 'axp-query-filters', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
4328
4996
|
CommonModule,
|
|
@@ -4336,11 +5004,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
4336
5004
|
AXPWidgetCoreModule,
|
|
4337
5005
|
AXListNavigationModule,
|
|
4338
5006
|
AXBadgeModule,
|
|
4339
|
-
], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-p-2\">\n <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"popover.open()\" #filterButton [look]=\"'blank'\">\n <ax-icon class=\"far fa-bars-filter ax-cursor-pointer\"> </ax-icon>\n </ax-button>\n <ax-tag-box\n [ngModel]=\"asyncTags()\"\n (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\"\n [valueField]=\"'id'\"\n [readonly]=\"filtersDefinitions().length === 0\"\n [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\"\n (onKeyDown)=\"handleKeyDown($event)\"\n [addOnEnter]=\"false\"\n [placeholder]=\"\n (filtersDefinitions().length === 0\n ? '@general:terms.interface.filter.no-filter-definitions'\n : '@general:terms.interface.filter.placeholder'\n )\n | translate\n | async\n \"\n #tagBox\n ></ax-tag-box>\n</div>\n\n<ax-popover\n [offsetY]=\"activeFilter() ? -30 : 0\"\n [target]=\"tagBoxInput\"\n [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\"\n [closeOn]=\"'clickOut'\"\n (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\"\n #popover\n>\n <div\n class=\"md:ax-min-w-72 ax-border ax-surface ax-w-full ax-rounded-md md:ax-max-h-96 ax-max-w-80 md:ax-overflow-auto\"\n >\n <axp-widgets-container [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n @if (activeFilter()) {\n <div class=\"ax-flex ax-flex-col ax-lightest-surface ax-shadow-md\">\n <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n activeFilter()?.title! | translate | async\n }}</ax-header>\n <ax-content class=\"ax-p-4\">\n <div class=\"ax-mb-2\">\n <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n </div>\n <ng-container\n axp-widget-renderer\n [node]=\"{\n type: activeFilter()?.widget?.type || 'text-editor',\n path: activeFilter()?.field,\n options: activeFilter()?.widget?.options,\n }\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n </ax-content>\n <ax-footer class=\"ax-border-t ax-flex ax-justify-end ax-border-light ax-w-full ax-px-4 ax-py-2\">\n <ax-button\n class=\"ax-xs\"\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"\n ></ax-button>\n </ax-footer>\n </div>\n } @else {\n <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items\">\n @if (tagBox.inputValue()) {\n @for (inlineFilter of inlineFilters(); track inlineFilter.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive()\"\n tabindex=\"0\"\n (click)=\"handleSelectInlineFilter(inlineFilter)\"\n (keydown)=\"handleInlineFilterKeyDown($event, inlineFilter)\"\n >\n {{ inlineFilter.title | translate | async }} {{ getActiveOperator(inlineFilter) }} '{{\n tagBox.inputValue()\n }}'\n </div>\n }\n <span class=\"ax-w-full ax-border-t ax-border-light ax-my-1\"></span>\n }
|
|
4340
|
-
}], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], listItems: [{
|
|
5007
|
+
], 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 #tagBoxComponent\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 [tagTemplate]=\"tagTemplate\"\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 >\n <ax-suffix><span class=\"ax-text-gray-500\">Ctrl+F</span></ax-suffix>\n </ax-tag-box>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"ax-inline-flex ax-items-center ax-gap-1.5 hover:ax-bg-darkest ax-cursor-pointer ax-rounded-md ax-px-3 ax-py-1 ax-text-sm ax-surface\"\n [class.!ax-bg-primary]=\"item.field === 'all'\"\n [class.!ax-text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item)\"\n >\n <span>{{ item.query }}</span>\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n </div>\n </ng-template>\n</div>\n\n<ax-popover\n [offsetY]=\"activeFilter() ? -30 : 0\"\n [target]=\"tagBoxInput\"\n [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\"\n [closeOn]=\"'clickOut'\"\n (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\"\n #popover\n>\n <div\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\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n <ax-header class=\"ax-border-b ax-border-light ax-px-4 ax-py-2\">{{\n activeFilter()?.title! | translate | async\n }}</ax-header>\n <ax-content class=\"ax-p-4\">\n <div class=\"ax-mb-2\">\n <ax-badge [text]=\"getActiveOperator(activeFilter())!\"></ax-badge>\n </div>\n <ng-container\n #widgetRenderer=\"widgetRenderer\"\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"] }]
|
|
5008
|
+
}], propDecorators: { filtersDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filtersDefinitions", required: false }] }], initialFilters: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialFilters", required: false }] }], onFiltersChanged: [{ type: i0.Output, args: ["onFiltersChanged"] }], tagBox: [{ type: i0.ViewChild, args: ['tagBox', { isSignal: true }] }], widgetRenderer: [{ type: i0.ViewChild, args: ['widgetRenderer', { isSignal: true }] }], listItems: [{
|
|
4341
5009
|
type: ViewChildren,
|
|
4342
5010
|
args: ['caseItem']
|
|
4343
|
-
}], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }]
|
|
5011
|
+
}], popover: [{ type: i0.ViewChild, args: ['popover', { isSignal: true }] }], handleKeyboardEvent: [{
|
|
5012
|
+
type: HostListener,
|
|
5013
|
+
args: ['document:keydown', ['$event']]
|
|
5014
|
+
}] } });
|
|
4344
5015
|
|
|
4345
5016
|
class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
4346
5017
|
constructor() {
|
|
@@ -4349,6 +5020,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
4349
5020
|
this.image = input.required(...(ngDevMode ? [{ debugName: "image" }] : []));
|
|
4350
5021
|
this.showHistory = input(true, ...(ngDevMode ? [{ debugName: "showHistory" }] : []));
|
|
4351
5022
|
this.look = input('blank', ...(ngDevMode ? [{ debugName: "look" }] : []));
|
|
5023
|
+
this.aspectRatio = input(undefined, ...(ngDevMode ? [{ debugName: "aspectRatio" }] : []));
|
|
4352
5024
|
this.container = viewChild(AXImageEditorContainerComponent, ...(ngDevMode ? [{ debugName: "container" }] : []));
|
|
4353
5025
|
this.blobUrl = signal(null, ...(ngDevMode ? [{ debugName: "blobUrl" }] : []));
|
|
4354
5026
|
this.url = signal(null, ...(ngDevMode ? [{ debugName: "url" }] : []));
|
|
@@ -4378,7 +5050,6 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
4378
5050
|
}
|
|
4379
5051
|
}
|
|
4380
5052
|
handleSave() {
|
|
4381
|
-
this.container()?.save();
|
|
4382
5053
|
this.close({ data: this.context() });
|
|
4383
5054
|
}
|
|
4384
5055
|
handleCancel() {
|
|
@@ -4390,11 +5061,16 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
4390
5061
|
URL.revokeObjectURL(prev);
|
|
4391
5062
|
}
|
|
4392
5063
|
}
|
|
4393
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4394
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5064
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5065
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPImageEditorPopupComponent, isStandalone: true, selector: "axp-image-editor-popup", inputs: { image: { classPropertyName: "image", publicName: "image", isSignal: true, isRequired: true, transformFunction: null }, showHistory: { classPropertyName: "showHistory", publicName: "showHistory", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, aspectRatio: { classPropertyName: "aspectRatio", publicName: "aspectRatio", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "container", first: true, predicate: AXImageEditorContainerComponent, descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: `
|
|
4395
5066
|
<ax-form class="ax-flex ax-justify-center">
|
|
4396
5067
|
<ax-form-field class="ax-p-2">
|
|
4397
|
-
<ax-image-editor-container
|
|
5068
|
+
<ax-image-editor-container
|
|
5069
|
+
[aspectRatio]="[aspectRatio() ?? '16/9']"
|
|
5070
|
+
#container
|
|
5071
|
+
[look]="look()"
|
|
5072
|
+
(onValueChanged)="handleValueChanged($event)"
|
|
5073
|
+
>
|
|
4398
5074
|
<ax-header>
|
|
4399
5075
|
<ax-toolbar>
|
|
4400
5076
|
<ax-prefix>
|
|
@@ -4410,15 +5086,20 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
4410
5086
|
</ax-form>
|
|
4411
5087
|
<ax-footer class="ax-flex ax-justify-end ax-gap-2">
|
|
4412
5088
|
<ax-suffix>
|
|
4413
|
-
<ax-button
|
|
5089
|
+
<ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
|
|
4414
5090
|
</ax-button>
|
|
4415
|
-
<ax-button
|
|
5091
|
+
<ax-button
|
|
5092
|
+
color="primary"
|
|
5093
|
+
look="solid"
|
|
5094
|
+
(onClick)="handleSave()"
|
|
5095
|
+
[text]="'@general:actions.save.title' | translate | async"
|
|
5096
|
+
>
|
|
4416
5097
|
</ax-button>
|
|
4417
5098
|
</ax-suffix>
|
|
4418
5099
|
</ax-footer>
|
|
4419
|
-
`, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$4.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$4.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$
|
|
5100
|
+
`, isInline: true, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$4.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "src"] }, { kind: "component", type: i1$4.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled", "aspectRatio"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$4.AXImageEditorHistoryComponent, selector: "ax-image-editor-history" }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$6.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }] }); }
|
|
4420
5101
|
}
|
|
4421
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
|
|
4422
5103
|
type: Component,
|
|
4423
5104
|
args: [{ standalone: true, selector: 'axp-image-editor-popup', imports: [
|
|
4424
5105
|
CommonModule,
|
|
@@ -4431,7 +5112,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
4431
5112
|
], template: `
|
|
4432
5113
|
<ax-form class="ax-flex ax-justify-center">
|
|
4433
5114
|
<ax-form-field class="ax-p-2">
|
|
4434
|
-
<ax-image-editor-container
|
|
5115
|
+
<ax-image-editor-container
|
|
5116
|
+
[aspectRatio]="[aspectRatio() ?? '16/9']"
|
|
5117
|
+
#container
|
|
5118
|
+
[look]="look()"
|
|
5119
|
+
(onValueChanged)="handleValueChanged($event)"
|
|
5120
|
+
>
|
|
4435
5121
|
<ax-header>
|
|
4436
5122
|
<ax-toolbar>
|
|
4437
5123
|
<ax-prefix>
|
|
@@ -4447,14 +5133,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImpo
|
|
|
4447
5133
|
</ax-form>
|
|
4448
5134
|
<ax-footer class="ax-flex ax-justify-end ax-gap-2">
|
|
4449
5135
|
<ax-suffix>
|
|
4450
|
-
<ax-button
|
|
5136
|
+
<ax-button look="solid" (onClick)="handleCancel()" [text]="'@general:actions.cancel.title' | translate | async">
|
|
4451
5137
|
</ax-button>
|
|
4452
|
-
<ax-button
|
|
5138
|
+
<ax-button
|
|
5139
|
+
color="primary"
|
|
5140
|
+
look="solid"
|
|
5141
|
+
(onClick)="handleSave()"
|
|
5142
|
+
[text]="'@general:actions.save.title' | translate | async"
|
|
5143
|
+
>
|
|
4453
5144
|
</ax-button>
|
|
4454
5145
|
</ax-suffix>
|
|
4455
5146
|
</ax-footer>
|
|
4456
5147
|
`, styles: ["::ng-deep ax-image-editor-view>canvas{height:65vh}\n"] }]
|
|
4457
|
-
}], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
|
|
5148
|
+
}], propDecorators: { image: [{ type: i0.Input, args: [{ isSignal: true, alias: "image", required: true }] }], showHistory: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHistory", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], aspectRatio: [{ type: i0.Input, args: [{ isSignal: true, alias: "aspectRatio", required: false }] }], container: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXImageEditorContainerComponent), { isSignal: true }] }] } });
|
|
4458
5149
|
|
|
4459
5150
|
var imageEditorPopup_component = /*#__PURE__*/Object.freeze({
|
|
4460
5151
|
__proto__: null,
|
|
@@ -4474,114 +5165,19 @@ class AXPImageEditorService {
|
|
|
4474
5165
|
image: signal(options?.image),
|
|
4475
5166
|
showHistory: signal(options?.showHistory ?? true),
|
|
4476
5167
|
look: signal(options?.look ?? 'solid'),
|
|
5168
|
+
aspectRatio: signal(options?.aspectRatio),
|
|
4477
5169
|
},
|
|
4478
5170
|
});
|
|
4479
5171
|
return result?.data?.data?.image ?? null;
|
|
4480
5172
|
}
|
|
4481
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4482
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
5173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5174
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorService, providedIn: 'root' }); }
|
|
4483
5175
|
}
|
|
4484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPImageEditorService, decorators: [{
|
|
4485
5177
|
type: Injectable,
|
|
4486
5178
|
args: [{ providedIn: 'root' }]
|
|
4487
5179
|
}] });
|
|
4488
5180
|
|
|
4489
|
-
class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
4490
|
-
constructor() {
|
|
4491
|
-
super(...arguments);
|
|
4492
|
-
//#region ---- Inputs ----
|
|
4493
|
-
this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
|
|
4494
|
-
this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
4495
|
-
//#endregion
|
|
4496
|
-
//#region ---- Properties ----
|
|
4497
|
-
this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
|
|
4498
|
-
}
|
|
4499
|
-
//#endregion
|
|
4500
|
-
//#region ---- Event Handlers ----
|
|
4501
|
-
handlePropertyChanged(event) {
|
|
4502
|
-
this.currentValues.set(event.values);
|
|
4503
|
-
}
|
|
4504
|
-
handleCloseClick() {
|
|
4505
|
-
this.close();
|
|
4506
|
-
}
|
|
4507
|
-
handleApplyClick() {
|
|
4508
|
-
this.close({
|
|
4509
|
-
values: this.currentValues(),
|
|
4510
|
-
mode: 'update'
|
|
4511
|
-
});
|
|
4512
|
-
}
|
|
4513
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
4514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.10", type: AXPWidgetPropertyViewerPopupComponent, isStandalone: true, selector: "axp-widget-property-viewer-popup", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: true, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null } }, usesInheritance: true, ngImport: i0, template: `
|
|
4515
|
-
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
4516
|
-
<axp-widget-property-viewer
|
|
4517
|
-
[widget]="widget()"
|
|
4518
|
-
[mode]="mode()"
|
|
4519
|
-
(onChanged)="handlePropertyChanged($event)">
|
|
4520
|
-
</axp-widget-property-viewer>
|
|
4521
|
-
</div>
|
|
4522
|
-
|
|
4523
|
-
<ax-footer>
|
|
4524
|
-
<ax-suffix>
|
|
4525
|
-
<ax-button
|
|
4526
|
-
look="solid"
|
|
4527
|
-
[text]="'@general:actions.close.title' | translate | async"
|
|
4528
|
-
(onClick)="handleCloseClick()">
|
|
4529
|
-
</ax-button>
|
|
4530
|
-
<ax-button
|
|
4531
|
-
look="solid"
|
|
4532
|
-
color="primary"
|
|
4533
|
-
[text]="'@general:actions.apply.title' | translate | async"
|
|
4534
|
-
(onClick)="handleApplyClick()">
|
|
4535
|
-
</ax-button>
|
|
4536
|
-
</ax-suffix>
|
|
4537
|
-
</ax-footer>
|
|
4538
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPWidgetPropertyViewerComponent, selector: "axp-widget-property-viewer", inputs: ["widget", "mode"], outputs: ["onChanged"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4539
|
-
}
|
|
4540
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.10", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
|
|
4541
|
-
type: Component,
|
|
4542
|
-
args: [{
|
|
4543
|
-
selector: 'axp-widget-property-viewer-popup',
|
|
4544
|
-
template: `
|
|
4545
|
-
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
4546
|
-
<axp-widget-property-viewer
|
|
4547
|
-
[widget]="widget()"
|
|
4548
|
-
[mode]="mode()"
|
|
4549
|
-
(onChanged)="handlePropertyChanged($event)">
|
|
4550
|
-
</axp-widget-property-viewer>
|
|
4551
|
-
</div>
|
|
4552
|
-
|
|
4553
|
-
<ax-footer>
|
|
4554
|
-
<ax-suffix>
|
|
4555
|
-
<ax-button
|
|
4556
|
-
look="solid"
|
|
4557
|
-
[text]="'@general:actions.close.title' | translate | async"
|
|
4558
|
-
(onClick)="handleCloseClick()">
|
|
4559
|
-
</ax-button>
|
|
4560
|
-
<ax-button
|
|
4561
|
-
look="solid"
|
|
4562
|
-
color="primary"
|
|
4563
|
-
[text]="'@general:actions.apply.title' | translate | async"
|
|
4564
|
-
(onClick)="handleApplyClick()">
|
|
4565
|
-
</ax-button>
|
|
4566
|
-
</ax-suffix>
|
|
4567
|
-
</ax-footer>
|
|
4568
|
-
`,
|
|
4569
|
-
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
4570
|
-
imports: [
|
|
4571
|
-
CommonModule,
|
|
4572
|
-
AXButtonModule,
|
|
4573
|
-
AXDecoratorModule,
|
|
4574
|
-
AXTranslationModule,
|
|
4575
|
-
AXPWidgetPropertyViewerComponent
|
|
4576
|
-
],
|
|
4577
|
-
}]
|
|
4578
|
-
}], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
4579
|
-
|
|
4580
|
-
var widgetPropertyViewerPopup_component = /*#__PURE__*/Object.freeze({
|
|
4581
|
-
__proto__: null,
|
|
4582
|
-
AXPWidgetPropertyViewerPopupComponent: AXPWidgetPropertyViewerPopupComponent
|
|
4583
|
-
});
|
|
4584
|
-
|
|
4585
5181
|
class AXPQuerySortsComponent {
|
|
4586
5182
|
constructor() {
|
|
4587
5183
|
this.sortDefinitions = model([], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : []));
|
|
@@ -4629,10 +5225,10 @@ class AXPQuerySortsComponent {
|
|
|
4629
5225
|
});
|
|
4630
5226
|
});
|
|
4631
5227
|
}
|
|
4632
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4633
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5228
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQuerySortsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5229
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4634
5230
|
}
|
|
4635
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5231
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQuerySortsComponent, decorators: [{
|
|
4636
5232
|
type: Component,
|
|
4637
5233
|
args: [{ selector: 'axp-query-sorts', standalone: true, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
4638
5234
|
CdkDropList,
|
|
@@ -4719,8 +5315,8 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
|
4719
5315
|
metadata: this.config?.metadata
|
|
4720
5316
|
});
|
|
4721
5317
|
}
|
|
4722
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4723
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5318
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateViewerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5319
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPTemplateViewerComponent, isStandalone: true, selector: "axp-template-viewer", inputs: { config: "config" }, usesInheritance: true, ngImport: i0, template: `
|
|
4724
5320
|
<div class="ax-p-4 ax-min-h-64">
|
|
4725
5321
|
<ax-form #form>
|
|
4726
5322
|
<axp-widgets-container [context]="context" (onContextChanged)="handleContextChanged($event)" >
|
|
@@ -4739,9 +5335,9 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
|
4739
5335
|
</ax-suffix>
|
|
4740
5336
|
</ax-footer>
|
|
4741
5337
|
}
|
|
4742
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$2.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$2.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$
|
|
5338
|
+
`, 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$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$6.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "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 }); }
|
|
4743
5339
|
}
|
|
4744
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5340
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
|
|
4745
5341
|
type: Component,
|
|
4746
5342
|
args: [{
|
|
4747
5343
|
selector: 'axp-template-viewer',
|
|
@@ -4810,10 +5406,10 @@ class AXPTemplateViewerService {
|
|
|
4810
5406
|
showActions: false
|
|
4811
5407
|
});
|
|
4812
5408
|
}
|
|
4813
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4814
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
5409
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateViewerService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5410
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateViewerService, providedIn: 'root' }); }
|
|
4815
5411
|
}
|
|
4816
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5412
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPTemplateViewerService, decorators: [{
|
|
4817
5413
|
type: Injectable,
|
|
4818
5414
|
args: [{
|
|
4819
5415
|
providedIn: 'root'
|
|
@@ -4936,10 +5532,10 @@ class AXPUserAvatarService {
|
|
|
4936
5532
|
throw error;
|
|
4937
5533
|
}
|
|
4938
5534
|
}
|
|
4939
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
4940
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
5535
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPUserAvatarService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
5536
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPUserAvatarService, providedIn: 'root' }); }
|
|
4941
5537
|
}
|
|
4942
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5538
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPUserAvatarService, decorators: [{
|
|
4943
5539
|
type: Injectable,
|
|
4944
5540
|
args: [{
|
|
4945
5541
|
providedIn: 'root',
|
|
@@ -5024,10 +5620,10 @@ class AXPUserAvatarComponent {
|
|
|
5024
5620
|
const idx = this.hashString(initials) % colors.length;
|
|
5025
5621
|
return colors[idx];
|
|
5026
5622
|
}
|
|
5027
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5028
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5623
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPUserAvatarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5624
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPUserAvatarComponent, isStandalone: true, selector: "axp-user-avatar", inputs: { size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: false, transformFunction: null } }, providers: [], ngImport: i0, template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n @if(hasAvatar()){\n <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n }@else{\n <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n </ax-text>\n }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->", styles: [""], dependencies: [{ kind: "ngmodule", type: AXAvatarModule }, { kind: "component", type: i1$5.AXAvatarComponent, selector: "ax-avatar", inputs: ["color", "size", "shape", "look"], outputs: ["sizeChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXImageModule }, { kind: "component", type: i3$5.AXImageComponent, selector: "ax-image", inputs: ["width", "height", "overlayMode", "src", "alt", "priority", "lazy"], outputs: ["onLoad", "onError"] }, { kind: "ngmodule", type: AXBadgeModule }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
5029
5625
|
}
|
|
5030
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5626
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPUserAvatarComponent, decorators: [{
|
|
5031
5627
|
type: Component,
|
|
5032
5628
|
args: [{ selector: 'axp-user-avatar', imports: [AXAvatarModule, AXDecoratorModule, AXImageModule, AXBadgeModule], encapsulation: ViewEncapsulation.None, providers: [], template: "<ax-avatar #avatar [size]=\"size()\" class=\"ax-cursor-pointer\">\n @if(hasAvatar()){\n <ax-image (onError)=\"onImageError($event)\" (onLoad)=\"onImageLoad($event)\" [src]=\"src()\"></ax-image>\n }@else{\n <ax-text class=\"ax-{{ avatarColor() }}-lightest \">\n <small class=\"ax-text-xs ax-font-semibold\">{{ avatarText() }}</small>\n </ax-text>\n }\n</ax-avatar>\n\n<!--\n\nax-primary-lightest\nax-warning-lightest\nax-success-lightest\nax-danger-lightest\nax-secondary-lightest\nax-accent1-lightest\nax-accent2-lightest\nax-accent3-lightest\n\n-->" }]
|
|
5033
5629
|
}], propDecorators: { size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], userId: [{ type: i0.Input, args: [{ isSignal: true, alias: "userId", required: false }] }] } });
|
|
@@ -5064,14 +5660,240 @@ class AXPQueryViewsComponent {
|
|
|
5064
5660
|
handleActiveChange(e) {
|
|
5065
5661
|
console.log(e);
|
|
5066
5662
|
}
|
|
5067
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5068
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5663
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryViewsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
|
|
5069
5665
|
}
|
|
5070
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5666
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPQueryViewsComponent, decorators: [{
|
|
5071
5667
|
type: Component,
|
|
5072
5668
|
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" }]
|
|
5073
5669
|
}], propDecorators: { tabs: [{ type: i0.ViewChild, args: ['tabs', { isSignal: true }] }], views: [{ type: i0.Input, args: [{ isSignal: true, alias: "views", required: false }] }, { type: i0.Output, args: ["viewsChange"] }], selectedView: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedView", required: true }] }, { type: i0.Output, args: ["selectedViewChange"] }] } });
|
|
5074
5670
|
|
|
5671
|
+
//#region ---- Component ----
|
|
5672
|
+
/**
|
|
5673
|
+
* Compact widget field configurator component
|
|
5674
|
+
* Designed to be embedded in entity definition forms for configuring widget properties
|
|
5675
|
+
*/
|
|
5676
|
+
class AXPWidgetFieldConfiguratorComponent {
|
|
5677
|
+
/**
|
|
5678
|
+
* Enter edit mode (show select box)
|
|
5679
|
+
*/
|
|
5680
|
+
enterEditMode() {
|
|
5681
|
+
if (this.readonly())
|
|
5682
|
+
return;
|
|
5683
|
+
this.isEditMode.set(true);
|
|
5684
|
+
}
|
|
5685
|
+
//#endregion
|
|
5686
|
+
//#region ---- Lifecycle ----
|
|
5687
|
+
constructor() {
|
|
5688
|
+
//#region ---- Inputs ----
|
|
5689
|
+
/**
|
|
5690
|
+
* Widget node configuration (two-way binding)
|
|
5691
|
+
*/
|
|
5692
|
+
this.widget = model({ type: '' }, ...(ngDevMode ? [{ debugName: "widget" }] : []));
|
|
5693
|
+
/**
|
|
5694
|
+
* Label for the widget selector
|
|
5695
|
+
*/
|
|
5696
|
+
this.label = input('@general:terms.widget', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
5697
|
+
/**
|
|
5698
|
+
* Field name (used in property viewer title)
|
|
5699
|
+
*/
|
|
5700
|
+
this.fieldName = input('Field', ...(ngDevMode ? [{ debugName: "fieldName" }] : []));
|
|
5701
|
+
/**
|
|
5702
|
+
* Readonly mode
|
|
5703
|
+
*/
|
|
5704
|
+
this.readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : []));
|
|
5705
|
+
//#endregion
|
|
5706
|
+
//#region ---- Services & Dependencies ----
|
|
5707
|
+
this.widgetRegistry = inject(AXPWidgetRegistryService);
|
|
5708
|
+
this.widgetPropertyViewerService = inject(AXPWidgetPropertyViewerService);
|
|
5709
|
+
this.translationService = inject(AXTranslationService);
|
|
5710
|
+
this.formBuilderService = inject(AXPLayoutBuilderService);
|
|
5711
|
+
//#endregion
|
|
5712
|
+
//#region ---- Class Properties ----
|
|
5713
|
+
/**
|
|
5714
|
+
* Currently selected widget type
|
|
5715
|
+
*/
|
|
5716
|
+
this.selectedWidgetType = signal('', ...(ngDevMode ? [{ debugName: "selectedWidgetType" }] : []));
|
|
5717
|
+
/**
|
|
5718
|
+
* Whether the component is in edit mode (showing select box)
|
|
5719
|
+
*/
|
|
5720
|
+
this.isEditMode = signal(false, ...(ngDevMode ? [{ debugName: "isEditMode" }] : []));
|
|
5721
|
+
/**
|
|
5722
|
+
* Available widgets filtered by FormElement group
|
|
5723
|
+
*/
|
|
5724
|
+
this.availableWidgets = computed(() => {
|
|
5725
|
+
return this.widgetRegistry
|
|
5726
|
+
.all()
|
|
5727
|
+
.filter((widget) => widget.groups?.includes(AXPWidgetGroupEnum.FormElement)
|
|
5728
|
+
&& widget.type === 'editor')
|
|
5729
|
+
.map((widget) => ({
|
|
5730
|
+
value: widget.name,
|
|
5731
|
+
text: widget.title,
|
|
5732
|
+
icon: widget.icon,
|
|
5733
|
+
description: widget.description,
|
|
5734
|
+
}))
|
|
5735
|
+
.sort((a, b) => a.text.localeCompare(b.text));
|
|
5736
|
+
}, ...(ngDevMode ? [{ debugName: "availableWidgets" }] : []));
|
|
5737
|
+
/**
|
|
5738
|
+
* Current widget configuration details
|
|
5739
|
+
*/
|
|
5740
|
+
this.currentWidgetConfig = computed(() => {
|
|
5741
|
+
const widgetType = this.selectedWidgetType();
|
|
5742
|
+
if (!widgetType)
|
|
5743
|
+
return null;
|
|
5744
|
+
const config = this.widgetRegistry.resolve(widgetType);
|
|
5745
|
+
return config
|
|
5746
|
+
? {
|
|
5747
|
+
title: config.title,
|
|
5748
|
+
description: config.description,
|
|
5749
|
+
icon: config.icon,
|
|
5750
|
+
hasProperties: config.properties && config.properties.length > 0,
|
|
5751
|
+
}
|
|
5752
|
+
: null;
|
|
5753
|
+
}, ...(ngDevMode ? [{ debugName: "currentWidgetConfig" }] : []));
|
|
5754
|
+
/**
|
|
5755
|
+
* Whether configure button should be enabled
|
|
5756
|
+
*/
|
|
5757
|
+
this.canConfigure = computed(() => {
|
|
5758
|
+
return !!this.selectedWidgetType() && !!this.currentWidgetConfig()?.hasProperties;
|
|
5759
|
+
}, ...(ngDevMode ? [{ debugName: "canConfigure" }] : []));
|
|
5760
|
+
/**
|
|
5761
|
+
* Whether widget has been configured (has options)
|
|
5762
|
+
*/
|
|
5763
|
+
this.isConfigured = computed(() => {
|
|
5764
|
+
const widget = this.widget();
|
|
5765
|
+
if (!widget || !widget.options)
|
|
5766
|
+
return false;
|
|
5767
|
+
return Object.keys(widget.options).length > 0;
|
|
5768
|
+
}, ...(ngDevMode ? [{ debugName: "isConfigured" }] : []));
|
|
5769
|
+
/**
|
|
5770
|
+
* Whether preview button should be enabled
|
|
5771
|
+
*/
|
|
5772
|
+
this.canPreview = computed(() => {
|
|
5773
|
+
return !!this.selectedWidgetType();
|
|
5774
|
+
}, ...(ngDevMode ? [{ debugName: "canPreview" }] : []));
|
|
5775
|
+
// Sync widget type to internal signal
|
|
5776
|
+
effect(() => {
|
|
5777
|
+
const widget = this.widget();
|
|
5778
|
+
if (widget?.type !== this.selectedWidgetType()) {
|
|
5779
|
+
this.selectedWidgetType.set(widget?.type || '');
|
|
5780
|
+
// Auto-enter edit mode if no widget is selected
|
|
5781
|
+
if (!widget?.type) {
|
|
5782
|
+
this.isEditMode.set(true);
|
|
5783
|
+
}
|
|
5784
|
+
}
|
|
5785
|
+
});
|
|
5786
|
+
}
|
|
5787
|
+
//#endregion
|
|
5788
|
+
//#region ---- Event Handlers ----
|
|
5789
|
+
/**
|
|
5790
|
+
* Handle widget type change
|
|
5791
|
+
*/
|
|
5792
|
+
async onWidgetTypeChange(event) {
|
|
5793
|
+
if (this.readonly())
|
|
5794
|
+
return;
|
|
5795
|
+
const newType = event?.value ?? event;
|
|
5796
|
+
const currentWidget = this.widget();
|
|
5797
|
+
// If the type hasn't actually changed, don't do anything
|
|
5798
|
+
// This prevents resetting options during initialization
|
|
5799
|
+
if (currentWidget?.type === newType) {
|
|
5800
|
+
return;
|
|
5801
|
+
}
|
|
5802
|
+
this.selectedWidgetType.set(newType);
|
|
5803
|
+
// Create new widget node with selected type
|
|
5804
|
+
// Only reset options when user manually changes the type
|
|
5805
|
+
const newWidget = {
|
|
5806
|
+
type: newType,
|
|
5807
|
+
options: {},
|
|
5808
|
+
};
|
|
5809
|
+
this.widget.set(newWidget);
|
|
5810
|
+
// Exit edit mode after selection (show widget info)
|
|
5811
|
+
this.isEditMode.set(false);
|
|
5812
|
+
}
|
|
5813
|
+
/**
|
|
5814
|
+
* Open widget property viewer
|
|
5815
|
+
*/
|
|
5816
|
+
async openPropertyViewer() {
|
|
5817
|
+
if (!this.canConfigure() || this.readonly())
|
|
5818
|
+
return;
|
|
5819
|
+
const currentWidget = cloneDeep(this.widget());
|
|
5820
|
+
const fieldName = this.fieldName();
|
|
5821
|
+
const title = await this.translationService.translateAsync('@general:actions.configure.title', {
|
|
5822
|
+
params: { name: fieldName },
|
|
5823
|
+
});
|
|
5824
|
+
const result = await this.widgetPropertyViewerService.open({
|
|
5825
|
+
title: title || `Configure ${fieldName}`,
|
|
5826
|
+
widget: currentWidget,
|
|
5827
|
+
mode: 'simple',
|
|
5828
|
+
});
|
|
5829
|
+
if (result && result.values) {
|
|
5830
|
+
// Merge the updated values from property viewer into the widget
|
|
5831
|
+
const updatedWidget = {
|
|
5832
|
+
...currentWidget,
|
|
5833
|
+
...result.values,
|
|
5834
|
+
options: {
|
|
5835
|
+
...(currentWidget.options ?? {}),
|
|
5836
|
+
...(result.values.options ?? {}),
|
|
5837
|
+
},
|
|
5838
|
+
};
|
|
5839
|
+
this.widget.set(updatedWidget);
|
|
5840
|
+
}
|
|
5841
|
+
}
|
|
5842
|
+
/**
|
|
5843
|
+
* Open widget preview with actual rendered widget
|
|
5844
|
+
*/
|
|
5845
|
+
async openPreview() {
|
|
5846
|
+
if (!this.canPreview())
|
|
5847
|
+
return;
|
|
5848
|
+
try {
|
|
5849
|
+
const currentWidget = cloneDeep(this.widget());
|
|
5850
|
+
const fieldName = this.fieldName();
|
|
5851
|
+
const config = this.currentWidgetConfig();
|
|
5852
|
+
// Use widget title in dialog title
|
|
5853
|
+
const dialogTitle = config?.title || currentWidget.type || fieldName;
|
|
5854
|
+
// Create preview dialog with actual rendered widget
|
|
5855
|
+
const dialogRef = await this.formBuilderService
|
|
5856
|
+
.create()
|
|
5857
|
+
.dialog((dialog) => {
|
|
5858
|
+
dialog
|
|
5859
|
+
.setTitle(dialogTitle)
|
|
5860
|
+
.setSize('md')
|
|
5861
|
+
.setCloseButton(true)
|
|
5862
|
+
.setContext({})
|
|
5863
|
+
.content((layoutBuilder) => {
|
|
5864
|
+
// Create form field directly without fieldset wrapper
|
|
5865
|
+
layoutBuilder.formField(fieldName, (formField) => {
|
|
5866
|
+
formField.customWidget(currentWidget.type, currentWidget.options);
|
|
5867
|
+
});
|
|
5868
|
+
})
|
|
5869
|
+
.setActions((actions) => actions.cancel('@general:actions.close.title'));
|
|
5870
|
+
})
|
|
5871
|
+
.show();
|
|
5872
|
+
// Close the dialog
|
|
5873
|
+
dialogRef.close();
|
|
5874
|
+
}
|
|
5875
|
+
catch (error) {
|
|
5876
|
+
console.error('Error showing widget preview:', error);
|
|
5877
|
+
}
|
|
5878
|
+
}
|
|
5879
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5880
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", type: AXPWidgetFieldConfiguratorComponent, isStandalone: true, selector: "axp-widget-field-configurator", inputs: { widget: { classPropertyName: "widget", publicName: "widget", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, fieldName: { classPropertyName: "fieldName", publicName: "fieldName", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { widget: "widgetChange" }, ngImport: i0, template: "<!-- Widget Selector & Info Container -->\n<div class=\"__widget-container\">\n <!-- Edit Mode: Show Select Box -->\n @if (isEditMode()) {\n <div class=\"__widget-selector\">\n <ax-select-box [(ngModel)]=\"selectedWidgetType\" [dataSource]=\"availableWidgets()\"\n [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n (onValueChanged)=\"onWidgetTypeChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n [selectedTemplate]=\"selectedTemplate\">\n <ax-search-box></ax-search-box>\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n }\n\n <!-- View Mode: Show Widget Info -->\n @if (!isEditMode()) {\n @if (selectedWidgetType() && currentWidgetConfig(); as config) {\n <div class=\"__widget-info\">\n <!-- Widget Header (Clickable to Edit) -->\n <div class=\"__widget-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n <div>\n @if (config.icon) {\n <i [class]=\"config.icon\"></i>\n }\n <div>\n <span>\n {{ config.title }}\n </span>\n @if (config.description) {\n <p>\n {{ config.description }}\n </p>\n }\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n <!-- Configure Button -->\n @if (config.hasProperties) {\n <ax-button [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openPropertyViewer()\">\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n <!-- Preview Button -->\n <ax-button [disabled]=\"!canPreview()\" [title]=\"('@general:actions.preview.title' | translate | async) ?? ''\"\n look=\"blank\" size=\"sm\" (onClick)=\"openPreview()\">\n <ax-icon icon=\"fa-solid fa-eye\"></ax-icon>\n </ax-button>\n </div>\n </div>\n\n <!-- No Configuration Needed State -->\n @if (!config.hasProperties) {\n <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n </axp-state-message>\n }\n </div>\n } @else {\n <!-- Empty State (Clickable to Edit) -->\n <div class=\"__widget-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select a widget type' }}\n </span>\n </div>\n }\n }\n\n <!-- Widget Item Template (Dropdown Items) -->\n <ng-template #itemTemplate let-context>\n @let item = context.data;\n <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n @if (item.icon) {\n <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n }\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n <div class=\"ax-text-sm ax-font-medium\">\n {{ item.text }}\n </div>\n @if (item.description) {\n <div class=\"ax-text-xs ax-text-neutral-600\">\n {{ item.description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Widget Selected Template (Selected Value Display) -->\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.data?.icon) {\n <i [class]=\"item.data.icon\"></i>\n }\n <span>\n {{ item?.data?.text }}\n </span>\n </div>\n </ng-template>\n</div>", styles: ["axp-widget-field-configurator{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-container{border-radius:.375rem;border-width:1px;padding:1rem;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));transition:all .2s ease}axp-widget-field-configurator .__widget-selector{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-selector ax-select-box{width:100%}axp-widget-field-configurator .__widget-info{display:flex;flex-direction:column;gap:.75rem}axp-widget-field-configurator .__widget-info .__widget-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-widget-field-configurator .__widget-info .__widget-header.__editable{cursor:pointer}axp-widget-field-configurator .__widget-info .__widget-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-info .__widget-header:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-info .__description{line-height:1.5}axp-widget-field-configurator .__widget-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-widget-field-configurator .__widget-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-widget-field-configurator .__widget-empty.__editable{cursor:pointer}axp-widget-field-configurator .__widget-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-empty:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-widget-field-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-widget-field-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-widget-field-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-widget-field-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-widget-field-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: 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", "itemHeight", "maxVisibleItems", "dataSource", "minRecordsForSearch", "caption", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "dropdownWidth", "searchBoxAutoFocus"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onOpened", "onClosed", "onItemSelected", "onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "variant"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5$1.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i4.AsyncPipe, name: "async" }, { kind: "pipe", type: i5.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5881
|
+
}
|
|
5882
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetFieldConfiguratorComponent, decorators: [{
|
|
5883
|
+
type: Component,
|
|
5884
|
+
args: [{ selector: 'axp-widget-field-configurator', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
|
|
5885
|
+
CommonModule,
|
|
5886
|
+
FormsModule,
|
|
5887
|
+
AXFormModule,
|
|
5888
|
+
AXButtonModule,
|
|
5889
|
+
AXSelectBoxModule,
|
|
5890
|
+
AXDecoratorModule,
|
|
5891
|
+
AXTranslationModule,
|
|
5892
|
+
AXPStateMessageComponent,
|
|
5893
|
+
AXSearchBoxModule,
|
|
5894
|
+
], template: "<!-- Widget Selector & Info Container -->\n<div class=\"__widget-container\">\n <!-- Edit Mode: Show Select Box -->\n @if (isEditMode()) {\n <div class=\"__widget-selector\">\n <ax-select-box [(ngModel)]=\"selectedWidgetType\" [dataSource]=\"availableWidgets()\"\n [placeholder]=\"('@general:actions.select.title' | translate | async) ?? ''\" [readonly]=\"readonly()\"\n (onValueChanged)=\"onWidgetTypeChange($event)\" valueField=\"value\" textField=\"text\" [itemTemplate]=\"itemTemplate\"\n [selectedTemplate]=\"selectedTemplate\">\n <ax-search-box></ax-search-box>\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n }\n\n <!-- View Mode: Show Widget Info -->\n @if (!isEditMode()) {\n @if (selectedWidgetType() && currentWidgetConfig(); as config) {\n <div class=\"__widget-info\">\n <!-- Widget Header (Clickable to Edit) -->\n <div class=\"__widget-header\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n <div>\n @if (config.icon) {\n <i [class]=\"config.icon\"></i>\n }\n <div>\n <span>\n {{ config.title }}\n </span>\n @if (config.description) {\n <p>\n {{ config.description }}\n </p>\n }\n </div>\n </div>\n\n <!-- Action Buttons -->\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n <!-- Configure Button -->\n @if (config.hasProperties) {\n <ax-button [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"('@general:actions.configure.title' | translate | async) ?? ''\" look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\" size=\"sm\" (onClick)=\"openPropertyViewer()\">\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n <!-- Preview Button -->\n <ax-button [disabled]=\"!canPreview()\" [title]=\"('@general:actions.preview.title' | translate | async) ?? ''\"\n look=\"blank\" size=\"sm\" (onClick)=\"openPreview()\">\n <ax-icon icon=\"fa-solid fa-eye\"></ax-icon>\n </ax-button>\n </div>\n </div>\n\n <!-- No Configuration Needed State -->\n @if (!config.hasProperties) {\n <axp-state-message mode=\"info\" icon=\"fa-solid fa-info-circle\"\n [description]=\"'@general:widgets.widget-configurator.no-configuration-needed'\" variant=\"compact\">\n </axp-state-message>\n }\n </div>\n } @else {\n <!-- Empty State (Clickable to Edit) -->\n <div class=\"__widget-empty\" [class.__editable]=\"!readonly()\" (click)=\"enterEditMode()\">\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{ ('@general:widgets.widget-configurator.select-widget-type' | translate | async) ?? 'Select a widget type' }}\n </span>\n </div>\n }\n }\n\n <!-- Widget Item Template (Dropdown Items) -->\n <ng-template #itemTemplate let-context>\n @let item = context.data;\n <div class=\"__item-template ax-flex ax-w-full ax-items-center ax-gap-3 ax-p-2\">\n @if (item.icon) {\n <i [class]=\"item.icon + ' ax-text-base ax-w-5 ax-text-center'\"></i>\n }\n <div class=\"ax-flex ax-items-center ax-gap-2 ax-flex-1 ax-min-w-0\">\n <div class=\"ax-text-sm ax-font-medium\">\n {{ item.text }}\n </div>\n @if (item.description) {\n <div class=\"ax-text-xs ax-text-neutral-600\">\n {{ item.description }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <!-- Widget Selected Template (Selected Value Display) -->\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.data?.icon) {\n <i [class]=\"item.data.icon\"></i>\n }\n <span>\n {{ item?.data?.text }}\n </span>\n </div>\n </ng-template>\n</div>", styles: ["axp-widget-field-configurator{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-container{border-radius:.375rem;border-width:1px;padding:1rem;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));transition:all .2s ease}axp-widget-field-configurator .__widget-selector{display:flex;flex-direction:column}axp-widget-field-configurator .__widget-selector ax-select-box{width:100%}axp-widget-field-configurator .__widget-info{display:flex;flex-direction:column;gap:.75rem}axp-widget-field-configurator .__widget-info .__widget-header{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:.375rem .5rem}axp-widget-field-configurator .__widget-info .__widget-header.__editable{cursor:pointer}axp-widget-field-configurator .__widget-info .__widget-header.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-info .__widget-header:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child{display:flex;flex:1 1 0%;align-items:center;gap:.5rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child i{font-size:1rem;line-height:1.5rem;flex-shrink:0}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div{display:flex;flex:1 1 0%;flex-direction:column;gap:.125rem}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>span{font-size:.875rem;line-height:1.25rem;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__widget-info .__widget-header>div:first-child>div>p{margin:0;font-size:.75rem;line-height:1rem;line-height:1.625;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-info .__description{line-height:1.5}axp-widget-field-configurator .__widget-info .__action-buttons{display:flex;align-items:center;gap:.25rem;flex-shrink:0}axp-widget-field-configurator .__widget-empty{display:flex;align-items:center;gap:.5rem;padding:.5rem}axp-widget-field-configurator .__widget-empty.__editable{cursor:pointer}axp-widget-field-configurator .__widget-empty.__editable:hover{border-radius:.375rem;--tw-bg-opacity: 1;background-color:rgba(var(--ax-sys-color-lighter-surface),var(--tw-bg-opacity, 1))}axp-widget-field-configurator .__widget-empty:not(.__editable){cursor:not-allowed}axp-widget-field-configurator .__widget-empty>i{font-size:1rem;line-height:1.5rem;--tw-text-opacity: 1;color:rgb(163 163 163 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__widget-empty>span{font-size:.875rem;line-height:1.25rem;--tw-text-opacity: 1;color:rgb(82 82 82 / var(--tw-text-opacity, 1))}axp-widget-field-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-widget-field-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-widget-field-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-widget-field-configurator .__selected-template{display:flex;align-items:center;gap:.5rem}axp-widget-field-configurator .__selected-template>i{font-size:.875rem;line-height:1.25rem}axp-widget-field-configurator .__selected-template>span{font-size:.875rem;line-height:1.25rem;font-weight:500}axp-widget-field-configurator :host([readonly]){pointer-events:none;opacity:.7}\n"] }]
|
|
5895
|
+
}], ctorParameters: () => [], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: false }] }, { type: i0.Output, args: ["widgetChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], fieldName: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldName", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }] } });
|
|
5896
|
+
|
|
5075
5897
|
/**
|
|
5076
5898
|
* Generic widget item component for displaying selectable widgets with icons, titles, and descriptions.
|
|
5077
5899
|
* Can be used across different modules for consistent widget display and interaction.
|
|
@@ -5118,17 +5940,108 @@ class AXPWidgetItemComponent {
|
|
|
5118
5940
|
getIconClass() {
|
|
5119
5941
|
return this.widget().icon || 'fa-light fa-document';
|
|
5120
5942
|
}
|
|
5121
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
5122
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
5943
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5944
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.12", 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 }); }
|
|
5123
5945
|
}
|
|
5124
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
5946
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetItemComponent, decorators: [{
|
|
5125
5947
|
type: Component,
|
|
5126
5948
|
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>" }]
|
|
5127
5949
|
}], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], isSelected: [{ type: i0.Input, args: [{ isSignal: true, alias: "isSelected", required: false }] }], showPinButton: [{ type: i0.Input, args: [{ isSignal: true, alias: "showPinButton", required: false }] }], customClasses: [{ type: i0.Input, args: [{ isSignal: true, alias: "customClasses", required: false }] }], onWidgetClick: [{ type: i0.Output, args: ["onWidgetClick"] }], onPinClick: [{ type: i0.Output, args: ["onPinClick"] }] } });
|
|
5128
5950
|
|
|
5951
|
+
class AXPWidgetPropertyViewerPopupComponent extends AXBasePageComponent {
|
|
5952
|
+
constructor() {
|
|
5953
|
+
super(...arguments);
|
|
5954
|
+
//#region ---- Inputs ----
|
|
5955
|
+
this.widget = input.required(...(ngDevMode ? [{ debugName: "widget" }] : []));
|
|
5956
|
+
this.mode = input('simple', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
5957
|
+
//#endregion
|
|
5958
|
+
//#region ---- Properties ----
|
|
5959
|
+
this.currentValues = signal({}, ...(ngDevMode ? [{ debugName: "currentValues" }] : []));
|
|
5960
|
+
}
|
|
5961
|
+
//#endregion
|
|
5962
|
+
//#region ---- Event Handlers ----
|
|
5963
|
+
handlePropertyChanged(event) {
|
|
5964
|
+
this.currentValues.set(event.values);
|
|
5965
|
+
}
|
|
5966
|
+
handleCloseClick() {
|
|
5967
|
+
this.close();
|
|
5968
|
+
}
|
|
5969
|
+
handleApplyClick() {
|
|
5970
|
+
this.close({
|
|
5971
|
+
values: this.currentValues(),
|
|
5972
|
+
mode: 'update'
|
|
5973
|
+
});
|
|
5974
|
+
}
|
|
5975
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5976
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.12", 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: `
|
|
5977
|
+
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
5978
|
+
<axp-widget-property-viewer
|
|
5979
|
+
[widget]="widget()"
|
|
5980
|
+
[mode]="mode()"
|
|
5981
|
+
(onChanged)="handlePropertyChanged($event)">
|
|
5982
|
+
</axp-widget-property-viewer>
|
|
5983
|
+
</div>
|
|
5984
|
+
|
|
5985
|
+
<ax-footer>
|
|
5986
|
+
<ax-suffix>
|
|
5987
|
+
<ax-button
|
|
5988
|
+
look="solid"
|
|
5989
|
+
[text]="'@general:actions.close.title' | translate | async"
|
|
5990
|
+
(onClick)="handleCloseClick()">
|
|
5991
|
+
</ax-button>
|
|
5992
|
+
<ax-button
|
|
5993
|
+
look="solid"
|
|
5994
|
+
color="primary"
|
|
5995
|
+
[text]="'@general:actions.apply.title' | translate | async"
|
|
5996
|
+
(onClick)="handleApplyClick()">
|
|
5997
|
+
</ax-button>
|
|
5998
|
+
</ax-suffix>
|
|
5999
|
+
</ax-footer>
|
|
6000
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i5$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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 }); }
|
|
6001
|
+
}
|
|
6002
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.12", ngImport: i0, type: AXPWidgetPropertyViewerPopupComponent, decorators: [{
|
|
6003
|
+
type: Component,
|
|
6004
|
+
args: [{
|
|
6005
|
+
selector: 'axp-widget-property-viewer-popup',
|
|
6006
|
+
template: `
|
|
6007
|
+
<div class="ax-flex ax-flex-col ax-h-full ax-overflow-hidden">
|
|
6008
|
+
<axp-widget-property-viewer
|
|
6009
|
+
[widget]="widget()"
|
|
6010
|
+
[mode]="mode()"
|
|
6011
|
+
(onChanged)="handlePropertyChanged($event)">
|
|
6012
|
+
</axp-widget-property-viewer>
|
|
6013
|
+
</div>
|
|
6014
|
+
|
|
6015
|
+
<ax-footer>
|
|
6016
|
+
<ax-suffix>
|
|
6017
|
+
<ax-button
|
|
6018
|
+
look="solid"
|
|
6019
|
+
[text]="'@general:actions.close.title' | translate | async"
|
|
6020
|
+
(onClick)="handleCloseClick()">
|
|
6021
|
+
</ax-button>
|
|
6022
|
+
<ax-button
|
|
6023
|
+
look="solid"
|
|
6024
|
+
color="primary"
|
|
6025
|
+
[text]="'@general:actions.apply.title' | translate | async"
|
|
6026
|
+
(onClick)="handleApplyClick()">
|
|
6027
|
+
</ax-button>
|
|
6028
|
+
</ax-suffix>
|
|
6029
|
+
</ax-footer>
|
|
6030
|
+
`,
|
|
6031
|
+
changeDetection: ChangeDetectionStrategy.OnPush,
|
|
6032
|
+
imports: [
|
|
6033
|
+
CommonModule,
|
|
6034
|
+
AXButtonModule,
|
|
6035
|
+
AXDecoratorModule,
|
|
6036
|
+
AXTranslationModule,
|
|
6037
|
+
AXPWidgetPropertyViewerComponent
|
|
6038
|
+
],
|
|
6039
|
+
}]
|
|
6040
|
+
}], propDecorators: { widget: [{ type: i0.Input, args: [{ isSignal: true, alias: "widget", required: true }] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }] } });
|
|
6041
|
+
|
|
5129
6042
|
/**
|
|
5130
6043
|
* Generated bundle index. Do not edit.
|
|
5131
6044
|
*/
|
|
5132
6045
|
|
|
5133
|
-
export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPQueryColumnsComponent, AXPQueryFiltersComponent, AXPQuerySortsComponent, AXPQueryViewsComponent, AXPStateMessageComponent, AXPTaskBadgeDirective, AXPTaskBadgeProvider, AXPTaskBadgeService, AXPTemplateViewerComponent, AXPTemplateViewerService, AXPThemeLayoutActionsComponent, AXPThemeLayoutBlockComponent, AXPThemeLayoutContainerComponent, AXPThemeLayoutEndSideComponent, AXPThemeLayoutFooterComponent, AXPThemeLayoutHeaderComponent, AXPThemeLayoutListComponent, AXPThemeLayoutListItemComponent, AXPThemeLayoutListItemsGroupComponent, AXPThemeLayoutPageHeaderComponent, AXPThemeLayoutPagePrimaryActionsComponent, AXPThemeLayoutPageSecondaryActionsComponent, AXPThemeLayoutSectionComponent, AXPThemeLayoutStartSideComponent, AXPThemeLayoutToolbarComponent, AXPUserAvatarComponent, AXPUserAvatarService, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
|
|
6046
|
+
export { AXPActivityLogComponent, AXPCategoryTreeComponent, AXPColorPalettePickerComponent, AXPColumnItemListComponent, AXPCompareViewComponent, AXPComponentSlot, AXPComponentSlotDirective, AXPComponentSlotModule, AXPComponentSlotRegistryService, AXPDataSelectorComponent, AXPDataSelectorService, AXPDragDropListComponent, AXPDynamicFormDesignerComponent, AXPExtraPropertiesComponent, AXPExtraPropertiesSchemaComponent, AXPExtraPropertiesValuesComponent, AXPImageEditorPopupComponent, AXPImageEditorService, AXPMenuBadgeHelper, AXPPropertyViewerComponent, AXPPropertyViewerPopupComponent, AXPPropertyViewerService, 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, AXPWidgetFieldConfiguratorComponent, AXPWidgetItemComponent, AXPWidgetPropertyViewerComponent, AXPWidgetPropertyViewerPopupComponent, AXPWidgetPropertyViewerService, AXP_EXTRA_PROPERTY_TYPES, AXP_TASK_BADGE_PROVIDERS, AXP_USER_AVATAR_PROVIDER, convertDesignerFieldToFormField, convertDesignerGroupToFormGroup, convertDesignerStateToFormDefinition };
|
|
5134
6047
|
//# sourceMappingURL=acorex-platform-layout-components.mjs.map
|