@acorex-platform/framework-client 0.0.32 → 0.0.33
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/fesm2022/acorex-platform-framework-client-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-components.mjs +40 -42
- package/fesm2022/acorex-platform-framework-client-layout-components.mjs.map +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-Bu8LLCVa.mjs → acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-D1prdDvf.mjs} +150 -61
- package/fesm2022/acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-D1prdDvf.mjs.map +1 -0
- package/fesm2022/{acorex-platform-framework-client-layout-entity-attachments-page.component-EU1dgVH_.mjs → acorex-platform-framework-client-layout-entity-attachments-page.component-CeVGNzup.mjs} +2 -2
- package/fesm2022/{acorex-platform-framework-client-layout-entity-attachments-page.component-EU1dgVH_.mjs.map → acorex-platform-framework-client-layout-entity-attachments-page.component-CeVGNzup.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-entity-bulk-entity.command-DNBhGkO8.mjs → acorex-platform-framework-client-layout-entity-bulk-entity.command-CFScb-L4.mjs} +2 -2
- package/fesm2022/{acorex-platform-framework-client-layout-entity-bulk-entity.command-DNBhGkO8.mjs.map → acorex-platform-framework-client-layout-entity-bulk-entity.command-CFScb-L4.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-entity-gallery-page.component-DtNSVjeF.mjs → acorex-platform-framework-client-layout-entity-gallery-page.component-B17l6mbm.mjs} +2 -2
- package/fesm2022/{acorex-platform-framework-client-layout-entity-gallery-page.component-DtNSVjeF.mjs.map → acorex-platform-framework-client-layout-entity-gallery-page.component-B17l6mbm.mjs.map} +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-entity.mjs +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-widgets-tabular-data-edit-popup.component-D3pnOGmB.mjs → acorex-platform-framework-client-layout-widgets-tabular-data-edit-popup.component-CRST84ou.mjs} +3 -3
- package/fesm2022/{acorex-platform-framework-client-layout-widgets-tabular-data-edit-popup.component-D3pnOGmB.mjs.map → acorex-platform-framework-client-layout-widgets-tabular-data-edit-popup.component-CRST84ou.mjs.map} +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-widgets.mjs +167 -223
- package/fesm2022/acorex-platform-framework-client-layout-widgets.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-themes-default.mjs +2 -2
- package/fesm2022/acorex-platform-framework-client-themes-default.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-themes-shared.mjs +38 -27
- package/fesm2022/acorex-platform-framework-client-themes-shared.mjs.map +1 -1
- package/package.json +2 -2
- package/types/acorex-platform-framework-client-layout-components.d.ts +2 -2
- package/types/acorex-platform-framework-client-layout-entity.d.ts +21 -7
- package/types/acorex-platform-framework-client-layout-widgets.d.ts +14 -13
- package/types/acorex-platform-framework-client-themes-default.d.ts +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-Bu8LLCVa.mjs.map +0 -1
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { getSystemActions, resolveToSurfaceClass, AXPFileStorageStatus, AXP_QUERY_QUICK_SEARCH_FIELD, AXPKeyboardShortcutPriority, runtimeQueryCollectionData, compareMultiLanguageStrings, containsHtmlMarkup, isFormValueEqual, extractTextFromHtml, AXPWidgetsCatalog, AXPRegionalSetting, AXP_PREVIEW_WIDGET_FIELD_COMMAND_KEY } from '@acorex-platform/framework-shared/core';
|
|
2
2
|
import * as i1$2 from '@acorex/components/button';
|
|
3
3
|
import { AXButtonModule } from '@acorex/components/button';
|
|
4
|
-
import * as i1$
|
|
4
|
+
import * as i1$5 from '@acorex/cdk/common';
|
|
5
5
|
import { AXCommonModule } from '@acorex/cdk/common';
|
|
6
6
|
import * as i2$1 from '@acorex/components/decorators';
|
|
7
7
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
|
@@ -29,40 +29,39 @@ import * as i1$3 from '@acorex/components/badge';
|
|
|
29
29
|
import { AXBadgeComponent, AXBadgeModule } from '@acorex/components/badge';
|
|
30
30
|
import { AXPLayoutThemeService } from '@acorex-platform/framework-client/themes/shared';
|
|
31
31
|
import { SIGNAL, signalSetFn } from '@angular/core/primitives/signals';
|
|
32
|
-
import * as i5
|
|
32
|
+
import * as i5 from '@acorex/components/dropdown';
|
|
33
33
|
import { AXDropdownModule } from '@acorex/components/dropdown';
|
|
34
|
-
import * as
|
|
34
|
+
import * as i3$2 from '@acorex/components/search-box';
|
|
35
35
|
import { AXSearchBoxModule } from '@acorex/components/search-box';
|
|
36
36
|
import { AXTreeViewComponent } from '@acorex/components/tree-view';
|
|
37
37
|
import { ensureRuntimeSurfaceClasses, setupPopupFooterKeyboardShortcuts, AXPExpressionEvaluatorService, AXPColumnWidthService, AXPDataGenerator, AXPHookService, AXP_DISTRIBUTED_EVENT_LISTENER_PROVIDER, AXPKeyboardShortcutRegistry, chordToKbdItemKeys, AXPDeviceService } from '@acorex-platform/framework-client/core';
|
|
38
38
|
export { AXPLogoComponent } from '@acorex-platform/framework-client/core';
|
|
39
39
|
import * as i2$2 from '@acorex/components/popover';
|
|
40
40
|
import { AXPopoverModule } from '@acorex/components/popover';
|
|
41
|
-
import * as i3$
|
|
41
|
+
import * as i3$3 from '@acorex/components/switch';
|
|
42
42
|
import { AXSwitchModule } from '@acorex/components/switch';
|
|
43
43
|
import { moveItemInArray, CdkDropList, CdkDrag, CdkDragHandle, transferArrayItem } from '@angular/cdk/drag-drop';
|
|
44
44
|
import * as i1$4 from '@angular/forms';
|
|
45
45
|
import { FormsModule } from '@angular/forms';
|
|
46
46
|
import * as i4$1 from '@acorex/components/data-table';
|
|
47
47
|
import { AXDataTableColumnComponent, AXDataTableModule } from '@acorex/components/data-table';
|
|
48
|
-
import * as i2$
|
|
48
|
+
import * as i2$4 from '@acorex/components/form';
|
|
49
49
|
import { AXFormModule, AXFormComponent } from '@acorex/components/form';
|
|
50
50
|
import { AXTextBoxModule } from '@acorex/components/text-box';
|
|
51
51
|
import * as i2$3 from '@acorex/components/check-box';
|
|
52
52
|
import { AXCheckBoxModule } from '@acorex/components/check-box';
|
|
53
|
-
import * as
|
|
53
|
+
import * as i3$4 from '@acorex/components/label';
|
|
54
54
|
import { AXLabelModule } from '@acorex/components/label';
|
|
55
|
-
import * as i3$
|
|
55
|
+
import * as i3$5 from '@acorex-platform/framework-client/layout/widget-core';
|
|
56
56
|
import { AXPWidgetCoreModule, AXPWidgetRegistryService, AXPWidgetContainerComponent } from '@acorex-platform/framework-client/layout/widget-core';
|
|
57
|
-
import * as i3$
|
|
57
|
+
import * as i3$6 from '@acorex/components/dropdown-button';
|
|
58
58
|
import { AXDropdownButtonModule } from '@acorex/components/dropdown-button';
|
|
59
59
|
import { AXBasePageComponent } from '@acorex/components/page';
|
|
60
60
|
import * as i7 from '@acorex/components/loading';
|
|
61
61
|
import { AXLoadingModule } from '@acorex/components/loading';
|
|
62
62
|
import { AXPopupService } from '@acorex/components/popup';
|
|
63
63
|
import { moveItemInArray as moveItemInArray$1, AXDragDirective, AXDragHandleDirective, AXDropListDirective } from '@acorex/cdk/drag-drop';
|
|
64
|
-
import
|
|
65
|
-
import { AXSelectBoxModule } from '@acorex/components/select-box';
|
|
64
|
+
import { AXLookupComponent } from '@acorex/components/lookup';
|
|
66
65
|
import { AXToastService } from '@acorex/components/toast';
|
|
67
66
|
import { getFileExtension, AXFileService } from '@acorex/core/file';
|
|
68
67
|
import { AXDialogService } from '@acorex/components/dialog';
|
|
@@ -74,22 +73,22 @@ import * as i7$1 from '@acorex/cdk/list-navigation';
|
|
|
74
73
|
import { AXListNavigationModule } from '@acorex/cdk/list-navigation';
|
|
75
74
|
import { AXKBDComponent, AXKBDItemComponent } from '@acorex/components/kbd';
|
|
76
75
|
import { AXSelectionListModule } from '@acorex/components/selection-list';
|
|
77
|
-
import * as i5$
|
|
76
|
+
import * as i5$1 from '@acorex/components/tag-box';
|
|
78
77
|
import { AXTagBoxModule } from '@acorex/components/tag-box';
|
|
79
78
|
import { AXCalendarService } from '@acorex/core/date-time';
|
|
80
79
|
import { AXPQueryService, AXPCommandExecutor, AXPCommandService } from '@acorex-platform/framework-client/runtime';
|
|
81
80
|
import { resolveEntityListFilterQueryField, resolveEntityListFilterContextField } from '@acorex-platform/framework-shared/entity';
|
|
82
|
-
import * as i1$
|
|
81
|
+
import * as i1$6 from '@acorex/components/image-editor';
|
|
83
82
|
import { AXImageEditorContainerComponent, AXImageEditorCropComponent, AXImageEditorModule } from '@acorex/components/image-editor';
|
|
84
83
|
import { AXToolBarModule } from '@acorex/components/toolbar';
|
|
85
|
-
import * as i2$
|
|
84
|
+
import * as i2$5 from '@acorex/components/accordion';
|
|
86
85
|
import { AXAccordionModule } from '@acorex/components/accordion';
|
|
87
86
|
import { AXButtonGroupModule } from '@acorex/components/button-group';
|
|
88
87
|
import * as i4$2 from '@acorex/components/code-editor';
|
|
89
88
|
import { AXCodeEditorModule } from '@acorex/components/code-editor';
|
|
90
89
|
import * as i8 from '@acorex/components/tabs';
|
|
91
90
|
import { AXTabsModule } from '@acorex/components/tabs';
|
|
92
|
-
import * as i1$
|
|
91
|
+
import * as i1$7 from '@acorex/components/menu';
|
|
93
92
|
import { AXMenuModule } from '@acorex/components/menu';
|
|
94
93
|
import { AXSchedulerComponent } from '@acorex/components/scheduler';
|
|
95
94
|
import { AXSafePipe } from '@acorex/core/pipes';
|
|
@@ -1257,7 +1256,7 @@ class AXPCategoryTreeComponent {
|
|
|
1257
1256
|
this.isLoading.set(false);
|
|
1258
1257
|
}
|
|
1259
1258
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCategoryTreeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1260
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"p-4 flex flex-col gap-3\" [class.pt-2]=\"config().searchable\">\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div\n class=\"px-4 flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\"\n [class.pt-2]=\"config().searchable\"\n >\n <ax-tree-view\n [datasource]=\"datasource\"\n [selectMode]=\"config().showCheckbox ? 'multiple' : 'none'\"\n [dragBehavior]=\"'none'\"\n [showIcons]=\"false\"\n [showChildrenBadge]=\"false\"\n (onNodeClick)=\"handleNodeClick($event)\"\n (onNodeToggle)=\"handleNodeToggle($event)\"\n [nodeTemplate]=\"itemTemplate\"\n [titleField]=\"config().textField || 'title'\"\n [idField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\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 [titleParams]=\"emptyStateTitleParams()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"\n (actions().createLabel || '@general:actions.add-new.title'\n | translate\n | async)!\n \"\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-node=\"node\">\n @let item = node;\n @let textField = config().textField || 'title';\n @let rawTitle = item[textField] ?? item.title;\n <div class=\"flex items-center justify-between w-full gap-2 overflow-hidden\">\n <div class=\"flex items-center gap-2 min-w-0\">\n <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n <span class=\"truncate\">\n @if (item.id === 'root') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ rawTitle | translate | async }}\n }\n </span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (\n actions().canCreateChild || actions().canUpdate || actions().canDelete\n ) {\n <div class=\"flex items-center gap-1\">\n <ax-button\n class=\"ax-xs\"\n color=\"default\"\n look=\"none\"\n (onClick)=\"$event.nativeEvent.stopPropagation()\"\n >\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\n (actions().createChildLabel ||\n '@general:actions.add-new-child.title'\n | translate\n | async)!\n \"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"\n (actions().updateLabel || '@general:actions.edit.title'\n | translate\n | async)!\n \"\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]=\"\n (actions().deleteLabel ||\n '@general:actions.delete.title'\n | translate\n | async)!\n \"\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=\"flex items-center gap-1\">\n <ax-button\n class=\"ax-sm\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"blank\"\n color=\"default\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: [":host{display:block;height:100%;width:100%}:host axp-layout-content{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: "\n\n axp-page-content, \n axp-page-footer-container,\n axp-page-footer,\n axp-page-header,\n axp-page-header-container,\n axp-page-toolbar,\n\n axp-layout-content, \n axp-layout-page-content, \n\n axp-layout-sections,\n axp-layout-body,\n axp-layout-page-body,\n axp-layout-prefix,\n axp-layout-suffix,\n axp-layout-title-bar,\n axp-layout-title, \n axp-layout-title-actions, \n axp-layout-nav-button, \n axp-layout-description, \n axp-layout-breadcrumbs,\n axp-layout-list-action,\n " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1259
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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=\"p-4 flex flex-col gap-3\" [class.pt-2]=\"config().searchable\">\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n <ax-skeleton class=\"w-full h-6 rounded-md\"></ax-skeleton>\n </div>\n } @else if (treeItems()[0].children?.length) {\n <div\n class=\"px-4 flex-1 min-h-0 min-w-0 overflow-y-auto overflow-x-hidden\"\n [class.pt-2]=\"config().searchable\"\n >\n <ax-tree-view\n [datasource]=\"datasource\"\n [selectMode]=\"config().showCheckbox ? 'multiple' : 'none'\"\n [dragBehavior]=\"'none'\"\n [showIcons]=\"false\"\n [showChildrenBadge]=\"false\"\n (onNodeClick)=\"handleNodeClick($event)\"\n (onNodeToggle)=\"handleNodeToggle($event)\"\n [nodeTemplate]=\"itemTemplate\"\n [titleField]=\"config().textField || 'title'\"\n [idField]=\"config().valueField || 'id'\"\n [expandedField]=\"config().expandedField || 'expand'\"\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 [titleParams]=\"emptyStateTitleParams()\"\n [description]=\"emptyStateDescription()\"\n >\n @if (actions().canCreate) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"\n (actions().createLabel || '@general:actions.add-new.title'\n | translate\n | async)!\n \"\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-node=\"node\">\n @let item = node;\n @let textField = config().textField || 'title';\n @let rawTitle = item[textField] ?? item.title;\n <div class=\"flex items-center justify-between w-full gap-2 overflow-hidden\">\n <div class=\"flex items-center gap-2 min-w-0\">\n <ax-icon class=\"fas text-warning fa-folder\"></ax-icon>\n <span class=\"truncate\">\n @if (item.id === 'root') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ rawTitle | translate | async }}\n }\n </span>\n </div>\n @if (item.id && item.id !== 'root') {\n @if (\n actions().canCreateChild || actions().canUpdate || actions().canDelete\n ) {\n <div class=\"flex items-center gap-1\">\n <ax-button\n class=\"ax-xs\"\n color=\"default\"\n look=\"none\"\n (onClick)=\"$event.nativeEvent.stopPropagation()\"\n >\n <ax-icon class=\"fas fa-ellipsis-v\"></ax-icon>\n <ax-dropdown-panel>\n <ax-button-item-list>\n @if (actions().canCreateChild) {\n <ax-button-item\n (onClick)=\"handleCreateChildClick(item, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\n (actions().createChildLabel ||\n '@general:actions.add-new-child.title'\n | translate\n | async)!\n \"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button-item>\n }\n @if (actions().canUpdate) {\n <ax-button-item\n (onClick)=\"handleUpdateNodeClick(item, $event)\"\n look=\"blank\"\n [text]=\"\n (actions().updateLabel || '@general:actions.edit.title'\n | translate\n | async)!\n \"\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]=\"\n (actions().deleteLabel ||\n '@general:actions.delete.title'\n | translate\n | async)!\n \"\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=\"flex items-center gap-1\">\n <ax-button\n class=\"ax-sm\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"blank\"\n color=\"default\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </div>\n </ng-template>\n</axp-layout-content>\n", styles: [":host{display:block;height:100%;width:100%}:host axp-layout-content{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "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: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "component", type: AXPThemeLayoutHeaderComponent, selector: "axp-layout-header" }, { kind: "component", type: AXPThemeLayoutToolbarComponent, selector: "axp-layout-toolbar" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
1261
1260
|
}
|
|
1262
1261
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCategoryTreeComponent, decorators: [{
|
|
1263
1262
|
type: Component,
|
|
@@ -1412,7 +1411,7 @@ class AXPColorChooserComponent {
|
|
|
1412
1411
|
this.dropdownWidth.set(`${Math.max(hostWidth, POPOVER_MIN_WIDTH_PX)}px`);
|
|
1413
1412
|
}
|
|
1414
1413
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1415
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPColorChooserComponent, isStandalone: true, selector: "axp-color-chooser", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, selectedClass: { classPropertyName: "selectedClass", publicName: "selectedClass", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", 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: { classSelected: "classSelected" }, host: { listeners: { "click": "hostClickListener()" }, classAttribute: "axp-color-chooser" }, viewQueries: [{ propertyName: "paletteDropdown", first: true, predicate: ["paletteDropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"__root\" [class.__disabled]=\"disabled()\" [class.__readonly]=\"readonly()\">\n @if (usePopover()) {\n <!-- ----- Same shell as ax-select-box: dropdown-box + input slot + panel ----- -->\n <ax-dropdown-box\n #paletteDropdown\n [disabled]=\"disabled()\"\n [popoverWidth]=\"dropdownWidth()\"\n (onOpened)=\"handleDropdownOpened()\"\n (onClosed)=\"handleDropdownClosed()\"\n >\n <ng-container input>\n <div class=\"ax-editor ax-content ax-input\">\n <ng-container *ngTemplateOutlet=\"selectedItem\"></ng-container>\n </div>\n @if (allowClear() && hasSelection() && isInteractive()) {\n <button\n type=\"button\"\n class=\"ax-general-button-icon\"\n tabindex=\"-1\"\n (click)=\"handleClear($event)\"\n >\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n }\n <button type=\"button\" class=\"ax-general-button-icon\" [disabled]=\"!isInteractive()\" tabindex=\"-1\">\n <span\n class=\"ax-icon\"\n [class.ax-icon-chevron-down]=\"!dropdownOpen()\"\n [class.ax-icon-chevron-up]=\"dropdownOpen()\"\n ></span>\n </button>\n </ng-container>\n <ng-container panel>\n <div class=\"__popover\" [style.min-width]=\"dropdownWidth()\">\n <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: true }\"></ng-container>\n </div>\n </ng-container>\n </ax-dropdown-box>\n }\n <!-- ----- Single named row stays inline at select height ----- -->\n @else {\n <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: false }\"></ng-container>\n <!-- ----- Clear under the single inline strip ----- -->\n @if (allowClear()) {\n <button\n type=\"button\"\n class=\"__clear\"\n [class.__selected]=\"selectedClass() == null\"\n [disabled]=\"!isInteractive()\"\n (click)=\"handleClear($event)\"\n >\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n }\n }\n</div>\n\n<ng-template #selectedItem>\n @if (selectedSwatch(); as swatch) {\n <!-- ----- Selected value as a surface-colored pill ----- -->\n <div class=\"__selected-item {{ swatch.className }}\">\n <span class=\"__selected-text\">\n <!-- ----- Group title before the selected variant ----- -->\n @if (selectedGroup()?.title; as groupTitle) {\n {{ groupTitle | translate | async }}\n <span class=\"__trigger-sep\">\u00B7</span>\n }\n {{ displayLabel(swatch.label) | translate | async }}\n </span>\n </div>\n }\n <!-- ----- Empty state uses the same control height as a select ----- -->\n @else {\n <div class=\"ax-placeholder\">\n {{ '@platform-layout-widgets:widgets.color-chooser.placeholder' | translate | async }}\n </div>\n }\n</ng-template>\n\n<ng-template #paletteGroups let-showTitles=\"showTitles\">\n <div class=\"__groups\" [class.__look-strip]=\"look() === 'strip'\" [class.__look-swatches]=\"look() === 'swatches'\">\n @for (group of resolvedGroups(); track group.id) {\n <div class=\"__group\">\n <!-- ----- Named row title inside the dropdown list ----- -->\n @if (showTitles && group.title) {\n <div class=\"__group-title\">{{ group.title | translate | async }}</div>\n }\n <!-- ----- Coolors bar: thin columns, hover expands and shows the label ----- -->\n <div class=\"__strip\" role=\"listbox\">\n @for (swatch of group.swatches; track swatch.className) {\n <button\n type=\"button\"\n class=\"__column {{ swatch.className }}\"\n [class.__selected]=\"isSelected(swatch.className)\"\n [disabled]=\"!isInteractive()\"\n [attr.aria-label]=\"displayLabel(swatch.label)\"\n [attr.aria-selected]=\"isSelected(swatch.className)\"\n (click)=\"handleSelect(swatch)\"\n >\n <span class=\"__label\">{{ displayLabel(swatch.label) | translate | async }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;min-height:var(--ax-sys-size-base, 2.5rem);width:100%}:host ax-dropdown-box{width:100%}:host .ax-editor-container{padding-block:0}:host .ax-content{display:flex;min-height:var(--ax-sys-size-base, 2.5rem);min-width:0;flex:1;cursor:pointer;align-items:center;outline:none;-webkit-user-select:none;user-select:none}.__root{display:flex;flex-direction:column;gap:.5rem}.__selected-item{display:inline-flex;align-items:center;max-width:100%;min-height:1.5rem;padding-inline:.5rem;border-radius:.375rem}.__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__placeholder{opacity:.65}.__trigger-sep{margin-inline:.25rem}.__popover{box-sizing:border-box;width:100%;max-height:min(24rem,70vh);overflow:auto;padding:.75rem}.__groups{display:flex;flex-direction:column;gap:.75rem;min-width:0}.__group-title{font-size:.75rem;font-weight:500;color:rgb(var(--ax-sys-color-on-lighter-surface))}.__strip{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;height:var(--ax-sys-size-base, 2.5rem);overflow:hidden;border-radius:.5rem}.__column{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;appearance:none;cursor:pointer;transition:flex .22s ease}.__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ax-sys-text-xs-base, .75rem);font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .16s ease}.__look-strip .__column.__selected,.__look-strip .__column:hover:not(:disabled),.__look-strip .__column:focus-visible:not(:disabled){flex:4 1 0}.__look-strip .__column.__selected .__label,.__look-strip .__column:hover:not(:disabled) .__label,.__look-strip .__column:focus-visible:not(:disabled) .__label{opacity:1}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover),.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible){flex:1 1 0}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover) .__label,.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible) .__label{opacity:0}.__column.__selected{box-shadow:inset 0 0 0 2px rgb(var(--ax-sys-color-on-lighter-surface) / .4)}.__column:disabled{cursor:not-allowed}.__clear{align-self:flex-start;display:inline-flex;height:1.75rem;width:1.75rem;align-items:center;justify-content:center;border-radius:999px;border:1px dashed rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.75rem}.__clear.__selected,.__clear:focus-visible:not(:disabled){outline:2px solid rgb(var(--ax-sys-color-primary));outline-offset:2px}.__clear:disabled{cursor:not-allowed;opacity:.5}.__look-swatches .__strip{height:auto;flex-wrap:wrap;gap:.25rem;overflow:visible;border-radius:0}.__look-swatches .__column{flex:0 0 2rem;width:2rem;height:2rem;min-width:2rem;border-radius:.375rem;transition:transform .16s ease}.__look-swatches .__label{display:none}.__look-swatches .__column:hover:not(:disabled),.__look-swatches .__column:focus-visible:not(:disabled){flex:0 0 2rem;transform:scale(1.08)}.__disabled .__column,.__readonly .__column,.__disabled .__clear,.__readonly .__clear,.__disabled .ax-content,.__readonly .ax-content{cursor:default}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5
|
|
1414
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPColorChooserComponent, isStandalone: true, selector: "axp-color-chooser", inputs: { groups: { classPropertyName: "groups", publicName: "groups", isSignal: true, isRequired: false, transformFunction: null }, selectedClass: { classPropertyName: "selectedClass", publicName: "selectedClass", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", 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: { classSelected: "classSelected" }, host: { listeners: { "click": "hostClickListener()" }, classAttribute: "axp-color-chooser" }, viewQueries: [{ propertyName: "paletteDropdown", first: true, predicate: ["paletteDropdown"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"__root\" [class.__disabled]=\"disabled()\" [class.__readonly]=\"readonly()\">\n @if (usePopover()) {\n <!-- ----- Same shell as ax-select-box: dropdown-box + input slot + panel ----- -->\n <ax-dropdown-box\n #paletteDropdown\n [disabled]=\"disabled()\"\n [popoverWidth]=\"dropdownWidth()\"\n (onOpened)=\"handleDropdownOpened()\"\n (onClosed)=\"handleDropdownClosed()\"\n >\n <ng-container input>\n <div class=\"ax-editor ax-content ax-input\">\n <ng-container *ngTemplateOutlet=\"selectedItem\"></ng-container>\n </div>\n @if (allowClear() && hasSelection() && isInteractive()) {\n <button\n type=\"button\"\n class=\"ax-general-button-icon\"\n tabindex=\"-1\"\n (click)=\"handleClear($event)\"\n >\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n }\n <button type=\"button\" class=\"ax-general-button-icon\" [disabled]=\"!isInteractive()\" tabindex=\"-1\">\n <span\n class=\"ax-icon\"\n [class.ax-icon-chevron-down]=\"!dropdownOpen()\"\n [class.ax-icon-chevron-up]=\"dropdownOpen()\"\n ></span>\n </button>\n </ng-container>\n <ng-container panel>\n <div class=\"__popover\" [style.min-width]=\"dropdownWidth()\">\n <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: true }\"></ng-container>\n </div>\n </ng-container>\n </ax-dropdown-box>\n }\n <!-- ----- Single named row stays inline at select height ----- -->\n @else {\n <ng-container *ngTemplateOutlet=\"paletteGroups; context: { showTitles: false }\"></ng-container>\n <!-- ----- Clear under the single inline strip ----- -->\n @if (allowClear()) {\n <button\n type=\"button\"\n class=\"__clear\"\n [class.__selected]=\"selectedClass() == null\"\n [disabled]=\"!isInteractive()\"\n (click)=\"handleClear($event)\"\n >\n <span class=\"ax-icon ax-icon-close\"></span>\n </button>\n }\n }\n</div>\n\n<ng-template #selectedItem>\n @if (selectedSwatch(); as swatch) {\n <!-- ----- Selected value as a surface-colored pill ----- -->\n <div class=\"__selected-item {{ swatch.className }}\">\n <span class=\"__selected-text\">\n <!-- ----- Group title before the selected variant ----- -->\n @if (selectedGroup()?.title; as groupTitle) {\n {{ groupTitle | translate | async }}\n <span class=\"__trigger-sep\">\u00B7</span>\n }\n {{ displayLabel(swatch.label) | translate | async }}\n </span>\n </div>\n }\n <!-- ----- Empty state uses the same control height as a select ----- -->\n @else {\n <div class=\"ax-placeholder\">\n {{ '@platform-layout-widgets:widgets.color-chooser.placeholder' | translate | async }}\n </div>\n }\n</ng-template>\n\n<ng-template #paletteGroups let-showTitles=\"showTitles\">\n <div class=\"__groups\" [class.__look-strip]=\"look() === 'strip'\" [class.__look-swatches]=\"look() === 'swatches'\">\n @for (group of resolvedGroups(); track group.id) {\n <div class=\"__group\">\n <!-- ----- Named row title inside the dropdown list ----- -->\n @if (showTitles && group.title) {\n <div class=\"__group-title\">{{ group.title | translate | async }}</div>\n }\n <!-- ----- Coolors bar: thin columns, hover expands and shows the label ----- -->\n <div class=\"__strip\" role=\"listbox\">\n @for (swatch of group.swatches; track swatch.className) {\n <button\n type=\"button\"\n class=\"__column {{ swatch.className }}\"\n [class.__selected]=\"isSelected(swatch.className)\"\n [disabled]=\"!isInteractive()\"\n [attr.aria-label]=\"displayLabel(swatch.label)\"\n [attr.aria-selected]=\"isSelected(swatch.className)\"\n (click)=\"handleSelect(swatch)\"\n >\n <span class=\"__label\">{{ displayLabel(swatch.label) | translate | async }}</span>\n </button>\n }\n </div>\n </div>\n }\n </div>\n</ng-template>\n", styles: [":host{display:block;min-height:var(--ax-sys-size-base, 2.5rem);width:100%}:host ax-dropdown-box{width:100%}:host .ax-editor-container{padding-block:0}:host .ax-content{display:flex;min-height:var(--ax-sys-size-base, 2.5rem);min-width:0;flex:1;cursor:pointer;align-items:center;outline:none;-webkit-user-select:none;user-select:none}.__root{display:flex;flex-direction:column;gap:.5rem}.__selected-item{display:inline-flex;align-items:center;max-width:100%;min-height:1.5rem;padding-inline:.5rem;border-radius:.375rem}.__selected-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.__placeholder{opacity:.65}.__trigger-sep{margin-inline:.25rem}.__popover{box-sizing:border-box;width:100%;max-height:min(24rem,70vh);overflow:auto;padding:.75rem}.__groups{display:flex;flex-direction:column;gap:.75rem;min-width:0}.__group-title{font-size:.75rem;font-weight:500;color:rgb(var(--ax-sys-color-on-lighter-surface))}.__strip{display:flex;flex-wrap:nowrap;align-items:stretch;width:100%;height:var(--ax-sys-size-base, 2.5rem);overflow:hidden;border-radius:.5rem}.__column{position:relative;flex:1 1 0;min-width:0;margin:0;padding:0;border:0;border-radius:0;appearance:none;cursor:pointer;transition:flex .22s ease}.__label{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:var(--ax-sys-text-xs-base, .75rem);font-weight:600;letter-spacing:.04em;white-space:nowrap;opacity:0;transition:opacity .16s ease}.__look-strip .__column.__selected,.__look-strip .__column:hover:not(:disabled),.__look-strip .__column:focus-visible:not(:disabled){flex:4 1 0}.__look-strip .__column.__selected .__label,.__look-strip .__column:hover:not(:disabled) .__label,.__look-strip .__column:focus-visible:not(:disabled) .__label{opacity:1}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover),.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible){flex:1 1 0}.__look-strip .__strip:has(.__column:hover:not(.__selected)) .__column.__selected:not(:hover) .__label,.__look-strip .__strip:has(.__column:focus-visible:not(.__selected)) .__column.__selected:not(:focus-visible) .__label{opacity:0}.__column.__selected{box-shadow:inset 0 0 0 2px rgb(var(--ax-sys-color-on-lighter-surface) / .4)}.__column:disabled{cursor:not-allowed}.__clear{align-self:flex-start;display:inline-flex;height:1.75rem;width:1.75rem;align-items:center;justify-content:center;border-radius:999px;border:1px dashed rgb(var(--ax-sys-color-border-lighter-surface));background:rgb(var(--ax-sys-color-lighter-surface));color:rgb(var(--ax-sys-color-on-lighter-surface));font-size:.75rem}.__clear.__selected,.__clear:focus-visible:not(:disabled){outline:2px solid rgb(var(--ax-sys-color-primary));outline-offset:2px}.__clear:disabled{cursor:not-allowed;opacity:.5}.__look-swatches .__strip{height:auto;flex-wrap:wrap;gap:.25rem;overflow:visible;border-radius:0}.__look-swatches .__column{flex:0 0 2rem;width:2rem;height:2rem;min-width:2rem;border-radius:.375rem;transition:transform .16s ease}.__look-swatches .__label{display:none}.__look-swatches .__column:hover:not(:disabled),.__look-swatches .__column:focus-visible:not(:disabled){flex:0 0 2rem;transform:scale(1.08)}.__disabled .__column,.__readonly .__column,.__disabled .__clear,.__readonly .__clear,.__disabled .ax-content,.__readonly .ax-content{cursor:default}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownBoxComponent, selector: "ax-dropdown-box", inputs: ["disabled", "look", "hasInput", "popoverWidth"], outputs: ["disabledChange", "onBlur", "onFocus", "onClick", "onOpened", "onClosed"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1416
1415
|
}
|
|
1417
1416
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColorChooserComponent, decorators: [{
|
|
1418
1417
|
type: Component,
|
|
@@ -1701,7 +1700,7 @@ class AXPQueryColumnsComponent {
|
|
|
1701
1700
|
this.columns.set(columns);
|
|
1702
1701
|
}
|
|
1703
1702
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryColumnsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1704
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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\n class=\"flex flex-col gap-4 select-none\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n>\n <div\n class=\"flex flex-col gap-3 w-full ax-sorted-list max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\n >\n @for (item of columns(); track item.name) {\n <div\n class=\"flex py-1 items-center justify-between\"\n cdkDrag\n cdkDragBoundary=\".ax-sorted-list\"\n >\n <div class=\"flex items-center gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n <p class=\"font-medium text-sm\">\n {{ item.title | translate | async }}\n </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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$
|
|
1703
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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\n class=\"flex flex-col gap-4 select-none\"\n cdkDropList\n (cdkDropListDropped)=\"drop($event)\"\n>\n <div\n class=\"flex flex-col gap-3 w-full ax-sorted-list max-h-[calc(100vh-280px)] overflow-x-hidden overflow-y-auto\"\n >\n @for (item of columns(); track item.name) {\n <div\n class=\"flex py-1 items-center justify-between\"\n cdkDrag\n cdkDragBoundary=\".ax-sorted-list\"\n >\n <div class=\"flex items-center gap-3\" cdkDragHandle>\n <ax-icon class=\"fa-solid fa-grip-dots-vertical cursor-move\"></ax-icon>\n <p class=\"font-medium text-sm\">\n {{ item.title | translate | async }}\n </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$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "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$3.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: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager }); }
|
|
1705
1704
|
}
|
|
1706
1705
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryColumnsComponent, decorators: [{
|
|
1707
1706
|
type: Component,
|
|
@@ -2070,9 +2069,9 @@ class AXPCompareViewComponent {
|
|
|
2070
2069
|
// Angular
|
|
2071
2070
|
CommonModule }, { kind: "ngmodule", type:
|
|
2072
2071
|
// ACoreX
|
|
2073
|
-
AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type:
|
|
2072
|
+
AXFormModule }, { kind: "ngmodule", type: AXTextBoxModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type:
|
|
2074
2073
|
// Platform
|
|
2075
|
-
AXPWidgetCoreModule }, { kind: "component", type: i3$
|
|
2074
|
+
AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2076
2075
|
}
|
|
2077
2076
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPCompareViewComponent, decorators: [{
|
|
2078
2077
|
type: Component,
|
|
@@ -2672,7 +2671,7 @@ class AXPDataSelectorComponent extends AXBasePageComponent {
|
|
|
2672
2671
|
}
|
|
2673
2672
|
}
|
|
2674
2673
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2675
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n <!-- Main Content Area -->\n <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n <!-- Category Filter Side Panel -->\n @if (categoryEnabled()) {\n <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n </axp-category-tree>\n </div>\n }\n\n <!-- Main Data Area -->\n <div class=\"axp-main-data-area\">\n @if (hasSearch()) {\n <div class=\"w-full mb-2\">\n <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\">\n <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n @for (col of config().grid.columns; track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n path: col.dataPath || col.name,\n type: col.widget.type,\n options: col.widget.options\n }\">\n </axp-widget-column-renderer>\n }\n }\n @if (hasRowActionPrimary()) {\n <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-command-column>\n }\n @if (hasRowActionDropdown()) {\n <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-dropdown-command-column>\n }\n </ax-data-table>\n </div>\n </div>\n</div>\n\n<ax-footer>\n <ax-prefix>\n @if (config().footerPrefixAction; as prefixAction) {\n <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n <ax-button\n look=\"twotone\"\n color=\"primary\"\n type=\"button\"\n [disabled]=\"footerPrefixActionInProgress()\"\n [text]=\"prefixAction.text\"\n (onClick)=\"handleFooterPrefixActionClick()\"\n >\n <ax-prefix>\n @if (footerPrefixActionInProgress()) {\n <ax-loading></ax-loading>\n }\n <!-- ----- Footer prefix action icon when idle ----- -->\n @else if (prefixAction.icon) {\n <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n }\n </ax-prefix>\n </ax-button>\n }\n @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n <ax-prefix>\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n </ax-prefix>\n <ax-suffix>\n <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n (onClick)=\"handleCloseClick()\">\n </ax-button>\n <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n } -->\n </ax-button>\n </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$6.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2674
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPDataSelectorComponent, isStandalone: true, selector: "axp-data-selector", viewQueries: [{ propertyName: "grid", first: true, predicate: ["grid"], descendants: true, isSignal: true }], usesInheritance: true, ngImport: i0, template: "<div class=\"axp-data-selector\">\n <!-- Main Content Area -->\n <div class=\"axp-data-selector-content\" [class.with-category-filter]=\"categoryEnabled()\">\n <!-- Category Filter Side Panel -->\n @if (categoryEnabled()) {\n <div class=\"axp-category-filter-panel\" [style.width]=\"config().category?.width || '300px'\">\n <axp-category-tree [dataSource]=\"config().category!.dataSource\" [config]=\"categoryTreeConfig()\"\n [actions]=\"categoryTreeActions()\" (nodeClick)=\"handleCategoryFilterClick($event)\">\n </axp-category-tree>\n </div>\n }\n\n <!-- Main Data Area -->\n <div class=\"axp-main-data-area\">\n @if (hasSearch()) {\n <div class=\"w-full mb-2\">\n <ax-search-box [placeholder]=\"searchPlaceholderText()\" [value]=\"searchTerm\"\n (onValueChanged)=\"handleChangeSearchValue($event)\" [axAutoFocus]=\"true\">\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <ax-data-table #grid [showFooter]=\"false\" class=\"flex-1 min-h-0\" [paging]=\"true\"\n [loading]=\"{ enabled: true, animation: true }\" [dataSource]=\"config().dataSource\"\n [parentField]=\"config().grid.parentField\" [selectedRows]=\"selectedItems()\"\n (selectedRowsChange)=\"handleSelectedRowsChange($event)\" (onRowClick)=\"handleRowClick($event)\"\n (onRowDbClick)=\"handleRowDbClick($event)\">\n <ax-select-column fixed=\"start\" [width]=\"'50px'\"></ax-select-column>\n\n @for (col of config().grid.columns; track col.name) {\n @if (col.visible) {\n <axp-widget-column-renderer [expandHandler]=\"$index === 0 && config().grid.parentField ? true : false\"\n [caption]=\"col.title | translate | async\" [customWidth]=\"col.width || ''\" [node]=\"{\n path: col.dataPath || col.name,\n type: col.widget.type,\n options: col.widget.options\n }\">\n </axp-widget-column-renderer>\n }\n }\n @if (hasRowActionPrimary()) {\n <ax-command-column fixed=\"end\" [width]=\"primaryRowActionColumnWidth()\" [items]=\"primaryRowActionItems()\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-command-column>\n }\n @if (hasRowActionDropdown()) {\n <ax-dropdown-command-column fixed=\"end\" [width]=\"'60px'\" [items]=\"getDropdownRowActionItems\"\n (onItemClick)=\"handleRowActionClick($event)\">\n </ax-dropdown-command-column>\n }\n </ax-data-table>\n </div>\n </div>\n</div>\n\n<ax-footer>\n <ax-prefix>\n @if (config().footerPrefixAction; as prefixAction) {\n <!-- ----- Optional footer prefix action (e.g. sync from remote provider) ----- -->\n <ax-button\n look=\"twotone\"\n color=\"primary\"\n type=\"button\"\n [disabled]=\"footerPrefixActionInProgress()\"\n [text]=\"prefixAction.text\"\n (onClick)=\"handleFooterPrefixActionClick()\"\n >\n <ax-prefix>\n @if (footerPrefixActionInProgress()) {\n <ax-loading></ax-loading>\n }\n <!-- ----- Footer prefix action icon when idle ----- -->\n @else if (prefixAction.icon) {\n <ax-icon [icon]=\"prefixAction.icon\"></ax-icon>\n }\n </ax-prefix>\n </ax-button>\n }\n @if ((config().create?.mode === 'full' || config().create?.mode === 'quick') && config().create?.onCreate) {\n <ax-button look=\"twotone\" color=\"primary\" [text]=\"'@general:actions.create.title' | translate | async\"\n (onClick)=\"handleCreateNewClick(config().create?.mode === 'quick' ? 'quick' : 'full')\">\n <ax-prefix>\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n </ax-prefix>\n <ax-suffix>\n <ax-button look=\"solid\" [text]=\"('@general:actions.close.title' | translate | async)!\"\n (onClick)=\"handleCloseClick()\">\n </ax-button>\n <ax-button look=\"solid\" color=\"primary\" [text]=\"('@general:actions.select.title' | translate | async)!\"\n (onClick)=\"handleSelectClick()\" [disabled]=\"allowSelect() === false\">\n <!-- @if (selectionMode() === 'multiple' && selectedCount() > 0) {\n <ax-badge [text]=\"selectedCount().toString()\" color=\"accent1\"\n class=\"absolute end-[2px] top-[2px]\"></ax-badge>\n } -->\n </ax-button>\n </ax-suffix>\n</ax-footer>\n", styles: ["axp-data-selector{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.expand-handler{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;width:20px;height:20px;margin-right:8px}.expand-handler:hover{opacity:.8}.axp-data-selector{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-data-selector-content{display:flex;min-height:0px;flex:1;overflow:hidden}.axp-data-selector .axp-data-selector-content.with-category-filter .axp-main-data-area{min-height:0px;min-width:0px;flex:1;overflow:hidden}.axp-data-selector .axp-category-filter-panel{display:flex;min-height:0px;min-width:0px;flex-shrink:0;flex-direction:column;overflow:hidden;padding:calc(var(--spacing, .25rem) * 4);border-right:1px solid var(--border-color);background:var(--surface-color)}.axp-data-selector .axp-category-filter-panel axp-category-tree{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area{display:flex;min-height:0px;min-width:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:hidden;padding:calc(var(--spacing, .25rem) * 4)}.axp-data-selector .axp-main-data-area ax-data-table{display:flex;height:100%;min-height:0px;flex:1;flex-direction:column;overflow:hidden}.axp-data-selector .axp-main-data-area .search-box{width:100%;flex-shrink:0}.ax-popup:has(axp-data-selector){display:flex;flex-direction:column;overflow:hidden;height:90vh;max-height:90vh}.ax-popup:has(axp-data-selector) .ax-popup-main-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto}.ax-popup:has(axp-data-selector) .ax-popup-body-container{display:flex;min-height:0px;flex:1;flex-direction:column;overflow:hidden;flex:1 1 auto;overflow:hidden!important}.ax-popup:has(axp-data-selector) .ax-popup-footer-container{flex-shrink:0}@media(min-width:320px)and (max-width:640px){.ax-popup.ax-popup-sm:has(axp-data-selector),.ax-popup.ax-popup-md:has(axp-data-selector),.ax-popup.ax-popup-lg:has(axp-data-selector){height:90vh!important;max-height:90vh!important}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXCommonModule }, { kind: "directive", type: i1$5.AXAutoFocusDirective, selector: "[axAutoFocus]", inputs: ["axAutoFocus", "axAutoFocusTime"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDataTableModule }, { kind: "component", type: i4$1.AXDataTableComponent, selector: "ax-data-table", inputs: ["dataSource", "selectedRows", "parentField", "hasChildrenField", "rowDetailsTemplate", "rowCssClass", "cellCssClass", "highlightText", "look", "rowTemplate", "emptyTemplate", "noDataTemplate", "alternative", "showHeader", "fixedHeader", "showFooter", "fixedFooter", "itemHeight", "allowReordering", "paging", "fetchDataMode", "loading", "focusedRow"], outputs: ["selectedRowsChange", "focusedRowChange", "onRowClick", "onRowDbClick", "onColumnsOrderChanged", "onColumnSizeChanged", "onPageChanged"] }, { kind: "component", type: i4$1.AXRowSelectColumnComponent, selector: "ax-select-column", inputs: ["width", "caption", "fixed"] }, { kind: "component", type: i4$1.AXRowCommandColumnComponent, selector: "ax-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "items"], outputs: ["onItemClick"] }, { kind: "component", type: i4$1.AXRowDropdownCommandColumnComponent, selector: "ax-dropdown-command-column", inputs: ["width", "caption", "fixed", "footerTemplate", "emptyStateTemplate", "emptyStateText", "items"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.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$5.AXPWidgetColumnRendererComponent, selector: "axp-widget-column-renderer", inputs: ["caption", "customExpandIcon", "customCollapseIcon", "customWidth", "node", "footerTemplate", "expandHandler", "sortEnabled", "headerSortDirection", "headerSortPriority", "columnFixed", "cellTemplate", "headerTemplate"], outputs: ["sortToggle"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXPCategoryTreeComponent, selector: "axp-category-tree", inputs: ["dataSource", "config", "actions", "events"], outputs: ["nodeClick", "nodeSelect", "nodeCreate", "nodeUpdate", "nodeDelete", "searchChange", "collapseChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2676
2675
|
}
|
|
2677
2676
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPDataSelectorComponent, decorators: [{
|
|
2678
2677
|
type: Component,
|
|
@@ -3052,20 +3051,20 @@ class AXPConditionBuilderConditionComponent {
|
|
|
3052
3051
|
this.removeItem.emit(this.item().id ?? '');
|
|
3053
3052
|
}
|
|
3054
3053
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3055
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\">\n <div class=\"__item-content\">\n <!-- Field Selector -->\n <div class=\"__field-selector\">\n <ax-
|
|
3054
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\">\n <div class=\"__item-content\">\n <!-- Field Selector -->\n <div class=\"__field-selector\">\n <ax-lookup\n mode=\"drop-down-list\"\n class=\"ax-sm\"\n [dataSource]=\"availableFields()\"\n [ngModel]=\"selectedFieldValue()\"\n (onValueChanged)=\"onFieldChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"false\"\n [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n [look]=\"'outline'\">\n </ax-lookup>\n </div>\n\n <!-- Filter Widget (Operator + Value) -->\n <div class=\"__operator-selector\">\n @if (selectedField()?.field && filterNode().type) {\n <axp-widgets-container\n class=\"__filter-widget-container\"\n [context]=\"context()\"\n (onContextChanged)=\"onContextChange($event)\">\n <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n </ng-container>\n </axp-widgets-container>\n } @else {\n <div class=\"__filter-placeholder\">\n <span class=\"__placeholder-text\">{{\n ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n }}</span>\n </div>\n }\n </div>\n\n <!-- Fill By User (optional) -->\n @if (showFillByUser()) {\n <div class=\"__fill-by-user\">\n <ax-check-box\n class=\"text-xs\"\n [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n (ngModelChange)=\"onFillByUserChange($event)\">\n <ax-label>\n {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n </ax-label>\n </ax-check-box>\n </div>\n }\n </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3056
3055
|
}
|
|
3057
3056
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, decorators: [{
|
|
3058
3057
|
type: Component,
|
|
3059
3058
|
args: [{ selector: 'axp-condition-builder-condition', standalone: true, imports: [
|
|
3060
3059
|
CommonModule,
|
|
3061
3060
|
FormsModule,
|
|
3062
|
-
|
|
3061
|
+
AXLookupComponent,
|
|
3063
3062
|
AXDecoratorModule,
|
|
3064
3063
|
AXCheckBoxModule,
|
|
3065
3064
|
AXLabelModule,
|
|
3066
3065
|
AXPWidgetCoreModule,
|
|
3067
3066
|
AXTranslationModule,
|
|
3068
|
-
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\">\n <div class=\"__item-content\">\n <!-- Field Selector -->\n <div class=\"__field-selector\">\n <ax-
|
|
3067
|
+
], changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"__condition-row\">\n <div class=\"__item-content\">\n <!-- Field Selector -->\n <div class=\"__field-selector\">\n <ax-lookup\n mode=\"drop-down-list\"\n class=\"ax-sm\"\n [dataSource]=\"availableFields()\"\n [ngModel]=\"selectedFieldValue()\"\n (onValueChanged)=\"onFieldChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"false\"\n [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n [look]=\"'outline'\">\n </ax-lookup>\n </div>\n\n <!-- Filter Widget (Operator + Value) -->\n <div class=\"__operator-selector\">\n @if (selectedField()?.field && filterNode().type) {\n <axp-widgets-container\n class=\"__filter-widget-container\"\n [context]=\"context()\"\n (onContextChanged)=\"onContextChange($event)\">\n <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n </ng-container>\n </axp-widgets-container>\n } @else {\n <div class=\"__filter-placeholder\">\n <span class=\"__placeholder-text\">{{\n ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n }}</span>\n </div>\n }\n </div>\n\n <!-- Fill By User (optional) -->\n @if (showFillByUser()) {\n <div class=\"__fill-by-user\">\n <ax-check-box\n class=\"text-xs\"\n [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n (ngModelChange)=\"onFillByUserChange($event)\">\n <ax-label>\n {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n </ax-label>\n </ax-check-box>\n </div>\n }\n </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3069
3068
|
}], ctorParameters: () => [], propDecorators: { item: [{ type: i0.Input, args: [{ isSignal: true, alias: "item", required: true }] }], filterDefinitions: [{ type: i0.Input, args: [{ isSignal: true, alias: "filterDefinitions", required: false }] }], onResolveWidget: [{ type: i0.Input, args: [{ isSignal: true, alias: "onResolveWidget", required: false }] }], showFillByUser: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFillByUser", required: false }] }], itemChange: [{ type: i0.Output, args: ["itemChange"] }], removeItem: [{ type: i0.Output, args: ["removeItem"] }] } });
|
|
3070
3069
|
|
|
3071
3070
|
//#endregion
|
|
@@ -3416,7 +3415,7 @@ class AXPConditionBuilderComponent {
|
|
|
3416
3415
|
this.updateValue();
|
|
3417
3416
|
}
|
|
3418
3417
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n <div class=\"__content\">\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n ></ng-container>\n </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n <div\n class=\"__group\"\n [class.__root-group]=\"isRoot\"\n [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n >\n <div class=\"__group-wrapper\">\n @if ((group.filters?.length ?? 0) > 1) {\n <div class=\"__group-connector\">\n <div class=\"__operator-selector\">\n <ax-dropdown-button\n class=\"ax-sm __operator-chip\"\n [text]=\"getLogicDisplayText(group.logic)\"\n [mode]=\"'dropdown'\"\n [look]=\"'solid'\"\n [color]=\"'primary'\"\n >\n <ax-button-item-list>\n @for (op of logicalOperatorsItems; track op.value) {\n <ax-button-item\n [text]=\"op.text\"\n [selected]=\"group.logic === op.value\"\n (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n >\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n </div>\n </div>\n }\n\n <div\n class=\"__conditions-container\"\n axDropList\n (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n >\n @if ((group.filters?.length ?? 0) === 0) {\n <div class=\"__group-empty\">\n <ax-button\n class=\"ax-sm __add-rule-btn\"\n [look]=\"'twotone'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n | translate\n | async\n \"\n (onClick)=\"addConditionToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button\n class=\"ax-sm __add-inner-group-btn\"\n [look]=\"'outline'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n | translate\n | async\n \"\n (onClick)=\"addGroupToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n } @else {\n @for (\n item of getSortedFilters(group.filters || []);\n track item.id;\n let first = $first;\n let last = $last\n ) {\n <div\n class=\"__condition-item\"\n axDrag\n [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n >\n <div class=\"__drag-handle\" axDragHandle>\n <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n @if (item.filters === undefined) {\n <axp-condition-builder-condition\n [item]=\"item\"\n [filterDefinitions]=\"filterDefinitions()\"\n [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n [showFillByUser]=\"showFillByUser()\"\n (itemChange)=\"updateCondition($event)\"\n (removeItem)=\"removeItem($event)\"\n >\n </axp-condition-builder-condition>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ group: item }\"\n >\n </ng-container>\n }\n </div>\n\n <div class=\"__item-controls\">\n <ax-button\n class=\"ax-sm __icon-btn\"\n [look]=\"'blank'\"\n [color]=\"'danger'\"\n [title]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n | translate\n | async\n \"\n (onClick)=\"removeItem(item.id!)\"\n >\n <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n </div>\n }\n }\n </div>\n </div>\n <!-- <div class=\"__add-condition-link ps-16\">\n <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n (onClick)=\"addConditionToGroup(group.id!)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div> -->\n\n @if ((group.filters?.length ?? 0) > 0) {\n <div class=\"__group-actions\">\n <ax-button\n class=\"ax-sm __add-rule-btn\"\n [look]=\"'twotone'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n | translate\n | async\n \"\n (onClick)=\"addConditionToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button\n class=\"ax-sm __add-inner-group-btn\"\n [look]=\"'outline'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n | translate\n | async\n \"\n (onClick)=\"addGroupToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$4.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { 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: "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"] }, { kind: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3418
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderComponent, isStandalone: true, selector: "axp-condition-builder", inputs: { value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, ngImport: i0, template: "<div class=\"axp-condition-builder\">\n <div class=\"__content\">\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ group: queryData(), isRoot: true }\"\n ></ng-container>\n </div>\n</div>\n\n<ng-template #groupTemplate let-group=\"group\" let-isRoot=\"isRoot\">\n <div\n class=\"__group\"\n [class.__root-group]=\"isRoot\"\n [class.__connectors-enabled]=\"(group.filters?.length ?? 0) > 1\"\n >\n <div class=\"__group-wrapper\">\n @if ((group.filters?.length ?? 0) > 1) {\n <div class=\"__group-connector\">\n <div class=\"__operator-selector\">\n <ax-dropdown-button\n class=\"ax-sm __operator-chip\"\n [text]=\"getLogicDisplayText(group.logic)\"\n [mode]=\"'dropdown'\"\n [look]=\"'solid'\"\n [color]=\"'primary'\"\n >\n <ax-button-item-list>\n @for (op of logicalOperatorsItems; track op.value) {\n <ax-button-item\n [text]=\"op.text\"\n [selected]=\"group.logic === op.value\"\n (onClick)=\"updateGroupLogicalOperator(group.id!, op.value)\"\n >\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n </div>\n </div>\n }\n\n <div\n class=\"__conditions-container\"\n axDropList\n (dropListDropped)=\"reorderGroupItemsEvent(group.id!, $event)\"\n >\n @if ((group.filters?.length ?? 0) === 0) {\n <div class=\"__group-empty\">\n <ax-button\n class=\"ax-sm __add-rule-btn\"\n [look]=\"'twotone'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n | translate\n | async\n \"\n (onClick)=\"addConditionToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button\n class=\"ax-sm __add-inner-group-btn\"\n [look]=\"'outline'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n | translate\n | async\n \"\n (onClick)=\"addGroupToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n } @else {\n @for (\n item of getSortedFilters(group.filters || []);\n track item.id;\n let first = $first;\n let last = $last\n ) {\n <div\n class=\"__condition-item\"\n axDrag\n [class.__is-first]=\"first && (group.filters?.length ?? 0) > 1\"\n [class.__is-last]=\"last && (group.filters?.length ?? 0) > 1\"\n >\n <div class=\"__drag-handle\" axDragHandle>\n <ax-icon icon=\"fa-solid fa-grip-vertical\"></ax-icon>\n </div>\n\n <div class=\"__item-content\">\n @if (item.filters === undefined) {\n <axp-condition-builder-condition\n [item]=\"item\"\n [filterDefinitions]=\"filterDefinitions()\"\n [onResolveWidget]=\"resolveDefaultFilterWidget.bind(this)\"\n [showFillByUser]=\"showFillByUser()\"\n (itemChange)=\"updateCondition($event)\"\n (removeItem)=\"removeItem($event)\"\n >\n </axp-condition-builder-condition>\n } @else {\n <ng-container\n [ngTemplateOutlet]=\"groupTemplate\"\n [ngTemplateOutletContext]=\"{ group: item }\"\n >\n </ng-container>\n }\n </div>\n\n <div class=\"__item-controls\">\n <ax-button\n class=\"ax-sm __icon-btn\"\n [look]=\"'blank'\"\n [color]=\"'danger'\"\n [title]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.remove.title'\n | translate\n | async\n \"\n (onClick)=\"removeItem(item.id!)\"\n >\n <ax-icon icon=\"fa-light fa-trash-can\"></ax-icon>\n </ax-button>\n </div>\n </div>\n }\n }\n </div>\n </div>\n <!-- <div class=\"__add-condition-link ps-16\">\n <ax-button class=\"ax-sm __add-condition-btn\" [look]=\"'link'\" [color]=\"'primary'\"\n [text]=\"'@data-management:metadata-definitions.components.query-builder.actions.add-condition.title' | translate | async\"\n (onClick)=\"addConditionToGroup(group.id!)\">\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div> -->\n\n @if ((group.filters?.length ?? 0) > 0) {\n <div class=\"__group-actions\">\n <ax-button\n class=\"ax-sm __add-rule-btn\"\n [look]=\"'twotone'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-rule.title'\n | translate\n | async\n \"\n (onClick)=\"addConditionToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-plus\"></ax-icon>\n </ax-prefix>\n </ax-button>\n <ax-button\n class=\"ax-sm __add-inner-group-btn\"\n [look]=\"'outline'\"\n [color]=\"'primary'\"\n [text]=\"\n '@data-management:metadata-definitions.components.query-builder.actions.add-inner-group.title'\n | translate\n | async\n \"\n (onClick)=\"addGroupToGroup(group.id!)\"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-layer-group\"></ax-icon>\n </ax-prefix>\n </ax-button>\n </div>\n }\n </div>\n</ng-template>\n", styles: ["@layer properties;.axp-condition-builder{display:flex;height:100%;width:100%;flex-direction:column}.axp-condition-builder .__content{flex:1;overflow:auto;padding:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group{position:relative}.axp-condition-builder .__group.__root-group{border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;--tw-shadow: 0 0 #0000;box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-condition-builder .__group:not(.__root-group){margin-top:calc(var(--spacing, .25rem) * 2);margin-bottom:calc(var(--spacing, .25rem) * 2);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);--tw-shadow: 0 1px 3px 0 var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 1px 2px -1px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__group .__group-wrapper{--qb-connector-col: 4.25rem;--qb-conditions-gap: 1rem;display:grid;grid-template-columns:var(--qb-connector-col) 1fr;gap:0 var(--qb-conditions-gap);align-items:stretch;width:100%;min-height:2rem;min-width:0}.axp-condition-builder .__group:not(.__connectors-enabled)>.__group-wrapper{grid-template-columns:1fr}.axp-condition-builder .__group .__group-connector{--qb-operator-gap: .45rem;position:relative;width:var(--qb-connector-col);display:flex;flex-direction:column;align-items:center;justify-content:center;align-self:stretch;padding:0}.axp-condition-builder .__group .__group-connector:before,.axp-condition-builder .__group .__group-connector:after{content:\"\";position:absolute;left:50%;transform:translate(-50%);top:var(--qb-connector-top, 1.5rem);bottom:var(--qb-connector-bottom, 1.5rem);width:0;border-left:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__group .__group-connector:before{bottom:calc(50% - var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector:after{top:calc(50% + var(--qb-operator-gap))}.axp-condition-builder .__group .__group-connector .__operator-selector{position:absolute;top:0;left:50%;z-index:10;margin:0;display:flex;max-width:100%;flex-shrink:0;align-items:center;justify-content:center;transform:translate(-50%);box-sizing:border-box;height:100%}.axp-condition-builder .__group .__group-connector .__operator-selector .__operator-chip{position:relative;z-index:1;max-width:100%;flex-shrink:0;border-radius:var(--radius-md, .375rem);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));min-width:3.25rem}.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:before,.axp-condition-builder .__group:not(.__connectors-enabled) .__group-connector:after{content:none}.axp-condition-builder .__group .__conditions-container{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 8);min-width:0px;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2);padding-left:0;padding-right:0}.axp-condition-builder .__group .__conditions-container .__group-empty{display:flex;min-height:calc(var(--spacing, .25rem) * 12);flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 3)}.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving{position:relative;min-height:calc(var(--spacing, .25rem) * 12);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);padding:var(--spacing, .25rem);border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}:is(.axp-condition-builder .__group .__conditions-container.drop-list-dragging,.axp-condition-builder .__group .__conditions-container.drop-list-receiving):has(.__group-empty):after{content:\"Drop conditions here\";position:absolute;inset:0;z-index:-1;display:flex;min-height:calc(var(--spacing, .25rem) * 8);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 2);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:rgba(var(--ax-sys-color-primary-surface));pointer-events:none}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder){margin-bottom:.375rem}.axp-condition-builder .__group .__conditions-container.drop-list-dragging .__condition-item:not(.drag-placeholder):last-child{margin-bottom:0}.axp-condition-builder .__group .__group-actions{margin-top:calc(var(--spacing, .25rem) * 2);display:flex;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-block:calc(var(--spacing, .25rem) * 2.5);border-top:1px solid rgba(var(--ax-sys-color-border-lighter-surface),1);grid-column:1 / -1}.axp-condition-builder .__group .__add-condition-link{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-condition-builder .__condition-item{position:relative;display:flex;min-height:calc(var(--spacing, .25rem) * 12);cursor:move;align-items:center;gap:calc(var(--spacing, .25rem) * 3);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);-webkit-user-select:none;user-select:none;border-radius:.375rem;border:1px solid rgba(var(--ax-sys-color-border-lightest-surface),1)}.axp-condition-builder .__condition-item:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1)}.axp-condition-builder .__condition-item.__is-first:before,.axp-condition-builder .__condition-item.__is-last:before{content:\"\";position:absolute;left:calc(-1 * (var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem)));top:50%;transform:translateY(-50%);width:calc(var(--qb-connector-col) * .5 + var(--qb-conditions-gap, 1rem));height:0;border-top:2px solid rgba(var(--ax-sys-color-primary-500),.5);z-index:0}.axp-condition-builder .__condition-item .__drag-handle{position:relative;z-index:1;display:flex;height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:grab;align-items:center;justify-content:center;color:var(--color-neutral-400, oklch(70.8% 0 none));transition:color .15s ease-in-out}.axp-condition-builder .__condition-item .__drag-handle:active{cursor:grabbing}.axp-condition-builder .__condition-item .__drag-handle:hover{color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-condition-builder .__condition-item .__item-content{position:relative;z-index:1;min-width:0px;flex:1}.axp-condition-builder .__condition-item .__item-controls{position:relative;z-index:1;display:flex;width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;flex-direction:column;align-items:center;justify-content:center;gap:var(--spacing, .25rem)}.axp-condition-builder .__condition-item .__icon-btn{display:flex;flex-shrink:0;align-items:center;justify-content:center;padding:0;width:1.75rem;height:1.75rem}.axp-condition-builder .__condition-item.drag-preview{display:flex;min-height:calc(var(--spacing, .25rem) * 12);align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2.5);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);opacity:.9;border-radius:.375rem;border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder{position:relative;margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 12);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-radius:.375rem;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__condition-item.drag-placeholder>*{opacity:0%}.axp-condition-builder .__condition-item.drag-animating{transition:transform .25s cubic-bezier(.4,0,.2,1)}.axp-condition-builder .__group:not(.__root-group).drag-preview{border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-placeholder{margin-bottom:calc(var(--spacing, .25rem) * 2);min-height:calc(var(--spacing, .25rem) * 16);border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-primary-lightest);color:var(--color-on-primary-lightest);border-color:var(--color-border-primary-lightest);opacity:50%;border-color:rgba(var(--ax-sys-color-primary-300),.5);border-width:1px}.axp-condition-builder .__group:not(.__root-group).drag-dragging{opacity:70%}.axp-condition-builder .__group:not(.__root-group):hover:not(.drag-dragging) .__drag-handle{color:rgba(var(--ax-sys-color-primary-surface))}.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:before,.__group:not(.__connectors-enabled) .axp-condition-builder .__group .__group-connector:after{content:none}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i3$6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "color", "look", "type", "mode"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { 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: "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"] }, { kind: "component", type: AXPConditionBuilderConditionComponent, selector: "axp-condition-builder-condition", inputs: ["item", "filterDefinitions", "onResolveWidget", "showFillByUser"], outputs: ["itemChange", "removeItem"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3420
3419
|
}
|
|
3421
3420
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderComponent, decorators: [{
|
|
3422
3421
|
type: Component,
|
|
@@ -5951,7 +5950,7 @@ class AXPQueryFiltersComponent {
|
|
|
5951
5950
|
*/
|
|
5952
5951
|
#focusEffect;
|
|
5953
5952
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
5954
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, 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\n class=\"flex w-full min-w-0 items-center gap-2 p-2\"\n (keydown.control.space)=\"openFilterPopover()\"\n>\n <ax-button\n (keydown)=\"handleButtonKeyDown($event)\"\n (onClick)=\"openFilterPopover()\"\n #filterButton\n [look]=\"'blank'\"\n >\n <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n </ax-button>\n <div class=\"min-w-0 flex-1\" (click)=\"handleTagBoxClick($event)\">\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 class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n <ax-kbd look=\"blank\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n </div>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n [class.!bg-primary]=\"item.field === 'all'\"\n [class.!text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item, $event)\"\n >\n <span>{{ item.query }}</span>\n @if (!item.readOnly) {\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover\n [offsetY]=\"activeFilter() ? -30 : 0\"\n [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\"\n [closeOn]=\"'clickOut'\"\n (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\"\n #popover\n>\n <div\n class=\"md:min-w-72 w-full rounded-md md:max-h-96 lg:w-[450px] md:overflow-auto\"\n >\n <axp-widgets-container\n #widgetsContainer\n [context]=\"context()\"\n (onContextChanged)=\"onContextChanged($event)\"\n >\n @if (activeFilter()) {\n <div\n class=\"flex flex-col lightest-surface shadow-md\"\n (keydown.enter)=\"onEnterKeyPressed($event)\"\n >\n <ax-header class=\"border-b border-border-light px-4 py-2 font-semibold\">{{\n $safeNavigationMigration(activeFilter()?.title)! | translate | async\n }}</ax-header>\n <ax-content class=\"p-4\">\n <div class=\"mb-2\">\n <ax-badge\n [text]=\"\n (getActiveOperator(activeFilter())! | translate | async) || ''\n \"\n ></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: resolveFilterContextField(activeFilter()!),\n options: $safeNavigationMigration(activeFilter()?.widget?.options),\n }\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n </ax-content>\n <ax-footer\n class=\"border-t flex justify-end border-border-light w-full px-4 py-2\"\n >\n <ax-button\n class=\"ax-sm\"\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"\n ></ax-button>\n </ax-footer>\n </div>\n } @else {\n <div\n axListNavigation\n #list=\"axListNavigation\"\n class=\"axp-list-items border-none\"\n >\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=\"w-full border-t border-light my-1\"></span>\n } -->\n @for (field of filterFields(); track field.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"\n caseItem.isActive() && !isFilterDisabled(field)\n \"\n [class.axp-query-filters__advance-item--disabled]=\"\n isFilterDisabled(field)\n \"\n [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\"\n >\n <div class=\"flex items-end gap-2\">\n <ax-icon class=\"w-5\" [class]=\"'fa-light ' + field.icon\">\n </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: ["@layer properties;axp-query-filters{width:100%;min-width:0px}axp-query-filters>.flex>.min-w-0.flex-1{min-width:0px}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$2.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7$1.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7$1.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5953
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, 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\n class=\"flex w-full min-w-0 items-center gap-2 p-2\"\n (keydown.control.space)=\"openFilterPopover()\"\n>\n <ax-button\n (keydown)=\"handleButtonKeyDown($event)\"\n (onClick)=\"openFilterPopover()\"\n #filterButton\n [look]=\"'blank'\"\n >\n <ax-icon class=\"far fa-bars-filter cursor-pointer\"> </ax-icon>\n </ax-button>\n <div class=\"min-w-0 flex-1\" (click)=\"handleTagBoxClick($event)\">\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 class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n <ax-kbd look=\"blank\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n </div>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div\n class=\"inline-flex items-center gap-1.5 hover:bg-darkest cursor-pointer rounded-md px-3 py-1 text-sm surface\"\n [class.!bg-primary]=\"item.field === 'all'\"\n [class.!text-white]=\"item.field === 'all'\"\n (click)=\"handleTagClick(item, $event)\"\n >\n <span>{{ item.query }}</span>\n @if (!item.readOnly) {\n <button (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover\n [offsetY]=\"activeFilter() ? -30 : 0\"\n [openOn]=\"'toggle'\"\n (onOpened)=\"onPopoverOpened($event)\"\n [closeOn]=\"'clickOut'\"\n (onClosed)=\"handlePopoverClosed($event)\"\n [adaptivityEnabled]=\"true\"\n #popover\n>\n <div\n class=\"md:min-w-72 w-full rounded-md md:max-h-96 lg:w-[450px] md:overflow-auto\"\n >\n <axp-widgets-container\n #widgetsContainer\n [context]=\"context()\"\n (onContextChanged)=\"onContextChanged($event)\"\n >\n @if (activeFilter()) {\n <div\n class=\"flex flex-col lightest-surface shadow-md\"\n (keydown.enter)=\"onEnterKeyPressed($event)\"\n >\n <ax-header class=\"border-b border-border-light px-4 py-2 font-semibold\">{{\n $safeNavigationMigration(activeFilter()?.title)! | translate | async\n }}</ax-header>\n <ax-content class=\"p-4\">\n <div class=\"mb-2\">\n <ax-badge\n [text]=\"\n (getActiveOperator(activeFilter())! | translate | async) || ''\n \"\n ></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: resolveFilterContextField(activeFilter()!),\n options: $safeNavigationMigration(activeFilter()?.widget?.options),\n }\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n </ax-content>\n <ax-footer\n class=\"border-t flex justify-end border-border-light w-full px-4 py-2\"\n >\n <ax-button\n class=\"ax-sm\"\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApplyFilter()\"\n ></ax-button>\n </ax-footer>\n </div>\n } @else {\n <div\n axListNavigation\n #list=\"axListNavigation\"\n class=\"axp-list-items border-none\"\n >\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=\"w-full border-t border-light my-1\"></span>\n } -->\n @for (field of filterFields(); track field.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"\n caseItem.isActive() && !isFilterDisabled(field)\n \"\n [class.axp-query-filters__advance-item--disabled]=\"\n isFilterDisabled(field)\n \"\n [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\"\n >\n <div class=\"flex items-end gap-2\">\n <ax-icon class=\"w-5\" [class]=\"'fa-light ' + field.icon\">\n </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: ["@layer properties;axp-query-filters{width:100%;min-width:0px}axp-query-filters>.flex>.min-w-0.flex-1{min-width:0px}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container{background-color:transparent}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i5$1.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i7$1.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i7$1.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
5955
5954
|
}
|
|
5956
5955
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
|
|
5957
5956
|
type: Component,
|
|
@@ -6041,7 +6040,7 @@ class AXPPreloadFiltersComponent {
|
|
|
6041
6040
|
return Array.isArray(validations) && validations.some((v) => v['rule'] === 'required');
|
|
6042
6041
|
}
|
|
6043
6042
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPreloadFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6044
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPreloadFiltersComponent, isStandalone: true, selector: "axp-preload-filters", inputs: { filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: true, transformFunction: null }, showAllButton: { classPropertyName: "showAllButton", publicName: "showAllButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", showAll: "showAll" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 items-center justify-center h-full\">\n <div class=\"card min-w-96 flex flex-col items-center gap-2 p-6\">\n <div class=\"header\">\n <img\n width=\"180\"\n src=\"/assets/images/ui/filter.svg\"\n [attr.alt]=\"('@general:messages.preload-filters.filter-icon-alt' | translate | async) ?? ''\"\n />\n </div>\n <div class=\"py-6\">\n <div class=\"mb-6\">\n <h4 class=\"text-lg font-medium\">\n {{ '@general:messages.preload-filters.title' | translate | async }}\n </h4>\n <span class=\"text-sm text-gray-400\">\n {{ '@general:messages.preload-filters.description' | translate | async }}\n </span>\n </div>\n <axp-widgets-container [context]=\"context\" (onContextChanged)=\"onContextChanged($event)\">\n <ax-form #form (keydown)=\"onFormKeyDown($event, form)\">\n @for (filterDef of filterDefinitions(); track $index) {\n <ax-form-field class=\"mt-2\">\n <ax-label [required]=\"isFieldRequired(filterDef)\">\n {{ filterDef?.title ?? '' | translate | async }}\n </ax-label>\n <ng-container\n #widgetRenderer=\"widgetRenderer\"\n axp-widget-renderer\n [node]=\"{\n type: filterDef?.widget?.type || 'text-editor',\n path: $safeNavigationMigration(filterDef?.field),\n options: $safeNavigationMigration(filterDef?.widget?.options),\n }\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n </ax-form-field>\n }\n <div class=\"mt-6\">\n <ax-button\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApply(form)\"\n [color]=\"'primary'\"\n class=\"w-full\"\n ></ax-button>\n @if (showAllButton()) {\n <ax-button\n class=\"w-full mt-4 text-primary\"\n [look]=\"'blank'\"\n [text]=\"'@general:actions.show.all.title' | translate | async\"\n (onClick)=\"handleShowAll($event)\"\n ></ax-button>\n }\n </div>\n </ax-form>\n </axp-widgets-container>\n </div>\n </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$
|
|
6043
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPPreloadFiltersComponent, isStandalone: true, selector: "axp-preload-filters", inputs: { filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: true, transformFunction: null }, showAllButton: { classPropertyName: "showAllButton", publicName: "showAllButton", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { apply: "apply", showAll: "showAll" }, ngImport: i0, template: "<div class=\"flex flex-col gap-4 items-center justify-center h-full\">\n <div class=\"card min-w-96 flex flex-col items-center gap-2 p-6\">\n <div class=\"header\">\n <img\n width=\"180\"\n src=\"/assets/images/ui/filter.svg\"\n [attr.alt]=\"('@general:messages.preload-filters.filter-icon-alt' | translate | async) ?? ''\"\n />\n </div>\n <div class=\"py-6\">\n <div class=\"mb-6\">\n <h4 class=\"text-lg font-medium\">\n {{ '@general:messages.preload-filters.title' | translate | async }}\n </h4>\n <span class=\"text-sm text-gray-400\">\n {{ '@general:messages.preload-filters.description' | translate | async }}\n </span>\n </div>\n <axp-widgets-container [context]=\"context\" (onContextChanged)=\"onContextChanged($event)\">\n <ax-form #form (keydown)=\"onFormKeyDown($event, form)\">\n @for (filterDef of filterDefinitions(); track $index) {\n <ax-form-field class=\"mt-2\">\n <ax-label [required]=\"isFieldRequired(filterDef)\">\n {{ filterDef?.title ?? '' | translate | async }}\n </ax-label>\n <ng-container\n #widgetRenderer=\"widgetRenderer\"\n axp-widget-renderer\n [node]=\"{\n type: filterDef?.widget?.type || 'text-editor',\n path: $safeNavigationMigration(filterDef?.field),\n options: $safeNavigationMigration(filterDef?.widget?.options),\n }\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n </ax-form-field>\n }\n <div class=\"mt-6\">\n <ax-button\n [text]=\"'@general:actions.apply.title' | translate | async\"\n (onClick)=\"handleApply(form)\"\n [color]=\"'primary'\"\n class=\"w-full\"\n ></ax-button>\n @if (showAllButton()) {\n <ax-button\n class=\"w-full mt-4 text-primary\"\n [look]=\"'blank'\"\n [text]=\"'@general:actions.show.all.title' | translate | async\"\n (onClick)=\"handleShowAll($event)\"\n ></ax-button>\n }\n </div>\n </ax-form>\n </axp-widgets-container>\n </div>\n </div>\n</div>\n", styles: ["/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormFieldComponent, selector: "ax-form-field", inputs: ["labelMode"] }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
6045
6044
|
}
|
|
6046
6045
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPreloadFiltersComponent, decorators: [{
|
|
6047
6046
|
type: Component,
|
|
@@ -6180,7 +6179,7 @@ class AXPImageEditorPopupComponent extends AXBasePageComponent {
|
|
|
6180
6179
|
</ax-button>
|
|
6181
6180
|
</ax-suffix>
|
|
6182
6181
|
</ax-footer>
|
|
6183
|
-
`, isInline: true, styles: ["ax-image-editor-view>canvas{max-height:65vh;width:auto!important;height:auto!important}axp-image-editor-popup ax-image-editor-container{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$
|
|
6182
|
+
`, isInline: true, styles: ["ax-image-editor-view>canvas{max-height:65vh;width:auto!important;height:auto!important}axp-image-editor-popup ax-image-editor-container{width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXImageEditorModule }, { kind: "component", type: i1$6.AXImageEditorViewComponent, selector: "ax-image-editor-view", inputs: ["showGrid", "cropperSize", "src"] }, { kind: "component", type: i1$6.AXImageEditorContainerComponent, selector: "ax-image-editor-container", inputs: ["look", "disabled"], outputs: ["onValueChanged"] }, { kind: "component", type: i1$6.AXImageEditorCropComponent, selector: "ax-image-editor-crop", inputs: ["aspectRatio", "size"] }, { kind: "component", type: i1$6.AXImageEditorToolsBarComponent, selector: "ax-image-editor-tools-bar", inputs: ["active", "hidden"] }, { kind: "ngmodule", type: AXToolBarModule }, { 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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6184
6183
|
}
|
|
6185
6184
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPImageEditorPopupComponent, decorators: [{
|
|
6186
6185
|
type: Component,
|
|
@@ -6918,7 +6917,7 @@ class AXPPropertyViewerComponent {
|
|
|
6918
6917
|
}
|
|
6919
6918
|
}
|
|
6920
6919
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPropertyViewerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
6921
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, bindingExpressionEditorMode: { classPropertyName: "bindingExpressionEditorMode", publicName: "bindingExpressionEditorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n <axp-widgets-container\n [context]=\"context()\"\n (onContextChanged)=\"handleContextChange($event)\"\n >\n <!-- #region Shared property row template (used in both advanced and simple modes) -->\n <ng-template\n #propertyRow\n let-prop=\"prop\"\n let-translateTitle=\"translateTitle\"\n >\n <div class=\"flex flex-col gap-2 py-2\">\n <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n <div class=\"flex items-center gap-2 w-full\">\n @if (prop.showLabel !== false) {\n @if (translateTitle) {\n <span class=\"font-semibold flex-1 min-w-0\">{{\n prop.title | translate | async\n }}</span>\n } @else {\n <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title }}</span>\n }\n }\n @if (prop.binding?.enabled) {\n <div class=\"flex gap-1 shrink-0 ax-sm\">\n <ax-button\n [toggleable]=\"true\"\n [selected]=\"isExpressionMode(prop)\"\n look=\"twotone\"\n [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\"\n class=\"shrink-0\"\n [title]=\"\n (isExpressionMode(prop)\n ? '@general:terms.common.expression'\n : '@general:terms.common.value'\n )\n | translate\n | async\n \"\n (selectedChange)=\"setExpressionMode(prop, $event)\"\n >\n @if (isExpressionMode(prop)) {\n <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n } @else {\n <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n }\n </ax-button>\n </div>\n }\n </div>\n <!-- Property content: expression editor (inline or popup) or widget renderer (value mode) -->\n @if (prop.binding?.enabled && isExpressionMode(prop)) {\n @if (bindingExpressionEditorMode() === 'inline') {\n <div class=\"w-full overflow-hidden\" style=\"direction: ltr\">\n <ax-code-editor\n [ngModel]=\"getBindingExpressionValue(prop)\"\n (ngModelChange)=\"setBindingExpressionValue(prop, $event)\"\n language=\"javascript\"\n [lineNumbers]=\"true\"\n class=\"w-full\"\n >\n </ax-code-editor>\n </div>\n } @else {\n <ax-button\n look=\"twotone\"\n color=\"primary\"\n size=\"sm\"\n class=\"w-full\"\n [text]=\"\n '@general:widgets.triggers.open-editor' | translate | async\n \"\n (onClick)=\"openBindingEditor(prop)\"\n [title]=\"\n '@general:widgets.triggers.edit-binding-expression'\n | translate\n | async\n \"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n } @else if (prop.schema.interface) {\n <ng-container\n axp-widget-renderer\n [node]=\"prop.schema.interface\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n }\n </div>\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Advanced mode: tabs + accordion groups -->\n @if (mode() === 'advanced') {\n <div class=\"flex flex-col\">\n @if (tabs().length > 1) {\n <div class=\"pb-2\">\n <ax-tabs\n look=\"default\"\n (onActiveTabChanged)=\"handleTabChange($event)\"\n [look]=\"'with-line'\"\n >\n @for (tab of tabs(); track $index) {\n <ax-tab-item\n [text]=\"(tab.title | translate | async) ?? ''\"\n [key]=\"$index.toString()\"\n [active]=\"currentTabIndex() === $index\"\n >\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"flex-1 overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n @for (group of groups(); track $index) {\n <ax-accordion-item\n class=\"mb-0!\"\n [caption]=\"(group.title | translate | async) ?? ''\"\n [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n >\n <div class=\"flex flex-col\">\n @for (p of group.props; track $index) {\n @if (isPropertyVisible(p)) {\n <ng-container\n *ngTemplateOutlet=\"\n propertyRow;\n context: { prop: p, translateTitle: true }\n \"\n >\n </ng-container>\n }\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n <!-- #endregion -->\n\n <!-- #region Simple mode: flat list of properties with padding -->\n @else {\n <div class=\"flex flex-col p-4 gap-4\">\n @for (group of groups(); track $index) {\n @for (p of group.props; track $index) {\n @if (isPropertyVisible(p)) {\n <ng-container\n *ngTemplateOutlet=\"\n propertyRow;\n context: { prop: p, translateTitle: true }\n \"\n >\n </ng-container>\n }\n }\n }\n </div>\n }\n <!-- #endregion -->\n </axp-widgets-container>\n</ax-form>\n", styles: ["@layer properties;axp-property-viewer ax-accordion-item .ax-accordion-header{border-top-style:var(--tw-border-style);border-top-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$6.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$6.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i4$2.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { 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: AXFormModule }, { kind: "component", type: i2$5.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i8.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$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6920
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", 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 }, bindingExpressionEditorMode: { classPropertyName: "bindingExpressionEditorMode", publicName: "bindingExpressionEditorMode", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onChanged: "onChanged" }, viewQueries: [{ propertyName: "form", first: true, predicate: AXFormComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<ax-form>\n <axp-widgets-container\n [context]=\"context()\"\n (onContextChanged)=\"handleContextChange($event)\"\n >\n <!-- #region Shared property row template (used in both advanced and simple modes) -->\n <ng-template\n #propertyRow\n let-prop=\"prop\"\n let-translateTitle=\"translateTitle\"\n >\n <div class=\"flex flex-col gap-2 py-2\">\n <!-- Property header: title + value/expression toggle (when binding.enabled) -->\n <div class=\"flex items-center gap-2 w-full\">\n @if (prop.showLabel !== false) {\n @if (translateTitle) {\n <span class=\"font-semibold flex-1 min-w-0\">{{\n prop.title | translate | async\n }}</span>\n } @else {\n <span class=\"font-semibold flex-1 min-w-0\">{{ prop.title }}</span>\n }\n }\n @if (prop.binding?.enabled) {\n <div class=\"flex gap-1 shrink-0 ax-sm\">\n <ax-button\n [toggleable]=\"true\"\n [selected]=\"isExpressionMode(prop)\"\n look=\"twotone\"\n [color]=\"isExpressionMode(prop) ? 'primary' : 'default'\"\n class=\"shrink-0\"\n [title]=\"\n (isExpressionMode(prop)\n ? '@general:terms.common.expression'\n : '@general:terms.common.value'\n )\n | translate\n | async\n \"\n (selectedChange)=\"setExpressionMode(prop, $event)\"\n >\n @if (isExpressionMode(prop)) {\n <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n } @else {\n <ax-icon icon=\"fa-light fa-keyboard\"></ax-icon>\n }\n </ax-button>\n </div>\n }\n </div>\n <!-- Property content: expression editor (inline or popup) or widget renderer (value mode) -->\n @if (prop.binding?.enabled && isExpressionMode(prop)) {\n @if (bindingExpressionEditorMode() === 'inline') {\n <div class=\"w-full overflow-hidden\" style=\"direction: ltr\">\n <ax-code-editor\n [ngModel]=\"getBindingExpressionValue(prop)\"\n (ngModelChange)=\"setBindingExpressionValue(prop, $event)\"\n language=\"javascript\"\n [lineNumbers]=\"true\"\n class=\"w-full\"\n >\n </ax-code-editor>\n </div>\n } @else {\n <ax-button\n look=\"twotone\"\n color=\"primary\"\n size=\"sm\"\n class=\"w-full\"\n [text]=\"\n '@general:widgets.triggers.open-editor' | translate | async\n \"\n (onClick)=\"openBindingEditor(prop)\"\n [title]=\"\n '@general:widgets.triggers.edit-binding-expression'\n | translate\n | async\n \"\n >\n <ax-prefix>\n <ax-icon icon=\"fa-light fa-code\"></ax-icon>\n </ax-prefix>\n </ax-button>\n }\n } @else if (prop.schema.interface) {\n <ng-container\n axp-widget-renderer\n [node]=\"prop.schema.interface\"\n [mode]=\"'edit'\"\n >\n </ng-container>\n }\n </div>\n </ng-template>\n <!-- #endregion -->\n\n <!-- #region Advanced mode: tabs + accordion groups -->\n @if (mode() === 'advanced') {\n <div class=\"flex flex-col\">\n @if (tabs().length > 1) {\n <div class=\"pb-2\">\n <ax-tabs\n look=\"default\"\n (onActiveTabChanged)=\"handleTabChange($event)\"\n [look]=\"'with-line'\"\n >\n @for (tab of tabs(); track $index) {\n <ax-tab-item\n [text]=\"(tab.title | translate | async) ?? ''\"\n [key]=\"$index.toString()\"\n [active]=\"currentTabIndex() === $index\"\n >\n </ax-tab-item>\n }\n </ax-tabs>\n </div>\n }\n <div class=\"flex-1 overflow-auto\">\n <ax-accordion-group [accordion]=\"false\" [look]=\"'flat'\">\n @for (group of groups(); track $index) {\n <ax-accordion-item\n class=\"mb-0!\"\n [caption]=\"(group.title | translate | async) ?? ''\"\n [isCollapsed]=\"group.isCollapsed\"\n (isCollapsedChange)=\"handleCollapsedChange(group.name, $event)\"\n >\n <div class=\"flex flex-col\">\n @for (p of group.props; track $index) {\n @if (isPropertyVisible(p)) {\n <ng-container\n *ngTemplateOutlet=\"\n propertyRow;\n context: { prop: p, translateTitle: true }\n \"\n >\n </ng-container>\n }\n }\n </div>\n </ax-accordion-item>\n }\n </ax-accordion-group>\n </div>\n </div>\n }\n <!-- #endregion -->\n\n <!-- #region Simple mode: flat list of properties with padding -->\n @else {\n <div class=\"flex flex-col p-4 gap-4\">\n @for (group of groups(); track $index) {\n @for (p of group.props; track $index) {\n @if (isPropertyVisible(p)) {\n <ng-container\n *ngTemplateOutlet=\"\n propertyRow;\n context: { prop: p, translateTitle: true }\n \"\n >\n </ng-container>\n }\n }\n }\n </div>\n }\n <!-- #endregion -->\n </axp-widgets-container>\n</ax-form>\n", styles: ["@layer properties;axp-property-viewer ax-accordion-item .ax-accordion-header{border-top-style:var(--tw-border-style);border-top-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter);--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXAccordionModule }, { kind: "component", type: i2$5.AXAccordionItemComponent, selector: "ax-accordion-item", inputs: ["isCollapsed", "icon", "textdecoration", "caption", "isLoading", "headerTemplate", "look", "disabled"], outputs: ["isCollapsedChange", "isLoadingChange", "onClick"] }, { kind: "component", type: i2$5.AXAccordionGroupComponent, selector: "ax-accordion-group", inputs: ["accordion", "activeIndex", "look", "collapsedOnItemClick"], outputs: ["activeIndexChange"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "ngmodule", type: AXCodeEditorModule }, { kind: "component", type: i4$2.AXCodeEditorComponent, selector: "ax-code-editor", inputs: ["disabled", "value", "state", "name", "id", "language", "readonly", "placeholder", "lineNumbers", "lineWrapping", "tabSize", "indentWithTab", "theme", "extensions", "ariaLabel", "focusOnReady", "formatOnSave", "minRow", "customCompletions"], outputs: ["onValueChanged", "valueChange", "stateChange", "readonlyChange", "disabledChange", "ready", "save"] }, { 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: AXFormModule }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXTabsModule }, { kind: "component", type: i8.AXTabsComponent, selector: "ax-tabs", inputs: ["look", "location", "fitParent", "minWidth", "content"], outputs: ["onActiveTabChanged"] }, { kind: "component", type: i8.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$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
6922
6921
|
}
|
|
6923
6922
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPPropertyViewerComponent, decorators: [{
|
|
6924
6923
|
type: Component,
|
|
@@ -7354,16 +7353,16 @@ class AXPItemConfiguratorComponent {
|
|
|
7354
7353
|
...(ngDevMode ? [{ debugName: "isConfigured" }] : /* istanbul ignore next */ []));
|
|
7355
7354
|
this.visibleHeaderActions = computed(() => (this.headerActions() ?? []).filter((a) => a != null && a.visible !== false && !a.items?.length), /* @ts-ignore */
|
|
7356
7355
|
...(ngDevMode ? [{ debugName: "visibleHeaderActions" }] : /* istanbul ignore next */ []));
|
|
7357
|
-
this.
|
|
7358
|
-
...(ngDevMode ? [{ debugName: "
|
|
7356
|
+
this.itemLookup = viewChild(AXLookupComponent, /* @ts-ignore */
|
|
7357
|
+
...(ngDevMode ? [{ debugName: "itemLookup" }] : /* istanbul ignore next */ []));
|
|
7359
7358
|
effect(() => {
|
|
7360
7359
|
if (!this.isEditMode()) {
|
|
7361
7360
|
return;
|
|
7362
7361
|
}
|
|
7363
7362
|
const scheduleFocus = () => {
|
|
7364
7363
|
setTimeout(() => {
|
|
7365
|
-
this.
|
|
7366
|
-
this.
|
|
7364
|
+
this.itemLookup()?.focus();
|
|
7365
|
+
this.itemLookup()?.open();
|
|
7367
7366
|
}, 0);
|
|
7368
7367
|
};
|
|
7369
7368
|
scheduleFocus();
|
|
@@ -7461,7 +7460,7 @@ class AXPItemConfiguratorComponent {
|
|
|
7461
7460
|
return action.disabled === true;
|
|
7462
7461
|
}
|
|
7463
7462
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7464
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemSelectBox", first: true, predicate: ["itemSelectBox"], descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n @if (isEditMode()) {\n <div class=\"__item-selector\">\n <ax-select-box\n #itemSelectBox\n [ngModel]=\"selectedItemId()\"\n [dataSource]=\"availableItems()\"\n [placeholder]=\"\n ('@general:actions.select.title' | translate | async) ?? ''\n \"\n [readonly]=\"readonly()\"\n (onValueChanged)=\"onSelectionChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [itemTemplate]=\"itemTemplate\"\n [itemHeight]=\"72\"\n [selectedTemplate]=\"selectedTemplate\"\n (onClosed)=\"exitEditMode()\"\n >\n <ax-search-box></ax-search-box>\n <ax-clear-button></ax-clear-button>\n </ax-select-box>\n </div>\n }\n\n @if (!isEditMode()) {\n @if (selectedItemId() && currentItemConfig(); as config) {\n <div class=\"__item-info\">\n <div\n class=\"__item-header\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <div>\n @if (config.icon) {\n <i [class]=\"config.icon\"></i>\n }\n <div>\n <span>\n {{ config.title | translate | async }}\n </span>\n @if (config.description) {\n <p>\n {{ (config.description | translate | async) ?? '' }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n @if (config.hasProperties) {\n <ax-button\n [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"\n ('@general:actions.configure.title' | translate | async) ?? ''\n \"\n look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\"\n size=\"sm\"\n (onClick)=\"openConfigureDialog()\"\n >\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n @for (\n action of visibleHeaderActions();\n track action.name ?? $index\n ) {\n <ax-button\n look=\"blank\"\n size=\"sm\"\n [color]=\"action.color ?? 'default'\"\n [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n [title]=\"(action.title | translate | async) ?? ''\"\n [class.icon-only]=\"action.iconOnly === true\"\n (onClick)=\"onHeaderActionClick(action)\"\n >\n @if (action.icon) {\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n }\n @if (action.iconOnly !== true) {\n <span>{{ (action.title | translate | async) ?? '' }}</span>\n }\n </ax-button>\n }\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"__item-empty\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{\n ('@general:widgets.widget-configurator.select-widget-type'\n | translate\n | async) ?? 'Select an item type'\n }}\n </span>\n </div>\n }\n }\n\n <ng-template #itemTemplate let-context>\n @let item = context.data;\n <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n @if (item.icon) {\n <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n }\n <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n <div class=\"text-sm font-medium\">\n {{ item.text | translate | async }}\n </div>\n @if (item.description) {\n <div class=\"text-xs text-neutral-600\">\n {{ item.description | translate | async }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\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 {{ $safeNavigationMigration(item?.data?.text) | translate | async }}\n </span>\n </div>\n </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-select-box{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXSelectBoxModule }, { kind: "component", type: i2$4.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: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i5.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7463
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemLookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n @if (isEditMode()) {\n <div class=\"__item-selector\">\n <ax-lookup\n #itemLookup\n mode=\"drop-down-list\"\n [ngModel]=\"selectedItemId()\"\n [dataSource]=\"availableItems()\"\n [placeholder]=\"\n ('@general:actions.select.title' | translate | async) ?? ''\n \"\n [readonly]=\"readonly()\"\n (onValueChanged)=\"onSelectionChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n [itemHeight]=\"72\"\n [selectedTemplate]=\"selectedTemplate\"\n (onClosed)=\"exitEditMode()\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-lookup>\n </div>\n }\n\n @if (!isEditMode()) {\n @if (selectedItemId() && currentItemConfig(); as config) {\n <div class=\"__item-info\">\n <div\n class=\"__item-header\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <div>\n @if (config.icon) {\n <i [class]=\"config.icon\"></i>\n }\n <div>\n <span>\n {{ config.title | translate | async }}\n </span>\n @if (config.description) {\n <p>\n {{ (config.description | translate | async) ?? '' }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n @if (config.hasProperties) {\n <ax-button\n [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"\n ('@general:actions.configure.title' | translate | async) ?? ''\n \"\n look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\"\n size=\"sm\"\n (onClick)=\"openConfigureDialog()\"\n >\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n @for (\n action of visibleHeaderActions();\n track action.name ?? $index\n ) {\n <ax-button\n look=\"blank\"\n size=\"sm\"\n [color]=\"action.color ?? 'default'\"\n [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n [title]=\"(action.title | translate | async) ?? ''\"\n [class.icon-only]=\"action.iconOnly === true\"\n (onClick)=\"onHeaderActionClick(action)\"\n >\n @if (action.icon) {\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n }\n @if (action.iconOnly !== true) {\n <span>{{ (action.title | translate | async) ?? '' }}</span>\n }\n </ax-button>\n }\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"__item-empty\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{\n ('@general:widgets.widget-configurator.select-widget-type'\n | translate\n | async) ?? 'Select an item type'\n }}\n </span>\n </div>\n }\n }\n\n <ng-template #itemTemplate let-item>\n <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n @if (item.icon) {\n <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n }\n <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n <div class=\"text-sm font-medium\">\n {{ item.text | translate | async }}\n </div>\n @if (item.description) {\n <div class=\"text-xs text-neutral-600\">\n {{ item.description | translate | async }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.icon) {\n <i [class]=\"item.icon\"></i>\n }\n <span>\n {{ $safeNavigationMigration(item?.text) | translate | async }}\n </span>\n </div>\n </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { 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: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7465
7464
|
}
|
|
7466
7465
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
|
|
7467
7466
|
type: Component,
|
|
@@ -7470,12 +7469,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
7470
7469
|
FormsModule,
|
|
7471
7470
|
AXFormModule,
|
|
7472
7471
|
AXButtonModule,
|
|
7473
|
-
|
|
7472
|
+
AXLookupComponent,
|
|
7474
7473
|
AXDecoratorModule,
|
|
7475
7474
|
AXTranslationModule,
|
|
7476
|
-
|
|
7477
|
-
|
|
7478
|
-
}], ctorParameters: () => [], propDecorators: { selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }, { type: i0.Output, args: ["selectedItemIdChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], itemSelectBox: [{ type: i0.ViewChild, args: ['itemSelectBox', { isSignal: true }] }] } });
|
|
7475
|
+
], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n @if (isEditMode()) {\n <div class=\"__item-selector\">\n <ax-lookup\n #itemLookup\n mode=\"drop-down-list\"\n [ngModel]=\"selectedItemId()\"\n [dataSource]=\"availableItems()\"\n [placeholder]=\"\n ('@general:actions.select.title' | translate | async) ?? ''\n \"\n [readonly]=\"readonly()\"\n (onValueChanged)=\"onSelectionChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n [itemHeight]=\"72\"\n [selectedTemplate]=\"selectedTemplate\"\n (onClosed)=\"exitEditMode()\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-lookup>\n </div>\n }\n\n @if (!isEditMode()) {\n @if (selectedItemId() && currentItemConfig(); as config) {\n <div class=\"__item-info\">\n <div\n class=\"__item-header\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <div>\n @if (config.icon) {\n <i [class]=\"config.icon\"></i>\n }\n <div>\n <span>\n {{ config.title | translate | async }}\n </span>\n @if (config.description) {\n <p>\n {{ (config.description | translate | async) ?? '' }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n @if (config.hasProperties) {\n <ax-button\n [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"\n ('@general:actions.configure.title' | translate | async) ?? ''\n \"\n look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\"\n size=\"sm\"\n (onClick)=\"openConfigureDialog()\"\n >\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n @for (\n action of visibleHeaderActions();\n track action.name ?? $index\n ) {\n <ax-button\n look=\"blank\"\n size=\"sm\"\n [color]=\"action.color ?? 'default'\"\n [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n [title]=\"(action.title | translate | async) ?? ''\"\n [class.icon-only]=\"action.iconOnly === true\"\n (onClick)=\"onHeaderActionClick(action)\"\n >\n @if (action.icon) {\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n }\n @if (action.iconOnly !== true) {\n <span>{{ (action.title | translate | async) ?? '' }}</span>\n }\n </ax-button>\n }\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"__item-empty\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{\n ('@general:widgets.widget-configurator.select-widget-type'\n | translate\n | async) ?? 'Select an item type'\n }}\n </span>\n </div>\n }\n }\n\n <ng-template #itemTemplate let-item>\n <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n @if (item.icon) {\n <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n }\n <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n <div class=\"text-sm font-medium\">\n {{ item.text | translate | async }}\n </div>\n @if (item.description) {\n <div class=\"text-xs text-neutral-600\">\n {{ item.description | translate | async }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.icon) {\n <i [class]=\"item.icon\"></i>\n }\n <span>\n {{ $safeNavigationMigration(item?.text) | translate | async }}\n </span>\n </div>\n </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
7476
|
+
}], ctorParameters: () => [], propDecorators: { selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }, { type: i0.Output, args: ["selectedItemIdChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], itemLookup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupComponent), { isSignal: true }] }] } });
|
|
7479
7477
|
//#region ---- Helpers ----
|
|
7480
7478
|
function isPropertyDefinitionArray(value) {
|
|
7481
7479
|
if (!Array.isArray(value) || value.length === 0) {
|
|
@@ -8416,7 +8414,7 @@ class AXPMenuCustomizerComponent {
|
|
|
8416
8414
|
this.toastService.warning(message);
|
|
8417
8415
|
}
|
|
8418
8416
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuCustomizerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
8419
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n <axp-state-message\n mode=\"loading\"\n icon=\"fa-light fa-spinner-third fa-spin\"\n [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n <axp-state-message\n mode=\"error\"\n icon=\"fa-light fa-circle-exclamation\"\n [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n >\n <ax-button\n slot=\"actions\"\n [text]=\"'@general:actions.retry.title' | translate | async\"\n look=\"outline\"\n color=\"primary\"\n (onClick)=\"loadMenuItems()\"\n >\n <i class=\"fa-light fa-rotate-left\"></i>\n </ax-button>\n </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n <axp-state-message\n mode=\"empty\"\n icon=\"fa-light fa-bars\"\n [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n >\n @if (allowAddItems()) {\n <ax-button\n slot=\"actions\"\n [text]=\"i18nActions + '.add-root.title' | translate | async\"\n look=\"solid\"\n color=\"primary\"\n (onClick)=\"addRootMenuItem()\"\n >\n <i class=\"fa-light fa-plus\"></i>\n </ax-button>\n }\n </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n <!-- Toolbar -->\n @if (showToolbar()) {\n <div class=\"axp-menu-customizer__toolbar\">\n @if (allowAddItems()) {\n <ax-button\n [text]=\"i18nActions + '.add-root.title' | translate | async\"\n look=\"solid\"\n color=\"primary\"\n (onClick)=\"addRootMenuItem()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-plus\"></i>\n </ax-prefix>\n </ax-button>\n }\n\n <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n <!-- \n <ax-button\n [text]=\"i18nActions + '.collapse.title' | translate | async\"\n look=\"outline\"\n (onClick)=\"collapseAll()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-minus-square\"></i>\n </ax-prefix>\n </ax-button>\n\n <ax-button\n [text]=\"i18nActions + '.expand.title' | translate | async\"\n look=\"outline\"\n (onClick)=\"expandAll()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-plus-square\"></i>\n </ax-prefix>\n </ax-button> -->\n\n <ax-button\n [text]=\"i18nActions + '.reset.title' | translate | async\"\n look=\"outline\"\n color=\"danger\"\n (onClick)=\"resetCustomizations()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-rotate-left\"></i>\n </ax-prefix>\n </ax-button>\n </div>\n }\n\n <!-- Menu Tree -->\n <div class=\"axp-menu-customizer__container\">\n <div class=\"axp-menu-customizer__tree\">\n <ax-tree-view\n [(datasource)]=\"treeNodes\"\n look=\"default\"\n [nodeTemplate]=\"itemTemplate\"\n selectMode=\"none\"\n [showIcons]=\"false\"\n [showChildrenBadge]=\"false\"\n [dragBehavior]=\"dragBehavior()\"\n [dragArea]=\"dragArea()\"\n (onBeforeDrop)=\"handleBeforeDrop($event)\"\n (onOrderChange)=\"handleOrderChange($event)\"\n (onMoveChange)=\"handleMoveChange($event)\"\n />\n </div>\n </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let nodeData = node['data'];\n @let item = nodeData.menuItem;\n @let metadata = nodeData.metadata;\n @let isGroup = item.type === 'group';\n @let isBreak = item.type === 'break';\n @let isMenu = item.type === 'menu' || !item.type;\n @let canAddChild = !item.path && isMenu && allowAddItems();\n @let canToggleVisibility = item.name && metadata.isBuiltIn;\n @let canDelete = item.name && metadata.isCustom;\n @let i18nStates = '@platform-management:menu-management.states';\n\n <div\n class=\"axp-menu-customizer__item\"\n [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n [class.axp-menu-customizer__item--group]=\"isGroup\"\n >\n <!-- Icon (hidden for groups) -->\n @if (item.icon && !isGroup) {\n <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n }\n\n <!-- Content based on item type -->\n @if (isGroup) {\n <span class=\"axp-menu-customizer__item-group\">\n <i class=\"fa-light fa-layer-group\"></i>\n {{ item.text | translate | async }}\n </span>\n } @else if (isBreak) {\n <span class=\"axp-menu-customizer__item-divider\">\n <i class=\"fa-light fa-minus\"></i>\n {{ i18nStates + '.divider' | translate | async }}\n </span>\n } @else if (item.text) {\n <span class=\"axp-menu-customizer__item-text\">\n {{ item.text | translate | async }}\n </span>\n } @else if (item.path) {\n <span class=\"axp-menu-customizer__item-path\">\n <i class=\"fa-light fa-link\"></i>\n {{ item.path }}\n </span>\n }\n\n <!-- Menu Name/Key -->\n @if (item.name) {\n <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n }\n\n <!-- Status Badges -->\n @if (metadata.isHidden) {\n <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n } @else if (metadata.isCustom) {\n <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n } @else if (metadata.isBuiltIn) {\n <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n }\n\n <!-- Actions Dropdown -->\n <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n <ax-prefix>\n <i class=\"fa-light fa-ellipsis-vertical\"></i>\n </ax-prefix>\n\n <ax-dropdown-panel #panel>\n <ax-button-item-list>\n <!-- Edit (only for items with names) -->\n @if (item.name) {\n <ax-button-item\n [text]=\"('@general:actions.edit.title' | translate | async)!\"\n (onClick)=\"onAction('edit', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-edit\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n\n <!-- Show/Hide (only for built-in items with names) -->\n @if (canToggleVisibility) {\n @if (metadata.isHidden) {\n <ax-button-item\n [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n (onClick)=\"onAction('show', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-eye\"></i>\n </ax-prefix>\n </ax-button-item>\n } @else {\n <ax-button-item\n [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n (onClick)=\"onAction('hide', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-eye-slash\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n }\n\n <!-- Add Child -->\n @if (canAddChild) {\n <ax-button-item\n [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-plus\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n\n <!-- Delete (only for custom items with names) -->\n @if (canDelete) {\n <ax-divider />\n <ax-button-item\n color=\"danger\"\n [text]=\"('@general:actions.delete.title' | translate | async)!\"\n (onClick)=\"onAction('delete', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-trash\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n\n <!-- Info message for items without names -->\n @if (!item.name) {\n <ax-divider />\n <div class=\"p-2 text-xs text-neutral-500 italic\">\n {{ i18nBase + '.messages.info.no-name' | translate | async }}\n </div>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n</ng-template>\n", styles: ["@layer properties;.axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer .axp-menu-customizer__toolbar{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__toolbar-spacer{min-width:calc(var(--spacing, .25rem) * 4);flex:1}.axp-menu-customizer .axp-menu-customizer__container{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__tree{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-menu-customizer .axp-menu-customizer__tree ax-tree-view{flex:1}.axp-menu-customizer .axp-menu-customizer__item{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-white, #fff);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.axp-menu-customizer .axp-menu-customizer__item:hover{background-color:var(--color-neutral-50, oklch(98.5% 0 none))}.axp-menu-customizer .axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:100%}.axp-menu-customizer .axp-menu-customizer__item--hidden{opacity:50%}.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer .axp-menu-customizer__item--custom{border-color:rgba(var(--ax-sys-color-primary-200));background-color:rgba(var(--ax-sys-color-primary-50))}@supports (color: color-mix(in lab,red,red)){.axp-menu-customizer .axp-menu-customizer__item--custom{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-50)) 30%,transparent)}}.axp-menu-customizer .axp-menu-customizer__item--group{background-color:var(--color-neutral-50, oklch(98.5% 0 none));padding-block:calc(var(--spacing, .25rem) * 3)}.axp-menu-customizer .axp-menu-customizer__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-primary-600))}.axp-menu-customizer .axp-menu-customizer__item-text{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-menu-customizer .axp-menu-customizer__item-group{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--color-neutral-500, oklch(55.6% 0 none));text-transform:uppercase;font-style:italic}.axp-menu-customizer .axp-menu-customizer__item-group i{color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}:is(.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path) i{flex-shrink:0;color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-name{display:inline-flex;max-width:calc(var(--spacing, .25rem) * 48);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));-webkit-user-select:all;user-select:all}.axp-menu-customizer .axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:60%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8417
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPMenuCustomizerComponent, isStandalone: true, selector: "axp-menu-customizer", inputs: { scopeKey: { classPropertyName: "scopeKey", publicName: "scopeKey", isSignal: true, isRequired: true, transformFunction: null }, showToolbar: { classPropertyName: "showToolbar", publicName: "showToolbar", isSignal: true, isRequired: false, transformFunction: null }, allowAddItems: { classPropertyName: "allowAddItems", publicName: "allowAddItems", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { saved: "saved", cancelled: "cancelled" }, host: { classAttribute: "axp-menu-customizer" }, viewQueries: [{ propertyName: "tree", first: true, predicate: AXTreeViewComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- i18n path constants -->\n@let i18nBase = '@platform-management:menu-management';\n@let i18nEmptyStates = i18nBase + '.components.menu-list.empty-states';\n@let i18nActions = i18nBase + '.actions';\n\n<!-- Loading State -->\n@if (isLoading()) {\n <axp-state-message\n mode=\"loading\"\n icon=\"fa-light fa-spinner-third fa-spin\"\n [title]=\"(i18nEmptyStates + '.loading.title' | translate | async)!\"\n [description]=\"(i18nEmptyStates + '.loading.description' | translate | async)!\"\n />\n}\n\n<!-- Error State -->\n@else if (hasError()) {\n <axp-state-message\n mode=\"error\"\n icon=\"fa-light fa-circle-exclamation\"\n [title]=\"(i18nEmptyStates + '.error.title' | translate | async)!\"\n [description]=\"(i18nEmptyStates + '.error.description' | translate | async)!\"\n >\n <ax-button\n slot=\"actions\"\n [text]=\"'@general:actions.retry.title' | translate | async\"\n look=\"outline\"\n color=\"primary\"\n (onClick)=\"loadMenuItems()\"\n >\n <i class=\"fa-light fa-rotate-left\"></i>\n </ax-button>\n </axp-state-message>\n}\n\n<!-- Empty State -->\n@else if (showEmptyState()) {\n <axp-state-message\n mode=\"empty\"\n icon=\"fa-light fa-bars\"\n [title]=\"(i18nEmptyStates + '.no-data.title' | translate | async)!\"\n [description]=\"(i18nEmptyStates + '.no-data.description' | translate | async)!\"\n >\n @if (allowAddItems()) {\n <ax-button\n slot=\"actions\"\n [text]=\"i18nActions + '.add-root.title' | translate | async\"\n look=\"solid\"\n color=\"primary\"\n (onClick)=\"addRootMenuItem()\"\n >\n <i class=\"fa-light fa-plus\"></i>\n </ax-button>\n }\n </axp-state-message>\n}\n\n<!-- Main Content -->\n@else if (showContent()) {\n <!-- Toolbar -->\n @if (showToolbar()) {\n <div class=\"axp-menu-customizer__toolbar\">\n @if (allowAddItems()) {\n <ax-button\n [text]=\"i18nActions + '.add-root.title' | translate | async\"\n look=\"solid\"\n color=\"primary\"\n (onClick)=\"addRootMenuItem()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-plus\"></i>\n </ax-prefix>\n </ax-button>\n }\n\n <div class=\"axp-menu-customizer__toolbar-spacer\"></div>\n <!-- \n <ax-button\n [text]=\"i18nActions + '.collapse.title' | translate | async\"\n look=\"outline\"\n (onClick)=\"collapseAll()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-minus-square\"></i>\n </ax-prefix>\n </ax-button>\n\n <ax-button\n [text]=\"i18nActions + '.expand.title' | translate | async\"\n look=\"outline\"\n (onClick)=\"expandAll()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-plus-square\"></i>\n </ax-prefix>\n </ax-button> -->\n\n <ax-button\n [text]=\"i18nActions + '.reset.title' | translate | async\"\n look=\"outline\"\n color=\"danger\"\n (onClick)=\"resetCustomizations()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-rotate-left\"></i>\n </ax-prefix>\n </ax-button>\n </div>\n }\n\n <!-- Menu Tree -->\n <div class=\"axp-menu-customizer__container\">\n <div class=\"axp-menu-customizer__tree\">\n <ax-tree-view\n [(datasource)]=\"treeNodes\"\n look=\"default\"\n [nodeTemplate]=\"itemTemplate\"\n selectMode=\"none\"\n [showIcons]=\"false\"\n [showChildrenBadge]=\"false\"\n [dragBehavior]=\"dragBehavior()\"\n [dragArea]=\"dragArea()\"\n (onBeforeDrop)=\"handleBeforeDrop($event)\"\n (onOrderChange)=\"handleOrderChange($event)\"\n (onMoveChange)=\"handleMoveChange($event)\"\n />\n </div>\n </div>\n}\n\n<!-- Custom Item Template -->\n<ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let nodeData = node['data'];\n @let item = nodeData.menuItem;\n @let metadata = nodeData.metadata;\n @let isGroup = item.type === 'group';\n @let isBreak = item.type === 'break';\n @let isMenu = item.type === 'menu' || !item.type;\n @let canAddChild = !item.path && isMenu && allowAddItems();\n @let canToggleVisibility = item.name && metadata.isBuiltIn;\n @let canDelete = item.name && metadata.isCustom;\n @let i18nStates = '@platform-management:menu-management.states';\n\n <div\n class=\"axp-menu-customizer__item\"\n [class.axp-menu-customizer__item--hidden]=\"metadata.isHidden\"\n [class.axp-menu-customizer__item--custom]=\"metadata.isCustom\"\n [class.axp-menu-customizer__item--group]=\"isGroup\"\n >\n <!-- Icon (hidden for groups) -->\n @if (item.icon && !isGroup) {\n <i class=\"axp-menu-customizer__item-icon\" [class]=\"item.icon\"></i>\n }\n\n <!-- Content based on item type -->\n @if (isGroup) {\n <span class=\"axp-menu-customizer__item-group\">\n <i class=\"fa-light fa-layer-group\"></i>\n {{ item.text | translate | async }}\n </span>\n } @else if (isBreak) {\n <span class=\"axp-menu-customizer__item-divider\">\n <i class=\"fa-light fa-minus\"></i>\n {{ i18nStates + '.divider' | translate | async }}\n </span>\n } @else if (item.text) {\n <span class=\"axp-menu-customizer__item-text\">\n {{ item.text | translate | async }}\n </span>\n } @else if (item.path) {\n <span class=\"axp-menu-customizer__item-path\">\n <i class=\"fa-light fa-link\"></i>\n {{ item.path }}\n </span>\n }\n\n <!-- Menu Name/Key -->\n @if (item.name) {\n <code class=\"axp-menu-customizer__item-name\">{{ item.name }}</code>\n }\n\n <!-- Status Badges -->\n @if (metadata.isHidden) {\n <ax-badge [text]=\"(i18nStates + '.hidden' | translate | async)!\" color=\"danger\" />\n } @else if (metadata.isCustom) {\n <ax-badge [text]=\"(i18nStates + '.custom' | translate | async)!\" color=\"success\" />\n } @else if (metadata.isBuiltIn) {\n <ax-badge [text]=\"(i18nStates + '.built-in' | translate | async)!\" color=\"primary\" />\n }\n\n <!-- Actions Dropdown -->\n <ax-button class=\"axp-menu-customizer__item-actions\" look=\"blank\" size=\"sm\" [iconOnly]=\"true\">\n <ax-prefix>\n <i class=\"fa-light fa-ellipsis-vertical\"></i>\n </ax-prefix>\n\n <ax-dropdown-panel #panel>\n <ax-button-item-list>\n <!-- Edit (only for items with names) -->\n @if (item.name) {\n <ax-button-item\n [text]=\"('@general:actions.edit.title' | translate | async)!\"\n (onClick)=\"onAction('edit', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-edit\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n\n <!-- Show/Hide (only for built-in items with names) -->\n @if (canToggleVisibility) {\n @if (metadata.isHidden) {\n <ax-button-item\n [text]=\"(i18nActions + '.show.title' | translate | async)!\"\n (onClick)=\"onAction('show', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-eye\"></i>\n </ax-prefix>\n </ax-button-item>\n } @else {\n <ax-button-item\n [text]=\"(i18nActions + '.hide.title' | translate | async)!\"\n (onClick)=\"onAction('hide', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-eye-slash\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n }\n\n <!-- Add Child -->\n @if (canAddChild) {\n <ax-button-item\n [text]=\"(i18nActions + '.add-child.title' | translate | async)!\"\n (onClick)=\"onAction('add-child', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-plus\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n\n <!-- Delete (only for custom items with names) -->\n @if (canDelete) {\n <ax-divider />\n <ax-button-item\n color=\"danger\"\n [text]=\"('@general:actions.delete.title' | translate | async)!\"\n (onClick)=\"onAction('delete', nodeData); panel.close()\"\n >\n <ax-prefix>\n <i class=\"fa-light fa-trash\"></i>\n </ax-prefix>\n </ax-button-item>\n }\n\n <!-- Info message for items without names -->\n @if (!item.name) {\n <ax-divider />\n <div class=\"p-2 text-xs text-neutral-500 italic\">\n {{ i18nBase + '.messages.info.no-name' | translate | async }}\n </div>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n</ng-template>\n", styles: ["@layer properties;.axp-menu-customizer{display:flex;height:100%;min-height:0px;flex-direction:column}.axp-menu-customizer .axp-menu-customizer__toolbar{display:flex;flex-shrink:0;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2);border-bottom-style:var(--tw-border-style);border-bottom-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__toolbar-spacer{min-width:calc(var(--spacing, .25rem) * 4);flex:1}.axp-menu-customizer .axp-menu-customizer__container{display:flex;min-height:0px;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);overflow:auto;padding:calc(var(--spacing, .25rem) * 4)}.axp-menu-customizer .axp-menu-customizer__tree{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-menu-customizer .axp-menu-customizer__tree ax-tree-view{flex:1}.axp-menu-customizer .axp-menu-customizer__item{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: solid;border-style:solid;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-white, #fff);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}.axp-menu-customizer .axp-menu-customizer__item:hover{background-color:var(--color-neutral-50, oklch(98.5% 0 none))}.axp-menu-customizer .axp-menu-customizer__item:hover .axp-menu-customizer__item-actions{opacity:100%}.axp-menu-customizer .axp-menu-customizer__item--hidden{opacity:50%}.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-text,.axp-menu-customizer .axp-menu-customizer__item--hidden .axp-menu-customizer__item-icon{text-decoration-line:line-through}.axp-menu-customizer .axp-menu-customizer__item--custom{border-color:rgba(var(--ax-sys-color-primary-200));background-color:rgba(var(--ax-sys-color-primary-50))}@supports (color: color-mix(in lab,red,red)){.axp-menu-customizer .axp-menu-customizer__item--custom{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-50)) 30%,transparent)}}.axp-menu-customizer .axp-menu-customizer__item--group{background-color:var(--color-neutral-50, oklch(98.5% 0 none));padding-block:calc(var(--spacing, .25rem) * 3)}.axp-menu-customizer .axp-menu-customizer__item-icon{display:flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);flex-shrink:0;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-primary-600))}.axp-menu-customizer .axp-menu-customizer__item-text{min-width:0px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-menu-customizer .axp-menu-customizer__item-group{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:var(--color-neutral-500, oklch(55.6% 0 none));text-transform:uppercase;font-style:italic}.axp-menu-customizer .axp-menu-customizer__item-group i{color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path{display:flex;min-width:0px;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}:is(.axp-menu-customizer .axp-menu-customizer__item-divider,.axp-menu-customizer .axp-menu-customizer__item-path) i{flex-shrink:0;color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-menu-customizer .axp-menu-customizer__item-name{display:inline-flex;max-width:calc(var(--spacing, .25rem) * 48);flex-shrink:0;overflow:hidden;text-overflow:ellipsis;border-radius:.25rem;border-style:var(--tw-border-style);border-width:1px;border-color:var(--color-neutral-200, oklch(92.2% 0 none));background-color:var(--color-neutral-100, oklch(97% 0 none));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:var(--spacing, .25rem);font-family:var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));-webkit-user-select:all;user-select:all}.axp-menu-customizer .axp-menu-customizer__item-actions{margin-left:auto;flex-shrink:0;opacity:60%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-duration: initial;--tw-font-weight: initial;--tw-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "ngmodule", type: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "alternate", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "component", type: AXPStateMessageComponent, selector: "axp-state-message", inputs: ["mode", "icon", "title", "description", "titleParams", "descriptionParams", "look"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
8420
8418
|
}
|
|
8421
8419
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPMenuCustomizerComponent, decorators: [{
|
|
8422
8420
|
type: Component,
|
|
@@ -9078,7 +9076,7 @@ class AXPResourceAppointmentComponent {
|
|
|
9078
9076
|
this.resourceAppointmentService.executeCommand(event.item.data?.command, providerName);
|
|
9079
9077
|
}
|
|
9080
9078
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPResourceAppointmentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9081
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container flex flex-col min-h-0 h-full\">\n @if (isReady()) {\n <!-- TODO: Add weekly view 'timeline-weekly' -->\n <ax-scheduler\n #scheduler\n [views]=\"['timeline-day', 'timeline-month']\"\n [dataSource]=\"schedulerAppointments()\"\n [resources]=\"schedulerResources()\"\n [startingDate]=\"currentDate()\"\n [selectedView]=\"currentView()\"\n [draggable]=\"false\"\n (onRangeChanged)=\"handleRangeChanged($event)\"\n class=\"axp-resource-appointment__scheduler bg-lightest dark:bg-darkest flex-1\"\n ></ax-scheduler>\n\n <ax-context-menu\n #contextMenu\n [closeOn]=\"'leave'\"\n [orientation]=\"'vertical'\"\n (onOpening)=\"handleContextMenuOpening($event)\"\n (onItemClick)=\"handleContextMenuItemClick($event)\"\n ></ax-context-menu>\n } @else {\n <div class=\"axp-resource-appointment__loading flex items-center justify-center w-full h-full\">\n <ax-loading></ax-loading>\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host .axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;height:100%;width:100%;min-height:400px}:host .axp-resource-appointment__loading{min-height:300px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$
|
|
9079
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPResourceAppointmentComponent, isStandalone: true, selector: "axp-resource-appointment", inputs: { showResourceHeaders: { classPropertyName: "showResourceHeaders", publicName: "showResourceHeaders", isSignal: true, isRequired: false, transformFunction: null }, showUnassignedAppointments: { classPropertyName: "showUnassignedAppointments", publicName: "showUnassignedAppointments", isSignal: true, isRequired: false, transformFunction: null }, providerName: { classPropertyName: "providerName", publicName: "providerName", isSignal: true, isRequired: false, transformFunction: null } }, providers: [AXPResourceAppointmentService], viewQueries: [{ propertyName: "contextMenu", first: true, predicate: ["contextMenu"], descendants: true, isSignal: true }, { propertyName: "schedulerRef", first: true, predicate: ["scheduler"], descendants: true, isSignal: true }], ngImport: i0, template: "<div class=\"axp-resource-appointment__container flex flex-col min-h-0 h-full\">\n @if (isReady()) {\n <!-- TODO: Add weekly view 'timeline-weekly' -->\n <ax-scheduler\n #scheduler\n [views]=\"['timeline-day', 'timeline-month']\"\n [dataSource]=\"schedulerAppointments()\"\n [resources]=\"schedulerResources()\"\n [startingDate]=\"currentDate()\"\n [selectedView]=\"currentView()\"\n [draggable]=\"false\"\n (onRangeChanged)=\"handleRangeChanged($event)\"\n class=\"axp-resource-appointment__scheduler bg-lightest dark:bg-darkest flex-1\"\n ></ax-scheduler>\n\n <ax-context-menu\n #contextMenu\n [closeOn]=\"'leave'\"\n [orientation]=\"'vertical'\"\n (onOpening)=\"handleContextMenuOpening($event)\"\n (onItemClick)=\"handleContextMenuItemClick($event)\"\n ></ax-context-menu>\n } @else {\n <div class=\"axp-resource-appointment__loading flex items-center justify-center w-full h-full\">\n <ax-loading></ax-loading>\n </div>\n }\n</div>\n", styles: [":host{display:block;height:100%;width:100%}:host .axp-resource-appointment__scheduler{--ax-comp-scheduler-width: 100%;height:100%;width:100%;min-height:400px}:host .axp-resource-appointment__loading{min-height:300px}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXCommonModule }, { kind: "ngmodule", type: AXMenuModule }, { kind: "component", type: i1$7.AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: i7.AXLoadingComponent, selector: "ax-loading", inputs: ["visible", "type", "context"], outputs: ["visibleChange"] }, { kind: "component", type: AXSchedulerComponent, selector: "ax-scheduler", inputs: ["calendar", "startingDate", "endDayHour", "startDayHour", "hasHeader", "readonly", "draggable", "hasActions", "dragStartDelay", "weekend", "allowFullScreen", "multiDayViewDaysCount", "showResourceHeaders", "showCurrentTimeIndicator", "scrollToCurrentTimeIndicator", "showUnassignedAppointments", "resources", "resourceTemplate", "firstDayOfWeek", "tooltipTemplate", "dataSource", "holidays", "views", "selectedView"], outputs: ["selectedViewChange", "onDataLoaded", "onRangeChanged", "onSlotClicked", "onSlotDblClicked", "onSlotRightClick", "onAppointmentDrop", "onActionClick", "onAppointmentClicked", "onAppointmentDblClicked", "onAppointmentRightClick"] }, { kind: "ngmodule", type: AXButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9082
9080
|
}
|
|
9083
9081
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPResourceAppointmentComponent, decorators: [{
|
|
9084
9082
|
type: Component,
|
|
@@ -10159,7 +10157,7 @@ class AXPSpreadsheetComponent {
|
|
|
10159
10157
|
}
|
|
10160
10158
|
}
|
|
10161
10159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { classAttribute: "axp-spreadsheet" }, ngImport: i0, template: "<!--\n #region ---- Spreadsheet Component Template ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n @if (isColumnsEmpty()) {\n <!-- Empty State: Columns are empty (regardless of rows) -->\n <div class=\"__empty-state\">\n <div class=\"__empty-icon\">\n <i class=\"fa-light fa-table-columns\"></i>\n </div>\n <div class=\"__empty-title\">\n {{ '@general:state-message.empty-columns.title' | translate | async }}\n </div>\n <div class=\"__empty-description\">\n {{\n '@general:state-message.empty-columns.description' | translate | async\n }}\n </div>\n </div>\n } @else if (isEmpty()) {\n <!-- Empty State: Both columns and rows are empty -->\n <div class=\"__empty-state\">\n <div class=\"__empty-icon\">\n <i class=\"fa-light fa-table\"></i>\n </div>\n <div class=\"__empty-title\">\n {{ '@general:state-message.empty.title' | translate | async }}\n </div>\n <div class=\"__empty-description\">\n {{ '@general:state-message.empty.description' | translate | async }}\n </div>\n </div>\n } @else if (isRowsEmpty()) {\n <!-- Empty State: Only rows are empty - Show columns -->\n <div class=\"__table-wrapper\">\n <table class=\"__table\">\n <!-- Header Row -->\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <!-- Corner cell (title) -->\n <th class=\"__corner-cell\">\n @if (title()) {\n <div class=\"__corner-title\">\n {{ title() | translate | async }}\n </div>\n }\n @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n <div class=\"__corner-actions\">\n <ax-button\n look=\"blank\"\n color=\"primary\"\n (onClick)=\"handleAddRow()\"\n [attr.aria-label]=\"'Add Row'\"\n >\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </th>\n\n <!-- Column headers -->\n @for (column of columns(); track column.name) {\n <th class=\"__column-header\" [style.width]=\"column.width\">\n <div class=\"__header-content\">\n <div class=\"__header-title\">\n {{ column.title | translate | async }}\n </div>\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Empty State Row -->\n <tbody class=\"__tbody\">\n <tr class=\"__row __row--empty\">\n <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n <div class=\"__empty-state-inline\">\n <div class=\"__empty-icon\">\n <i class=\"fa-light fa-list\"></i>\n </div>\n <div class=\"__empty-title\">\n {{\n '@general:state-message.empty-rows.title'\n | translate\n | async\n }}\n </div>\n <div class=\"__empty-description\">\n {{\n '@general:state-message.empty-rows.description'\n | translate\n | async\n }}\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n } @else {\n <!-- Full Spreadsheet: Both columns and rows are available -->\n <div class=\"__table-wrapper\">\n <table class=\"__table\">\n <!-- Header Row -->\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <!-- Corner cell (title) -->\n <th class=\"__corner-cell\">\n @if (title()) {\n <div class=\"__corner-title\">\n {{ title() | translate | async }}\n </div>\n }\n @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n <div class=\"__corner-actions\">\n <ax-button\n look=\"blank\"\n color=\"primary\"\n (onClick)=\"handleAddRow()\"\n [attr.aria-label]=\"'Add Row'\"\n >\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </th>\n\n <!-- Column headers -->\n @for (column of columns(); track column.name) {\n <th class=\"__column-header\" [style.width]=\"column.width\">\n <div class=\"__header-content\">\n <div class=\"__header-title\">\n {{ column.title | translate | async }}\n </div>\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Body Rows -->\n <tbody class=\"__tbody\">\n <axp-widgets-container\n [context]=\"spreadsheetContext()\"\n (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n >\n @for (\n rowItem of rowsWithIds();\n track rowItem.rowId;\n let rowIndex = $index\n ) {\n <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n <!-- Row header -->\n <td class=\"__row-header\">\n <div class=\"__header-content\">\n @if (rowTitlePath()) {\n <div class=\"__header-title\">\n {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n </div>\n }\n @if (rowDescriptionPath()) {\n <div class=\"__header-description\">\n {{\n getRowDescription(rowItem.row, rowDescriptionPath()!)\n }}\n </div>\n }\n </div>\n @if (allowRemoveRows() && !readonly()) {\n <div\n class=\"__header-actions ax-sm opacity-30 hover:opacity-100\"\n >\n <ax-button\n look=\"blank\"\n color=\"danger\"\n (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n [attr.aria-label]=\"'Remove Row'\"\n >\n <ax-icon icon=\"far fa-times\"></ax-icon>\n </ax-button>\n </div>\n }\n </td>\n\n <!-- Spreadsheet cells -->\n @for (column of columns(); track column.name) {\n <td\n class=\"__cell\"\n [class.__cell--editing]=\"\n isCellEditing(rowItem.rowId, column.name)\n \"\n [class.__cell--readonly]=\"isColumnReadonly(column)\"\n (click)=\"\n $event.stopPropagation();\n handleCellClick(rowItem.rowId, column.name, $event)\n \"\n >\n @if (\n isCellEditing(rowItem.rowId, column.name) &&\n !isColumnReadonly(column)\n ) {\n <!-- Edit mode: Show widget in edit mode -->\n <div\n class=\"__cell-editor\"\n (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n tabindex=\"-1\"\n >\n <ng-container\n axp-widget-renderer\n [node]=\"getCellWidgetNode(column, rowIndex)\"\n [mode]=\"'edit'\"\n ></ng-container>\n </div>\n <!-- Floating toolbar for commit/cancel -->\n <div\n class=\"__cell-toolbar ax-sm\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"\n $event.preventDefault(); $event.stopPropagation()\n \"\n (mouseup)=\"$event.stopPropagation()\"\n (focusin)=\"$event.stopPropagation()\"\n >\n <ax-button\n look=\"blank\"\n color=\"success\"\n (onClick)=\"commitCellEdit()\"\n [attr.aria-label]=\"'Commit'\"\n >\n <ax-icon icon=\"far fa-check\"></ax-icon>\n </ax-button>\n <ax-button\n look=\"blank\"\n color=\"danger\"\n (onClick)=\"cancelCellEdit()\"\n [attr.aria-label]=\"'Cancel'\"\n >\n <ax-icon icon=\"far fa-times\"></ax-icon>\n </ax-button>\n </div>\n } @else {\n <!-- View mode: Show widget in view mode or placeholder -->\n <div class=\"__cell-value\">\n @if (\n getCellValue(rowIndex, column.name) !== null &&\n getCellValue(rowIndex, column.name) !== undefined\n ) {\n <ng-container\n axp-widget-renderer\n [node]=\"getCellWidgetNode(column, rowIndex)\"\n [mode]=\"'view'\"\n ></ng-container>\n } @else {\n <span class=\"__cell-placeholder\">{{\n emptyCellPlaceholder()\n }}</span>\n }\n </div>\n }\n </td>\n }\n </tr>\n }\n </axp-widgets-container>\n </tbody>\n </table>\n </div>\n }\n</div>\n<!--\n #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:1px}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$3.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$3.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPSpreadsheetComponent, isStandalone: true, selector: "axp-spreadsheet", inputs: { title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, columns: { classPropertyName: "columns", publicName: "columns", isSignal: true, isRequired: true, transformFunction: null }, rowMode: { classPropertyName: "rowMode", publicName: "rowMode", isSignal: true, isRequired: false, transformFunction: null }, rowsInput: { classPropertyName: "rowsInput", publicName: "rowsInput", isSignal: true, isRequired: false, transformFunction: null }, rowsModel: { classPropertyName: "rowsModel", publicName: "rowsModel", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, emptyCellPlaceholder: { classPropertyName: "emptyCellPlaceholder", publicName: "emptyCellPlaceholder", isSignal: true, isRequired: false, transformFunction: null }, rowTitlePath: { classPropertyName: "rowTitlePath", publicName: "rowTitlePath", isSignal: true, isRequired: false, transformFunction: null }, rowDescriptionPath: { classPropertyName: "rowDescriptionPath", publicName: "rowDescriptionPath", isSignal: true, isRequired: false, transformFunction: null }, allowAddRows: { classPropertyName: "allowAddRows", publicName: "allowAddRows", isSignal: true, isRequired: false, transformFunction: null }, allowRemoveRows: { classPropertyName: "allowRemoveRows", publicName: "allowRemoveRows", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { rowsModel: "rowsModelChange", cellChange: "cellChange", rowChange: "rowChange", spreadsheetChange: "spreadsheetChange" }, host: { classAttribute: "axp-spreadsheet" }, ngImport: i0, template: "<!--\n #region ---- Spreadsheet Component Template ----\n-->\n<div class=\"__spreadsheet-container\" (click)=\"handleClickOutside($event)\">\n @if (isColumnsEmpty()) {\n <!-- Empty State: Columns are empty (regardless of rows) -->\n <div class=\"__empty-state\">\n <div class=\"__empty-icon\">\n <i class=\"fa-light fa-table-columns\"></i>\n </div>\n <div class=\"__empty-title\">\n {{ '@general:state-message.empty-columns.title' | translate | async }}\n </div>\n <div class=\"__empty-description\">\n {{\n '@general:state-message.empty-columns.description' | translate | async\n }}\n </div>\n </div>\n } @else if (isEmpty()) {\n <!-- Empty State: Both columns and rows are empty -->\n <div class=\"__empty-state\">\n <div class=\"__empty-icon\">\n <i class=\"fa-light fa-table\"></i>\n </div>\n <div class=\"__empty-title\">\n {{ '@general:state-message.empty.title' | translate | async }}\n </div>\n <div class=\"__empty-description\">\n {{ '@general:state-message.empty.description' | translate | async }}\n </div>\n </div>\n } @else if (isRowsEmpty()) {\n <!-- Empty State: Only rows are empty - Show columns -->\n <div class=\"__table-wrapper\">\n <table class=\"__table\">\n <!-- Header Row -->\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <!-- Corner cell (title) -->\n <th class=\"__corner-cell\">\n @if (title()) {\n <div class=\"__corner-title\">\n {{ title() | translate | async }}\n </div>\n }\n @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n <div class=\"__corner-actions\">\n <ax-button\n look=\"blank\"\n color=\"primary\"\n (onClick)=\"handleAddRow()\"\n [attr.aria-label]=\"'Add Row'\"\n >\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </th>\n\n <!-- Column headers -->\n @for (column of columns(); track column.name) {\n <th class=\"__column-header\" [style.width]=\"column.width\">\n <div class=\"__header-content\">\n <div class=\"__header-title\">\n {{ column.title | translate | async }}\n </div>\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Empty State Row -->\n <tbody class=\"__tbody\">\n <tr class=\"__row __row--empty\">\n <td class=\"__row-header\" [attr.colspan]=\"columns().length + 1\">\n <div class=\"__empty-state-inline\">\n <div class=\"__empty-icon\">\n <i class=\"fa-light fa-list\"></i>\n </div>\n <div class=\"__empty-title\">\n {{\n '@general:state-message.empty-rows.title'\n | translate\n | async\n }}\n </div>\n <div class=\"__empty-description\">\n {{\n '@general:state-message.empty-rows.description'\n | translate\n | async\n }}\n </div>\n </div>\n </td>\n </tr>\n </tbody>\n </table>\n </div>\n } @else {\n <!-- Full Spreadsheet: Both columns and rows are available -->\n <div class=\"__table-wrapper\">\n <table class=\"__table\">\n <!-- Header Row -->\n <thead class=\"__thead\">\n <tr class=\"__header-row\">\n <!-- Corner cell (title) -->\n <th class=\"__corner-cell\">\n @if (title()) {\n <div class=\"__corner-title\">\n {{ title() | translate | async }}\n </div>\n }\n @if (rowMode() === 'dynamic' && allowAddRows() && !readonly()) {\n <div class=\"__corner-actions\">\n <ax-button\n look=\"blank\"\n color=\"primary\"\n (onClick)=\"handleAddRow()\"\n [attr.aria-label]=\"'Add Row'\"\n >\n <ax-icon icon=\"far fa-plus\"></ax-icon>\n </ax-button>\n </div>\n }\n </th>\n\n <!-- Column headers -->\n @for (column of columns(); track column.name) {\n <th class=\"__column-header\" [style.width]=\"column.width\">\n <div class=\"__header-content\">\n <div class=\"__header-title\">\n {{ column.title | translate | async }}\n </div>\n </div>\n </th>\n }\n </tr>\n </thead>\n\n <!-- Body Rows -->\n <tbody class=\"__tbody\">\n <axp-widgets-container\n [context]=\"spreadsheetContext()\"\n (onContextChanged)=\"handleSpreadsheetContextChange($event)\"\n >\n @for (\n rowItem of rowsWithIds();\n track rowItem.rowId;\n let rowIndex = $index\n ) {\n <tr class=\"__row\" [class.__row--odd]=\"rowIndex % 2 === 1\">\n <!-- Row header -->\n <td class=\"__row-header\">\n <div class=\"__header-content\">\n @if (rowTitlePath()) {\n <div class=\"__header-title\">\n {{ getRowTitle(rowItem.row, rowTitlePath()!) }}\n </div>\n }\n @if (rowDescriptionPath()) {\n <div class=\"__header-description\">\n {{\n getRowDescription(rowItem.row, rowDescriptionPath()!)\n }}\n </div>\n }\n </div>\n @if (allowRemoveRows() && !readonly()) {\n <div\n class=\"__header-actions ax-sm opacity-30 hover:opacity-100\"\n >\n <ax-button\n look=\"blank\"\n color=\"danger\"\n (onClick)=\"handleRemoveRow(rowItem.rowId, $event)\"\n [attr.aria-label]=\"'Remove Row'\"\n >\n <ax-icon icon=\"far fa-times\"></ax-icon>\n </ax-button>\n </div>\n }\n </td>\n\n <!-- Spreadsheet cells -->\n @for (column of columns(); track column.name) {\n <td\n class=\"__cell\"\n [class.__cell--editing]=\"\n isCellEditing(rowItem.rowId, column.name)\n \"\n [class.__cell--readonly]=\"isColumnReadonly(column)\"\n (click)=\"\n $event.stopPropagation();\n handleCellClick(rowItem.rowId, column.name, $event)\n \"\n >\n @if (\n isCellEditing(rowItem.rowId, column.name) &&\n !isColumnReadonly(column)\n ) {\n <!-- Edit mode: Show widget in edit mode -->\n <div\n class=\"__cell-editor\"\n (blur)=\"handleCellBlur(rowItem.rowId, column.name)\"\n tabindex=\"-1\"\n >\n <ng-container\n axp-widget-renderer\n [node]=\"getCellWidgetNode(column, rowIndex)\"\n [mode]=\"'edit'\"\n ></ng-container>\n </div>\n <!-- Floating toolbar for commit/cancel -->\n <div\n class=\"__cell-toolbar ax-sm\"\n (click)=\"$event.stopPropagation()\"\n (mousedown)=\"\n $event.preventDefault(); $event.stopPropagation()\n \"\n (mouseup)=\"$event.stopPropagation()\"\n (focusin)=\"$event.stopPropagation()\"\n >\n <ax-button\n look=\"blank\"\n color=\"success\"\n (onClick)=\"commitCellEdit()\"\n [attr.aria-label]=\"'Commit'\"\n >\n <ax-icon icon=\"far fa-check\"></ax-icon>\n </ax-button>\n <ax-button\n look=\"blank\"\n color=\"danger\"\n (onClick)=\"cancelCellEdit()\"\n [attr.aria-label]=\"'Cancel'\"\n >\n <ax-icon icon=\"far fa-times\"></ax-icon>\n </ax-button>\n </div>\n } @else {\n <!-- View mode: Show widget in view mode or placeholder -->\n <div class=\"__cell-value\">\n @if (\n getCellValue(rowIndex, column.name) !== null &&\n getCellValue(rowIndex, column.name) !== undefined\n ) {\n <ng-container\n axp-widget-renderer\n [node]=\"getCellWidgetNode(column, rowIndex)\"\n [mode]=\"'view'\"\n ></ng-container>\n } @else {\n <span class=\"__cell-placeholder\">{{\n emptyCellPlaceholder()\n }}</span>\n }\n </div>\n }\n </td>\n }\n </tr>\n }\n </axp-widgets-container>\n </tbody>\n </table>\n </div>\n }\n</div>\n<!--\n #endregion\n-->\n", styles: ["@layer properties;.axp-spreadsheet{display:flex;height:100%;width:100%;flex-direction:column}.axp-spreadsheet .__spreadsheet-container{position:relative;flex:1;overflow:hidden;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-spreadsheet .__empty-state{display:flex;min-height:200px;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 8);text-align:center}.axp-spreadsheet .__empty-state .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 4)}.axp-spreadsheet .__empty-state .__empty-icon i{font-size:var(--text-4xl, 2.25rem);line-height:var(--tw-leading, var(--text-4xl--line-height, calc(2.5 / 2.25)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state .__empty-title{margin-bottom:calc(var(--spacing, .25rem) * 2);font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state .__empty-description{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__empty-state-inline{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * 6);text-align:center}.axp-spreadsheet .__empty-state-inline .__empty-icon{margin-bottom:calc(var(--spacing, .25rem) * 3)}.axp-spreadsheet .__empty-state-inline .__empty-icon i{font-size:var(--text-2xl, 1.5rem);line-height:var(--tw-leading, var(--text-2xl--line-height, calc(2 / 1.5)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-title{margin-bottom:var(--spacing, .25rem);font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:var(--color-neutral-800, oklch(26.9% 0 none))}.axp-spreadsheet .__empty-state-inline .__empty-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-600, oklch(43.9% 0 none))}.axp-spreadsheet .__table-wrapper{height:100%;width:100%;overflow-x:auto;overflow-y:auto;-webkit-overflow-scrolling:touch}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar{height:8px;width:8px}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-track{background-color:var(--color-neutral-100, oklch(97% 0 none))}.axp-spreadsheet .__table-wrapper::-webkit-scrollbar-thumb{border-radius:.25rem;background-color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table{min-width:100%;border-collapse:separate;--tw-border-spacing-x: 0px;--tw-border-spacing-y: 0px;border-spacing:var(--tw-border-spacing-x) var(--tw-border-spacing-y)}.axp-spreadsheet .__table .__thead{position:sticky;top:0;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);z-index:3}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-title{text-align:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-spreadsheet .__table .__thead .__header-row .__corner-cell .__corner-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__corner-cell{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}}.axp-spreadsheet .__table .__thead .__header-row .__column-header{position:sticky;top:0;width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap;z-index:2}.axp-spreadsheet .__table .__thead .__header-row .__column-header.__column-header--empty{width:300px;min-width:300px;white-space:normal}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);overflow-wrap:break-word;white-space:normal;opacity:75%}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__thead .__header-row .__column-header{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-title,.axp-spreadsheet .__table .__thead .__header-row .__column-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row.__row--empty .__row-header{text-align:center}.axp-spreadsheet .__table .__tbody .__row .__row-header{position:relative;position:sticky;inset-inline-start:calc(var(--spacing, .25rem) * 0);width:200px;min-width:200px;border-style:var(--tw-border-style);border-width:1px;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);vertical-align:top;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);z-index:2}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content{display:flex;flex-direction:column;gap:var(--spacing, .25rem)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-normal, 400);font-weight:var(--font-weight-normal, 400);opacity:75%}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-actions{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 1);top:var(--spacing, .25rem)}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__row-header{width:200px;min-width:200px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-title,.axp-spreadsheet .__table .__tbody .__row .__row-header .__header-content .__header-description{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}.axp-spreadsheet .__table .__tbody .__row .__cell{position:relative;min-height:40px;width:200px;min-width:200px;cursor:pointer;border-bottom-style:var(--tw-border-style);border-bottom-width:1px;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2);text-align:center;vertical-align:middle}.axp-spreadsheet .__table .__tbody .__row .__cell:before{content:\"\";pointer-events:none;position:absolute;inset:0;background-color:color-mix(in srgb,#000 5%,transparent);opacity:0%;transition-property:opacity;transition-timing-function:var(--tw-ease, var(--default-transition-timing-function, cubic-bezier(.4, 0, .2, 1)));transition-duration:var(--tw-duration, var(--default-transition-duration, .15s));--tw-duration: .15s;transition-duration:.15s;--tw-ease: var(--ease-in-out, cubic-bezier(.4, 0, .2, 1));transition-timing-function:var(--ease-in-out, cubic-bezier(.4, 0, .2, 1))}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell:before{background-color:color-mix(in oklab,var(--color-black, #000) 5%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell:hover:not(.__cell--readonly):not(.__cell--editing):before{opacity:100%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--readonly:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty{cursor:default}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--empty:hover:before{opacity:0%}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{position:relative;border-style:var(--tw-border-style);border-width:2px;border-color:rgba(var(--ax-sys-color-primary-surface));background-color:rgba(var(--ax-sys-color-primary-surface));padding:1px}@supports (color: color-mix(in lab,red,red)){.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-surface)) 10%,transparent)}}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-editor{width:100%;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:calc(var(--spacing, .25rem) * 2)}.axp-spreadsheet .__table .__tbody .__row .__cell.__cell--editing .__cell-toolbar{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 0);bottom:-35px;display:flex;gap:calc(var(--spacing, .25rem) * .5);border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:var(--spacing, .25rem);white-space:nowrap;--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow);z-index:100}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{display:flex;min-height:calc(var(--spacing, .25rem) * 5);align-items:center;justify-content:center;padding:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));overflow-wrap:break-word}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-placeholder{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-400, oklch(70.8% 0 none))}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-editor{display:flex;width:100%;align-items:center;justify-content:center}@media(max-width:768px){.axp-spreadsheet .__table .__tbody .__row .__cell{width:120px;min-width:120px;padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}.axp-spreadsheet .__table .__tbody .__row .__cell .__cell-value{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-spacing-x{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-border-spacing-y{syntax: \"<length>\"; inherits: false; initial-value: 0;}@property --tw-duration{syntax: \"*\"; inherits: false;}@property --tw-ease{syntax: \"*\"; inherits: false;}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid;--tw-font-weight: initial;--tw-border-spacing-x: 0;--tw-border-spacing-y: 0;--tw-duration: initial;--tw-ease: initial;--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10163
10161
|
}
|
|
10164
10162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPSpreadsheetComponent, decorators: [{
|
|
10165
10163
|
type: Component,
|
|
@@ -11277,7 +11275,7 @@ class AXPTemplateViewerComponent extends AXBasePageComponent {
|
|
|
11277
11275
|
</ax-suffix>
|
|
11278
11276
|
</ax-footer>
|
|
11279
11277
|
}
|
|
11280
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$
|
|
11278
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i3$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i3$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], 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: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "component", type: i2$4.AXFormComponent, selector: "ax-form", inputs: ["disabled", "readonly", "labelMode", "look", "messageStyle", "updateOn", "inUserInteractionActive"], outputs: ["onValidate", "updateOnChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.Eager, encapsulation: i0.ViewEncapsulation.None }); }
|
|
11281
11279
|
}
|
|
11282
11280
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPTemplateViewerComponent, decorators: [{
|
|
11283
11281
|
type: Component,
|
|
@@ -12159,7 +12157,7 @@ class AXPUserCardComponent {
|
|
|
12159
12157
|
}
|
|
12160
12158
|
}
|
|
12161
12159
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
12162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserCardComponent, isStandalone: true, selector: "axp-user-card", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n <!-- ----- Presence badge in the top-right of the card ----- -->\n @if (showPresence()) {\n <span\n class=\"axp-user-card__presence\"\n [axTooltip]=\"tooltipText()\"\n [axTooltipDisabled]=\"tooltipDisabled()\"\n axTooltipPlacement=\"bottom\"\n >\n <ax-badge\n size=\"sm\"\n look=\"twotone\"\n [color]=\"presenceBadgeColor()\"\n [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n ></ax-badge>\n </span>\n }\n\n <div class=\"axp-user-card__identity\">\n <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n <div class=\"axp-user-card__names\">\n <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n <!-- ----- Username when the identity cache has one ----- -->\n @if (username()) {\n <div class=\"axp-user-card__username\">@{{ username() }}</div>\n }\n </div>\n </div>\n\n <!-- ----- Placeholder extras while contributed items are still loading ----- -->\n @if (itemsLoading()) {\n <div class=\"axp-user-card__badges\" aria-hidden=\"true\">\n <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge axp-user-card__skeleton-badge--wide\"></ax-skeleton>\n </div>\n <div class=\"axp-user-card__actions\" aria-hidden=\"true\">\n <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-action\"></ax-skeleton>\n </div>\n }\n\n <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n @if (!itemsLoading() && extraRows().length > 0) {\n <div class=\"axp-user-card__badges\">\n @for (row of extraRows(); track row.id) {\n <span\n class=\"axp-user-card__badge\"\n [axTooltip]=\"(row.label | translate | async) ?? ''\"\n axTooltipPlacement=\"bottom\"\n >\n <ax-badge\n size=\"sm\"\n look=\"twotone\"\n color=\"primary\"\n [text]=\"(row.value | translate | async) ?? ''\"\n ></ax-badge>\n </span>\n }\n </div>\n }\n\n <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n @if (!itemsLoading() && extraActions().length > 0) {\n <div class=\"axp-user-card__actions\">\n @for (action of extraActions(); track action.name || action.title) {\n <ax-button\n class=\"axp-user-card__action ax-xs\"\n look=\"outline\"\n [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n [disabled]=\"action.disabled\"\n [color]=\"action.color\"\n (onClick)=\"onActionClick(action)\"\n >\n <!-- ----- Action icon when the contributor provided one ----- -->\n @if (action.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n </ax-prefix>\n }\n <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n @if (nestedActions(action).length > 0) {\n <ax-dropdown-panel>\n <ax-button-item-list>\n @for (sub of nestedActions(action); track sub.name || sub.title) {\n <!-- ----- Visible nested action ----- -->\n @if (sub.visible != false) {\n <ax-button-item\n [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n [color]=\"sub.color\"\n [disabled]=\"sub.disabled\"\n (onClick)=\"onNestedActionClick(sub)\"\n >\n <!-- ----- Nested action icon ----- -->\n @if (sub.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"sub.icon\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n <!-- ----- Divider after a nested item marked as a break ----- -->\n @if (sub.break) {\n <ax-divider></ax-divider>\n }\n }\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n }\n </ax-button>\n }\n </div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card{position:relative;display:flex;width:100%;max-width:24rem;min-width:20rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-user-card-overlay,.axp-user-card-overlay.ax-overlay-container,.axp-user-card-overlay.ax-overlay-pane,.axp-user-card-overlay .ax-overlay-pane,.axp-user-card-overlay .overlay-pane{min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card-overlay--pending,.axp-user-card-overlay--pending.ax-overlay-container,.axp-user-card-overlay--pending.ax-overlay-pane,.axp-user-card-overlay--pending .ax-overlay-pane,.axp-user-card-overlay--pending .overlay-pane{visibility:hidden;pointer-events:none}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}.axp-user-card__skeleton-badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 20);border-radius:calc(infinity * 1px)}.axp-user-card__skeleton-badge--wide{width:calc(var(--spacing, .25rem) * 36)}.axp-user-card__skeleton-action{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: AXDropdownModule }, { kind: "component", type: i5$1.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12160
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPUserCardComponent, isStandalone: true, selector: "axp-user-card", inputs: { userId: { classPropertyName: "userId", publicName: "userId", isSignal: true, isRequired: true, transformFunction: null } }, ngImport: i0, template: "<div class=\"axp-user-card lightest-surface dark:dark-surface\">\n <!-- ----- Presence badge in the top-right of the card ----- -->\n @if (showPresence()) {\n <span\n class=\"axp-user-card__presence\"\n [axTooltip]=\"tooltipText()\"\n [axTooltipDisabled]=\"tooltipDisabled()\"\n axTooltipPlacement=\"bottom\"\n >\n <ax-badge\n size=\"sm\"\n look=\"twotone\"\n [color]=\"presenceBadgeColor()\"\n [text]=\"(presenceLabelKey() | translate | async) ?? ''\"\n ></ax-badge>\n </span>\n }\n\n <div class=\"axp-user-card__identity\">\n <axp-user-avatar [size]=\"56\" [userId]=\"userId()\" [showPresence]=\"false\"></axp-user-avatar>\n <div class=\"axp-user-card__names\">\n <div class=\"axp-user-card__name\">{{ displayName() }}</div>\n <!-- ----- Username when the identity cache has one ----- -->\n @if (username()) {\n <div class=\"axp-user-card__username\">@{{ username() }}</div>\n }\n </div>\n </div>\n\n <!-- ----- Placeholder extras while contributed items are still loading ----- -->\n @if (itemsLoading()) {\n <div class=\"axp-user-card__badges\" aria-hidden=\"true\">\n <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-badge axp-user-card__skeleton-badge--wide\"></ax-skeleton>\n </div>\n <div class=\"axp-user-card__actions\" aria-hidden=\"true\">\n <ax-skeleton [animated]=\"true\" class=\"axp-user-card__skeleton-action\"></ax-skeleton>\n </div>\n }\n\n <!-- ----- Contributed identity chips (position, business unit, \u2026) ----- -->\n @if (!itemsLoading() && extraRows().length > 0) {\n <div class=\"axp-user-card__badges\">\n @for (row of extraRows(); track row.id) {\n <span\n class=\"axp-user-card__badge\"\n [axTooltip]=\"(row.label | translate | async) ?? ''\"\n axTooltipPlacement=\"bottom\"\n >\n <ax-badge\n size=\"sm\"\n look=\"twotone\"\n color=\"primary\"\n [text]=\"(row.value | translate | async) ?? ''\"\n ></ax-badge>\n </span>\n }\n </div>\n }\n\n <!-- ----- Contributed CTAs: button, or dropdown when the action has nested items ----- -->\n @if (!itemsLoading() && extraActions().length > 0) {\n <div class=\"axp-user-card__actions\">\n @for (action of extraActions(); track action.name || action.title) {\n <ax-button\n class=\"axp-user-card__action ax-xs\"\n look=\"outline\"\n [text]=\"(actionTitle(action) | translate | async) ?? ''\"\n [disabled]=\"action.disabled\"\n [color]=\"action.color\"\n (onClick)=\"onActionClick(action)\"\n >\n <!-- ----- Action icon when the contributor provided one ----- -->\n @if (action.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n </ax-prefix>\n }\n <!-- ----- Nested items turn the CTA into a dropdown ----- -->\n @if (nestedActions(action).length > 0) {\n <ax-dropdown-panel>\n <ax-button-item-list>\n @for (sub of nestedActions(action); track sub.name || sub.title) {\n <!-- ----- Visible nested action ----- -->\n @if (sub.visible != false) {\n <ax-button-item\n [text]=\"(actionTitle(sub) | translate | async) ?? ''\"\n [color]=\"sub.color\"\n [disabled]=\"sub.disabled\"\n (onClick)=\"onNestedActionClick(sub)\"\n >\n <!-- ----- Nested action icon ----- -->\n @if (sub.icon) {\n <ax-prefix>\n <ax-icon [icon]=\"sub.icon\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n <!-- ----- Divider after a nested item marked as a break ----- -->\n @if (sub.break) {\n <ax-divider></ax-divider>\n }\n }\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n }\n </ax-button>\n }\n </div>\n }\n</div>\n", styles: ["@layer properties;:host{display:block;min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card{position:relative;display:flex;width:100%;max-width:24rem;min-width:20rem;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-radius:var(--radius-lg, .5rem);padding:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 10px 15px -3px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 4px 6px -4px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-user-card-overlay,.axp-user-card-overlay.ax-overlay-container,.axp-user-card-overlay.ax-overlay-pane,.axp-user-card-overlay .ax-overlay-pane,.axp-user-card-overlay .overlay-pane{min-width:20rem;width:20rem;max-width:min(24rem,calc(100vw - 2rem))}.axp-user-card-overlay--pending,.axp-user-card-overlay--pending.ax-overlay-container,.axp-user-card-overlay--pending.ax-overlay-pane,.axp-user-card-overlay--pending .ax-overlay-pane,.axp-user-card-overlay--pending .overlay-pane{visibility:hidden;pointer-events:none}.axp-user-card__presence{position:absolute;inset-inline-end:calc(var(--spacing, .25rem) * 3);top:calc(var(--spacing, .25rem) * 3);z-index:10;display:inline-flex;flex-shrink:0}.axp-user-card__identity{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3);padding-inline-end:calc(var(--spacing, .25rem) * 16)}.axp-user-card__names{min-width:0px;flex:1}.axp-user-card__name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600)}.axp-user-card__username{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));color:var(--color-neutral-500, oklch(55.6% 0 none))}.axp-user-card__badges{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 1.5);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__badge{max-width:100%}.axp-user-card__actions{display:flex;flex-wrap:wrap;gap:calc(var(--spacing, .25rem) * 2);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-user-card__action{min-width:0px}.axp-user-card__skeleton-badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 20);border-radius:calc(infinity * 1px)}.axp-user-card__skeleton-badge--wide{width:calc(var(--spacing, .25rem) * 36)}.axp-user-card__skeleton-action{height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 24);border-radius:var(--radius-md, .375rem)}@property --tw-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-inset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-shadow-color{syntax: \"*\"; inherits: false;}@property --tw-inset-shadow-alpha{syntax: \"<percentage>\"; inherits: false; initial-value: 100%;}@property --tw-ring-color{syntax: \"*\"; inherits: false;}@property --tw-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-inset-ring-color{syntax: \"*\"; inherits: false;}@property --tw-inset-ring-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-ring-inset{syntax: \"*\"; inherits: false;}@property --tw-ring-offset-width{syntax: \"<length>\"; inherits: false; initial-value: 0px;}@property --tw-ring-offset-color{syntax: \"*\"; inherits: false; initial-value: #fff;}@property --tw-ring-offset-shadow{syntax: \"*\"; inherits: false; initial-value: 0 0 #0000;}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-shadow: 0 0 #0000;--tw-shadow-color: initial;--tw-shadow-alpha: 100%;--tw-inset-shadow: 0 0 #0000;--tw-inset-shadow-color: initial;--tw-inset-shadow-alpha: 100%;--tw-ring-color: initial;--tw-ring-shadow: 0 0 #0000;--tw-inset-ring-color: initial;--tw-inset-ring-shadow: 0 0 #0000;--tw-ring-inset: initial;--tw-ring-offset-width: 0px;--tw-ring-offset-color: #fff;--tw-ring-offset-shadow: 0 0 #0000;--tw-font-weight: initial;--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "component", type: AXPUserAvatarComponent, selector: "axp-user-avatar", inputs: ["size", "userId", "showPresence", "displayName", "displayAvatar"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.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: AXDropdownModule }, { kind: "component", type: i5.AXDropdownPanelComponent, selector: "ax-dropdown-panel", inputs: ["isOpen", "fitParent", "dropdownWidth", "position", "placement", "_target", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i6.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
12163
12161
|
}
|
|
12164
12162
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPUserCardComponent, decorators: [{
|
|
12165
12163
|
type: Component,
|