@acorex-platform/framework-client 0.0.14 → 0.0.18
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-auth.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-common.mjs +25 -211
- package/fesm2022/acorex-platform-framework-client-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-core.mjs +8 -104
- package/fesm2022/acorex-platform-framework-client-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-builder.mjs +57 -12
- package/fesm2022/acorex-platform-framework-client-layout-builder.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-components.mjs +494 -561
- package/fesm2022/acorex-platform-framework-client-layout-components.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-designer.mjs +8 -8
- package/fesm2022/acorex-platform-framework-client-layout-designer.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-entity.mjs +1333 -1023
- package/fesm2022/acorex-platform-framework-client-layout-entity.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-views.mjs +51 -9
- package/fesm2022/acorex-platform-framework-client-layout-views.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs +29 -9
- package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-widgets.mjs +48 -15
- package/fesm2022/acorex-platform-framework-client-layout-widgets.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-themes-default.mjs +41 -26
- package/fesm2022/acorex-platform-framework-client-themes-default.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-themes-shared.mjs +4 -4
- package/fesm2022/acorex-platform-framework-client-themes-shared.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-workflow.mjs.map +1 -1
- package/package.json +7 -7
- package/types/acorex-platform-framework-client-auth.d.ts +2 -2
- package/types/acorex-platform-framework-client-common.d.ts +12 -125
- package/types/acorex-platform-framework-client-core.d.ts +5 -22
- package/types/acorex-platform-framework-client-layout-builder.d.ts +10 -0
- package/types/acorex-platform-framework-client-layout-components.d.ts +17 -68
- package/types/acorex-platform-framework-client-layout-entity.d.ts +80 -7
- package/types/acorex-platform-framework-client-layout-views.d.ts +11 -6
- package/types/acorex-platform-framework-client-layout-widgets.d.ts +1 -1
- package/types/acorex-platform-framework-client-workflow.d.ts +1 -2
|
@@ -1233,7 +1233,7 @@ class AXPEntityCategoryComponent {
|
|
|
1233
1233
|
this.isLoading.set(false);
|
|
1234
1234
|
}
|
|
1235
1235
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1236
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, searchWithChildren: { classPropertyName: "searchWithChildren", publicName: "searchWithChildren", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category'\n | translate\n | async\n }}</axp-layout-title>\n <axp-layout-toolbar>\n <div class=\"flex flex-col gap-1 w-full\">\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"\n '@general:terms.interface.category.search.placeholder'\n | translate\n | async\n \"\n >\n </ax-search-box>\n @if (isSearching() && currentSearchValue().trim()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n <span>{{\n '@general:terms.interface.category.search.searching'\n | translate\n | async\n }}</span>\n </div>\n } @else if (currentSearchValue().trim() && !isSearching()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n @if (searchResultCount() > 0) {\n <span>{{ resultsFoundText() }}</span>\n }\n </div>\n }\n </div>\n </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"p-4 flex flex-col gap-3\">\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 (showNoSearchResults()) {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-search\"\n [title]=\"\n '@general:terms.interface.category.search.no-results-found.title'\n \"\n [description]=\"\n '@general:terms.interface.category.search.no-results-found.description'\n \"\n >\n </axp-state-message>\n </div>\n } @else if (treeData) {\n <div class=\"px-4 max-h-[calc(100vh-250px)] overflow-auto\">\n <ax-tree-view\n [datasource]=\"datasource\"\n [selectMode]=\"selectMode()\"\n [selectionBehavior]=\"selectionBehavior()\"\n [dragArea]=\"dragArea()\"\n [dragBehavior]=\"dragBehavior()\"\n [showIcons]=\"showIcons()\"\n [showChildrenBadge]=\"showChildrenBadge()\"\n [expandedIcon]=\"expandedIcon()\"\n [collapsedIcon]=\"collapsedIcon()\"\n [indentSize]=\"indentSize()\"\n [look]=\"look()\"\n [titleField]=\"textField()\"\n [idField]=\"valueField()\"\n [expandOnDoubleClick]=\"true\"\n [nodeTemplate]=\"itemTemplate\"\n (onNodeToggle)=\"onNodeToggle($event)\"\n (onNodeClick)=\"handleNodeClick($event.node)\"\n #tree\n >\n </ax-tree-view>\n </div>\n } @else {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-folder-open\"\n [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n [description]=\"\n '@general:terms.interface.category.search.no-records.description'\n \"\n >\n @if (!categoryReadonly()) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.add-new.title' | translate | async\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n </div>\n }\n\n <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let item = node.data || node;\n @let textField = vm().entityDef.category?.textField || 'title';\n @let valueField = vm().entityDef.category?.valueField || 'id';\n @let itemId = item[valueField] || node.id;\n @let rawLabel = item[textField] || node.title;\n @let itemTitle = rawLabel | translate | async;\n <div class=\"flex items-center justify-between w-full gap-1 overflow-hidden\">\n <div class=\"flex items-center gap-2 min-w-0\">\n <ax-icon\n class=\"fas fa-folder\"\n [style.color]=\"\n item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\n \"\n ></ax-icon>\n <span class=\"truncate\">\n @if (itemId === 'all') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ itemTitle }}\n }\n </span>\n </div>\n @if (itemId && itemId !== 'all' && !categoryReadonly()) {\n <div class=\"flex items-center gap-1 me-2\">\n <ax-button\n class=\"ax-sm\"\n color=\"default\"\n look=\"blank\"\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 <ax-button-item\n (onClick)=\"handleCreateChildClick(node, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\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 <ax-button-item\n (onClick)=\"handleEditNodeClick(node, $event)\"\n look=\"blank\"\n [text]=\"('@general:actions.edit.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(node, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"\n ('@general:actions.delete.title' | translate | async)!\n \"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n } @else if (itemId === 'all' && !categoryReadonly()) {\n <div class=\"flex items-center gap-1 me-2\">\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: ["/*! tailwindcss v4.3.2 | 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: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1236
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityCategoryComponent, isStandalone: true, selector: "axp-entity-category", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, searchValue: { classPropertyName: "searchValue", publicName: "searchValue", isSignal: true, isRequired: false, transformFunction: null }, selectMode: { classPropertyName: "selectMode", publicName: "selectMode", isSignal: true, isRequired: false, transformFunction: null }, selectionBehavior: { classPropertyName: "selectionBehavior", publicName: "selectionBehavior", isSignal: true, isRequired: false, transformFunction: null }, dragArea: { classPropertyName: "dragArea", publicName: "dragArea", isSignal: true, isRequired: false, transformFunction: null }, dragBehavior: { classPropertyName: "dragBehavior", publicName: "dragBehavior", isSignal: true, isRequired: false, transformFunction: null }, showIcons: { classPropertyName: "showIcons", publicName: "showIcons", isSignal: true, isRequired: false, transformFunction: null }, showChildrenBadge: { classPropertyName: "showChildrenBadge", publicName: "showChildrenBadge", isSignal: true, isRequired: false, transformFunction: null }, expandedIcon: { classPropertyName: "expandedIcon", publicName: "expandedIcon", isSignal: true, isRequired: false, transformFunction: null }, collapsedIcon: { classPropertyName: "collapsedIcon", publicName: "collapsedIcon", isSignal: true, isRequired: false, transformFunction: null }, indentSize: { classPropertyName: "indentSize", publicName: "indentSize", isSignal: true, isRequired: false, transformFunction: null }, look: { classPropertyName: "look", publicName: "look", isSignal: true, isRequired: false, transformFunction: null }, searchWithChildren: { classPropertyName: "searchWithChildren", publicName: "searchWithChildren", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "tree", first: true, predicate: ["tree"], descendants: true, isSignal: true }], ngImport: i0, template: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category'\n | translate\n | async\n }}</axp-layout-title>\n <axp-layout-toolbar>\n <div class=\"flex flex-col gap-1 w-full\">\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"\n '@general:terms.interface.category.search.placeholder'\n | translate\n | async\n \"\n >\n </ax-search-box>\n @if (isSearching() && currentSearchValue().trim()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n <span>{{\n '@general:terms.interface.category.search.searching'\n | translate\n | async\n }}</span>\n </div>\n } @else if (currentSearchValue().trim() && !isSearching()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n @if (searchResultCount() > 0) {\n <span>{{ resultsFoundText() }}</span>\n }\n </div>\n }\n </div>\n </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"p-4 flex flex-col gap-3\">\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 (showNoSearchResults()) {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-search\"\n [title]=\"\n '@general:terms.interface.category.search.no-results-found.title'\n \"\n [description]=\"\n '@general:terms.interface.category.search.no-results-found.description'\n \"\n >\n </axp-state-message>\n </div>\n } @else if (treeData) {\n <div class=\"px-4 max-h-[calc(100vh-250px)] overflow-auto\">\n <ax-tree-view\n [datasource]=\"datasource\"\n [selectMode]=\"selectMode()\"\n [selectionBehavior]=\"selectionBehavior()\"\n [dragArea]=\"dragArea()\"\n [dragBehavior]=\"dragBehavior()\"\n [showIcons]=\"showIcons()\"\n [showChildrenBadge]=\"showChildrenBadge()\"\n [expandedIcon]=\"expandedIcon()\"\n [collapsedIcon]=\"collapsedIcon()\"\n [indentSize]=\"indentSize()\"\n [look]=\"look()\"\n [titleField]=\"textField()\"\n [idField]=\"valueField()\"\n [expandOnDoubleClick]=\"true\"\n [nodeTemplate]=\"itemTemplate\"\n (onNodeToggle)=\"onNodeToggle($event)\"\n (onNodeClick)=\"handleNodeClick($event.node)\"\n #tree\n >\n </ax-tree-view>\n </div>\n } @else {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-folder-open\"\n [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n [description]=\"\n '@general:terms.interface.category.search.no-records.description'\n \"\n >\n @if (!categoryReadonly()) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.add-new.title' | translate | async\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n </div>\n }\n\n <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let item = node.data || node;\n @let textField = vm().entityDef.category?.textField || 'title';\n @let valueField = vm().entityDef.category?.valueField || 'id';\n @let itemId = item[valueField] || node.id;\n @let rawLabel = item[textField] || node.title;\n @let itemTitle = rawLabel | translate | async;\n <div class=\"flex items-center justify-between w-full gap-1 overflow-hidden\">\n <div class=\"flex items-center gap-2 min-w-0\">\n <ax-icon\n class=\"fas fa-folder\"\n [style.color]=\"\n item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\n \"\n ></ax-icon>\n <span class=\"truncate\">\n @if (itemId === 'all') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ itemTitle }}\n }\n </span>\n </div>\n @if (itemId && itemId !== 'all' && !categoryReadonly()) {\n <div class=\"flex items-center gap-1 me-2\">\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 <ax-button-item\n (onClick)=\"handleCreateChildClick(node, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\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 <ax-button-item\n (onClick)=\"handleEditNodeClick(node, $event)\"\n look=\"blank\"\n [text]=\"('@general:actions.edit.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(node, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"\n ('@general:actions.delete.title' | translate | async)!\n \"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n } @else if (itemId === 'all' && !categoryReadonly()) {\n <div class=\"flex items-center gap-1 me-2\">\n <ax-button\n class=\"ax-xs\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"none\"\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: ["/*! tailwindcss v4.3.2 | 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: "ngmodule", type: AXTreeViewModule }, { kind: "component", type: AXTreeViewComponent, selector: "ax-tree-view", inputs: ["datasource", "selectMode", "selectionBehavior", "dragArea", "dragBehavior", "showIcons", "showChildrenBadge", "expandedIcon", "collapsedIcon", "indentSize", "look", "nodeTemplate", "idField", "titleField", "tooltipField", "iconField", "expandedField", "selectedField", "indeterminateField", "disabledField", "hiddenField", "childrenField", "childrenCountField", "dataField", "inheritDisabled", "expandOnDoubleClick", "doubleClickDuration", "tooltipDelay", "controlledSelection", "selectedIds"], outputs: ["datasourceChange", "selectedIdsChange", "onBeforeDrop", "onNodeToggle", "onNodeSelect", "onNodeDoubleClick", "onNodeClick", "onSelectionChange", "onOrderChange", "onMoveChange", "onItemsChange"] }, { kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }, { kind: "component", type: AXPThemeLayoutBlockComponent, selector: " axp-page-content, axp-page-footer-container, axp-page-footer, axp-page-header, axp-page-header-container, axp-page-toolbar, axp-layout-content, axp-layout-page-content, axp-layout-sections, axp-layout-body, axp-layout-page-body, axp-layout-prefix, axp-layout-suffix, axp-layout-title-bar, axp-layout-title, axp-layout-title-actions, axp-layout-nav-button, axp-layout-description, axp-layout-breadcrumbs, axp-layout-list-action, " }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i6.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: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.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$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], encapsulation: i0.ViewEncapsulation.None }); }
|
|
1237
1237
|
}
|
|
1238
1238
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityCategoryComponent, decorators: [{
|
|
1239
1239
|
type: Component,
|
|
@@ -1251,7 +1251,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1251
1251
|
AXButtonModule,
|
|
1252
1252
|
AXDropdownModule,
|
|
1253
1253
|
AXPStateMessageComponent,
|
|
1254
|
-
], template: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category'\n | translate\n | async\n }}</axp-layout-title>\n <axp-layout-toolbar>\n <div class=\"flex flex-col gap-1 w-full\">\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"\n '@general:terms.interface.category.search.placeholder'\n | translate\n | async\n \"\n >\n </ax-search-box>\n @if (isSearching() && currentSearchValue().trim()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n <span>{{\n '@general:terms.interface.category.search.searching'\n | translate\n | async\n }}</span>\n </div>\n } @else if (currentSearchValue().trim() && !isSearching()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n @if (searchResultCount() > 0) {\n <span>{{ resultsFoundText() }}</span>\n }\n </div>\n }\n </div>\n </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"p-4 flex flex-col gap-3\">\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 (showNoSearchResults()) {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-search\"\n [title]=\"\n '@general:terms.interface.category.search.no-results-found.title'\n \"\n [description]=\"\n '@general:terms.interface.category.search.no-results-found.description'\n \"\n >\n </axp-state-message>\n </div>\n } @else if (treeData) {\n <div class=\"px-4 max-h-[calc(100vh-250px)] overflow-auto\">\n <ax-tree-view\n [datasource]=\"datasource\"\n [selectMode]=\"selectMode()\"\n [selectionBehavior]=\"selectionBehavior()\"\n [dragArea]=\"dragArea()\"\n [dragBehavior]=\"dragBehavior()\"\n [showIcons]=\"showIcons()\"\n [showChildrenBadge]=\"showChildrenBadge()\"\n [expandedIcon]=\"expandedIcon()\"\n [collapsedIcon]=\"collapsedIcon()\"\n [indentSize]=\"indentSize()\"\n [look]=\"look()\"\n [titleField]=\"textField()\"\n [idField]=\"valueField()\"\n [expandOnDoubleClick]=\"true\"\n [nodeTemplate]=\"itemTemplate\"\n (onNodeToggle)=\"onNodeToggle($event)\"\n (onNodeClick)=\"handleNodeClick($event.node)\"\n #tree\n >\n </ax-tree-view>\n </div>\n } @else {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-folder-open\"\n [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n [description]=\"\n '@general:terms.interface.category.search.no-records.description'\n \"\n >\n @if (!categoryReadonly()) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.add-new.title' | translate | async\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n </div>\n }\n\n <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let item = node.data || node;\n @let textField = vm().entityDef.category?.textField || 'title';\n @let valueField = vm().entityDef.category?.valueField || 'id';\n @let itemId = item[valueField] || node.id;\n @let rawLabel = item[textField] || node.title;\n @let itemTitle = rawLabel | translate | async;\n <div class=\"flex items-center justify-between w-full gap-1 overflow-hidden\">\n <div class=\"flex items-center gap-2 min-w-0\">\n <ax-icon\n class=\"fas fa-folder\"\n [style.color]=\"\n item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\n \"\n ></ax-icon>\n <span class=\"truncate\">\n @if (itemId === 'all') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ itemTitle }}\n }\n </span>\n </div>\n @if (itemId && itemId !== 'all' && !categoryReadonly()) {\n <div class=\"flex items-center gap-1 me-2\">\n <ax-button\n class=\"ax-
|
|
1254
|
+
], template: "<axp-layout-header>\n <axp-layout-title>{{\n vm().entityDef.category?.title || '@general:terms.classification.category'\n | translate\n | async\n }}</axp-layout-title>\n <axp-layout-toolbar>\n <div class=\"flex flex-col gap-1 w-full\">\n <ax-search-box\n (onValueChanged)=\"handleCategorySearchChange($event)\"\n [delayTime]=\"300\"\n [placeholder]=\"\n '@general:terms.interface.category.search.placeholder'\n | translate\n | async\n \"\n >\n </ax-search-box>\n @if (isSearching() && currentSearchValue().trim()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n <span>{{\n '@general:terms.interface.category.search.searching'\n | translate\n | async\n }}</span>\n </div>\n } @else if (currentSearchValue().trim() && !isSearching()) {\n <div class=\"text-xs text-muted flex items-center gap-1\">\n @if (searchResultCount() > 0) {\n <span>{{ resultsFoundText() }}</span>\n }\n </div>\n }\n </div>\n </axp-layout-toolbar>\n</axp-layout-header>\n<axp-layout-content>\n @if (isLoading()) {\n <div class=\"p-4 flex flex-col gap-3\">\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 (showNoSearchResults()) {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-search\"\n [title]=\"\n '@general:terms.interface.category.search.no-results-found.title'\n \"\n [description]=\"\n '@general:terms.interface.category.search.no-results-found.description'\n \"\n >\n </axp-state-message>\n </div>\n } @else if (treeData) {\n <div class=\"px-4 max-h-[calc(100vh-250px)] overflow-auto\">\n <ax-tree-view\n [datasource]=\"datasource\"\n [selectMode]=\"selectMode()\"\n [selectionBehavior]=\"selectionBehavior()\"\n [dragArea]=\"dragArea()\"\n [dragBehavior]=\"dragBehavior()\"\n [showIcons]=\"showIcons()\"\n [showChildrenBadge]=\"showChildrenBadge()\"\n [expandedIcon]=\"expandedIcon()\"\n [collapsedIcon]=\"collapsedIcon()\"\n [indentSize]=\"indentSize()\"\n [look]=\"look()\"\n [titleField]=\"textField()\"\n [idField]=\"valueField()\"\n [expandOnDoubleClick]=\"true\"\n [nodeTemplate]=\"itemTemplate\"\n (onNodeToggle)=\"onNodeToggle($event)\"\n (onNodeClick)=\"handleNodeClick($event.node)\"\n #tree\n >\n </ax-tree-view>\n </div>\n } @else {\n <div class=\"__empty-state\">\n <axp-state-message\n icon=\"fa-light fa-folder-open\"\n [title]=\"'@general:terms.interface.category.search.no-records.title'\"\n [description]=\"\n '@general:terms.interface.category.search.no-records.description'\n \"\n >\n @if (!categoryReadonly()) {\n <ax-button\n slot=\"actions\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"solid\"\n color=\"primary\"\n [text]=\"'@general:actions.add-new.title' | translate | async\"\n >\n <ax-icon class=\"fas fa-plus\"></ax-icon>\n </ax-button>\n }\n </axp-state-message>\n </div>\n }\n\n <ng-template #itemTemplate let-node=\"node\" let-level=\"level\">\n @let item = node.data || node;\n @let textField = vm().entityDef.category?.textField || 'title';\n @let valueField = vm().entityDef.category?.valueField || 'id';\n @let itemId = item[valueField] || node.id;\n @let rawLabel = item[textField] || node.title;\n @let itemTitle = rawLabel | translate | async;\n <div class=\"flex items-center justify-between w-full gap-1 overflow-hidden\">\n <div class=\"flex items-center gap-2 min-w-0\">\n <ax-icon\n class=\"fas fa-folder\"\n [style.color]=\"\n item.color ?? 'rgba(var(--ax-sys-color-warning-500), 1)'\n \"\n ></ax-icon>\n <span class=\"truncate\">\n @if (itemId === 'all') {\n {{ categoryTreeRootTitleI18nKey | translate | async }}\n } @else {\n {{ itemTitle }}\n }\n </span>\n </div>\n @if (itemId && itemId !== 'all' && !categoryReadonly()) {\n <div class=\"flex items-center gap-1 me-2\">\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 <ax-button-item\n (onClick)=\"handleCreateChildClick(node, $event)\"\n look=\"blank\"\n color=\"default\"\n [text]=\"\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 <ax-button-item\n (onClick)=\"handleEditNodeClick(node, $event)\"\n look=\"blank\"\n [text]=\"('@general:actions.edit.title' | translate | async)!\"\n >\n <ax-icon class=\"fas fa-pen\"></ax-icon>\n </ax-button-item>\n <ax-button-item\n (onClick)=\"handleDeleteNodeClick(node, $event)\"\n color=\"danger\"\n look=\"blank\"\n [text]=\"\n ('@general:actions.delete.title' | translate | async)!\n \"\n >\n <ax-icon class=\"fas fa-trash\"></ax-icon>\n </ax-button-item>\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n </div>\n } @else if (itemId === 'all' && !categoryReadonly()) {\n <div class=\"flex items-center gap-1 me-2\">\n <ax-button\n class=\"ax-xs\"\n (onClick)=\"handleCreateRootClick($event)\"\n look=\"none\"\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: ["/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1255
1255
|
}], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], tree: [{ type: i0.ViewChild, args: ['tree', { isSignal: true }] }], searchValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchValue", required: false }] }], selectMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectMode", required: false }] }], selectionBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectionBehavior", required: false }] }], dragArea: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragArea", required: false }] }], dragBehavior: [{ type: i0.Input, args: [{ isSignal: true, alias: "dragBehavior", required: false }] }], showIcons: [{ type: i0.Input, args: [{ isSignal: true, alias: "showIcons", required: false }] }], showChildrenBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showChildrenBadge", required: false }] }], expandedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "expandedIcon", required: false }] }], collapsedIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "collapsedIcon", required: false }] }], indentSize: [{ type: i0.Input, args: [{ isSignal: true, alias: "indentSize", required: false }] }], look: [{ type: i0.Input, args: [{ isSignal: true, alias: "look", required: false }] }], searchWithChildren: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchWithChildren", required: false }] }] } });
|
|
1256
1256
|
|
|
1257
1257
|
class AXPEntityMasterToolbarViewComponent {
|
|
@@ -1538,11 +1538,11 @@ class AXPEntityMasterListCardItemSkeletonComponent {
|
|
|
1538
1538
|
this.badgePlaceholders = computed(() => Array.from({ length: Math.max(this.badgeCount(), 0) }, (_, index) => index), ...(ngDevMode ? [{ debugName: "badgePlaceholders" }] : /* istanbul ignore next */ []));
|
|
1539
1539
|
}
|
|
1540
1540
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemSkeletonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1541
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardItemSkeletonComponent, isStandalone: true, selector: "axp-entity-master-list-card-item-skeleton", inputs: { fieldCount: { classPropertyName: "fieldCount", publicName: "fieldCount", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeaderMenu: { classPropertyName: "showHeaderMenu", publicName: "showHeaderMenu", isSignal: true, isRequired: false, transformFunction: null }, showContent: { classPropertyName: "showContent", publicName: "showContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"axp-entity-card-skeleton\" aria-hidden=\"true\">\n <div class=\"axp-entity-card-skeleton__header\">\n <div class=\"axp-entity-card-skeleton__header-main\">\n <div class=\"axp-entity-card-skeleton__header-text\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__title\"></ax-skeleton>\n @if (showContent()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__description\"></ax-skeleton>\n }\n </div>\n @for (index of badgePlaceholders(); track index) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__badge\"></ax-skeleton>\n }\n </div>\n @if (showHeaderMenu()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__menu\"></ax-skeleton>\n }\n </div>\n\n @if (showContent()) {\n @if (fieldPlaceholders().length) {\n <div class=\"axp-entity-card-skeleton__fields\">\n @for (index of fieldPlaceholders(); track index) {\n <div class=\"axp-entity-card-skeleton__field-row\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-label\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-value\"></ax-skeleton>\n </div>\n }\n </div>\n }\n }\n\n @if (showFooter()) {\n <footer class=\"axp-entity-card-skeleton__footer\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__primary-action\"></ax-skeleton>\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card-skeleton{display:flex;height:auto;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card-skeleton__title{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 40);max-width:100%;border-radius:.25rem}.axp-entity-card-skeleton__badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 14);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-entity-card-skeleton__menu{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:.25rem}.axp-entity-card-skeleton__description{height:calc(var(--spacing, .25rem) * 3.5);width:calc(var(--spacing, .25rem) * 32);max-width:100%;border-radius:.25rem;color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card-skeleton__fields{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton__field-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton__field-label{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 24);border-radius:.25rem}.axp-entity-card-skeleton__field-value{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 28);border-radius:.25rem}.axp-entity-card-skeleton__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton__primary-action{height:calc(var(--spacing, .25rem) * 10);width:100%;border-radius:var(--radius-lg, .5rem)}@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.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1541
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardItemSkeletonComponent, isStandalone: true, selector: "axp-entity-master-list-card-item-skeleton", inputs: { fieldCount: { classPropertyName: "fieldCount", publicName: "fieldCount", isSignal: true, isRequired: false, transformFunction: null }, badgeCount: { classPropertyName: "badgeCount", publicName: "badgeCount", isSignal: true, isRequired: false, transformFunction: null }, showFooter: { classPropertyName: "showFooter", publicName: "showFooter", isSignal: true, isRequired: false, transformFunction: null }, showHeaderMenu: { classPropertyName: "showHeaderMenu", publicName: "showHeaderMenu", isSignal: true, isRequired: false, transformFunction: null }, showContent: { classPropertyName: "showContent", publicName: "showContent", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<article class=\"axp-entity-card-skeleton\" aria-hidden=\"true\">\n <div class=\"axp-entity-card-skeleton__header\">\n <div class=\"axp-entity-card-skeleton__header-main\">\n <div class=\"axp-entity-card-skeleton__header-text\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__title\"></ax-skeleton>\n @if (showContent()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__description\"></ax-skeleton>\n }\n </div>\n @for (index of badgePlaceholders(); track index) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__badge\"></ax-skeleton>\n }\n </div>\n @if (showHeaderMenu()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__menu\"></ax-skeleton>\n }\n </div>\n\n @if (showContent()) {\n @if (fieldPlaceholders().length) {\n <div class=\"axp-entity-card-skeleton__fields\">\n @for (index of fieldPlaceholders(); track index) {\n <div class=\"axp-entity-card-skeleton__field-row\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-label\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-value\"></ax-skeleton>\n </div>\n }\n </div>\n }\n }\n\n @if (showFooter()) {\n <footer class=\"axp-entity-card-skeleton__footer\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__primary-action\"></ax-skeleton>\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card-skeleton{display:flex;height:auto;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton .axp-entity-card-skeleton__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton .axp-entity-card-skeleton__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton .axp-entity-card-skeleton__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card-skeleton .axp-entity-card-skeleton__title{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 40);max-width:100%;border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 14);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-entity-card-skeleton .axp-entity-card-skeleton__menu{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__description{height:calc(var(--spacing, .25rem) * 3.5);width:calc(var(--spacing, .25rem) * 32);max-width:100%;border-radius:.25rem;color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card-skeleton .axp-entity-card-skeleton__fields{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton .axp-entity-card-skeleton__field-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton .axp-entity-card-skeleton__field-label{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 24);border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__field-value{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 28);border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton .axp-entity-card-skeleton__primary-action{height:calc(var(--spacing, .25rem) * 10);width:100%;border-radius:var(--radius-lg, .5rem)}@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.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: AXSkeletonModule }, { kind: "component", type: i2$2.AXSkeletonComponent, selector: "ax-skeleton", inputs: ["animated"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1542
1542
|
}
|
|
1543
1543
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemSkeletonComponent, decorators: [{
|
|
1544
1544
|
type: Component,
|
|
1545
|
-
args: [{ selector: 'axp-entity-master-list-card-item-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXSkeletonModule], template: "<article class=\"axp-entity-card-skeleton\" aria-hidden=\"true\">\n <div class=\"axp-entity-card-skeleton__header\">\n <div class=\"axp-entity-card-skeleton__header-main\">\n <div class=\"axp-entity-card-skeleton__header-text\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__title\"></ax-skeleton>\n @if (showContent()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__description\"></ax-skeleton>\n }\n </div>\n @for (index of badgePlaceholders(); track index) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__badge\"></ax-skeleton>\n }\n </div>\n @if (showHeaderMenu()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__menu\"></ax-skeleton>\n }\n </div>\n\n @if (showContent()) {\n @if (fieldPlaceholders().length) {\n <div class=\"axp-entity-card-skeleton__fields\">\n @for (index of fieldPlaceholders(); track index) {\n <div class=\"axp-entity-card-skeleton__field-row\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-label\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-value\"></ax-skeleton>\n </div>\n }\n </div>\n }\n }\n\n @if (showFooter()) {\n <footer class=\"axp-entity-card-skeleton__footer\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__primary-action\"></ax-skeleton>\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card-skeleton{display:flex;height:auto;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card-skeleton__title{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 40);max-width:100%;border-radius:.25rem}.axp-entity-card-skeleton__badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 14);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-entity-card-skeleton__menu{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:.25rem}.axp-entity-card-skeleton__description{height:calc(var(--spacing, .25rem) * 3.5);width:calc(var(--spacing, .25rem) * 32);max-width:100%;border-radius:.25rem;color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card-skeleton__fields{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton__field-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton__field-label{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 24);border-radius:.25rem}.axp-entity-card-skeleton__field-value{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 28);border-radius:.25rem}.axp-entity-card-skeleton__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton__primary-action{height:calc(var(--spacing, .25rem) * 10);width:100%;border-radius:var(--radius-lg, .5rem)}@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.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1545
|
+
args: [{ selector: 'axp-entity-master-list-card-item-skeleton', changeDetection: ChangeDetectionStrategy.OnPush, imports: [AXSkeletonModule], template: "<article class=\"axp-entity-card-skeleton\" aria-hidden=\"true\">\n <div class=\"axp-entity-card-skeleton__header\">\n <div class=\"axp-entity-card-skeleton__header-main\">\n <div class=\"axp-entity-card-skeleton__header-text\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__title\"></ax-skeleton>\n @if (showContent()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__description\"></ax-skeleton>\n }\n </div>\n @for (index of badgePlaceholders(); track index) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__badge\"></ax-skeleton>\n }\n </div>\n @if (showHeaderMenu()) {\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__menu\"></ax-skeleton>\n }\n </div>\n\n @if (showContent()) {\n @if (fieldPlaceholders().length) {\n <div class=\"axp-entity-card-skeleton__fields\">\n @for (index of fieldPlaceholders(); track index) {\n <div class=\"axp-entity-card-skeleton__field-row\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-label\"></ax-skeleton>\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__field-value\"></ax-skeleton>\n </div>\n }\n </div>\n }\n }\n\n @if (showFooter()) {\n <footer class=\"axp-entity-card-skeleton__footer\">\n <ax-skeleton [animated]=\"true\" class=\"axp-entity-card-skeleton__primary-action\"></ax-skeleton>\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card-skeleton{display:flex;height:auto;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton .axp-entity-card-skeleton__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton .axp-entity-card-skeleton__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:flex-start;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-skeleton .axp-entity-card-skeleton__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card-skeleton .axp-entity-card-skeleton__title{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 40);max-width:100%;border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__badge{height:calc(var(--spacing, .25rem) * 5);width:calc(var(--spacing, .25rem) * 14);flex-shrink:0;border-radius:calc(infinity * 1px)}.axp-entity-card-skeleton .axp-entity-card-skeleton__menu{height:calc(var(--spacing, .25rem) * 8);width:calc(var(--spacing, .25rem) * 8);flex-shrink:0;border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__description{height:calc(var(--spacing, .25rem) * 3.5);width:calc(var(--spacing, .25rem) * 32);max-width:100%;border-radius:.25rem;color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card-skeleton .axp-entity-card-skeleton__fields{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-skeleton .axp-entity-card-skeleton__field-row{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton .axp-entity-card-skeleton__field-label{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 24);border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__field-value{height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 28);border-radius:.25rem}.axp-entity-card-skeleton .axp-entity-card-skeleton__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card-skeleton .axp-entity-card-skeleton__primary-action{height:calc(var(--spacing, .25rem) * 10);width:100%;border-radius:var(--radius-lg, .5rem)}@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.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1546
1546
|
}], propDecorators: { fieldCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldCount", required: false }] }], badgeCount: [{ type: i0.Input, args: [{ isSignal: true, alias: "badgeCount", required: false }] }], showFooter: [{ type: i0.Input, args: [{ isSignal: true, alias: "showFooter", required: false }] }], showHeaderMenu: [{ type: i0.Input, args: [{ isSignal: true, alias: "showHeaderMenu", required: false }] }], showContent: [{ type: i0.Input, args: [{ isSignal: true, alias: "showContent", required: false }] }] } });
|
|
1547
1547
|
|
|
1548
1548
|
class AXPEntityMasterListCardItemComponent {
|
|
@@ -1718,7 +1718,7 @@ class AXPEntityMasterListCardItemComponent {
|
|
|
1718
1718
|
}
|
|
1719
1719
|
}
|
|
1720
1720
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1721
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardItemComponent, isStandalone: true, selector: "axp-entity-master-list-card-item", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showNewBadge: { classPropertyName: "showNewBadge", publicName: "showNewBadge", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", commandClick: "commandClick" }, ngImport: i0, template: "<article\n class=\"axp-entity-card\"\n role=\"button\"\n tabindex=\"0\"\n [class.axp-entity-card--selected]=\"selected()\"\n [class.axp-entity-card--new]=\"showNewBadge()\"\n [attr.aria-selected]=\"selected()\"\n (click)=\"onCardClick($event)\"\n (dblclick)=\"onCardDblClick($event)\"\n (keydown)=\"onCardKeydown($event)\"\n>\n <div class=\"axp-entity-card__header\">\n <div class=\"axp-entity-card__header-main\">\n <div class=\"axp-entity-card__header-text\">\n <div class=\"axp-entity-card__title-row\">\n @if (iconClass(); as icon) {\n <i [class]=\"icon + ' axp-entity-card__icon'\" aria-hidden=\"true\"></i>\n }\n\n <h3 class=\"axp-entity-card__title\" title=\"{{ titleText() | translate | async }}\">\n {{ titleText() | translate | async }}\n </h3>\n\n @if (showNewBadge()) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"('@acorex:dataTable.rowHighlight.new' | translate | async) || ''\"\n color=\"success\"\n />\n }\n\n @for (field of headerBadgeFields(); track field.name) {\n @if (isStatusBadgeField(field)) {\n <div class=\"axp-entity-card__header-badge\">\n <axp-widget-column-cell [node]=\"field.headerBadgeNode()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n } @else if (resolveBadgeText(field)) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"resolveBadgeText(field)\"\n [color]=\"resolveBadgeColor(field)\"\n />\n }\n }\n </div>\n\n @if (descriptionText()) {\n <p class=\"axp-entity-card__description\" title=\"{{ descriptionText() | translate | async }}\">\n {{ descriptionText() | translate | async }}\n </p>\n }\n </div>\n </div>\n\n @if (showSelection() || secondaryActions().length) {\n <div class=\"axp-entity-card__header-actions\">\n @if (showSelection()) {\n <ax-check-box\n class=\"axp-entity-card__select-checkbox\"\n [value]=\"selected()\"\n (onValueChanged)=\"onSelectionCheckboxChange($event)\"\n (click)=\"onSelectionCheckboxClick($event)\"\n />\n } @else if (secondaryActions().length) {\n <ax-button [look]=\"'blank'\" [color]=\"'default'\" (onClick)=\"stopClickPropagation($event)\">\n <ax-prefix>\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </ax-prefix>\n\n <ax-dropdown-panel #panel>\n <ax-button-item-list>\n @for (item of secondaryActions(); track $index) {\n @if (item.divided) {\n <ax-divider />\n }\n <ax-button-item\n [text]=\"(item.title | translate | async)!\"\n [color]=\"item.color\"\n [disabled]=\"item.disabled\"\n (onClick)=\"onSecondaryActionClick(item, $event)\"\n >\n @if (item.icon) {\n <ax-prefix>\n <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n }\n </div>\n }\n </div>\n\n @if (showCardContent()) {\n @if (bodyFields().length) {\n <div class=\"axp-entity-card__fields grid grid-cols-12 gap-y-3 gap-x-4\">\n @for (field of bodyFields(); track field.name) {\n <div\n class=\"axp-entity-card__field col-span-12\"\n [axp-grid-layout]=\"field.layout ?? { positions: { sm: { colSpan: 12 } } }\"\n >\n <div class=\"axp-entity-card__field-row\">\n <span class=\"axp-entity-card__field-label\">{{ field.title | translate | async }}</span>\n\n <div class=\"axp-entity-card__field-value\">\n <axp-widget-column-cell [node]=\"field.node()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n </div>\n </div>\n }\n </div>\n }\n }\n\n @if (primaryActions().length) {\n <footer class=\"axp-entity-card__footer\">\n @for (action of primaryActions(); track $index) {\n <ax-button\n class=\"axp-entity-card__primary-action text-xs\"\n [class.flex-1]=\"!primaryActionsIconOnly()\"\n [look]=\"'outline'\"\n [color]=\"action.color\"\n [size]=\"'sm'\"\n [iconOnly]=\"primaryActionsIconOnly()\"\n [disabled]=\"action.disabled\"\n [text]=\"(action.title | translate | async)!\"\n (onClick)=\"onPrimaryActionClick(action.name, $event)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <i class=\"fa-light {{ action.icon }}\"></i>\n </ax-prefix>\n }\n </ax-button>\n }\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card{display:flex;height:auto;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4);cursor:pointer;transition-property:box-shadow;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))}.axp-entity-card:hover{--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-entity-card:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}.axp-entity-card--selected{border-color:rgba(var(--ax-sys-color-primary-500));--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);box-shadow:0 0 0 1px rgb(var(--ax-sys-color-primary-500)/.25),0 2px 6px #0000000f}.axp-entity-card--new{border-color:rgb(var(--ax-sys-color-border-success-surface));box-shadow:0 0 0 1px rgb(var(--ax-sys-color-success-500)/.2)}.axp-entity-card__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card__title-row{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card__select-checkbox,.axp-entity-card__header-badge{flex-shrink:0}.axp-entity-card__header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.axp-entity-card__icon{flex-shrink:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:var(--color-gray-500, oklch(55.1% .027 264.364))}.axp-entity-card__description{min-width:0;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-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:rgba(var(--ax-sys-color-on-lightest-surface))}.axp-entity-card__fields{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card__field-row{display:grid;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);grid-template-columns:auto minmax(0,1fr)}.axp-entity-card__field-label{flex-shrink:0;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);color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card__field-value{max-width:100%;min-width:0;justify-self:flex-end;text-align:end;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-on-lightest-surface));width:fit-content}.axp-entity-card__field-value axp-widget-column-cell{display:block;max-width:100%}.axp-entity-card__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card__primary-action{min-width:0}@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;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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: AXTranslationModule }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "component", type: AXPWidgetColumnCellComponent, selector: "axp-widget-column-cell", inputs: ["node", "rowData", "caption"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1721
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardItemComponent, isStandalone: true, selector: "axp-entity-master-list-card-item", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null }, row: { classPropertyName: "row", publicName: "row", isSignal: true, isRequired: true, transformFunction: null }, selected: { classPropertyName: "selected", publicName: "selected", isSignal: true, isRequired: false, transformFunction: null }, showNewBadge: { classPropertyName: "showNewBadge", publicName: "showNewBadge", isSignal: true, isRequired: false, transformFunction: null }, showSelection: { classPropertyName: "showSelection", publicName: "showSelection", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectionChange: "selectionChange", commandClick: "commandClick" }, ngImport: i0, template: "<article\n class=\"axp-entity-card\"\n role=\"button\"\n tabindex=\"0\"\n [class.axp-entity-card--selected]=\"selected()\"\n [class.axp-entity-card--new]=\"showNewBadge()\"\n [attr.aria-selected]=\"selected()\"\n (click)=\"onCardClick($event)\"\n (dblclick)=\"onCardDblClick($event)\"\n (keydown)=\"onCardKeydown($event)\"\n>\n <div class=\"axp-entity-card__header\">\n <div class=\"axp-entity-card__header-main\">\n <div class=\"axp-entity-card__header-text\">\n <div class=\"axp-entity-card__title-row\">\n @if (iconClass(); as icon) {\n <i [class]=\"icon + ' axp-entity-card__icon'\" aria-hidden=\"true\"></i>\n }\n\n <h3 class=\"axp-entity-card__title\" title=\"{{ titleText() | translate | async }}\">\n {{ titleText() | translate | async }}\n </h3>\n\n @if (showNewBadge()) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"('@acorex:dataTable.rowHighlight.new' | translate | async) || ''\"\n color=\"success\"\n />\n }\n\n @for (field of headerBadgeFields(); track field.name) {\n @if (isStatusBadgeField(field)) {\n <div class=\"axp-entity-card__header-badge\">\n <axp-widget-column-cell [node]=\"field.headerBadgeNode()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n } @else if (resolveBadgeText(field)) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"resolveBadgeText(field)\"\n [color]=\"resolveBadgeColor(field)\"\n />\n }\n }\n </div>\n\n @if (descriptionText()) {\n <p class=\"axp-entity-card__description\" title=\"{{ descriptionText() | translate | async }}\">\n {{ descriptionText() | translate | async }}\n </p>\n }\n </div>\n </div>\n\n @if (showSelection() || secondaryActions().length) {\n <div class=\"axp-entity-card__header-actions\">\n @if (showSelection()) {\n <ax-check-box\n class=\"axp-entity-card__select-checkbox\"\n [value]=\"selected()\"\n (onValueChanged)=\"onSelectionCheckboxChange($event)\"\n (click)=\"onSelectionCheckboxClick($event)\"\n />\n } @else if (secondaryActions().length) {\n <ax-button [look]=\"'blank'\" [color]=\"'default'\" (onClick)=\"stopClickPropagation($event)\">\n <ax-prefix>\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </ax-prefix>\n\n <ax-dropdown-panel #panel>\n <ax-button-item-list>\n @for (item of secondaryActions(); track $index) {\n @if (item.divided) {\n <ax-divider />\n }\n <ax-button-item\n [text]=\"(item.title | translate | async)!\"\n [color]=\"item.color\"\n [disabled]=\"item.disabled\"\n (onClick)=\"onSecondaryActionClick(item, $event)\"\n >\n @if (item.icon) {\n <ax-prefix>\n <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n }\n </div>\n }\n </div>\n\n @if (showCardContent()) {\n @if (bodyFields().length) {\n <div class=\"axp-entity-card__fields grid grid-cols-12 gap-y-3 gap-x-4\">\n @for (field of bodyFields(); track field.name) {\n <div\n class=\"axp-entity-card__field col-span-12\"\n [axp-grid-layout]=\"field.layout ?? { positions: { sm: { colSpan: 12 } } }\"\n >\n <div class=\"axp-entity-card__field-row\">\n <span class=\"axp-entity-card__field-label\">{{ field.title | translate | async }}</span>\n\n <div class=\"axp-entity-card__field-value\">\n <axp-widget-column-cell [node]=\"field.node()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n </div>\n </div>\n }\n </div>\n }\n }\n\n @if (primaryActions().length) {\n <footer class=\"axp-entity-card__footer\">\n @for (action of primaryActions(); track $index) {\n <ax-button\n class=\"axp-entity-card__primary-action text-xs\"\n [class.flex-1]=\"!primaryActionsIconOnly()\"\n [look]=\"'outline'\"\n [color]=\"action.color\"\n [size]=\"'sm'\"\n [iconOnly]=\"primaryActionsIconOnly()\"\n [disabled]=\"action.disabled\"\n [text]=\"(action.title | translate | async)!\"\n (onClick)=\"onPrimaryActionClick(action.name, $event)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <i class=\"fa-light {{ action.icon }}\"></i>\n </ax-prefix>\n }\n </ax-button>\n }\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card{display:flex;height:auto;width:100%;cursor:pointer;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4);transition-property:box-shadow;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))}.axp-entity-card:hover{--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-entity-card:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}.axp-entity-card.axp-entity-card--selected{border-color:rgba(var(--ax-sys-color-primary-500));--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);box-shadow:0 0 0 1px rgb(var(--ax-sys-color-primary-500)/.25),0 2px 6px #0000000f}.axp-entity-card.axp-entity-card--new{border-color:rgb(var(--ax-sys-color-border-success-surface));box-shadow:0 0 0 1px rgb(var(--ax-sys-color-success-500)/.2)}.axp-entity-card .axp-entity-card__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card .axp-entity-card__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card .axp-entity-card__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card .axp-entity-card__title-row{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card .axp-entity-card__select-checkbox,.axp-entity-card .axp-entity-card__header-badge{flex-shrink:0}.axp-entity-card .axp-entity-card__header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card .axp-entity-card__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.axp-entity-card .axp-entity-card__icon{flex-shrink:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:var(--color-gray-500, oklch(55.1% .027 264.364))}.axp-entity-card .axp-entity-card__description{min-width:0;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-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:rgba(var(--ax-sys-color-on-lightest-surface))}.axp-entity-card .axp-entity-card__fields{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card .axp-entity-card__field-row{display:grid;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);grid-template-columns:auto minmax(0,1fr)}.axp-entity-card .axp-entity-card__field-label{flex-shrink:0;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);color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card .axp-entity-card__field-value{max-width:100%;min-width:0;justify-self:flex-end;text-align:end;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-on-lightest-surface));width:fit-content}.axp-entity-card .axp-entity-card__field-value axp-widget-column-cell{display:block;max-width:100%}.axp-entity-card .axp-entity-card__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card .axp-entity-card__primary-action{min-width:0}@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;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i3.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: i3.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i3.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i3$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { 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: AXTranslationModule }, { kind: "directive", type: AXPGridLayoutDirective, selector: "[axp-grid-layout]", inputs: ["axp-grid-layout"] }, { kind: "component", type: AXPWidgetColumnCellComponent, selector: "axp-widget-column-cell", inputs: ["node", "rowData", "caption"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1722
1722
|
}
|
|
1723
1723
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardItemComponent, decorators: [{
|
|
1724
1724
|
type: Component,
|
|
@@ -1732,7 +1732,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1732
1732
|
AXTranslationModule,
|
|
1733
1733
|
AXPGridLayoutDirective,
|
|
1734
1734
|
AXPWidgetColumnCellComponent,
|
|
1735
|
-
], template: "<article\n class=\"axp-entity-card\"\n role=\"button\"\n tabindex=\"0\"\n [class.axp-entity-card--selected]=\"selected()\"\n [class.axp-entity-card--new]=\"showNewBadge()\"\n [attr.aria-selected]=\"selected()\"\n (click)=\"onCardClick($event)\"\n (dblclick)=\"onCardDblClick($event)\"\n (keydown)=\"onCardKeydown($event)\"\n>\n <div class=\"axp-entity-card__header\">\n <div class=\"axp-entity-card__header-main\">\n <div class=\"axp-entity-card__header-text\">\n <div class=\"axp-entity-card__title-row\">\n @if (iconClass(); as icon) {\n <i [class]=\"icon + ' axp-entity-card__icon'\" aria-hidden=\"true\"></i>\n }\n\n <h3 class=\"axp-entity-card__title\" title=\"{{ titleText() | translate | async }}\">\n {{ titleText() | translate | async }}\n </h3>\n\n @if (showNewBadge()) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"('@acorex:dataTable.rowHighlight.new' | translate | async) || ''\"\n color=\"success\"\n />\n }\n\n @for (field of headerBadgeFields(); track field.name) {\n @if (isStatusBadgeField(field)) {\n <div class=\"axp-entity-card__header-badge\">\n <axp-widget-column-cell [node]=\"field.headerBadgeNode()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n } @else if (resolveBadgeText(field)) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"resolveBadgeText(field)\"\n [color]=\"resolveBadgeColor(field)\"\n />\n }\n }\n </div>\n\n @if (descriptionText()) {\n <p class=\"axp-entity-card__description\" title=\"{{ descriptionText() | translate | async }}\">\n {{ descriptionText() | translate | async }}\n </p>\n }\n </div>\n </div>\n\n @if (showSelection() || secondaryActions().length) {\n <div class=\"axp-entity-card__header-actions\">\n @if (showSelection()) {\n <ax-check-box\n class=\"axp-entity-card__select-checkbox\"\n [value]=\"selected()\"\n (onValueChanged)=\"onSelectionCheckboxChange($event)\"\n (click)=\"onSelectionCheckboxClick($event)\"\n />\n } @else if (secondaryActions().length) {\n <ax-button [look]=\"'blank'\" [color]=\"'default'\" (onClick)=\"stopClickPropagation($event)\">\n <ax-prefix>\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </ax-prefix>\n\n <ax-dropdown-panel #panel>\n <ax-button-item-list>\n @for (item of secondaryActions(); track $index) {\n @if (item.divided) {\n <ax-divider />\n }\n <ax-button-item\n [text]=\"(item.title | translate | async)!\"\n [color]=\"item.color\"\n [disabled]=\"item.disabled\"\n (onClick)=\"onSecondaryActionClick(item, $event)\"\n >\n @if (item.icon) {\n <ax-prefix>\n <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n }\n </div>\n }\n </div>\n\n @if (showCardContent()) {\n @if (bodyFields().length) {\n <div class=\"axp-entity-card__fields grid grid-cols-12 gap-y-3 gap-x-4\">\n @for (field of bodyFields(); track field.name) {\n <div\n class=\"axp-entity-card__field col-span-12\"\n [axp-grid-layout]=\"field.layout ?? { positions: { sm: { colSpan: 12 } } }\"\n >\n <div class=\"axp-entity-card__field-row\">\n <span class=\"axp-entity-card__field-label\">{{ field.title | translate | async }}</span>\n\n <div class=\"axp-entity-card__field-value\">\n <axp-widget-column-cell [node]=\"field.node()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n </div>\n </div>\n }\n </div>\n }\n }\n\n @if (primaryActions().length) {\n <footer class=\"axp-entity-card__footer\">\n @for (action of primaryActions(); track $index) {\n <ax-button\n class=\"axp-entity-card__primary-action text-xs\"\n [class.flex-1]=\"!primaryActionsIconOnly()\"\n [look]=\"'outline'\"\n [color]=\"action.color\"\n [size]=\"'sm'\"\n [iconOnly]=\"primaryActionsIconOnly()\"\n [disabled]=\"action.disabled\"\n [text]=\"(action.title | translate | async)!\"\n (onClick)=\"onPrimaryActionClick(action.name, $event)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <i class=\"fa-light {{ action.icon }}\"></i>\n </ax-prefix>\n }\n </ax-button>\n }\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card{display:flex;height:auto;width:100%;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4);cursor:pointer;transition-property:box-shadow;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))}.axp-entity-card:hover{--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-entity-card:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}.axp-entity-card--selected{border-color:rgba(var(--ax-sys-color-primary-500));--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);box-shadow:0 0 0 1px rgb(var(--ax-sys-color-primary-500)/.25),0 2px 6px #0000000f}.axp-entity-card--new{border-color:rgb(var(--ax-sys-color-border-success-surface));box-shadow:0 0 0 1px rgb(var(--ax-sys-color-success-500)/.2)}.axp-entity-card__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card__title-row{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card__select-checkbox,.axp-entity-card__header-badge{flex-shrink:0}.axp-entity-card__header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.axp-entity-card__icon{flex-shrink:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:var(--color-gray-500, oklch(55.1% .027 264.364))}.axp-entity-card__description{min-width:0;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-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:rgba(var(--ax-sys-color-on-lightest-surface))}.axp-entity-card__fields{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card__field-row{display:grid;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);grid-template-columns:auto minmax(0,1fr)}.axp-entity-card__field-label{flex-shrink:0;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);color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card__field-value{max-width:100%;min-width:0;justify-self:flex-end;text-align:end;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-on-lightest-surface));width:fit-content}.axp-entity-card__field-value axp-widget-column-cell{display:block;max-width:100%}.axp-entity-card__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card__primary-action{min-width:0}@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;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1735
|
+
], template: "<article\n class=\"axp-entity-card\"\n role=\"button\"\n tabindex=\"0\"\n [class.axp-entity-card--selected]=\"selected()\"\n [class.axp-entity-card--new]=\"showNewBadge()\"\n [attr.aria-selected]=\"selected()\"\n (click)=\"onCardClick($event)\"\n (dblclick)=\"onCardDblClick($event)\"\n (keydown)=\"onCardKeydown($event)\"\n>\n <div class=\"axp-entity-card__header\">\n <div class=\"axp-entity-card__header-main\">\n <div class=\"axp-entity-card__header-text\">\n <div class=\"axp-entity-card__title-row\">\n @if (iconClass(); as icon) {\n <i [class]=\"icon + ' axp-entity-card__icon'\" aria-hidden=\"true\"></i>\n }\n\n <h3 class=\"axp-entity-card__title\" title=\"{{ titleText() | translate | async }}\">\n {{ titleText() | translate | async }}\n </h3>\n\n @if (showNewBadge()) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"('@acorex:dataTable.rowHighlight.new' | translate | async) || ''\"\n color=\"success\"\n />\n }\n\n @for (field of headerBadgeFields(); track field.name) {\n @if (isStatusBadgeField(field)) {\n <div class=\"axp-entity-card__header-badge\">\n <axp-widget-column-cell [node]=\"field.headerBadgeNode()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n } @else if (resolveBadgeText(field)) {\n <ax-badge\n class=\"axp-entity-card__header-badge\"\n [text]=\"resolveBadgeText(field)\"\n [color]=\"resolveBadgeColor(field)\"\n />\n }\n }\n </div>\n\n @if (descriptionText()) {\n <p class=\"axp-entity-card__description\" title=\"{{ descriptionText() | translate | async }}\">\n {{ descriptionText() | translate | async }}\n </p>\n }\n </div>\n </div>\n\n @if (showSelection() || secondaryActions().length) {\n <div class=\"axp-entity-card__header-actions\">\n @if (showSelection()) {\n <ax-check-box\n class=\"axp-entity-card__select-checkbox\"\n [value]=\"selected()\"\n (onValueChanged)=\"onSelectionCheckboxChange($event)\"\n (click)=\"onSelectionCheckboxClick($event)\"\n />\n } @else if (secondaryActions().length) {\n <ax-button [look]=\"'blank'\" [color]=\"'default'\" (onClick)=\"stopClickPropagation($event)\">\n <ax-prefix>\n <i class=\"fa-solid fa-ellipsis\" aria-hidden=\"true\"></i>\n </ax-prefix>\n\n <ax-dropdown-panel #panel>\n <ax-button-item-list>\n @for (item of secondaryActions(); track $index) {\n @if (item.divided) {\n <ax-divider />\n }\n <ax-button-item\n [text]=\"(item.title | translate | async)!\"\n [color]=\"item.color\"\n [disabled]=\"item.disabled\"\n (onClick)=\"onSecondaryActionClick(item, $event)\"\n >\n @if (item.icon) {\n <ax-prefix>\n <ax-icon icon=\"fa-light {{ item.icon }}\"></ax-icon>\n </ax-prefix>\n }\n </ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-panel>\n </ax-button>\n }\n </div>\n }\n </div>\n\n @if (showCardContent()) {\n @if (bodyFields().length) {\n <div class=\"axp-entity-card__fields grid grid-cols-12 gap-y-3 gap-x-4\">\n @for (field of bodyFields(); track field.name) {\n <div\n class=\"axp-entity-card__field col-span-12\"\n [axp-grid-layout]=\"field.layout ?? { positions: { sm: { colSpan: 12 } } }\"\n >\n <div class=\"axp-entity-card__field-row\">\n <span class=\"axp-entity-card__field-label\">{{ field.title | translate | async }}</span>\n\n <div class=\"axp-entity-card__field-value\">\n <axp-widget-column-cell [node]=\"field.node()\" [rowData]=\"row()\" [caption]=\"field.title\" />\n </div>\n </div>\n </div>\n }\n </div>\n }\n }\n\n @if (primaryActions().length) {\n <footer class=\"axp-entity-card__footer\">\n @for (action of primaryActions(); track $index) {\n <ax-button\n class=\"axp-entity-card__primary-action text-xs\"\n [class.flex-1]=\"!primaryActionsIconOnly()\"\n [look]=\"'outline'\"\n [color]=\"action.color\"\n [size]=\"'sm'\"\n [iconOnly]=\"primaryActionsIconOnly()\"\n [disabled]=\"action.disabled\"\n [text]=\"(action.title | translate | async)!\"\n (onClick)=\"onPrimaryActionClick(action.name, $event)\"\n >\n @if (action.icon) {\n <ax-prefix>\n <i class=\"fa-light {{ action.icon }}\"></i>\n </ax-prefix>\n }\n </ax-button>\n }\n </footer>\n }\n</article>\n", styles: ["@layer properties;:host{display:block;height:auto;width:100%}.axp-entity-card{display:flex;height:auto;width:100%;cursor:pointer;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4);border-radius:var(--radius-xl, .75rem);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lightest-surface));padding:calc(var(--spacing, .25rem) * 4);transition-property:box-shadow;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))}.axp-entity-card:hover{--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-entity-card:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px;outline-offset:2px;outline-color:rgba(var(--ax-sys-color-primary-500))}.axp-entity-card.axp-entity-card--selected{border-color:rgba(var(--ax-sys-color-primary-500));--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);box-shadow:0 0 0 1px rgb(var(--ax-sys-color-primary-500)/.25),0 2px 6px #0000000f}.axp-entity-card.axp-entity-card--new{border-color:rgb(var(--ax-sys-color-border-success-surface));box-shadow:0 0 0 1px rgb(var(--ax-sys-color-success-500)/.2)}.axp-entity-card .axp-entity-card__header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card .axp-entity-card__header-main{display:flex;min-width:0;flex:1;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card .axp-entity-card__header-text{display:flex;min-width:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card .axp-entity-card__title-row{display:flex;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-entity-card .axp-entity-card__select-checkbox,.axp-entity-card .axp-entity-card__header-badge{flex-shrink:0}.axp-entity-card .axp-entity-card__header-actions{display:flex;flex-shrink:0;align-items:center;gap:calc(var(--spacing, .25rem) * .5)}.axp-entity-card .axp-entity-card__title{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);--tw-font-weight: var(--font-weight-bold, 700);font-weight:var(--font-weight-bold, 700)}.axp-entity-card .axp-entity-card__icon{flex-shrink:0;font-size:var(--text-lg, 1.125rem);line-height:var(--tw-leading, var(--text-lg--line-height, calc(1.75 / 1.125)));color:var(--color-gray-500, oklch(55.1% .027 264.364))}.axp-entity-card .axp-entity-card__description{min-width:0;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-leading: var(--leading-snug, 1.375);line-height:var(--leading-snug, 1.375);color:rgba(var(--ax-sys-color-on-lightest-surface))}.axp-entity-card .axp-entity-card__fields{border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));padding-top:calc(var(--spacing, .25rem) * 4)}.axp-entity-card .axp-entity-card__field-row{display:grid;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3);grid-template-columns:auto minmax(0,1fr)}.axp-entity-card .axp-entity-card__field-label{flex-shrink:0;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);color:var(--color-gray-400, oklch(70.7% .022 261.325))}.axp-entity-card .axp-entity-card__field-value{max-width:100%;min-width:0;justify-self:flex-end;text-align:end;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-on-lightest-surface));width:fit-content}.axp-entity-card .axp-entity-card__field-value axp-widget-column-cell{display:block;max-width:100%}.axp-entity-card .axp-entity-card__footer{margin-inline:calc(var(--spacing, .25rem) * -4);margin-top:auto;margin-bottom:calc(var(--spacing, .25rem) * -4);display:flex;align-items:center;justify-content:flex-end;gap:calc(var(--spacing, .25rem) * 4);border-bottom-right-radius:var(--radius-xl, .75rem);border-bottom-left-radius:var(--radius-xl, .75rem);border-top-style:var(--tw-border-style);border-top-width:1px;border-color:rgba(var(--ax-sys-color-lightest-surface));background-color:rgba(var(--ax-sys-color-lighter-surface));padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);padding-top:calc(var(--spacing, .25rem) * 3)}.axp-entity-card .axp-entity-card__primary-action{min-width:0}@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;}@property --tw-outline-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-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-outline-style: solid;--tw-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1736
1736
|
}], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], row: [{ type: i0.Input, args: [{ isSignal: true, alias: "row", required: true }] }], selected: [{ type: i0.Input, args: [{ isSignal: true, alias: "selected", required: false }] }], showNewBadge: [{ type: i0.Input, args: [{ isSignal: true, alias: "showNewBadge", required: false }] }], showSelection: [{ type: i0.Input, args: [{ isSignal: true, alias: "showSelection", required: false }] }], selectionChange: [{ type: i0.Output, args: ["selectionChange"] }], commandClick: [{ type: i0.Output, args: ["commandClick"] }] } });
|
|
1737
1737
|
|
|
1738
1738
|
class AXPEntityMasterListCardListComponent {
|
|
@@ -1922,7 +1922,7 @@ class AXPEntityMasterListCardListComponent {
|
|
|
1922
1922
|
});
|
|
1923
1923
|
}
|
|
1924
1924
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardListComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1925
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardListComponent, isStandalone: true, selector: "axp-entity-master-list-card-list", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<div class=\"axp-entity-card-list\">\n @if (loading()) {\n <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n @for (index of skeletonPlaceholders(); track index) {\n <axp-entity-master-list-card-item-skeleton\n [fieldCount]=\"skeletonFieldCount()\"\n [badgeCount]=\"skeletonBadgeCount()\"\n [showContent]=\"vm().cardContentExpanded()\"\n [showFooter]=\"skeletonShowFooter()\"\n />\n }\n </div>\n } @else if (!items().length) {\n <div\n class=\"axp-entity-card-list__empty flex flex-col items-center justify-center flex-1 p-8 text-muted\"\n >\n <i class=\"fa-light fa-grid-2 text-3xl mb-2\" aria-hidden=\"true\"></i>\n <span>{{ '@general:terms.interface.no-items' | translate | async }}</span>\n </div>\n } @else {\n <div class=\"axp-entity-card-list__grid\">\n @for (row of items(); track trackRow($index, row)) {\n @if (row) {\n <axp-entity-master-list-card-item\n [vm]=\"vm()\"\n [row]=\"row\"\n [showSelection]=\"showSelection()\"\n [selected]=\"isRowSelected(row)\"\n [showNewBadge]=\"isRowHighlighted(row)\"\n (selectionChange)=\"onRowSelectionChange(row, $event)\"\n (commandClick)=\"onCommandClick($event, row)\"\n />\n }\n }\n </div>\n }\n\n <div\n class=\"axp-entity-card-list__pager border-t border-light\"\n [class.axp-entity-card-list__pager--compact]=\"deviceService.isSmall()\"\n >\n <ax-data-pager\n [displayMode]=\"pagerDisplayMode()\"\n [total]=\"totalCount()\"\n [size]=\"pageSize()\"\n [value]=\"pageIndex() + 1\"\n (onChanged)=\"onPageChanged($event)\"\n ></ax-data-pager>\n </div>\n</div>\n", styles: ["@layer properties;:host.axp-entity-list-host{display:flex;height:100%;min-height:0;flex-direction:column;overflow:hidden}.axp-entity-card-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-list__empty{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-lightest-surface))}.axp-entity-card-list__grid{display:grid;min-height:0;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);overflow:auto;align-content:start;align-items:start;grid-auto-rows:max-content}@media(width>=48rem){.axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list__pager{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-list__pager ax-data-pager{width:100%}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-prefix{display:flex;width:100%;justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-suffix{display:none}@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.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDataPagerModule }, { kind: "component", type: i1$3.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPEntityMasterListCardItemComponent, selector: "axp-entity-master-list-card-item", inputs: ["vm", "row", "selected", "showNewBadge", "showSelection"], outputs: ["selectionChange", "commandClick"] }, { kind: "component", type: AXPEntityMasterListCardItemSkeletonComponent, selector: "axp-entity-master-list-card-item-skeleton", inputs: ["fieldCount", "badgeCount", "showFooter", "showHeaderMenu", "showContent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1925
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPEntityMasterListCardListComponent, isStandalone: true, selector: "axp-entity-master-list-card-list", inputs: { vm: { classPropertyName: "vm", publicName: "vm", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { pageChanged: "pageChanged" }, ngImport: i0, template: "<div class=\"axp-entity-card-list\">\n @if (loading()) {\n <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n @for (index of skeletonPlaceholders(); track index) {\n <axp-entity-master-list-card-item-skeleton\n [fieldCount]=\"skeletonFieldCount()\"\n [badgeCount]=\"skeletonBadgeCount()\"\n [showContent]=\"vm().cardContentExpanded()\"\n [showFooter]=\"skeletonShowFooter()\"\n />\n }\n </div>\n } @else if (!items().length) {\n <div\n class=\"axp-entity-card-list__empty flex flex-col items-center justify-center flex-1 p-8 text-muted\"\n >\n <i class=\"fa-light fa-grid-2 text-3xl mb-2\" aria-hidden=\"true\"></i>\n <span>{{ '@general:terms.interface.no-items' | translate | async }}</span>\n </div>\n } @else {\n <div class=\"axp-entity-card-list__grid\">\n @for (row of items(); track trackRow($index, row)) {\n @if (row) {\n <axp-entity-master-list-card-item\n [vm]=\"vm()\"\n [row]=\"row\"\n [showSelection]=\"showSelection()\"\n [selected]=\"isRowSelected(row)\"\n [showNewBadge]=\"isRowHighlighted(row)\"\n (selectionChange)=\"onRowSelectionChange(row, $event)\"\n (commandClick)=\"onCommandClick($event, row)\"\n />\n }\n }\n </div>\n }\n\n <div\n class=\"axp-entity-card-list__pager border-t border-light\"\n [class.axp-entity-card-list__pager--compact]=\"deviceService.isSmall()\"\n >\n <ax-data-pager\n [displayMode]=\"pagerDisplayMode()\"\n [total]=\"totalCount()\"\n [size]=\"pageSize()\"\n [value]=\"pageIndex() + 1\"\n (onChanged)=\"onPageChanged($event)\"\n ></ax-data-pager>\n </div>\n</div>\n", styles: ["@layer properties;:host.axp-entity-list-host{display:flex;height:100%;min-height:0;flex-direction:column;overflow:hidden}.axp-entity-card-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-list .axp-entity-card-list__empty{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-lightest-surface))}.axp-entity-card-list .axp-entity-card-list__grid{display:grid;min-height:0;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);overflow:auto;align-content:start;align-items:start;grid-auto-rows:max-content}@media(width>=48rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list .axp-entity-card-list__pager{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-list .axp-entity-card-list__pager ax-data-pager{width:100%}.axp-entity-card-list .axp-entity-card-list__pager.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axp-entity-card-list .axp-entity-card-list__pager.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-prefix{display:flex;width:100%;justify-content:center}.axp-entity-card-list .axp-entity-card-list__pager.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-suffix{display:none}@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.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXDataPagerModule }, { kind: "component", type: i1$3.AXDataPagerComponent, selector: "ax-data-pager", inputs: ["value", "name", "disabled", "readonly", "isLoading", "size", "total", "displayMode"], outputs: ["valueChange", "onValueChanged", "disabledChange", "readonlyChange", "displayModeChange", "onChanged"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPEntityMasterListCardItemComponent, selector: "axp-entity-master-list-card-item", inputs: ["vm", "row", "selected", "showNewBadge", "showSelection"], outputs: ["selectionChange", "commandClick"] }, { kind: "component", type: AXPEntityMasterListCardItemSkeletonComponent, selector: "axp-entity-master-list-card-item-skeleton", inputs: ["fieldCount", "badgeCount", "showFooter", "showHeaderMenu", "showContent"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1926
1926
|
}
|
|
1927
1927
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPEntityMasterListCardListComponent, decorators: [{
|
|
1928
1928
|
type: Component,
|
|
@@ -1933,7 +1933,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
1933
1933
|
AXTranslationModule,
|
|
1934
1934
|
AXPEntityMasterListCardItemComponent,
|
|
1935
1935
|
AXPEntityMasterListCardItemSkeletonComponent,
|
|
1936
|
-
], template: "<div class=\"axp-entity-card-list\">\n @if (loading()) {\n <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n @for (index of skeletonPlaceholders(); track index) {\n <axp-entity-master-list-card-item-skeleton\n [fieldCount]=\"skeletonFieldCount()\"\n [badgeCount]=\"skeletonBadgeCount()\"\n [showContent]=\"vm().cardContentExpanded()\"\n [showFooter]=\"skeletonShowFooter()\"\n />\n }\n </div>\n } @else if (!items().length) {\n <div\n class=\"axp-entity-card-list__empty flex flex-col items-center justify-center flex-1 p-8 text-muted\"\n >\n <i class=\"fa-light fa-grid-2 text-3xl mb-2\" aria-hidden=\"true\"></i>\n <span>{{ '@general:terms.interface.no-items' | translate | async }}</span>\n </div>\n } @else {\n <div class=\"axp-entity-card-list__grid\">\n @for (row of items(); track trackRow($index, row)) {\n @if (row) {\n <axp-entity-master-list-card-item\n [vm]=\"vm()\"\n [row]=\"row\"\n [showSelection]=\"showSelection()\"\n [selected]=\"isRowSelected(row)\"\n [showNewBadge]=\"isRowHighlighted(row)\"\n (selectionChange)=\"onRowSelectionChange(row, $event)\"\n (commandClick)=\"onCommandClick($event, row)\"\n />\n }\n }\n </div>\n }\n\n <div\n class=\"axp-entity-card-list__pager border-t border-light\"\n [class.axp-entity-card-list__pager--compact]=\"deviceService.isSmall()\"\n >\n <ax-data-pager\n [displayMode]=\"pagerDisplayMode()\"\n [total]=\"totalCount()\"\n [size]=\"pageSize()\"\n [value]=\"pageIndex() + 1\"\n (onChanged)=\"onPageChanged($event)\"\n ></ax-data-pager>\n </div>\n</div>\n", styles: ["@layer properties;:host.axp-entity-list-host{display:flex;height:100%;min-height:0;flex-direction:column;overflow:hidden}.axp-entity-card-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-list__empty{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-lightest-surface))}.axp-entity-card-list__grid{display:grid;min-height:0;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);overflow:auto;align-content:start;align-items:start;grid-auto-rows:max-content}@media(width>=48rem){.axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list__pager{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-list__pager ax-data-pager{width:100%}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-prefix{display:flex;width:100%;justify-content:center}.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-suffix{display:none}@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.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1936
|
+
], template: "<div class=\"axp-entity-card-list\">\n @if (loading()) {\n <div class=\"axp-entity-card-list__grid\" aria-busy=\"true\" aria-live=\"polite\">\n @for (index of skeletonPlaceholders(); track index) {\n <axp-entity-master-list-card-item-skeleton\n [fieldCount]=\"skeletonFieldCount()\"\n [badgeCount]=\"skeletonBadgeCount()\"\n [showContent]=\"vm().cardContentExpanded()\"\n [showFooter]=\"skeletonShowFooter()\"\n />\n }\n </div>\n } @else if (!items().length) {\n <div\n class=\"axp-entity-card-list__empty flex flex-col items-center justify-center flex-1 p-8 text-muted\"\n >\n <i class=\"fa-light fa-grid-2 text-3xl mb-2\" aria-hidden=\"true\"></i>\n <span>{{ '@general:terms.interface.no-items' | translate | async }}</span>\n </div>\n } @else {\n <div class=\"axp-entity-card-list__grid\">\n @for (row of items(); track trackRow($index, row)) {\n @if (row) {\n <axp-entity-master-list-card-item\n [vm]=\"vm()\"\n [row]=\"row\"\n [showSelection]=\"showSelection()\"\n [selected]=\"isRowSelected(row)\"\n [showNewBadge]=\"isRowHighlighted(row)\"\n (selectionChange)=\"onRowSelectionChange(row, $event)\"\n (commandClick)=\"onCommandClick($event, row)\"\n />\n }\n }\n </div>\n }\n\n <div\n class=\"axp-entity-card-list__pager border-t border-light\"\n [class.axp-entity-card-list__pager--compact]=\"deviceService.isSmall()\"\n >\n <ax-data-pager\n [displayMode]=\"pagerDisplayMode()\"\n [total]=\"totalCount()\"\n [size]=\"pageSize()\"\n [value]=\"pageIndex() + 1\"\n (onChanged)=\"onPageChanged($event)\"\n ></ax-data-pager>\n </div>\n</div>\n", styles: ["@layer properties;:host.axp-entity-list-host{display:flex;height:100%;min-height:0;flex-direction:column;overflow:hidden}.axp-entity-card-list{display:flex;min-height:0;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * 4)}.axp-entity-card-list .axp-entity-card-list__empty{border-radius:var(--radius-lg, .5rem);border-style:var(--tw-border-style);border-width:1px;--tw-border-style: dashed;border-style:dashed;border-color:rgba(var(--ax-sys-color-lightest-surface))}.axp-entity-card-list .axp-entity-card-list__grid{display:grid;min-height:0;flex:1;grid-template-columns:repeat(1,minmax(0,1fr));gap:calc(var(--spacing, .25rem) * 4);overflow:auto;align-content:start;align-items:start;grid-auto-rows:max-content}@media(width>=48rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(width>=80rem){.axp-entity-card-list .axp-entity-card-list__grid{grid-template-columns:repeat(3,minmax(0,1fr))}}.axp-entity-card-list .axp-entity-card-list__pager{flex-shrink:0;padding-top:calc(var(--spacing, .25rem) * 2)}.axp-entity-card-list .axp-entity-card-list__pager ax-data-pager{width:100%}.axp-entity-card-list .axp-entity-card-list__pager.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager{justify-content:center}.axp-entity-card-list .axp-entity-card-list__pager.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-prefix{display:flex;width:100%;justify-content:center}.axp-entity-card-list .axp-entity-card-list__pager.axp-entity-card-list__pager--compact ::ng-deep ax-data-pager .compact-suffix{display:none}@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.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
1937
1937
|
}], ctorParameters: () => [], propDecorators: { vm: [{ type: i0.Input, args: [{ isSignal: true, alias: "vm", required: true }] }], pageChanged: [{ type: i0.Output, args: ["pageChanged"] }] } });
|
|
1938
1938
|
function getRowId(row, key) {
|
|
1939
1939
|
if (isRowRecord(row)) {
|
|
@@ -2661,15 +2661,13 @@ var entityMasterListView_component = /*#__PURE__*/Object.freeze({
|
|
|
2661
2661
|
|
|
2662
2662
|
class AXPRootLayoutFooterComponent {
|
|
2663
2663
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2664
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPRootLayoutFooterComponent, isStandalone: true, selector: "axp-dashboard-admin-footer", host: { classAttribute: "h-10 flex item-center justify-between bg-lighter border-lighter px-6 border-t" }, providers: [], ngImport: i0, template: "<div class=\"flex items-center justify-start gap-1\">\n <axp-component-slot name=\"root-footer-start\"></axp-component-slot>\n</div>\n<div class=\"flex items-center justify-end gap-1\">\n <axp-component-slot name=\"root-footer-end\"></axp-component-slot>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$5.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2664
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.2.9", type: AXPRootLayoutFooterComponent, isStandalone: true, selector: "axp-dashboard-admin-footer", host: { classAttribute: "h-10 flex item-center justify-between bg-lighter border-border-lighter px-6 border-t" }, providers: [], ngImport: i0, template: "<div class=\"flex items-center justify-start gap-1\">\n <axp-component-slot name=\"root-footer-start\"></axp-component-slot>\n</div>\n<div class=\"flex items-center justify-end gap-1\">\n <axp-component-slot name=\"root-footer-end\"></axp-component-slot>\n</div>\n", dependencies: [{ kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$5.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
2665
2665
|
}
|
|
2666
2666
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutFooterComponent, decorators: [{
|
|
2667
2667
|
type: Component,
|
|
2668
2668
|
args: [{ selector: 'axp-dashboard-admin-footer', encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [], host: {
|
|
2669
|
-
class: 'h-10 flex item-center justify-between bg-lighter border-lighter px-6 border-t',
|
|
2670
|
-
}, standalone: true, imports: [
|
|
2671
|
-
AXPComponentSlotModule
|
|
2672
|
-
], template: "<div class=\"flex items-center justify-start gap-1\">\n <axp-component-slot name=\"root-footer-start\"></axp-component-slot>\n</div>\n<div class=\"flex items-center justify-end gap-1\">\n <axp-component-slot name=\"root-footer-end\"></axp-component-slot>\n</div>\n" }]
|
|
2669
|
+
class: 'h-10 flex item-center justify-between bg-lighter border-border-lighter px-6 border-t',
|
|
2670
|
+
}, standalone: true, imports: [AXPComponentSlotModule], template: "<div class=\"flex items-center justify-start gap-1\">\n <axp-component-slot name=\"root-footer-start\"></axp-component-slot>\n</div>\n<div class=\"flex items-center justify-end gap-1\">\n <axp-component-slot name=\"root-footer-end\"></axp-component-slot>\n</div>\n" }]
|
|
2673
2671
|
}] });
|
|
2674
2672
|
|
|
2675
2673
|
//#region ---- Types ----
|
|
@@ -3086,7 +3084,7 @@ class AXPRouteTabBarComponent {
|
|
|
3086
3084
|
/** Scrolls the active tab into view when the strip overflows horizontally. */
|
|
3087
3085
|
#scrollActiveTabIntoView;
|
|
3088
3086
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRouteTabBarComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3089
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRouteTabBarComponent, isStandalone: true, selector: "axp-route-tab-bar", host: { properties: { "class.axp-route-tab-bar--scrollable": "hasHorizontalOverflow()" }, classAttribute: "axp-route-tab-bar" }, viewQueries: [{ propertyName: "tabStrip", first: true, predicate: ["tabStrip"], descendants: true, isSignal: true }, { propertyName: "tabsScroll", first: true, predicate: ["tabsScroll"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["tabContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (tabNavigation.isTabBarVisible()) {\n <div class=\"axp-route-tab-bar__strip\" #tabStrip [style.--axp-tab-width.px]=\"tabWidthPx()\">\n <div class=\"axp-route-tab-bar__viewport\">\n @if (canScrollBackward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--start\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n (click)=\"scrollTabs('backward')\"\n >\n <ax-icon [icon]=\"scrollBackwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n\n <div\n class=\"axp-route-tab-bar__scroll-wrap\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-start]=\"canScrollBackward()\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-end]=\"canScrollForward()\"\n >\n <div\n #tabsScroll\n class=\"axp-route-tab-bar__scroll\"\n [class.axp-route-tab-bar__scroll--panning]=\"isMiddlePanning()\"\n (mousedown)=\"onTabsScrollMouseDown($event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-list\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"tabNavigation.tabList()\"\n (cdkDropListDropped)=\"onTabDropped($event)\"\n >\n @for (tab of tabNavigation.tabList(); track tab.key) {\n @let tabTitle = (tab.title | translate | async) || '';\n @let tabTitleParts = resolveTabTitleParts(tab, tabTitle);\n @let isTabDirty = !!tabPreviewService.previews()[tab.key]?.isDirty;\n @let isTabActive = tabNavigation.activeKey() === tab.key;\n <ng-template #tabTitleTooltip>\n <div class=\"axp-route-tab-bar__title-tooltip\">\n <span class=\"axp-route-tab-bar__title-tooltip-prefix\">{{ tabTitleParts.prefix }}</span>\n <span class=\"axp-route-tab-bar__title-tooltip-leaf\">{{ tabTitleParts.leaf }}</span>\n @if (isTabDirty) {\n <span class=\"axp-route-tab-bar__title-tooltip-dirty\">\n {{ '@general:terms.interface.save-status.not-saved.description' | translate | async }}\n </span>\n }\n </div>\n </ng-template>\n <div\n class=\"axp-route-tab-bar__tab\"\n [class.axp-route-tab-bar__tab--active]=\"isTabActive\"\n [class.axp-route-tab-bar__tab--dirty]=\"isTabDirty\"\n [class.axp-route-tab-bar__tab--dragging]=\"isTabDragging()\"\n [attr.data-tab-key]=\"tab.key\"\n role=\"tab\"\n [attr.aria-selected]=\"isTabActive\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"tab\"\n [cdkDragDisabled]=\"isTabDragDisabled(tab)\"\n (cdkDragStarted)=\"onTabDragStarted()\"\n (cdkDragEnded)=\"onTabDragEnded()\"\n (click)=\"onTabActivate(tab, $event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-inner\"\n cdkDragHandle\n [axTooltip]=\"tabTitleTooltip\"\n [axTooltipOpenAfter]=\"tabTitleTooltipOpenAfterMs\"\n [axTooltipDisabled]=\"!tabTitleParts.prefix || isTabActive\"\n axTooltipPlacement=\"bottom\"\n [attr.aria-label]=\"isTabDirty ? ('@general:terms.interface.save-status.not-saved.title' | translate | async) : null\"\n (contextmenu)=\"openTabContextMenu($event, tab.key)\"\n (auxclick)=\"onTabMiddleClick(tab, $event)\"\n >\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n\n <span class=\"axp-route-tab-bar__tab-title-fade\" axpRouteTabTitleOverflow>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </span>\n\n @if (tab.pinned) {\n <span class=\"axp-route-tab-bar__pin\" aria-hidden=\"true\">\n <ax-icon icon=\"fa-solid fa-thumbtack\"></ax-icon>\n </span>\n } @else if (tab.closable) {\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__close\"\n [title]=\"'@general:actions.close-tab.title' | translate | async\"\n (click)=\"onTabCloseClick(tab, $event)\"\n >\n <ax-icon icon=\"far fa-xmark\"></ax-icon>\n </button>\n }\n </div>\n\n <ng-template cdkDragPreview>\n <div\n class=\"axp-route-tab-bar__drag-preview\"\n [class.axp-route-tab-bar__drag-preview--in-header]=\"inHeader()\"\n [class.axp-route-tab-bar__drag-preview--active]=\"isTabActive\"\n [class.axp-route-tab-bar__drag-preview--dirty]=\"isTabDirty\"\n [style.width.px]=\"tabWidthPx()\"\n >\n <div class=\"axp-route-tab-bar__drag-preview-inner\">\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </div>\n </div>\n </ng-template>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (canScrollForward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--end\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n (click)=\"scrollTabs('forward')\"\n >\n <ax-icon [icon]=\"scrollForwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n </div>\n </div>\n}\n\n<ax-context-menu\n #tabContextMenu\n [closeOn]=\"'click'\"\n [orientation]=\"'vertical'\"\n (onItemClick)=\"handleTabContextMenuItemClick($event)\"\n></ax-context-menu>\n", styles: ["axp-route-tab-bar{display:block;min-width:0;--axp-route-tab-bar-fade: var(--ax-sys-color-lightest-surface);--axp-route-tab-bar-chevron-size: 2rem}axp-route-tab-bar .axp-route-tab-bar__strip{display:flex;align-items:stretch;gap:.5rem;min-width:0}axp-route-tab-bar .axp-route-tab-bar__viewport{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;min-width:0;height:100%;gap:.25rem}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list{overflow:visible!important;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}axp-route-tab-bar .axp-route-tab-bar__scroll-rail{display:flex;flex:0 0 var(--axp-route-tab-bar-chevron-size);align-items:center;justify-content:center;align-self:center;width:var(--axp-route-tab-bar-chevron-size);min-width:var(--axp-route-tab-bar-chevron-size);height:var(--axp-route-tab-bar-tab-row-height, 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap{position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{content:\"\";position:absolute;inset-block:0;width:1.5rem;z-index:1;pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{inset-inline-start:0;background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-inline-end:0;background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll{width:100%;min-width:0;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;cursor:default;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning,axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}axp-route-tab-bar .axp-route-tab-bar__tabs-host{height:100%;min-width:0;width:max-content}axp-route-tab-bar .axp-route-tab-bar__tab-list{display:flex;flex:none;flex-wrap:nowrap;align-items:stretch;width:max-content;min-width:max-content;height:100%;gap:.5rem}axp-route-tab-bar .axp-route-tab-bar__tab{cursor:pointer;flex:0 0 var(--axp-tab-width, 5.5rem);width:var(--axp-tab-width, 5.5rem);min-width:var(--axp-tab-width, 5.5rem);max-width:var(--axp-tab-width, 5.5rem);height:100%;transform:translateY(0);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-disabled{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging,axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging .axp-route-tab-bar__tab-inner{cursor:grabbing}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-placeholder{opacity:.35}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-animating{transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab-list.cdk-drop-list-dragging .axp-route-tab-bar__tab:not(.cdk-drag-placeholder){transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__scroll-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:0;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.88;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}axp-route-tab-bar .axp-route-tab-bar__scroll-btn ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:hover{opacity:1}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{opacity:1;outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:1px}axp-route-tab-bar .axp-route-tab-bar__tab-inner{position:relative;display:flex;justify-content:space-between;width:100%;align-items:center;gap:.375rem;min-width:0;max-width:100%;height:100%;padding-inline:.625rem;cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab-inner.cdk-drag-handle{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab--dirty{position:relative}axp-route-tab-bar .axp-route-tab-bar__tab--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}axp-route-tab-bar .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade{position:relative;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__tab-title{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;line-height:1.25rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__pin{display:inline-flex;flex-shrink:0;color:inherit}axp-route-tab-bar .axp-route-tab-bar__pin ax-icon{font-size:.6875rem}axp-route-tab-bar .axp-route-tab-bar__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:0;height:1.25rem;margin:0;padding:0;overflow:hidden;border:none;background:transparent;color:inherit;border-radius:var(--ax-sys-border-radius);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .15s ease,width .15s ease,background-color .15s ease}axp-route-tab-bar .axp-route-tab-bar__close ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__tab:hover .axp-route-tab-bar__close,axp-route-tab-bar .axp-route-tab-bar__close:focus-visible{width:1.25rem;opacity:.72;pointer-events:auto}axp-route-tab-bar .axp-route-tab-bar__close:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header){border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__strip{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:.5rem}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header{align-self:stretch;height:100%;--axp-route-tab-bar-fade: var(--ax-sys-color-primary-surface);--axp-route-tab-bar-tab-row-height: 2.25rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__strip{display:flex;align-self:stretch;height:100%;align-items:stretch;background:transparent;color:rgb(var(--ax-sys-color-on-primary-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__viewport{align-items:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-rail{align-self:flex-end;margin-bottom:0}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-block-end:0;inset-block-start:auto;height:var(--axp-route-tab-bar-tab-row-height)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll{cursor:default}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab-list{align-self:stretch;align-items:flex-end;min-height:0;padding-top:1rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab{align-self:center;padding:0;border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab ax-icon{color:inherit}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}.cdk-drag-preview.axp-route-tab-bar__drag-preview{display:flex;align-items:center;box-sizing:border-box;height:var(--axp-route-tab-bar-tab-row-height, 2.25rem);opacity:.96;cursor:grabbing;box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.16),0 1px 3px rgb(var(--ax-sys-color-dark)/.12)}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__drag-preview-inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;height:100%;padding-inline:.625rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty{position:relative}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header{border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header){border-radius:var(--radius-md, .375rem);background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header).axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-route-tab-bar__title-tooltip{display:flex;flex-direction:column;gap:.25rem;max-width:20rem;padding:.75rem 1rem;text-align:start;border-radius:var(--ax-sys-border-radius);background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.12),0 1px 3px rgb(var(--ax-sys-color-dark)/.08)}.axp-route-tab-bar__title-tooltip-prefix{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;line-height:1rem;opacity:.82}.axp-route-tab-bar__title-tooltip-leaf{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-route-tab-bar__title-tooltip-dirty{margin-top:.25rem;padding-top:.5rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));font-size:.75rem;line-height:1.125rem;color:rgb(var(--ax-sys-color-warning-600))}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2$3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRouteTabBarComponent, isStandalone: true, selector: "axp-route-tab-bar", host: { properties: { "class.axp-route-tab-bar--scrollable": "hasHorizontalOverflow()" }, classAttribute: "axp-route-tab-bar" }, viewQueries: [{ propertyName: "tabStrip", first: true, predicate: ["tabStrip"], descendants: true, isSignal: true }, { propertyName: "tabsScroll", first: true, predicate: ["tabsScroll"], descendants: true, isSignal: true }, { propertyName: "contextMenu", first: true, predicate: ["tabContextMenu"], descendants: true, isSignal: true }], ngImport: i0, template: "@if (tabNavigation.isTabBarVisible()) {\n <div class=\"axp-route-tab-bar__strip\" #tabStrip [style.--axp-tab-width.px]=\"tabWidthPx()\">\n <div class=\"axp-route-tab-bar__viewport\">\n @if (canScrollBackward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--start\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n (click)=\"scrollTabs('backward')\"\n >\n <ax-icon [icon]=\"scrollBackwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n\n <div\n class=\"axp-route-tab-bar__scroll-wrap\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-start]=\"canScrollBackward()\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-end]=\"canScrollForward()\"\n >\n <div\n #tabsScroll\n class=\"axp-route-tab-bar__scroll\"\n [class.axp-route-tab-bar__scroll--panning]=\"isMiddlePanning()\"\n (mousedown)=\"onTabsScrollMouseDown($event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-list\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"tabNavigation.tabList()\"\n (cdkDropListDropped)=\"onTabDropped($event)\"\n >\n @for (tab of tabNavigation.tabList(); track tab.key) {\n @let tabTitle = (tab.title | translate | async) || '';\n @let tabTitleParts = resolveTabTitleParts(tab, tabTitle);\n @let isTabDirty = !!tabPreviewService.previews()[tab.key]?.isDirty;\n @let isTabActive = tabNavigation.activeKey() === tab.key;\n <ng-template #tabTitleTooltip>\n <div class=\"axp-route-tab-bar__title-tooltip\">\n <span class=\"axp-route-tab-bar__title-tooltip-prefix\">{{ tabTitleParts.prefix }}</span>\n <span class=\"axp-route-tab-bar__title-tooltip-leaf\">{{ tabTitleParts.leaf }}</span>\n @if (isTabDirty) {\n <span class=\"axp-route-tab-bar__title-tooltip-dirty\">\n {{ '@general:terms.interface.save-status.not-saved.description' | translate | async }}\n </span>\n }\n </div>\n </ng-template>\n <div\n class=\"axp-route-tab-bar__tab\"\n [class.axp-route-tab-bar__tab--active]=\"isTabActive\"\n [class.axp-route-tab-bar__tab--dirty]=\"isTabDirty\"\n [class.axp-route-tab-bar__tab--dragging]=\"isTabDragging()\"\n [attr.data-tab-key]=\"tab.key\"\n role=\"tab\"\n [attr.aria-selected]=\"isTabActive\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"tab\"\n [cdkDragDisabled]=\"isTabDragDisabled(tab)\"\n (cdkDragStarted)=\"onTabDragStarted()\"\n (cdkDragEnded)=\"onTabDragEnded()\"\n (click)=\"onTabActivate(tab, $event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-inner\"\n cdkDragHandle\n [axTooltip]=\"tabTitleTooltip\"\n [axTooltipOpenAfter]=\"tabTitleTooltipOpenAfterMs\"\n [axTooltipDisabled]=\"!tabTitleParts.prefix || isTabActive\"\n axTooltipPlacement=\"bottom\"\n [attr.aria-label]=\"isTabDirty ? ('@general:terms.interface.save-status.not-saved.title' | translate | async) : null\"\n (contextmenu)=\"openTabContextMenu($event, tab.key)\"\n (auxclick)=\"onTabMiddleClick(tab, $event)\"\n >\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n\n <span class=\"axp-route-tab-bar__tab-title-fade\" axpRouteTabTitleOverflow>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </span>\n\n @if (tab.pinned) {\n <span class=\"axp-route-tab-bar__pin\" aria-hidden=\"true\">\n <ax-icon icon=\"fa-solid fa-thumbtack\"></ax-icon>\n </span>\n } @else if (tab.closable) {\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__close\"\n [title]=\"'@general:actions.close-tab.title' | translate | async\"\n (click)=\"onTabCloseClick(tab, $event)\"\n >\n <ax-icon icon=\"far fa-xmark\"></ax-icon>\n </button>\n }\n </div>\n\n <ng-template cdkDragPreview>\n <div\n class=\"axp-route-tab-bar__drag-preview\"\n [class.axp-route-tab-bar__drag-preview--in-header]=\"inHeader()\"\n [class.axp-route-tab-bar__drag-preview--active]=\"isTabActive\"\n [class.axp-route-tab-bar__drag-preview--dirty]=\"isTabDirty\"\n [style.width.px]=\"tabWidthPx()\"\n >\n <div class=\"axp-route-tab-bar__drag-preview-inner\">\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </div>\n </div>\n </ng-template>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (canScrollForward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--end\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n (click)=\"scrollTabs('forward')\"\n >\n <ax-icon [icon]=\"scrollForwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n </div>\n </div>\n}\n\n<ax-context-menu\n #tabContextMenu\n [closeOn]=\"'click'\"\n [orientation]=\"'vertical'\"\n (onItemClick)=\"handleTabContextMenuItemClick($event)\"\n></ax-context-menu>\n", styles: ["@layer properties;axp-route-tab-bar{display:block;min-width:0;--axp-route-tab-bar-fade: var(--ax-sys-color-lightest-surface);--axp-route-tab-bar-chevron-size: 2rem}axp-route-tab-bar .axp-route-tab-bar__strip{display:flex;min-width:0;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}axp-route-tab-bar .axp-route-tab-bar__viewport{display:flex;height:100%;min-width:0;flex:auto;flex-direction:row;align-items:center;gap:var(--spacing, .25rem)}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list{overflow:visible!important;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}axp-route-tab-bar .axp-route-tab-bar__scroll-rail{display:flex;align-items:center;justify-content:center;align-self:center;flex:0 0 var(--axp-route-tab-bar-chevron-size);width:var(--axp-route-tab-bar-chevron-size);min-width:var(--axp-route-tab-bar-chevron-size);height:var(--axp-route-tab-bar-tab-row-height, 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap{position:relative;height:100%;min-width:0;flex:auto;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-end:after{pointer-events:none;position:absolute;z-index:1;content:\"\";inset-block:0;width:1.5rem}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-start:before{inset-inline-start:0;background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-inline-end:0;background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll{height:100%;width:100%;min-width:0;cursor:default;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning,axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}axp-route-tab-bar .axp-route-tab-bar__tabs-host{height:100%;min-width:0;width:max-content}axp-route-tab-bar .axp-route-tab-bar__tab-list{display:flex;height:100%;width:max-content;min-width:max-content;flex:none;flex-wrap:nowrap;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}axp-route-tab-bar .axp-route-tab-bar__tab-list.cdk-drop-list-dragging .axp-route-tab-bar__tab:not(.cdk-drag-placeholder){transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab{height:100%;cursor:pointer;flex:0 0 var(--axp-tab-width, 5.5rem);width:var(--axp-tab-width, 5.5rem);min-width:var(--axp-tab-width, 5.5rem);max-width:var(--axp-tab-width, 5.5rem);transform:translateY(0);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-disabled{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging,axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging .axp-route-tab-bar__tab-inner{cursor:grabbing}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-placeholder{opacity:.35}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-animating{transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab:hover .axp-route-tab-bar__close,axp-route-tab-bar .axp-route-tab-bar__tab .axp-route-tab-bar__close:focus-visible{pointer-events:auto;width:1.25rem;opacity:.72}axp-route-tab-bar .axp-route-tab-bar__scroll-btn{margin:0;display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;color:inherit;opacity:.88;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}axp-route-tab-bar .axp-route-tab-bar__scroll-btn ax-icon{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:hover,axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{opacity:1}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:1px}axp-route-tab-bar .axp-route-tab-bar__tab-inner{position:relative;display:flex;height:100%;width:100%;max-width:100%;min-width:0;cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:.625rem}axp-route-tab-bar .axp-route-tab-bar__tab-inner.cdk-drag-handle{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab--dirty{position:relative}axp-route-tab-bar .axp-route-tab-bar__tab--dirty:before{pointer-events:none;position:absolute;inset:0;z-index:1;content:\"\";border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500))}axp-route-tab-bar .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}axp-route-tab-bar .axp-route-tab-bar__tab-icon ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade{position:relative;max-width:100%;min-width:0;flex:auto;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade.axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__tab-title{display:block;width:100%;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}axp-route-tab-bar .axp-route-tab-bar__pin{display:inline-flex;flex-shrink:0;color:inherit}axp-route-tab-bar .axp-route-tab-bar__pin ax-icon{font-size:.6875rem}axp-route-tab-bar .axp-route-tab-bar__close{margin:0;display:inline-flex;height:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;width:0;color:inherit;border-radius:var(--ax-sys-border-radius);opacity:0;pointer-events:none;transition:opacity .15s ease,width .15s ease,background-color .15s ease}axp-route-tab-bar .axp-route-tab-bar__close ax-icon{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-route-tab-bar .axp-route-tab-bar__close:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header){border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__strip{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:.5rem}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header{height:100%;align-self:stretch;--axp-route-tab-bar-fade: var(--ax-sys-color-primary-surface);--axp-route-tab-bar-tab-row-height: 2.25rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__strip{display:flex;height:100%;align-items:stretch;align-self:stretch;background-color:transparent;color:rgb(var(--ax-sys-color-on-primary-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__viewport{align-items:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-rail{margin-bottom:0;align-self:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-block-end:0;inset-block-start:auto;height:var(--axp-route-tab-bar-tab-row-height)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll{cursor:default}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab-list{min-height:0;align-items:flex-end;align-self:stretch;padding-top:calc(var(--spacing, .25rem) * 4)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab{align-self:center;border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark);padding:0}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab ax-icon{color:inherit}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}.cdk-drag-preview.axp-route-tab-bar__drag-preview{box-sizing:border-box;display:flex;cursor:grabbing;align-items:center;height:var(--axp-route-tab-bar-tab-row-height, 2.25rem);opacity:.96;box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.16),0 1px 3px rgb(var(--ax-sys-color-dark)/.12)}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__drag-preview-inner{display:flex;height:100%;width:100%;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:.625rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-title{min-width:0;flex:auto;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty{position:relative}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty:before{pointer-events:none;position:absolute;inset:0;z-index:1;content:\"\";border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500))}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header{border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header){border-radius:var(--radius-md, .375rem);background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header).axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-route-tab-bar__title-tooltip{display:flex;max-width:calc(var(--spacing, .25rem) * 80);flex-direction:column;gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;border-radius:var(--ax-sys-border-radius);background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.12),0 1px 3px rgb(var(--ax-sys-color-dark)/.08)}.axp-route-tab-bar__title-tooltip-prefix{display:block;overflow:hidden;font-size:.6875rem;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);text-overflow:ellipsis;white-space:nowrap;opacity:.82}.axp-route-tab-bar__title-tooltip-leaf{display:block;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.axp-route-tab-bar__title-tooltip-dirty{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top: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-leading: 1.125rem;line-height:1.125rem;border-color:rgb(var(--ax-sys-color-border-light-surface));color:rgb(var(--ax-sys-color-warning-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "directive", type: CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "directive", type: CdkDragHandle, selector: "[cdkDragHandle]", inputs: ["cdkDragHandleDisabled"] }, { kind: "directive", type: CdkDragPreview, selector: "ng-template[cdkDragPreview]", inputs: ["data", "matchSize"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXTooltipModule }, { kind: "directive", type: i2$3.AXTooltipDirective, selector: "[axTooltip]", inputs: ["axTooltipDisabled", "axTooltip", "axTooltipContext", "axTooltipPlacement", "axTooltipOffsetX", "axTooltipOffsetY", "axTooltipOpenAfter", "axTooltipCloseAfter"] }, { kind: "component", type: AXContextMenuComponent, selector: "ax-context-menu", inputs: ["orientation", "openOn", "closeOn", "closeOnRouteChange", "items", "target"], outputs: ["onItemClick", "onOpening", "onClose"] }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3090
3088
|
}
|
|
3091
3089
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRouteTabBarComponent, decorators: [{
|
|
3092
3090
|
type: Component,
|
|
@@ -3103,7 +3101,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3103
3101
|
AXTooltipModule,
|
|
3104
3102
|
AXContextMenuComponent,
|
|
3105
3103
|
AsyncPipe,
|
|
3106
|
-
], template: "@if (tabNavigation.isTabBarVisible()) {\n <div class=\"axp-route-tab-bar__strip\" #tabStrip [style.--axp-tab-width.px]=\"tabWidthPx()\">\n <div class=\"axp-route-tab-bar__viewport\">\n @if (canScrollBackward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--start\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n (click)=\"scrollTabs('backward')\"\n >\n <ax-icon [icon]=\"scrollBackwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n\n <div\n class=\"axp-route-tab-bar__scroll-wrap\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-start]=\"canScrollBackward()\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-end]=\"canScrollForward()\"\n >\n <div\n #tabsScroll\n class=\"axp-route-tab-bar__scroll\"\n [class.axp-route-tab-bar__scroll--panning]=\"isMiddlePanning()\"\n (mousedown)=\"onTabsScrollMouseDown($event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-list\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"tabNavigation.tabList()\"\n (cdkDropListDropped)=\"onTabDropped($event)\"\n >\n @for (tab of tabNavigation.tabList(); track tab.key) {\n @let tabTitle = (tab.title | translate | async) || '';\n @let tabTitleParts = resolveTabTitleParts(tab, tabTitle);\n @let isTabDirty = !!tabPreviewService.previews()[tab.key]?.isDirty;\n @let isTabActive = tabNavigation.activeKey() === tab.key;\n <ng-template #tabTitleTooltip>\n <div class=\"axp-route-tab-bar__title-tooltip\">\n <span class=\"axp-route-tab-bar__title-tooltip-prefix\">{{ tabTitleParts.prefix }}</span>\n <span class=\"axp-route-tab-bar__title-tooltip-leaf\">{{ tabTitleParts.leaf }}</span>\n @if (isTabDirty) {\n <span class=\"axp-route-tab-bar__title-tooltip-dirty\">\n {{ '@general:terms.interface.save-status.not-saved.description' | translate | async }}\n </span>\n }\n </div>\n </ng-template>\n <div\n class=\"axp-route-tab-bar__tab\"\n [class.axp-route-tab-bar__tab--active]=\"isTabActive\"\n [class.axp-route-tab-bar__tab--dirty]=\"isTabDirty\"\n [class.axp-route-tab-bar__tab--dragging]=\"isTabDragging()\"\n [attr.data-tab-key]=\"tab.key\"\n role=\"tab\"\n [attr.aria-selected]=\"isTabActive\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"tab\"\n [cdkDragDisabled]=\"isTabDragDisabled(tab)\"\n (cdkDragStarted)=\"onTabDragStarted()\"\n (cdkDragEnded)=\"onTabDragEnded()\"\n (click)=\"onTabActivate(tab, $event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-inner\"\n cdkDragHandle\n [axTooltip]=\"tabTitleTooltip\"\n [axTooltipOpenAfter]=\"tabTitleTooltipOpenAfterMs\"\n [axTooltipDisabled]=\"!tabTitleParts.prefix || isTabActive\"\n axTooltipPlacement=\"bottom\"\n [attr.aria-label]=\"isTabDirty ? ('@general:terms.interface.save-status.not-saved.title' | translate | async) : null\"\n (contextmenu)=\"openTabContextMenu($event, tab.key)\"\n (auxclick)=\"onTabMiddleClick(tab, $event)\"\n >\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n\n <span class=\"axp-route-tab-bar__tab-title-fade\" axpRouteTabTitleOverflow>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </span>\n\n @if (tab.pinned) {\n <span class=\"axp-route-tab-bar__pin\" aria-hidden=\"true\">\n <ax-icon icon=\"fa-solid fa-thumbtack\"></ax-icon>\n </span>\n } @else if (tab.closable) {\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__close\"\n [title]=\"'@general:actions.close-tab.title' | translate | async\"\n (click)=\"onTabCloseClick(tab, $event)\"\n >\n <ax-icon icon=\"far fa-xmark\"></ax-icon>\n </button>\n }\n </div>\n\n <ng-template cdkDragPreview>\n <div\n class=\"axp-route-tab-bar__drag-preview\"\n [class.axp-route-tab-bar__drag-preview--in-header]=\"inHeader()\"\n [class.axp-route-tab-bar__drag-preview--active]=\"isTabActive\"\n [class.axp-route-tab-bar__drag-preview--dirty]=\"isTabDirty\"\n [style.width.px]=\"tabWidthPx()\"\n >\n <div class=\"axp-route-tab-bar__drag-preview-inner\">\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </div>\n </div>\n </ng-template>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (canScrollForward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--end\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n (click)=\"scrollTabs('forward')\"\n >\n <ax-icon [icon]=\"scrollForwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n </div>\n </div>\n}\n\n<ax-context-menu\n #tabContextMenu\n [closeOn]=\"'click'\"\n [orientation]=\"'vertical'\"\n (onItemClick)=\"handleTabContextMenuItemClick($event)\"\n></ax-context-menu>\n", styles: ["axp-route-tab-bar{display:block;min-width:0;--axp-route-tab-bar-fade: var(--ax-sys-color-lightest-surface);--axp-route-tab-bar-chevron-size: 2rem}axp-route-tab-bar .axp-route-tab-bar__strip{display:flex;align-items:stretch;gap:.5rem;min-width:0}axp-route-tab-bar .axp-route-tab-bar__viewport{display:flex;flex-direction:row;align-items:center;flex:1 1 auto;min-width:0;height:100%;gap:.25rem}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list{overflow:visible!important;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}axp-route-tab-bar .axp-route-tab-bar__scroll-rail{display:flex;flex:0 0 var(--axp-route-tab-bar-chevron-size);align-items:center;justify-content:center;align-self:center;width:var(--axp-route-tab-bar-chevron-size);min-width:var(--axp-route-tab-bar-chevron-size);height:var(--axp-route-tab-bar-tab-row-height, 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap{position:relative;flex:1 1 auto;min-width:0;height:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{content:\"\";position:absolute;inset-block:0;width:1.5rem;z-index:1;pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{inset-inline-start:0;background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-inline-end:0;background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll{width:100%;min-width:0;height:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;cursor:default;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning,axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning *{cursor:grabbing!important;-webkit-user-select:none;user-select:none}axp-route-tab-bar .axp-route-tab-bar__tabs-host{height:100%;min-width:0;width:max-content}axp-route-tab-bar .axp-route-tab-bar__tab-list{display:flex;flex:none;flex-wrap:nowrap;align-items:stretch;width:max-content;min-width:max-content;height:100%;gap:.5rem}axp-route-tab-bar .axp-route-tab-bar__tab{cursor:pointer;flex:0 0 var(--axp-tab-width, 5.5rem);width:var(--axp-tab-width, 5.5rem);min-width:var(--axp-tab-width, 5.5rem);max-width:var(--axp-tab-width, 5.5rem);height:100%;transform:translateY(0);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-disabled{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging,axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging .axp-route-tab-bar__tab-inner{cursor:grabbing}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-placeholder{opacity:.35}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-animating{transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab-list.cdk-drop-list-dragging .axp-route-tab-bar__tab:not(.cdk-drag-placeholder){transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__scroll-btn{display:inline-flex;align-items:center;justify-content:center;width:1.5rem;height:1.5rem;margin:0;padding:0;border:none;background:transparent;color:inherit;cursor:pointer;opacity:.88;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}axp-route-tab-bar .axp-route-tab-bar__scroll-btn ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:hover{opacity:1}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{opacity:1;outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:1px}axp-route-tab-bar .axp-route-tab-bar__tab-inner{position:relative;display:flex;justify-content:space-between;width:100%;align-items:center;gap:.375rem;min-width:0;max-width:100%;height:100%;padding-inline:.625rem;cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab-inner.cdk-drag-handle{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab--dirty{position:relative}axp-route-tab-bar .axp-route-tab-bar__tab--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}axp-route-tab-bar .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}axp-route-tab-bar .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade{position:relative;flex:1 1 auto;min-width:0;max-width:100%;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__tab-title{display:block;width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:.875rem;line-height:1.25rem}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__pin{display:inline-flex;flex-shrink:0;color:inherit}axp-route-tab-bar .axp-route-tab-bar__pin ax-icon{font-size:.6875rem}axp-route-tab-bar .axp-route-tab-bar__close{display:inline-flex;flex-shrink:0;align-items:center;justify-content:center;width:0;height:1.25rem;margin:0;padding:0;overflow:hidden;border:none;background:transparent;color:inherit;border-radius:var(--ax-sys-border-radius);opacity:0;pointer-events:none;cursor:pointer;transition:opacity .15s ease,width .15s ease,background-color .15s ease}axp-route-tab-bar .axp-route-tab-bar__close ax-icon{font-size:.75rem}axp-route-tab-bar .axp-route-tab-bar__tab:hover .axp-route-tab-bar__close,axp-route-tab-bar .axp-route-tab-bar__close:focus-visible{width:1.25rem;opacity:.72;pointer-events:auto}axp-route-tab-bar .axp-route-tab-bar__close:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header){border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__strip{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:.5rem}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header{align-self:stretch;height:100%;--axp-route-tab-bar-fade: var(--ax-sys-color-primary-surface);--axp-route-tab-bar-tab-row-height: 2.25rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__strip{display:flex;align-self:stretch;height:100%;align-items:stretch;background:transparent;color:rgb(var(--ax-sys-color-on-primary-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__viewport{align-items:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-rail{align-self:flex-end;margin-bottom:0}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-block-end:0;inset-block-start:auto;height:var(--axp-route-tab-bar-tab-row-height)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll{cursor:default}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab-list{align-self:stretch;align-items:flex-end;min-height:0;padding-top:1rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab{align-self:center;padding:0;border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab ax-icon{color:inherit}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}.cdk-drag-preview.axp-route-tab-bar__drag-preview{display:flex;align-items:center;box-sizing:border-box;height:var(--axp-route-tab-bar-tab-row-height, 2.25rem);opacity:.96;cursor:grabbing;box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.16),0 1px 3px rgb(var(--ax-sys-color-dark)/.12)}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__drag-preview-inner{display:flex;align-items:center;gap:.5rem;width:100%;min-width:0;height:100%;padding-inline:.625rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon ax-icon{font-size:.875rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-title{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty{position:relative}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty:before{content:\"\";position:absolute;inset:0;z-index:1;border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500));pointer-events:none}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header{border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header){border-radius:var(--radius-md, .375rem);background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header).axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-route-tab-bar__title-tooltip{display:flex;flex-direction:column;gap:.25rem;max-width:20rem;padding:.75rem 1rem;text-align:start;border-radius:var(--ax-sys-border-radius);background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.12),0 1px 3px rgb(var(--ax-sys-color-dark)/.08)}.axp-route-tab-bar__title-tooltip-prefix{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.6875rem;line-height:1rem;opacity:.82}.axp-route-tab-bar__title-tooltip-leaf{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;line-height:1.25rem;font-weight:500}.axp-route-tab-bar__title-tooltip-dirty{margin-top:.25rem;padding-top:.5rem;border-top:1px solid rgb(var(--ax-sys-color-border-light-surface));font-size:.75rem;line-height:1.125rem;color:rgb(var(--ax-sys-color-warning-600))}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3104
|
+
], template: "@if (tabNavigation.isTabBarVisible()) {\n <div class=\"axp-route-tab-bar__strip\" #tabStrip [style.--axp-tab-width.px]=\"tabWidthPx()\">\n <div class=\"axp-route-tab-bar__viewport\">\n @if (canScrollBackward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--start\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-back.title' | translate | async\"\n (click)=\"scrollTabs('backward')\"\n >\n <ax-icon [icon]=\"scrollBackwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n\n <div\n class=\"axp-route-tab-bar__scroll-wrap\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-start]=\"canScrollBackward()\"\n [class.axp-route-tab-bar__scroll-wrap--overflow-end]=\"canScrollForward()\"\n >\n <div\n #tabsScroll\n class=\"axp-route-tab-bar__scroll\"\n [class.axp-route-tab-bar__scroll--panning]=\"isMiddlePanning()\"\n (mousedown)=\"onTabsScrollMouseDown($event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-list\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n [cdkDropListData]=\"tabNavigation.tabList()\"\n (cdkDropListDropped)=\"onTabDropped($event)\"\n >\n @for (tab of tabNavigation.tabList(); track tab.key) {\n @let tabTitle = (tab.title | translate | async) || '';\n @let tabTitleParts = resolveTabTitleParts(tab, tabTitle);\n @let isTabDirty = !!tabPreviewService.previews()[tab.key]?.isDirty;\n @let isTabActive = tabNavigation.activeKey() === tab.key;\n <ng-template #tabTitleTooltip>\n <div class=\"axp-route-tab-bar__title-tooltip\">\n <span class=\"axp-route-tab-bar__title-tooltip-prefix\">{{ tabTitleParts.prefix }}</span>\n <span class=\"axp-route-tab-bar__title-tooltip-leaf\">{{ tabTitleParts.leaf }}</span>\n @if (isTabDirty) {\n <span class=\"axp-route-tab-bar__title-tooltip-dirty\">\n {{ '@general:terms.interface.save-status.not-saved.description' | translate | async }}\n </span>\n }\n </div>\n </ng-template>\n <div\n class=\"axp-route-tab-bar__tab\"\n [class.axp-route-tab-bar__tab--active]=\"isTabActive\"\n [class.axp-route-tab-bar__tab--dirty]=\"isTabDirty\"\n [class.axp-route-tab-bar__tab--dragging]=\"isTabDragging()\"\n [attr.data-tab-key]=\"tab.key\"\n role=\"tab\"\n [attr.aria-selected]=\"isTabActive\"\n cdkDrag\n cdkDragLockAxis=\"x\"\n [cdkDragData]=\"tab\"\n [cdkDragDisabled]=\"isTabDragDisabled(tab)\"\n (cdkDragStarted)=\"onTabDragStarted()\"\n (cdkDragEnded)=\"onTabDragEnded()\"\n (click)=\"onTabActivate(tab, $event)\"\n >\n <div\n class=\"axp-route-tab-bar__tab-inner\"\n cdkDragHandle\n [axTooltip]=\"tabTitleTooltip\"\n [axTooltipOpenAfter]=\"tabTitleTooltipOpenAfterMs\"\n [axTooltipDisabled]=\"!tabTitleParts.prefix || isTabActive\"\n axTooltipPlacement=\"bottom\"\n [attr.aria-label]=\"isTabDirty ? ('@general:terms.interface.save-status.not-saved.title' | translate | async) : null\"\n (contextmenu)=\"openTabContextMenu($event, tab.key)\"\n (auxclick)=\"onTabMiddleClick(tab, $event)\"\n >\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n\n <span class=\"axp-route-tab-bar__tab-title-fade\" axpRouteTabTitleOverflow>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </span>\n\n @if (tab.pinned) {\n <span class=\"axp-route-tab-bar__pin\" aria-hidden=\"true\">\n <ax-icon icon=\"fa-solid fa-thumbtack\"></ax-icon>\n </span>\n } @else if (tab.closable) {\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__close\"\n [title]=\"'@general:actions.close-tab.title' | translate | async\"\n (click)=\"onTabCloseClick(tab, $event)\"\n >\n <ax-icon icon=\"far fa-xmark\"></ax-icon>\n </button>\n }\n </div>\n\n <ng-template cdkDragPreview>\n <div\n class=\"axp-route-tab-bar__drag-preview\"\n [class.axp-route-tab-bar__drag-preview--in-header]=\"inHeader()\"\n [class.axp-route-tab-bar__drag-preview--active]=\"isTabActive\"\n [class.axp-route-tab-bar__drag-preview--dirty]=\"isTabDirty\"\n [style.width.px]=\"tabWidthPx()\"\n >\n <div class=\"axp-route-tab-bar__drag-preview-inner\">\n <span class=\"axp-route-tab-bar__tab-icon\" aria-hidden=\"true\">\n <ax-icon [icon]=\"resolveTabIcon(tab)\"></ax-icon>\n </span>\n <span class=\"axp-route-tab-bar__tab-title\">{{ tabTitleParts.leaf }}</span>\n </div>\n </div>\n </ng-template>\n </div>\n }\n </div>\n </div>\n </div>\n\n @if (canScrollForward()) {\n <div class=\"axp-route-tab-bar__scroll-rail axp-route-tab-bar__scroll-rail--end\">\n <button\n type=\"button\"\n class=\"axp-route-tab-bar__scroll-btn\"\n [title]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n [attr.aria-label]=\"'@general:actions.scroll-tabs-forward.title' | translate | async\"\n (click)=\"scrollTabs('forward')\"\n >\n <ax-icon [icon]=\"scrollForwardIcon()\"></ax-icon>\n </button>\n </div>\n }\n </div>\n </div>\n}\n\n<ax-context-menu\n #tabContextMenu\n [closeOn]=\"'click'\"\n [orientation]=\"'vertical'\"\n (onItemClick)=\"handleTabContextMenuItemClick($event)\"\n></ax-context-menu>\n", styles: ["@layer properties;axp-route-tab-bar{display:block;min-width:0;--axp-route-tab-bar-fade: var(--ax-sys-color-lightest-surface);--axp-route-tab-bar-chevron-size: 2rem}axp-route-tab-bar .axp-route-tab-bar__strip{display:flex;min-width:0;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}axp-route-tab-bar .axp-route-tab-bar__viewport{display:flex;height:100%;min-width:0;flex:auto;flex-direction:row;align-items:center;gap:var(--spacing, .25rem)}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list{overflow:visible!important;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport ax-tabs .tabs-scroll-area::-webkit-scrollbar,axp-route-tab-bar .axp-route-tab-bar__viewport .axp-route-tab-bar__tab-list::-webkit-scrollbar{display:none!important;width:0!important;height:0!important}axp-route-tab-bar .axp-route-tab-bar__scroll-rail{display:flex;align-items:center;justify-content:center;align-self:center;flex:0 0 var(--axp-route-tab-bar-chevron-size);width:var(--axp-route-tab-bar-chevron-size);min-width:var(--axp-route-tab-bar-chevron-size);height:var(--axp-route-tab-bar-tab-row-height, 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap{position:relative;height:100%;min-width:0;flex:auto;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-end:after{pointer-events:none;position:absolute;z-index:1;content:\"\";inset-block:0;width:1.5rem}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-start:before{inset-inline-start:0;background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll-wrap.axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-inline-end:0;background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__scroll{height:100%;width:100%;min-width:0;cursor:default;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none!important;-ms-overflow-style:none!important}axp-route-tab-bar .axp-route-tab-bar__scroll::-webkit-scrollbar{display:none!important;width:0!important;height:0!important;background:transparent!important}axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning,axp-route-tab-bar .axp-route-tab-bar__scroll.axp-route-tab-bar__scroll--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}axp-route-tab-bar .axp-route-tab-bar__tabs-host{height:100%;min-width:0;width:max-content}axp-route-tab-bar .axp-route-tab-bar__tab-list{display:flex;height:100%;width:max-content;min-width:max-content;flex:none;flex-wrap:nowrap;align-items:stretch;gap:calc(var(--spacing, .25rem) * 2)}axp-route-tab-bar .axp-route-tab-bar__tab-list.cdk-drop-list-dragging .axp-route-tab-bar__tab:not(.cdk-drag-placeholder){transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab{height:100%;cursor:pointer;flex:0 0 var(--axp-tab-width, 5.5rem);width:var(--axp-tab-width, 5.5rem);min-width:var(--axp-tab-width, 5.5rem);max-width:var(--axp-tab-width, 5.5rem);transform:translateY(0);transition:background-color .15s ease,color .15s ease,border-color .15s ease,transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-disabled{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging,axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-dragging .axp-route-tab-bar__tab-inner{cursor:grabbing}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-placeholder{opacity:.35}axp-route-tab-bar .axp-route-tab-bar__tab.cdk-drag-animating{transition:transform .22s cubic-bezier(.4,0,.2,1)}axp-route-tab-bar .axp-route-tab-bar__tab:hover .axp-route-tab-bar__close,axp-route-tab-bar .axp-route-tab-bar__tab .axp-route-tab-bar__close:focus-visible{pointer-events:auto;width:1.25rem;opacity:.72}axp-route-tab-bar .axp-route-tab-bar__scroll-btn{margin:0;display:inline-flex;height:calc(var(--spacing, .25rem) * 6);width:calc(var(--spacing, .25rem) * 6);cursor:pointer;align-items:center;justify-content:center;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;color:inherit;opacity:.88;border-radius:var(--ax-sys-border-radius);transition:opacity .15s ease}axp-route-tab-bar .axp-route-tab-bar__scroll-btn ax-icon{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:hover,axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{opacity:1}axp-route-tab-bar .axp-route-tab-bar__scroll-btn:focus-visible{outline:2px solid rgb(var(--ax-sys-color-primary-500));outline-offset:1px}axp-route-tab-bar .axp-route-tab-bar__tab-inner{position:relative;display:flex;height:100%;width:100%;max-width:100%;min-width:0;cursor:pointer;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 1.5);padding-inline:.625rem}axp-route-tab-bar .axp-route-tab-bar__tab-inner.cdk-drag-handle{cursor:pointer}axp-route-tab-bar .axp-route-tab-bar__tab--dirty{position:relative}axp-route-tab-bar .axp-route-tab-bar__tab--dirty:before{pointer-events:none;position:absolute;inset:0;z-index:1;content:\"\";border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500))}axp-route-tab-bar .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}axp-route-tab-bar .axp-route-tab-bar__tab-icon ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade{position:relative;max-width:100%;min-width:0;flex:auto;overflow:hidden}axp-route-tab-bar .axp-route-tab-bar__tab-title-fade.axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to right,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}axp-route-tab-bar .axp-route-tab-bar__tab-title{display:block;width:100%;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}axp-route-tab-bar .axp-route-tab-bar__pin{display:inline-flex;flex-shrink:0;color:inherit}axp-route-tab-bar .axp-route-tab-bar__pin ax-icon{font-size:.6875rem}axp-route-tab-bar .axp-route-tab-bar__close{margin:0;display:inline-flex;height:calc(var(--spacing, .25rem) * 5);flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;overflow:hidden;border-style:var(--tw-border-style);border-width:0px;background-color:transparent;padding:0;width:0;color:inherit;border-radius:var(--ax-sys-border-radius);opacity:0;pointer-events:none;transition:opacity .15s ease,width .15s ease,background-color .15s ease}axp-route-tab-bar .axp-route-tab-bar__close ax-icon{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)))}axp-route-tab-bar .axp-route-tab-bar__close:hover{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header){border-bottom:1px solid rgb(var(--ax-sys-color-border-light-surface))}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__strip{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-inline:.5rem}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab{background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-light);color:var(--color-on-light);border-color:var(--color-border-light)}axp-route-tab-bar:not(.axp-route-tab-bar--in-header) .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header{height:100%;align-self:stretch;--axp-route-tab-bar-fade: var(--ax-sys-color-primary-surface);--axp-route-tab-bar-tab-row-height: 2.25rem}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__strip{display:flex;height:100%;align-items:stretch;align-self:stretch;background-color:transparent;color:rgb(var(--ax-sys-color-on-primary-surface))}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__viewport{align-items:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-rail{margin-bottom:0;align-self:flex-end}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-start:before,axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll-wrap--overflow-end:after{inset-block-end:0;inset-block-start:auto;height:var(--axp-route-tab-bar-tab-row-height)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__scroll{cursor:default}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab-list{min-height:0;align-items:flex-end;align-self:stretch;padding-top:calc(var(--spacing, .25rem) * 4)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab{align-self:center;border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark);padding:0}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab ax-icon{color:inherit}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab:hover:not(.axp-route-tab-bar__tab--active){background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}axp-route-tab-bar.axp-route-tab-bar--in-header .axp-route-tab-bar__tab.axp-route-tab-bar__tab--active .axp-route-tab-bar__close:hover{background-color:var(--color-primary-light);color:var(--color-on-primary-light);border-color:var(--color-border-primary-light)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-start:before{background:linear-gradient(to left,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__scroll-wrap--overflow-end:after{background:linear-gradient(to right,rgb(var(--axp-route-tab-bar-fade)) 0%,rgb(var(--axp-route-tab-bar-fade)/.72) 35%,transparent 100%)}[dir=rtl] axp-route-tab-bar .axp-route-tab-bar__tab-title-fade--overflowing .axp-route-tab-bar__tab-title{-webkit-mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%);mask-image:linear-gradient(to left,#000 0,#000 calc(100% - 1.25rem),transparent 100%)}.cdk-drag-preview.axp-route-tab-bar__drag-preview{box-sizing:border-box;display:flex;cursor:grabbing;align-items:center;height:var(--axp-route-tab-bar-tab-row-height, 2.25rem);opacity:.96;box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.16),0 1px 3px rgb(var(--ax-sys-color-dark)/.12)}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__drag-preview-inner{display:flex;height:100%;width:100%;min-width:0;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:.625rem}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon{display:inline-flex;flex-shrink:0}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-icon ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}.cdk-drag-preview.axp-route-tab-bar__drag-preview .axp-route-tab-bar__tab-title{min-width:0;flex:auto;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);text-overflow:ellipsis;white-space:nowrap}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty{position:relative}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--dirty:before{pointer-events:none;position:absolute;inset:0;z-index:1;content:\"\";border-radius:inherit;border-top:2px solid rgb(var(--ax-sys-color-warning-500))}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header{border-top-left-radius:var(--radius-lg, .5rem);border-top-right-radius:var(--radius-lg, .5rem);border-bottom-right-radius:0;border-bottom-left-radius:0;background-color:var(--color-primary-dark);color:var(--color-on-primary-dark);border-color:var(--color-border-primary-dark)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview.axp-route-tab-bar__drag-preview--in-header.axp-route-tab-bar__drag-preview--active:where(.ax-dark,.ax-dark *):not(:where(.ax-light,.ax-light *)){background-color:var(--color-primary-darkest);color:var(--color-on-primary-darkest);border-color:var(--color-border-primary-darkest)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header){border-radius:var(--radius-md, .375rem);background-color:var(--color-lighter);color:var(--color-on-lighter);border-color:var(--color-border-lighter)}.cdk-drag-preview.axp-route-tab-bar__drag-preview:not(.axp-route-tab-bar__drag-preview--in-header).axp-route-tab-bar__drag-preview--active{background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest)}.axp-route-tab-bar__title-tooltip{display:flex;max-width:calc(var(--spacing, .25rem) * 80);flex-direction:column;gap:var(--spacing, .25rem);padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 3);text-align:start;border-radius:var(--ax-sys-border-radius);background:rgb(var(--ax-sys-color-lightest-surface));color:rgb(var(--ax-sys-color-on-lightest-surface));box-shadow:0 4px 12px rgb(var(--ax-sys-color-dark)/.12),0 1px 3px rgb(var(--ax-sys-color-dark)/.08)}.axp-route-tab-bar__title-tooltip-prefix{display:block;overflow:hidden;font-size:.6875rem;--tw-leading: calc(var(--spacing, .25rem) * 4);line-height:calc(var(--spacing, .25rem) * 4);text-overflow:ellipsis;white-space:nowrap;opacity:.82}.axp-route-tab-bar__title-tooltip-leaf{display:block;overflow:hidden;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-leading: calc(var(--spacing, .25rem) * 5);line-height:calc(var(--spacing, .25rem) * 5);--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);text-overflow:ellipsis;white-space:nowrap}.axp-route-tab-bar__title-tooltip-dirty{margin-top:var(--spacing, .25rem);border-top-style:var(--tw-border-style);border-top-width:1px;padding-top: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-leading: 1.125rem;line-height:1.125rem;border-color:rgb(var(--ax-sys-color-border-light-surface));color:rgb(var(--ax-sys-color-warning-600))}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-leading: initial;--tw-font-weight: initial}}}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3107
3105
|
}], propDecorators: { tabStrip: [{ type: i0.ViewChild, args: ['tabStrip', { isSignal: true }] }], tabsScroll: [{ type: i0.ViewChild, args: ['tabsScroll', { isSignal: true }] }], contextMenu: [{ type: i0.ViewChild, args: ['tabContextMenu', { isSignal: true }] }] } });
|
|
3108
3106
|
|
|
3109
3107
|
class AXPRootLayoutHeaderComponent {
|
|
@@ -3167,7 +3165,10 @@ class AXPRootLayoutMenuComponent {
|
|
|
3167
3165
|
this.themeStore = inject(AXPLayoutThemeService);
|
|
3168
3166
|
this.sessionService = inject(AXPSessionService);
|
|
3169
3167
|
/** Re-evaluate permission/feature-gated menu items when session policies reload. */
|
|
3170
|
-
this.accessPolicyRevision = toSignal(combineLatest([
|
|
3168
|
+
this.accessPolicyRevision = toSignal(combineLatest([
|
|
3169
|
+
this.sessionService.permissions$,
|
|
3170
|
+
this.sessionService.features$,
|
|
3171
|
+
]).pipe(map(([permissions, features]) => `${permissions.length}:${features.length}`)), { initialValue: '0:0' });
|
|
3171
3172
|
//#endregion
|
|
3172
3173
|
//#region ---- Component State ----
|
|
3173
3174
|
this.badgeVisible = signal(true, ...(ngDevMode ? [{ debugName: "badgeVisible" }] : /* istanbul ignore next */ []));
|
|
@@ -3270,8 +3271,12 @@ class AXPRootLayoutMenuComponent {
|
|
|
3270
3271
|
if (item.type !== 'break' || !items || index < 0) {
|
|
3271
3272
|
return false;
|
|
3272
3273
|
}
|
|
3273
|
-
const hasVisibleBefore = items
|
|
3274
|
-
|
|
3274
|
+
const hasVisibleBefore = items
|
|
3275
|
+
.slice(0, index)
|
|
3276
|
+
.some((i) => this.isItemRendered(i));
|
|
3277
|
+
const hasVisibleAfter = items
|
|
3278
|
+
.slice(index + 1)
|
|
3279
|
+
.some((i) => this.isItemRendered(i));
|
|
3275
3280
|
return hasVisibleBefore && hasVisibleAfter;
|
|
3276
3281
|
}
|
|
3277
3282
|
//#endregion
|
|
@@ -3294,7 +3299,10 @@ class AXPRootLayoutMenuComponent {
|
|
|
3294
3299
|
return this.router.parseUrl(routePath);
|
|
3295
3300
|
}
|
|
3296
3301
|
catch (error) {
|
|
3297
|
-
console.warn('Failed to create router link for menu item.', {
|
|
3302
|
+
console.warn('Failed to create router link for menu item.', {
|
|
3303
|
+
item,
|
|
3304
|
+
error,
|
|
3305
|
+
});
|
|
3298
3306
|
return null;
|
|
3299
3307
|
}
|
|
3300
3308
|
}
|
|
@@ -3311,7 +3319,8 @@ class AXPRootLayoutMenuComponent {
|
|
|
3311
3319
|
return null;
|
|
3312
3320
|
}
|
|
3313
3321
|
const navigateCommand = command;
|
|
3314
|
-
if (navigateCommand?.type === 'router' &&
|
|
3322
|
+
if (navigateCommand?.type === 'router' &&
|
|
3323
|
+
typeof navigateCommand.options?.path === 'string') {
|
|
3315
3324
|
return {
|
|
3316
3325
|
path: navigateCommand.options.path,
|
|
3317
3326
|
extras: navigateCommand.options.extras,
|
|
@@ -3354,7 +3363,11 @@ class AXPRootLayoutMenuComponent {
|
|
|
3354
3363
|
if (extras.target === 'blank') {
|
|
3355
3364
|
return false;
|
|
3356
3365
|
}
|
|
3357
|
-
const unsupportedKeys = [
|
|
3366
|
+
const unsupportedKeys = [
|
|
3367
|
+
'skipLocationChange',
|
|
3368
|
+
'replaceUrl',
|
|
3369
|
+
'state',
|
|
3370
|
+
];
|
|
3358
3371
|
return !unsupportedKeys.some((key) => extras[key] !== undefined);
|
|
3359
3372
|
}
|
|
3360
3373
|
/**
|
|
@@ -3366,7 +3379,9 @@ class AXPRootLayoutMenuComponent {
|
|
|
3366
3379
|
if (!trimmed.length) {
|
|
3367
3380
|
return trimmed;
|
|
3368
3381
|
}
|
|
3369
|
-
if (trimmed.startsWith('/') ||
|
|
3382
|
+
if (trimmed.startsWith('/') ||
|
|
3383
|
+
trimmed.startsWith('?') ||
|
|
3384
|
+
trimmed.startsWith('#')) {
|
|
3370
3385
|
return trimmed;
|
|
3371
3386
|
}
|
|
3372
3387
|
return `/${trimmed}`;
|
|
@@ -3376,7 +3391,7 @@ class AXPRootLayoutMenuComponent {
|
|
|
3376
3391
|
return lowerPath.startsWith('http://') || lowerPath.startsWith('https://');
|
|
3377
3392
|
}
|
|
3378
3393
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutMenuComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3379
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootLayoutMenuComponent, isStandalone: true, selector: "axp-side-menu", ngImport: i0, template: "<ax-side-menu
|
|
3394
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootLayoutMenuComponent, isStandalone: true, selector: "axp-side-menu", ngImport: i0, template: "<ax-side-menu [mode]=\"menuMode()\" [attr.data-access-policy]=\"accessPolicyRevision()\">\n @let sortedItems = sort(menuStore.items());\n @for (item of sortedItems; track item; let i = $index) {\n <ng-container\n [ngTemplateOutlet]=\"recursiveMenu\"\n [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"\n >\n </ng-container>\n }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\" let-items=\"items\" let-index=\"index\">\n @if (item.type == 'group' && menuMode() === 'full') {\n @if (isItemVisible(item)) {\n <ax-title>{{ item.text | translate | async }}</ax-title>\n }\n } @else if (item.type == 'break') {\n @if (shouldShowDivider(item, items, index)) {\n <ax-divider></ax-divider>\n }\n } @else {\n @if (shouldRenderMenuItem(item)) {\n <ax-side-menu-item\n [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n (onClick)=\"onMenuItemClick(item)\"\n [active]=\"isMenuItemActive(item)\"\n [isCollapsed]=\"isMenuItemCollapsed(item)\"\n >\n <ax-prefix>\n <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n </ax-prefix>\n <span>{{ item.text | translate | async }}</span>\n @if (item.children?.length) {\n <ng-container>\n @let sortedChildren = sort(item.children);\n @for (child of sortedChildren; track child; let childIndex = $index) {\n <ng-container\n [ngTemplateOutlet]=\"recursiveMenu\"\n [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\"\n >\n </ng-container>\n }\n </ng-container>\n }\n <ax-suffix>\n @if (badgeVisible()) {\n <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n }\n </ax-suffix>\n </ax-side-menu-item>\n }\n }\n</ng-template>\n", styles: ["axp-side-menu{--ax-comp-side-menu-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-side-menu-active-text-color: var(--ax-sys-color-on-primary-surface)}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1$1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "component", type: i2$4.AXSideMenuComponent, selector: "ax-side-menu", inputs: ["items", "look", "location", "mode"], outputs: ["itemsChange"] }, { kind: "component", type: i2$4.AXSideMenuItemComponent, selector: "ax-side-menu-item", inputs: ["disabled", "text", "active", "isLoading", "isCollapsed", "toggleOnClick", "href", "routerLink", "routerLinkActive", "routerLinkActiveOptions", "target"], outputs: ["textChange", "activeChange", "isLoadingChange", "isCollapsedChange", "onClick"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "directive", type: AXPTaskBadgeDirective, selector: "[axp-task-badge]", inputs: ["badgeKey", "axp-task-badge"] }, { 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: AXBadgeModule }, { kind: "component", type: i1$2.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1$1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3$1.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3380
3395
|
}
|
|
3381
3396
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootLayoutMenuComponent, decorators: [{
|
|
3382
3397
|
type: Component,
|
|
@@ -3387,7 +3402,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3387
3402
|
AXPTaskBadgeDirective,
|
|
3388
3403
|
AXDecoratorModule,
|
|
3389
3404
|
AXBadgeModule,
|
|
3390
|
-
], template: "<ax-side-menu
|
|
3405
|
+
], template: "<ax-side-menu [mode]=\"menuMode()\" [attr.data-access-policy]=\"accessPolicyRevision()\">\n @let sortedItems = sort(menuStore.items());\n @for (item of sortedItems; track item; let i = $index) {\n <ng-container\n [ngTemplateOutlet]=\"recursiveMenu\"\n [ngTemplateOutletContext]=\"{ item: item, items: sortedItems, index: i }\"\n >\n </ng-container>\n }\n</ax-side-menu>\n<ng-template #recursiveMenu let-item=\"item\" let-items=\"items\" let-index=\"index\">\n @if (item.type == 'group' && menuMode() === 'full') {\n @if (isItemVisible(item)) {\n <ax-title>{{ item.text | translate | async }}</ax-title>\n }\n } @else if (item.type == 'break') {\n @if (shouldShowDivider(item, items, index)) {\n <ax-divider></ax-divider>\n }\n } @else {\n @if (shouldRenderMenuItem(item)) {\n <ax-side-menu-item\n [attr.id]=\"'axp-menu-item-' + (item.name || item.text)\"\n (onClick)=\"onMenuItemClick(item)\"\n [active]=\"isMenuItemActive(item)\"\n [isCollapsed]=\"isMenuItemCollapsed(item)\"\n >\n <ax-prefix>\n <ax-icon [class]=\"item.icon\" class=\"fa-fw\"></ax-icon>\n </ax-prefix>\n <span>{{ item.text | translate | async }}</span>\n @if (item.children?.length) {\n <ng-container>\n @let sortedChildren = sort(item.children);\n @for (child of sortedChildren; track child; let childIndex = $index) {\n <ng-container\n [ngTemplateOutlet]=\"recursiveMenu\"\n [ngTemplateOutletContext]=\"{ item: child, items: sortedChildren, index: childIndex }\"\n >\n </ng-container>\n }\n </ng-container>\n }\n <ax-suffix>\n @if (badgeVisible()) {\n <ax-badge [axp-task-badge]=\"getMenuBadge(item)()\" color=\"secondary\"></ax-badge>\n }\n </ax-suffix>\n </ax-side-menu-item>\n }\n }\n</ng-template>\n", styles: ["axp-side-menu{--ax-comp-side-menu-active-bg-color: var(--ax-sys-color-primary-surface);--ax-comp-side-menu-active-text-color: var(--ax-sys-color-on-primary-surface)}\n"] }]
|
|
3391
3406
|
}] });
|
|
3392
3407
|
|
|
3393
3408
|
class AXPHorizontalMenuComponent {
|
|
@@ -3649,7 +3664,7 @@ class AXPRootVerticalLayoutComponent {
|
|
|
3649
3664
|
this.store.closeSideMenu();
|
|
3650
3665
|
}
|
|
3651
3666
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootVerticalLayoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3652
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootVerticalLayoutComponent, isStandalone: true, selector: "axp-root-vertical-layout", ngImport: i0, template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"drawerKey === 'push'\"\n class=\"border-lighter bg-lighter dark:border-darkest dark:bg-darkest h-full flex! flex-col\"\n [class.w-[75%]]=\"drawerKey === 'overlay'\"\n [width]=\"store.sideMenuDrawerWidth()\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"handleBackdropClick()\"\n backdropClass=\"bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light h-14 flex items-center justify-center bg-primary-500 text-primary-on-surface border-e border-primary-600\"\n >\n <axp-logo\n logoKey=\"platform\"\n appearance=\"onDark\"\n format=\"full\"\n [size]=\"160\"\n ></axp-logo>\n </ax-header>\n <ax-content\n class=\"flex flex-col border-e h-full overflow-y-auto overflow-x-hidden\"\n >\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"p-4 block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n }\n <ax-content\n class=\"flex flex-col relative bg-lightest dark:bg-lighter overflow-auto\"\n >\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header\n id=\"axp-main-header\"\n class=\"light-surface\"\n ></axp-dashboard-admin-header>\n\n <div class=\"flex-1 overflow-auto relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-component-slot name=\"root-layout-overlay\"></axp-component-slot>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:var(--spacing, .25rem);width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200))}@supports (color: color-mix(in lab,red,red)){.axp-navigating-progress{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-200)) 40%,transparent)}}.axp-navigating-progress>div{height:100%;width:100%;background-color:rgba(var(--ax-sys-color-primary-500));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{background-color:rgba(var(--ax-sys-color-primary-500));color:rgba(var(--ax-sys-color-on-primary-dark-surface))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$4.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPRootLayoutHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "component", type: AXPRootLayoutMenuComponent, selector: "axp-side-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$5.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3667
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPRootVerticalLayoutComponent, isStandalone: true, selector: "axp-root-vertical-layout", ngImport: i0, template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"drawerKey === 'push'\"\n class=\"border-border-lighter bg-lighter dark:border-darkest dark:bg-darkest h-full flex! flex-col\"\n [class.w-[75%]]=\"drawerKey === 'overlay'\"\n [width]=\"store.sideMenuDrawerWidth()\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"handleBackdropClick()\"\n backdropClass=\"bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light h-14 flex items-center justify-center bg-primary-500 text-primary-on-surface border-e border-primary-600\"\n >\n <axp-logo\n logoKey=\"platform\"\n appearance=\"onDark\"\n format=\"full\"\n [size]=\"160\"\n ></axp-logo>\n </ax-header>\n <ax-content\n class=\"flex flex-col border-e h-full overflow-y-auto overflow-x-hidden\"\n >\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"p-4 block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n }\n <ax-content\n class=\"flex flex-col relative bg-lightest dark:bg-lighter overflow-auto\"\n >\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header\n id=\"axp-main-header\"\n class=\"light-surface\"\n ></axp-dashboard-admin-header>\n\n <div class=\"flex-1 overflow-auto relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-component-slot name=\"root-layout-overlay\"></axp-component-slot>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:var(--spacing, .25rem);width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200))}@supports (color: color-mix(in lab,red,red)){.axp-navigating-progress{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-200)) 40%,transparent)}}.axp-navigating-progress>div{height:100%;width:100%;background-color:rgba(var(--ax-sys-color-primary-500));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{background-color:rgba(var(--ax-sys-color-primary-500));color:rgba(var(--ax-sys-color-on-primary-dark-surface))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: RouterModule }, { kind: "directive", type: i1$6.RouterOutlet, selector: "router-outlet", inputs: ["name", "routerOutletData"], outputs: ["activate", "deactivate", "attach", "detach"], exportAs: ["outlet"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "ngmodule", type: AXTranslationModule }, { 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: AXDropdownModule }, { kind: "ngmodule", type: AXAvatarModule }, { kind: "ngmodule", type: AXImageModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "ngmodule", type: AXTabsModule }, { kind: "ngmodule", type: AXDrawerModule }, { kind: "component", type: i3$4.AXDrawerComponent, selector: "ax-drawer", inputs: ["location", "showBackdrop", "mode", "transition", "closeOnBackdropClick", "backdropClass", "collapsed", "singleOpenMode"], outputs: ["onBackdropClick", "collapsedStateChanged"] }, { kind: "component", type: i3$4.AXDrawerContainerComponent, selector: "ax-drawer-container" }, { kind: "ngmodule", type: AXSideMenuModule }, { kind: "ngmodule", type: AXLoadingModule }, { kind: "component", type: AXPLogoComponent, selector: "axp-logo", inputs: ["logoKey", "appearance", "size", "format"] }, { kind: "ngmodule", type: AXPAuthModule }, { kind: "directive", type: AXResizableDirective, selector: "[axResizable]", inputs: ["axResizable", "minWidth", "maxWidth", "dblClickAction", "width", "defaultWidth"], outputs: ["axResizableChange", "minWidthChange", "maxWidthChange", "dblClickActionChange", "widthChange", "defaultWidthChange", "onResizingStarted", "onResizingEnded", "onResizingDblClick"] }, { kind: "component", type: AXPRootLayoutFooterComponent, selector: "axp-dashboard-admin-footer" }, { kind: "component", type: AXPRootLayoutHeaderComponent, selector: "axp-dashboard-admin-header" }, { kind: "component", type: AXPRootLayoutMenuComponent, selector: "axp-side-menu" }, { kind: "ngmodule", type: AXPComponentSlotModule }, { kind: "directive", type: i1$5.AXPComponentSlotDirective, selector: "axp-component-slot", inputs: ["name", "host", "context"], exportAs: ["slot"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
3653
3668
|
}
|
|
3654
3669
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPRootVerticalLayoutComponent, decorators: [{
|
|
3655
3670
|
type: Component,
|
|
@@ -3676,7 +3691,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
|
|
|
3676
3691
|
AXPRootLayoutHeaderComponent,
|
|
3677
3692
|
AXPRootLayoutMenuComponent,
|
|
3678
3693
|
AXPComponentSlotModule,
|
|
3679
|
-
], template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"drawerKey === 'push'\"\n class=\"border-lighter bg-lighter dark:border-darkest dark:bg-darkest h-full flex! flex-col\"\n [class.w-[75%]]=\"drawerKey === 'overlay'\"\n [width]=\"store.sideMenuDrawerWidth()\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"handleBackdropClick()\"\n backdropClass=\"bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light h-14 flex items-center justify-center bg-primary-500 text-primary-on-surface border-e border-primary-600\"\n >\n <axp-logo\n logoKey=\"platform\"\n appearance=\"onDark\"\n format=\"full\"\n [size]=\"160\"\n ></axp-logo>\n </ax-header>\n <ax-content\n class=\"flex flex-col border-e h-full overflow-y-auto overflow-x-hidden\"\n >\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"p-4 block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n }\n <ax-content\n class=\"flex flex-col relative bg-lightest dark:bg-lighter overflow-auto\"\n >\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header\n id=\"axp-main-header\"\n class=\"light-surface\"\n ></axp-dashboard-admin-header>\n\n <div class=\"flex-1 overflow-auto relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-component-slot name=\"root-layout-overlay\"></axp-component-slot>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:var(--spacing, .25rem);width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200))}@supports (color: color-mix(in lab,red,red)){.axp-navigating-progress{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-200)) 40%,transparent)}}.axp-navigating-progress>div{height:100%;width:100%;background-color:rgba(var(--ax-sys-color-primary-500));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{background-color:rgba(var(--ax-sys-color-primary-500));color:rgba(var(--ax-sys-color-on-primary-dark-surface))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3694
|
+
], template: "<div id=\"axp-root-layout\" class=\"axp-root-layout\">\n <ax-drawer-container>\n @for (drawerKey of [sideMenuDrawerKey()]; track drawerKey) {\n <ax-drawer\n id=\"axp-side-menu-drawer\"\n [axResizable]=\"drawerKey === 'push'\"\n class=\"border-border-lighter bg-lighter dark:border-darkest dark:bg-darkest h-full flex! flex-col\"\n [class.w-[75%]]=\"drawerKey === 'overlay'\"\n [width]=\"store.sideMenuDrawerWidth()\"\n location=\"start\"\n [collapsed]=\"!store.isSideMenuOpen()\"\n [closeOnBackdropClick]=\"false\"\n [defaultWidth]=\"store.sideMenuDrawerWidth()\"\n [mode]=\"drawerKey === 'overlay' ? 'overlay' : 'push'\"\n [dblClickAction]=\"'fit'\"\n (onResizingEnded)=\"handleResizingEnded($event)\"\n (onResizingDblClick)=\"handleResizingEnded($event)\"\n (onBackdropClick)=\"handleBackdropClick()\"\n backdropClass=\"bg-black/50\"\n >\n <ax-header\n id=\"axp-side-menu-header\"\n class=\"ax-light h-14 flex items-center justify-center bg-primary-500 text-primary-on-surface border-e border-primary-600\"\n >\n <axp-logo\n logoKey=\"platform\"\n appearance=\"onDark\"\n format=\"full\"\n [size]=\"160\"\n ></axp-logo>\n </ax-header>\n <ax-content\n class=\"flex flex-col border-e h-full overflow-y-auto overflow-x-hidden\"\n >\n <axp-component-slot name=\"root-side-menu-header\"></axp-component-slot>\n <div class=\"flex-1\">\n <axp-side-menu id=\"axp-side-menu\" class=\"p-4 block\"></axp-side-menu>\n </div>\n <axp-component-slot name=\"root-side-menu-footer\"></axp-component-slot>\n </ax-content>\n </ax-drawer>\n }\n <ax-content\n class=\"flex flex-col relative bg-lightest dark:bg-lighter overflow-auto\"\n >\n @if (store.isNavigationLoading()) {\n <div class=\"axp-navigating-progress\">\n <div></div>\n </div>\n }\n <axp-dashboard-admin-header\n id=\"axp-main-header\"\n class=\"light-surface\"\n ></axp-dashboard-admin-header>\n\n <div class=\"flex-1 overflow-auto relative\">\n <router-outlet></router-outlet>\n </div>\n </ax-content>\n </ax-drawer-container>\n <axp-component-slot name=\"root-layout-overlay\"></axp-component-slot>\n <axp-dashboard-admin-footer id=\"axp-main-footer\"></axp-dashboard-admin-footer>\n</div>\n", styles: [".axp-root-layout{display:flex;height:100%;width:100%;flex-direction:column;justify-content:space-between}#axp-side-menu-drawer{box-sizing:border-box}.axp-navigating-progress{position:absolute;top:0;height:var(--spacing, .25rem);width:100%;overflow:hidden;background-color:rgba(var(--ax-sys-color-primary-200))}@supports (color: color-mix(in lab,red,red)){.axp-navigating-progress{background-color:color-mix(in oklab,rgba(var(--ax-sys-color-primary-200)) 40%,transparent)}}.axp-navigating-progress>div{height:100%;width:100%;background-color:rgba(var(--ax-sys-color-primary-500));animation:indeterminateAnimation 1.5s infinite cubic-bezier(.65,.815,.735,.395);transform-origin:0% 50%}@keyframes indeterminateAnimation{0%{transform:translate(-100%) scaleX(.2)}50%{transform:translate(50%) scaleX(.6)}to{transform:translate(100%) scaleX(.4)}}axp-dashboard-admin-header{background-color:rgba(var(--ax-sys-color-primary-500));color:rgba(var(--ax-sys-color-on-primary-dark-surface))}axp-dashboard-admin-header ax-button{--ax-comp-button-normal-bg-color: 0, 0, 0, 0 !important;--ax-comp-button-border-width: 0 !important;--ax-comp-button-normal-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-hover-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-focus-text-color: var(--axp-on-brand-color) !important;--ax-comp-button-pressed-text-color: var(--axp-on-brand-color) !important}.resize-handle{background-color:transparent!important}.resize-handle:hover{background-color:rgba(var(--ax-sys-color-primary-surface))!important}\n/*! tailwindcss v4.3.2 | MIT License | https://tailwindcss.com */\n"] }]
|
|
3680
3695
|
}], ctorParameters: () => [] });
|
|
3681
3696
|
|
|
3682
3697
|
class AXPRootLayoutComponent {
|