@acorex-platform/framework-client 2.0.0-next.1 → 2.0.0-next.10
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-common.mjs +320 -166
- package/fesm2022/acorex-platform-framework-client-common.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-core.mjs +7 -2
- package/fesm2022/acorex-platform-framework-client-core.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-components.mjs +107 -15
- package/fesm2022/acorex-platform-framework-client-layout-components.mjs.map +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-DToXUL54.mjs → acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-Dj1zqE3r.mjs} +456 -169
- package/fesm2022/acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-Dj1zqE3r.mjs.map +1 -0
- package/fesm2022/{acorex-platform-framework-client-layout-entity-attachments-page.component-DqssRhIG.mjs → acorex-platform-framework-client-layout-entity-attachments-page.component-Dv0qPsuq.mjs} +2 -2
- package/fesm2022/{acorex-platform-framework-client-layout-entity-attachments-page.component-DqssRhIG.mjs.map → acorex-platform-framework-client-layout-entity-attachments-page.component-Dv0qPsuq.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-entity-bulk-entity.command-Deq-a9MQ.mjs → acorex-platform-framework-client-layout-entity-bulk-entity.command-D774EAiQ.mjs} +2 -2
- package/fesm2022/{acorex-platform-framework-client-layout-entity-bulk-entity.command-Deq-a9MQ.mjs.map → acorex-platform-framework-client-layout-entity-bulk-entity.command-D774EAiQ.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-entity-file-list-popup.component-J30yrJMo.mjs → acorex-platform-framework-client-layout-entity-file-list-popup.component-BwTpQIWl.mjs} +4 -4
- package/fesm2022/{acorex-platform-framework-client-layout-entity-file-list-popup.component-J30yrJMo.mjs.map → acorex-platform-framework-client-layout-entity-file-list-popup.component-BwTpQIWl.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-entity-gallery-page.component-BqqxD8cX.mjs → acorex-platform-framework-client-layout-entity-gallery-page.component-Be6RD2-p.mjs} +2 -2
- package/fesm2022/{acorex-platform-framework-client-layout-entity-gallery-page.component-BqqxD8cX.mjs.map → acorex-platform-framework-client-layout-entity-gallery-page.component-Be6RD2-p.mjs.map} +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-entity.mjs +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-views.mjs +12 -0
- package/fesm2022/acorex-platform-framework-client-layout-views.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs +98 -13
- package/fesm2022/acorex-platform-framework-client-layout-widget-core.mjs.map +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-BYPl8uyp.mjs → acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-BNdFv1ii.mjs} +91 -46
- package/fesm2022/acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-BNdFv1ii.mjs.map +1 -0
- package/fesm2022/{acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-IU_-eHQS.mjs → acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-CgSd-ix-.mjs} +3 -3
- package/fesm2022/{acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-IU_-eHQS.mjs.map → acorex-platform-framework-client-layout-widgets-repeater-widget-column.component-CgSd-ix-.mjs.map} +1 -1
- package/fesm2022/{acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-ET8ZuuCj.mjs → acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-DyW8ti20.mjs} +2 -2
- package/fesm2022/{acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-ET8ZuuCj.mjs.map → acorex-platform-framework-client-layout-widgets-text-block-widget-designer.component-DyW8ti20.mjs.map} +1 -1
- package/fesm2022/acorex-platform-framework-client-layout-widgets.mjs +1 -1
- package/fesm2022/acorex-platform-framework-client-themes-default.mjs +25 -7
- package/fesm2022/acorex-platform-framework-client-themes-default.mjs.map +1 -1
- package/fesm2022/acorex-platform-framework-client-themes-shared.mjs +1 -1
- package/fesm2022/acorex-platform-framework-client-themes-shared.mjs.map +1 -1
- package/layout/widget-core/README.md +1 -1
- package/layout/widgets/README.md +2 -2
- package/package.json +2 -2
- package/types/acorex-platform-framework-client-common.d.ts +35 -4
- package/types/acorex-platform-framework-client-layout-components.d.ts +26 -1
- package/types/acorex-platform-framework-client-layout-entity.d.ts +52 -29
- package/types/acorex-platform-framework-client-layout-widget-core.d.ts +26 -2
- package/types/acorex-platform-framework-client-layout-widgets.d.ts +9 -7
- package/fesm2022/acorex-platform-framework-client-layout-entity-acorex-platform-framework-client-layout-entity-DToXUL54.mjs.map +0 -1
- package/fesm2022/acorex-platform-framework-client-layout-widgets-acorex-platform-framework-client-layout-widgets-BYPl8uyp.mjs.map +0 -1
|
@@ -3,7 +3,7 @@ import { AXLocaleService } from '@acorex/core/locale';
|
|
|
3
3
|
import * as i1$2 from '@acorex/components/button';
|
|
4
4
|
import { AXButtonModule } from '@acorex/components/button';
|
|
5
5
|
import * as i1$6 from '@acorex/cdk/common';
|
|
6
|
-
import { AXCommonModule } from '@acorex/cdk/common';
|
|
6
|
+
import { AXCommonModule, AXDataSource } from '@acorex/cdk/common';
|
|
7
7
|
import * as i2$1 from '@acorex/components/decorators';
|
|
8
8
|
import { AXDecoratorModule } from '@acorex/components/decorators';
|
|
9
9
|
import * as i3 from '@acorex/core/translation';
|
|
@@ -1696,7 +1696,7 @@ class AXPColumnItemListComponent {
|
|
|
1696
1696
|
</div>
|
|
1697
1697
|
</div>
|
|
1698
1698
|
</ax-popover>
|
|
1699
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1699
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1700
1700
|
}
|
|
1701
1701
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPColumnItemListComponent, decorators: [{
|
|
1702
1702
|
type: Component,
|
|
@@ -3486,7 +3486,7 @@ class AXPConditionBuilderConditionComponent {
|
|
|
3486
3486
|
}
|
|
3487
3487
|
}
|
|
3488
3488
|
onContextChange(event) {
|
|
3489
|
-
if (event.state !== 'changed' || event.origin === 'system') {
|
|
3489
|
+
if (event.state !== 'changed' || event.origin === 'system' || event.origin === 'hydrate') {
|
|
3490
3490
|
return;
|
|
3491
3491
|
}
|
|
3492
3492
|
const filterData = event.data?.filter;
|
|
@@ -3511,7 +3511,7 @@ class AXPConditionBuilderConditionComponent {
|
|
|
3511
3511
|
this.removeItem.emit(this.item().id ?? '');
|
|
3512
3512
|
}
|
|
3513
3513
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3514
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\n <div class=\"__item-content\">\n <!-- Field Selector -->\n <div class=\"__field-selector\">\n <ax-lookup\n mode=\"drop-down-list\"\n [class.ax-sm]=\"compact()\"\n [dataSource]=\"availableFields()\"\n [ngModel]=\"selectedFieldValue()\"\n (onValueChanged)=\"onFieldChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"false\"\n [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n [look]=\"'outline'\">\n </ax-lookup>\n </div>\n\n <!-- Filter Widget (Operator + Value) -->\n <div class=\"__operator-selector\">\n @if (filterHostKeys().length) {\n <!-- ----- Operator and value for the selected field ----- -->\n @for (hostKey of filterHostKeys(); track hostKey) {\n <axp-widgets-container\n class=\"__filter-widget-container\"\n [context]=\"context()\"\n (onContextChanged)=\"onContextChange($event)\">\n <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n </ng-container>\n </axp-widgets-container>\n }\n }\n <!-- ----- Prompt until a field is chosen ----- -->\n @else {\n <div class=\"__filter-placeholder\">\n <span class=\"__placeholder-text\">{{\n ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n }}</span>\n </div>\n }\n </div>\n\n <!-- Fill By User (optional) -->\n @if (showFillByUser()) {\n <div class=\"__fill-by-user\">\n <ax-check-box\n class=\"text-xs\"\n [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n (ngModelChange)=\"onFillByUserChange($event)\">\n <ax-label>\n {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n </ax-label>\n </ax-check-box>\n </div>\n }\n </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3514
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPConditionBuilderConditionComponent, isStandalone: true, selector: "axp-condition-builder-condition", inputs: { item: { classPropertyName: "item", publicName: "item", isSignal: true, isRequired: true, transformFunction: null }, filterDefinitions: { classPropertyName: "filterDefinitions", publicName: "filterDefinitions", isSignal: true, isRequired: false, transformFunction: null }, onResolveWidget: { classPropertyName: "onResolveWidget", publicName: "onResolveWidget", isSignal: true, isRequired: false, transformFunction: null }, showFillByUser: { classPropertyName: "showFillByUser", publicName: "showFillByUser", isSignal: true, isRequired: false, transformFunction: null }, compact: { classPropertyName: "compact", publicName: "compact", isSignal: true, isRequired: false, transformFunction: null }, operationsLook: { classPropertyName: "operationsLook", publicName: "operationsLook", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemChange: "itemChange", removeItem: "removeItem" }, ngImport: i0, template: "<div class=\"__condition-row\" [class.__condition-row--comfortable]=\"!compact()\">\n <div class=\"__item-content\">\n <!-- Field Selector -->\n <div class=\"__field-selector\">\n <ax-lookup\n mode=\"drop-down-list\"\n [class.ax-sm]=\"compact()\"\n [dataSource]=\"availableFields()\"\n [ngModel]=\"selectedFieldValue()\"\n (onValueChanged)=\"onFieldChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"false\"\n [placeholder]=\"('@data-management:metadata-definitions.components.query-builder.condition.select-field' | translate | async) || 'Select a field'\"\n [look]=\"'outline'\">\n </ax-lookup>\n </div>\n\n <!-- Filter Widget (Operator + Value) -->\n <div class=\"__operator-selector\">\n @if (filterHostKeys().length) {\n <!-- ----- Operator and value for the selected field ----- -->\n @for (hostKey of filterHostKeys(); track hostKey) {\n <axp-widgets-container\n class=\"__filter-widget-container\"\n [context]=\"context()\"\n (onContextChanged)=\"onContextChange($event)\">\n <ng-container axp-widget-renderer [node]=\"filterNode()\" [mode]=\"'edit'\">\n </ng-container>\n </axp-widgets-container>\n }\n }\n <!-- ----- Prompt until a field is chosen ----- -->\n @else {\n <div class=\"__filter-placeholder\">\n <span class=\"__placeholder-text\">{{\n ('@data-management:metadata-definitions.components.query-builder.condition.select-field-first' | translate | async) || 'Select a field first'\n }}</span>\n </div>\n }\n </div>\n\n <!-- Fill By User (optional) -->\n @if (showFillByUser()) {\n <div class=\"__fill-by-user\">\n <ax-check-box\n class=\"text-xs\"\n [ngModel]=\"$safeNavigationMigration(selectedField()?.isParametric)\"\n (ngModelChange)=\"onFillByUserChange($event)\">\n <ax-label>\n {{ '@data-management:metadata-definitions.components.query-builder.condition.fill-by-user' | translate | async }}\n </ax-label>\n </ax-check-box>\n </div>\n }\n </div>\n</div>\n", styles: ["@layer properties;.__condition-row{display:flex;width:100%;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 3);display:grid;grid-template-columns:1fr 1fr;gap:.75rem}.__condition-row .__item-content .__field-selector{min-width:0px}.__condition-row .__item-content .__field-selector ax-lookup{width:100%}.__condition-row .__item-content .__operator-selector{min-width:0px}.__condition-row .__item-content .__operator-selector .__filter-widget-container{width:100%}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep .axp-widgets-container{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 3)}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-lookup{min-width:140px}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep axp-filter-operations.axp-filter-operations--select{min-width:9rem}.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-text-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-number-box,.__condition-row .__item-content .__operator-selector .__filter-widget-container ::ng-deep ax-date-time-box{flex:1}.__condition-row .__item-content .__operator-selector .__filter-placeholder{display:flex;align-items:center;justify-content:center;border-radius:.25rem;border-style:var(--tw-border-style);--tw-border-style: dashed;border-style:dashed;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding:calc(var(--spacing, .25rem) * 3);border-color:rgba(var(--ax-sys-color-border-lighter-surface),1);border-width:1px}.__condition-row .__item-content .__operator-selector .__filter-placeholder .__placeholder-text{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-500, oklch(55.6% 0 none));font-style:italic}.__condition-row .__item-content .__fill-by-user{grid-column:1 / -1}.__condition-row.__condition-row--comfortable .__field-selector ax-lookup,.__condition-row.__condition-row--comfortable .__filter-placeholder{min-height:var(--ax-sys-size-base, 2.5rem)}.__condition-row.__condition-row--comfortable .__filter-placeholder{justify-content:flex-start;padding-inline:calc(var(--spacing, .25rem) * 3);padding-block:0px}.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-text-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-number-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-date-time-box,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep ax-lookup,.__condition-row.__condition-row--comfortable .__operator-selector ::ng-deep .ax-editor-container{min-height:var(--ax-sys-size-base, 2.5rem)}@media(max-width:768px){.__condition-row{flex-direction:column;align-items:stretch}.__condition-row .__item-content{grid-template-columns:1fr}}@property --tw-border-style{syntax: \"*\"; inherits: false; initial-value: solid;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-border-style: solid}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "ngmodule", type: AXCheckBoxModule }, { kind: "component", type: i2$3.AXCheckBoxComponent, selector: "ax-check-box", inputs: ["disabled", "tabIndex", "readonly", "color", "value", "name", "id", "isLoading", "indeterminate"], outputs: ["onBlur", "onFocus", "valueChange", "onValueChanged"] }, { kind: "ngmodule", type: AXLabelModule }, { kind: "component", type: i3$4.AXLabelComponent, selector: "ax-label", inputs: ["required", "for"], outputs: ["requiredChange"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3515
3515
|
}
|
|
3516
3516
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPConditionBuilderConditionComponent, decorators: [{
|
|
3517
3517
|
type: Component,
|
|
@@ -4066,7 +4066,7 @@ class AXPFileProviderMenuComponent {
|
|
|
4066
4066
|
</ax-button-item-list>
|
|
4067
4067
|
</div>
|
|
4068
4068
|
</ax-popover>
|
|
4069
|
-
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4069
|
+
`, isInline: true, dependencies: [{ kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPFileProviderIconComponent, selector: "axp-file-provider-icon", inputs: ["icon"] }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }, { kind: "pipe", type: AsyncPipe, name: "async" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
4070
4070
|
}
|
|
4071
4071
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPFileProviderMenuComponent, decorators: [{
|
|
4072
4072
|
type: Component,
|
|
@@ -7887,7 +7887,7 @@ class AXPQueryFiltersComponent {
|
|
|
7887
7887
|
*/
|
|
7888
7888
|
#focusEffect;
|
|
7889
7889
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
7890
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n class=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\"\n [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n (keydown.control.space)=\"openFilterPopover()\"\n>\n @if (deviceService.isSmall()) {\n <!-- ----- Inline search replaces the chip row ----- -->\n @if (mobileSearchOpen()) {\n <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n <ax-search-box\n class=\"ax-sm\"\n [value]=\"mobileSearchText()\"\n [delayTime]=\"300\"\n [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n (onValueChanged)=\"handleMobileSearchChanged($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n @else {\n <div\n #mobileFilterTrigger\n class=\"axp-query-filters__mobile-row\"\n [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n (wheel)=\"handleChipsWheel($event)\"\n (pointerdown)=\"handleChipsPointerDown($event)\"\n (scroll)=\"handleMobileChipsScroll($event)\"\n >\n @for (chip of mobileFilterChips(); track chip.id) {\n <!--->\n <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n @if (chip.kind === 'applied') {\n <div\n class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n (click)=\"handleTagClick(chip.tag, $event)\"\n >\n <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n <!--->\n <!-- ----- Remove this applied filter ----- -->\n @if (!chip.tag.readOnly) {\n <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n }\n <!-- ----- Unused filter field as an outline chip ----- -->\n @else if (chip.kind === 'available') {\n <div\n class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n >\n <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n </div>\n }\n }\n @for (preset of sortPresets(); track preset.name) {\n <!--------------------------------------------------------------->\n <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n <div\n class=\"axp-query-filters__mobile-chip\"\n [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n (click)=\"applyMobileSortPreset(preset, $event)\"\n >\n <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n <!--------------------------------------------------------------->\n <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n @if (preset.icon) {\n <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n }\n <!--------------------------------------------------------------->\n <!-- ----- Descending hint when the first sort is descending ----- -->\n @else if (mobileSortPresetDir(preset) === 'desc') {\n <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n }\n <!--------------------------------------------------------------->\n <!-- ----- Ascending hint when the first sort is ascending ----- -->\n @else if (mobileSortPresetDir(preset) === 'asc') {\n <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n }\n </div>\n }\n </div>\n }\n <div\n class=\"axp-query-filters__mode-toggle\"\n [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n role=\"tablist\"\n [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n >\n <div class=\"axp-query-filters__mode-toggle-inner\">\n <button\n type=\"button\"\n role=\"tab\"\n class=\"axp-query-filters__mode-toggle-btn\"\n [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n [disabled]=\"isMobileFilterModeLocked()\"\n [attr.aria-selected]=\"!mobileSearchOpen()\"\n [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n (click)=\"setMobileSearchOpen(false)\"\n >\n <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n </button>\n <button\n type=\"button\"\n role=\"tab\"\n class=\"axp-query-filters__mode-toggle-btn\"\n [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n [disabled]=\"isMobileSearchModeLocked()\"\n [attr.aria-selected]=\"mobileSearchOpen()\"\n [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n (click)=\"setMobileSearchOpen(true)\"\n >\n <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n </button>\n </div>\n </div>\n } @else {\n <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n @if (isAdvanced() && hasMultipleFilterGroups()) {\n <ax-button-group\n class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n [selection]=\"'single'\"\n [look]=\"'outline'\"\n [color]=\"'primary'\"\n >\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n </ax-button-group>\n }\n <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n @else {\n <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n </ax-button>\n }\n }\n <div\n class=\"axp-query-filters__chips min-w-0\"\n [class.flex-1]=\"!deviceService.isSmall()\"\n [class.hidden]=\"deviceService.isSmall()\"\n [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n (click)=\"handleTagBoxClick($event)\"\n (wheel)=\"handleChipsWheel($event)\"\n (pointerdown)=\"handleChipsPointerDown($event)\"\n >\n <ax-tag-box\n #tagBoxComponent\n [ngModel]=\"asyncTags()\"\n (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\"\n [valueField]=\"'id'\"\n [readonly]=\"filtersDefinitions().length === 0\"\n [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\"\n [tagTemplate]=\"tagTemplate\"\n (onKeyDown)=\"handleKeyDown($event)\"\n [addOnEnter]=\"false\"\n [allowDuplicateValues]=\"true\"\n [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\n #tagBox\n >\n <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n <ax-kbd look=\"blank\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n </div>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n <!-- ----- Quick search chip keeps a single text label ----- -->\n @if (item.chipMode === 'search') {\n <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n } @else if (item.chipMode === 'summary') {\n <!-- ----- Summary chip when more than two conditions ----- -->\n @if (item.titleLabel) {\n <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n }\n <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n } @else {\n <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n @if (item.titleLabel && !item.mixed) {\n <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n }\n @for (cond of item.chipConditions; track $index) {\n <!--->\n <!-- ----- Logic connector between conditions ----- -->\n @if ($index > 0) {\n <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n }\n <!--->\n <!-- ----- Field title on mixed-field chips ----- -->\n @if (item.mixed && cond.title) {\n <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n }\n <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n <!--->\n <!-- ----- Quoted value badge when the operator has a display value ----- -->\n @if (cond.value) {\n <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n }\n }\n }\n @if (!item.readOnly) {\n <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n @if (activeFilter()) {\n <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n <!--->\n <!-- ----- Field icon when the group is a single field ----- -->\n @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n }\n <span class=\"min-w-0 truncate\">\n {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n </span>\n </div>\n <!--->\n <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n @if (!deviceService.isSmall()) {\n <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n </ax-button-group>\n }\n </ax-header>\n <ax-content class=\"p-4\">\n @for (condition of editingConditions(); track condition.id; let i = $index) {\n <!--->\n <!-- ----- Numbered condition row with the field widget ----- -->\n @if (i > 0 && !deviceService.isSmall()) {\n <div class=\"axp-query-filters__logic-split\">\n <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n </div>\n }\n <div class=\"axp-query-filters__condition\">\n <div class=\"axp-query-filters__condition-head\">\n <div class=\"axp-query-filters__condition-heading\">\n <!--->\n <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n @if (isAdvanced()) {\n <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n <ax-button-item-list>\n @for (def of advancedFieldOptions(); track def.field) {\n <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n }\n <!--->\n <!-- ----- Active operator for this condition ----- -->\n @if (getConditionOperatorKey(condition.id); as operatorKey) {\n <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n }\n </div>\n <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n </div>\n <ng-container\n axp-widget-renderer\n [node]=\"{\n type: getConditionWidget(condition)?.type || 'text-editor',\n path: resolveEditingConditionContextField(condition.id),\n options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n }\"\n [mode]=\"'edit'\"\n ></ng-container>\n </div>\n }\n <!--->\n <!-- ----- Extra conditions stay on desktop ----- -->\n @if (!deviceService.isSmall()) {\n <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n </button>\n }\n </ax-content>\n <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n </ax-footer>\n </div>\n } @else {\n <!-- ----- Field picker when no filter is being edited ----- -->\n <div class=\"flex flex-col lightest-surface\">\n <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n @for (field of filterFields(); track field.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\"\n >\n <div class=\"flex items-center gap-2\">\n <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </axp-widgets-container>\n </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-light-surface));--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);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--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-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7890
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPQueryFiltersComponent, isStandalone: true, selector: "axp-query-filters", inputs: { filtersDefinitions: { classPropertyName: "filtersDefinitions", publicName: "filtersDefinitions", isSignal: true, isRequired: false, transformFunction: null }, initialFilters: { classPropertyName: "initialFilters", publicName: "initialFilters", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, quickSearch: { classPropertyName: "quickSearch", publicName: "quickSearch", isSignal: true, isRequired: false, transformFunction: null }, sortPresets: { classPropertyName: "sortPresets", publicName: "sortPresets", isSignal: true, isRequired: false, transformFunction: null }, activeSortPresetName: { classPropertyName: "activeSortPresetName", publicName: "activeSortPresetName", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFiltersChanged: "onFiltersChanged", onSortPresetSelected: "onSortPresetSelected" }, viewQueries: [{ propertyName: "tagBox", first: true, predicate: ["tagBox"], descendants: true, isSignal: true }, { propertyName: "mobileFilterTrigger", first: true, predicate: ["mobileFilterTrigger"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "widgetsContainer", first: true, predicate: AXPWidgetContainerComponent, descendants: true, isSignal: true }, { propertyName: "widgetRenderers", predicate: AXPWidgetRendererDirective, descendants: true, isSignal: true }, { propertyName: "popover", first: true, predicate: ["popover"], descendants: true, isSignal: true }, { propertyName: "listItems", predicate: ["caseItem"], descendants: true }], ngImport: i0, template: "<div\n class=\"flex w-full min-w-0 items-center gap-2 px-1.5 py-1\"\n [class.axp-query-filters__bar--toggle-collapsed]=\"deviceService.isSmall() && mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n (keydown.control.space)=\"openFilterPopover()\"\n>\n @if (deviceService.isSmall()) {\n <!-- ----- Inline search replaces the chip row ----- -->\n @if (mobileSearchOpen()) {\n <div id=\"axp-query-filters-mobile-search\" class=\"axp-query-filters__mobile-search\">\n <ax-search-box\n class=\"ax-sm\"\n [value]=\"mobileSearchText()\"\n [delayTime]=\"300\"\n [placeholder]=\"('@general:terms.interface.filter.search-placeholder' | translate | async) ?? ''\"\n (onValueChanged)=\"handleMobileSearchChanged($event)\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-search-box>\n </div>\n }\n <!-- ----- Compact pill row instead of the desktop tag-box toolbar ----- -->\n @else {\n <div\n #mobileFilterTrigger\n class=\"axp-query-filters__mobile-row\"\n [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n (wheel)=\"handleChipsWheel($event)\"\n (pointerdown)=\"handleChipsPointerDown($event)\"\n (scroll)=\"handleMobileChipsScroll($event)\"\n >\n @for (chip of mobileFilterChips(); track chip.id) {\n <!--->\n <!-- ----- Applied filter chip keeps the field title, with a primary border ----- -->\n @if (chip.kind === 'applied') {\n <div\n class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--applied\"\n [class.axp-query-filters__mobile-chip--search]=\"chip.tag.field === 'all'\"\n (click)=\"handleTagClick(chip.tag, $event)\"\n >\n <span class=\"axp-query-filters__mobile-chip-text\">{{ mobileChipLabel(chip.tag) }}</span>\n <!--->\n <!-- ----- Remove this applied filter ----- -->\n @if (!chip.tag.readOnly) {\n <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, chip.tagIndex)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n }\n <!-- ----- Unused filter field as an outline chip ----- -->\n @else if (chip.kind === 'available') {\n <div\n class=\"axp-query-filters__mobile-chip axp-query-filters__mobile-chip--available\"\n [class.axp-query-filters__mobile-chip--disabled]=\"isFilterDisabled(chip.definition)\"\n [attr.aria-disabled]=\"isFilterDisabled(chip.definition) ? 'true' : null\"\n (click)=\"openMobileAvailableFilter(chip.definition, $event)\"\n >\n <span class=\"axp-query-filters__mobile-chip-text\">{{ chip.definition.title | translate | async }}</span>\n <ax-icon class=\"fa-light fa-angle-down axp-query-filters__mobile-chip-caret\"></ax-icon>\n </div>\n }\n }\n @for (preset of sortPresets(); track preset.name) {\n <!--------------------------------------------------------------->\n <!-- ----- Sort preset pill in the same row as advance filters ----- -->\n <div\n class=\"axp-query-filters__mobile-chip\"\n [class.axp-query-filters__mobile-chip--applied]=\"isMobileSortPresetActive(preset)\"\n [class.axp-query-filters__mobile-chip--available]=\"!isMobileSortPresetActive(preset)\"\n [attr.aria-pressed]=\"isMobileSortPresetActive(preset)\"\n (click)=\"applyMobileSortPreset(preset, $event)\"\n >\n <span class=\"axp-query-filters__mobile-chip-text\">{{ preset.title | translate | async }}</span>\n <!--------------------------------------------------------------->\n <!-- ----- Custom icon when the recipe does not use a direction arrow ----- -->\n @if (preset.icon) {\n <ax-icon [class]=\"preset.icon + ' axp-query-filters__mobile-chip-caret'\"></ax-icon>\n }\n <!--------------------------------------------------------------->\n <!-- ----- Descending hint when the first sort is descending ----- -->\n @else if (mobileSortPresetDir(preset) === 'desc') {\n <ax-icon class=\"fa-solid fa-arrow-down-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n }\n <!--------------------------------------------------------------->\n <!-- ----- Ascending hint when the first sort is ascending ----- -->\n @else if (mobileSortPresetDir(preset) === 'asc') {\n <ax-icon class=\"fa-solid fa-arrow-up-long axp-query-filters__mobile-chip-caret\"></ax-icon>\n }\n </div>\n }\n </div>\n }\n <div\n class=\"axp-query-filters__mode-toggle\"\n [class.axp-query-filters__mode-toggle--collapsed]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n [attr.aria-hidden]=\"mobileModeToggleCollapsed() && !mobileSearchOpen()\"\n [attr.inert]=\"mobileModeToggleCollapsed() && !mobileSearchOpen() ? true : null\"\n role=\"tablist\"\n [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n >\n <div class=\"axp-query-filters__mode-toggle-inner\">\n <button\n type=\"button\"\n role=\"tab\"\n class=\"axp-query-filters__mode-toggle-btn\"\n [class.axp-query-filters__mode-toggle-btn--active]=\"!mobileSearchOpen()\"\n [disabled]=\"isMobileFilterModeLocked()\"\n [attr.aria-selected]=\"!mobileSearchOpen()\"\n [attr.aria-label]=\"('@general:terms.interface.filter.title' | translate | async) ?? ''\"\n (click)=\"setMobileSearchOpen(false)\"\n >\n <ax-icon class=\"fa-light fa-filter\"></ax-icon>\n </button>\n <button\n type=\"button\"\n role=\"tab\"\n class=\"axp-query-filters__mode-toggle-btn\"\n [class.axp-query-filters__mode-toggle-btn--active]=\"mobileSearchOpen()\"\n [disabled]=\"isMobileSearchModeLocked()\"\n [attr.aria-selected]=\"mobileSearchOpen()\"\n [attr.aria-label]=\"('@general:actions.search.title' | translate | async) ?? ''\"\n (click)=\"setMobileSearchOpen(true)\"\n >\n <ax-icon class=\"fa-light fa-magnifying-glass\"></ax-icon>\n </button>\n </div>\n </div>\n } @else {\n <!-- ----- Root AND/OR when more than one visible chip, including All ----- -->\n @if (isAdvanced() && hasMultipleFilterGroups()) {\n <ax-button-group\n class=\"axp-query-filters__logic-toggle ax-sm shrink-0\"\n [selection]=\"'single'\"\n [look]=\"'outline'\"\n [color]=\"'primary'\"\n >\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-and' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'and'\" (onClick)=\"setRootLogic('and')\"></ax-button-group-item>\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.chip-logic-or' | translate | async) ?? ''\" [selected]=\"rootLogic() === 'or'\" (onClick)=\"setRootLogic('or')\"></ax-button-group-item>\n </ax-button-group>\n }\n <!-- ----- Filter picker when root AND/OR is hidden ----- -->\n @else {\n <ax-button (keydown)=\"handleButtonKeyDown($event)\" (onClick)=\"isAdvanced() ? openNewFilterGroup() : openFilterPopover()\" #filterButton [look]=\"'blank'\">\n <ax-icon class=\"far fa-bars-filter cursor-pointer\"></ax-icon>\n </ax-button>\n }\n }\n <div\n class=\"axp-query-filters__chips min-w-0\"\n [class.flex-1]=\"!deviceService.isSmall()\"\n [class.hidden]=\"deviceService.isSmall()\"\n [class.axp-query-filters__chips--panning]=\"isChipsPanning()\"\n (click)=\"handleTagBoxClick($event)\"\n (wheel)=\"handleChipsWheel($event)\"\n (pointerdown)=\"handleChipsPointerDown($event)\"\n >\n <ax-tag-box\n #tagBoxComponent\n [ngModel]=\"asyncTags()\"\n (onValueChanged)=\"handleSelectFilters($event)\"\n [textField]=\"'query'\"\n [valueField]=\"'id'\"\n [readonly]=\"filtersDefinitions().length === 0\"\n [look]=\"'none'\"\n [readonlyField]=\"'readOnly'\"\n [tagTemplate]=\"tagTemplate\"\n (onKeyDown)=\"handleKeyDown($event)\"\n [addOnEnter]=\"false\"\n [allowDuplicateValues]=\"true\"\n [placeholder]=\"(filtersDefinitions().length === 0 ? '@general:terms.interface.filter.no-filter-definitions' : '@general:terms.interface.filter.placeholder') | translate | async\"\n #tagBox\n >\n <ax-suffix class=\"hidden shrink-0 whitespace-nowrap md:flex text-gray-500\">\n <ax-kbd look=\"blank\">\n <ax-kbd-item [keys]=\"filterFocusShortcutKeys\"></ax-kbd-item>\n </ax-kbd>\n </ax-suffix>\n </ax-tag-box>\n </div>\n\n <ng-template #tagTemplate let-item let-index=\"index\">\n <div class=\"axp-query-filters__chip\" [class.axp-query-filters__chip--active]=\"item.id === activeChipId()\" [class.axp-query-filters__chip--search]=\"item.field === 'all'\" (click)=\"handleTagClick(item, $event)\">\n <!-- ----- Quick search chip keeps a single text label ----- -->\n @if (item.chipMode === 'search') {\n <span class=\"axp-query-filters__chip-text\">{{ item.query }}</span>\n } @else if (item.chipMode === 'summary') {\n <!-- ----- Summary chip when more than two conditions ----- -->\n @if (item.titleLabel) {\n <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}:</span>\n }\n <span class=\"axp-query-filters__chip-text\">{{ item.summaryText }}</span>\n } @else {\n <!-- ----- One or two conditions: field + operator + quoted value ----- -->\n @if (item.titleLabel && !item.mixed) {\n <span class=\"axp-query-filters__chip-title\">{{ item.titleLabel }}</span>\n }\n @for (cond of item.chipConditions; track $index) {\n <!--->\n <!-- ----- Logic connector between conditions ----- -->\n @if ($index > 0) {\n <span class=\"axp-query-filters__chip-logic\">{{ item.logicLabel }}</span>\n }\n <!--->\n <!-- ----- Field title on mixed-field chips ----- -->\n @if (item.mixed && cond.title) {\n <span class=\"axp-query-filters__chip-title\">{{ cond.title }}</span>\n }\n <span class=\"axp-query-filters__chip-operator\">{{ cond.operator }}</span>\n <!--->\n <!-- ----- Quoted value badge when the operator has a display value ----- -->\n @if (cond.value) {\n <span class=\"axp-query-filters__chip-value\">'{{ cond.value }}'</span>\n }\n }\n }\n @if (!item.readOnly) {\n <button class=\"axp-query-filters__chip-remove\" (click)=\"handleRemoveTag($event, index)\" type=\"button\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n }\n </div>\n </ng-template>\n</div>\n\n<ax-popover [offsetY]=\"activeFilter() ? -30 : 0\" [openOn]=\"'toggle'\" (onOpened)=\"onPopoverOpened($event)\" [closeOn]=\"'clickOut'\" (onClosed)=\"handlePopoverClosed($event)\" [adaptivityEnabled]=\"true\" #popover>\n <div class=\"axp-query-filters__popover md:min-w-72 w-full rounded-md md:max-h-[min(32rem,80vh)] lg:w-[520px] md:overflow-auto\">\n <axp-widgets-container #widgetsContainer [context]=\"context()\" (onContextChanged)=\"onContextChanged($event)\">\n @if (activeFilter()) {\n <div class=\"flex flex-col lightest-surface shadow-md\" (keydown.enter)=\"onEnterKeyPressed($event)\">\n <ax-header class=\"axp-query-filters__editor-header border-b border-border-light px-4 py-2\">\n <div class=\"flex min-w-0 items-center gap-2 font-semibold\">\n <!--->\n <!-- ----- Field icon when the group is a single field ----- -->\n @if (!isMixedEditingGroup() && activeFilter()?.icon) {\n <ax-icon class=\"w-5 shrink-0\" [class]=\"'fa-light ' + activeFilter()!.icon\"></ax-icon>\n }\n <span class=\"min-w-0 truncate\">\n {{ isMixedEditingGroup() ? ('@general:terms.interface.filter.filter-group' | translate | async) : ('@general:terms.interface.filter.filter-on' | translate: { params: { title: activeFilterTitle() } } | async) }}\n </span>\n </div>\n <!--->\n <!-- ----- Condition logic AND/OR stays on desktop ----- -->\n @if (!deviceService.isSmall()) {\n <ax-button-group class=\"axp-query-filters__logic-toggle ax-sm shrink-0\" [selection]=\"'single'\" [look]=\"'outline'\" [color]=\"'primary'\">\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-and-all' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'and'\" (onClick)=\"setEditingLogic('and')\"></ax-button-group-item>\n <ax-button-group-item [text]=\"('@general:terms.interface.filter.logic-or-any' | translate | async) ?? ''\" [selected]=\"editingLogic() === 'or'\" (onClick)=\"setEditingLogic('or')\"></ax-button-group-item>\n </ax-button-group>\n }\n </ax-header>\n <ax-content class=\"p-4\">\n @for (condition of editingConditions(); track condition.id; let i = $index) {\n <!--->\n <!-- ----- Numbered condition row with the field widget ----- -->\n @if (i > 0 && !deviceService.isSmall()) {\n <div class=\"axp-query-filters__logic-split\">\n <span class=\"axp-query-filters__logic-split-label\">{{ (editingLogic() === 'or' ? '@general:terms.interface.filter.chip-logic-or' : '@general:terms.interface.filter.chip-logic-and') | translate | async }}</span>\n </div>\n }\n <div class=\"axp-query-filters__condition\">\n <div class=\"axp-query-filters__condition-head\">\n <div class=\"axp-query-filters__condition-heading\">\n <!--->\n <!-- ----- Field picker for mixed-field groups in advanced mode ----- -->\n @if (isAdvanced()) {\n <ax-dropdown-button class=\"ax-sm\" [text]=\"(getConditionDefinition(condition.field)?.title | translate | async) ?? ''\" [mode]=\"'dropdown'\" [look]=\"'outline'\">\n <ax-button-item-list>\n @for (def of advancedFieldOptions(); track def.field) {\n <ax-button-item [text]=\"(def.title | translate | async) ?? ''\" [selected]=\"condition.field === def.field\" [disabled]=\"isFilterDisabled(def)\" (onClick)=\"setConditionField(condition.id, def.field ?? '')\"></ax-button-item>\n }\n </ax-button-item-list>\n </ax-dropdown-button>\n }\n <!--->\n <!-- ----- Active operator for this condition ----- -->\n @if (getConditionOperatorKey(condition.id); as operatorKey) {\n <ax-badge [text]=\"(operatorKey | translate | async) || ''\"></ax-badge>\n }\n </div>\n <button type=\"button\" class=\"axp-query-filters__condition-remove\" (click)=\"handleRemoveCondition(condition.id)\">\n <ax-icon class=\"ax-icon ax-icon-close\"></ax-icon>\n </button>\n </div>\n <ng-container\n axp-widget-renderer\n [node]=\"{\n type: getConditionWidget(condition)?.type || 'text-editor',\n path: resolveEditingConditionContextField(condition.id),\n options: $safeNavigationMigration(getConditionWidget(condition)?.options),\n }\"\n [mode]=\"'edit'\"\n ></ng-container>\n </div>\n }\n <!--->\n <!-- ----- Extra conditions stay on desktop ----- -->\n @if (!deviceService.isSmall()) {\n <button type=\"button\" class=\"axp-query-filters__add-condition\" (click)=\"handleAddCondition()\">\n <ax-icon class=\"fa-light fa-plus\"></ax-icon>\n <span>{{ (isAdvanced() ? '@general:terms.interface.filter.add-condition-generic' : '@general:terms.interface.filter.add-condition') | translate: { params: { title: activeFilterTitle() } } | async }}</span>\n </button>\n }\n </ax-content>\n <ax-footer class=\"border-t flex justify-end gap-2 border-border-light w-full px-4 py-2\">\n <ax-button class=\"ax-sm\" [look]=\"'blank'\" [text]=\"'@general:actions.cancel.title' | translate | async\" (onClick)=\"handleCancelFilter()\"></ax-button>\n <ax-button class=\"ax-sm\" [color]=\"'primary'\" [disabled]=\"!canApplyFilter()\" [text]=\"'@general:terms.interface.filter.apply-filter' | translate | async\" (onClick)=\"handleApplyFilter()\"></ax-button>\n </ax-footer>\n </div>\n } @else {\n <!-- ----- Field picker when no filter is being edited ----- -->\n <div class=\"flex flex-col lightest-surface\">\n <div axListNavigation #list=\"axListNavigation\" class=\"axp-list-items border-none\">\n @for (field of filterFields(); track field.field) {\n <div\n axListNavigationItem\n #caseItem=\"axListNavigationItem\"\n [class.axp-state-focused]=\"caseItem.isActive() && !isFilterDisabled(field)\"\n [class.axp-query-filters__advance-item--disabled]=\"isFilterDisabled(field)\"\n [attr.aria-disabled]=\"isFilterDisabled(field) ? 'true' : null\"\n [attr.tabindex]=\"isFilterDisabled(field) ? -1 : 0\"\n (click)=\"handleSelectField(field)\"\n (keydown)=\"handleFieldKeyDown($event, field)\"\n >\n <div class=\"flex items-center gap-2\">\n <ax-icon class=\"axp-query-filters__field-icon\" [ngClass]=\"'fa-light ' + field.icon\"></ax-icon>\n <span class=\"leading-none\">{{ field.title | translate | async }}</span>\n </div>\n </div>\n }\n </div>\n </div>\n }\n </axp-widgets-container>\n </div>\n</ax-popover>\n", styles: ["@layer properties;axp-query-filters{display:block;width:100%;min-width:0px;overflow:hidden}axp-query-filters>.flex{min-width:0px;flex-wrap:nowrap}axp-query-filters ax-tag-box{width:100%;min-width:0px}axp-query-filters ax-tag-box .editor-container,axp-query-filters ax-tag-box .ax-editor-container{display:flex;width:100%;min-width:0px;flex-wrap:nowrap;align-items:center;background-color:transparent;min-height:2.25rem}axp-query-filters ax-tag-box .ax-tags-container{display:flex;flex:1 1 0%;min-width:0;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden}axp-query-filters ax-tag-box ax-suffix{flex-shrink:0;white-space:nowrap}axp-query-filters>.flex>ax-button button{min-height:var(--ax-sys-size-base);height:var(--ax-sys-size-base);padding-block:0}.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container{scrollbar-width:none;-ms-overflow-style:none}:is(.axp-query-filters__chips,axp-query-filters ax-tag-box .ax-tags-container)::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__chips{min-width:0px;cursor:grab;overflow-x:auto;overflow-y:hidden}.axp-query-filters__chips.axp-query-filters__chips--panning,.axp-query-filters__chips.axp-query-filters__chips--panning *{cursor:grabbing;-webkit-user-select:none;user-select:none}.axp-query-filters__chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:var(--radius-md, .375rem);background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));white-space:nowrap}.axp-query-filters__chip:hover{background-color:rgba(var(--ax-sys-color-darkest-surface))}.axp-query-filters__chip--search,.axp-query-filters__chip--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}:is(.axp-query-filters__chip--search,.axp-query-filters__chip--active):hover{background-color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__chip-title{flex-shrink:0;--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}.axp-query-filters__chip-text,.axp-query-filters__chip-operator{min-width:0px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__chip-logic{flex-shrink:0;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__chip--active .axp-query-filters__chip-logic,.axp-query-filters__chip--search .axp-query-filters__chip-logic{color:var(--color-white, #fff)}.axp-query-filters__chip-value{display:inline-flex;max-width:12rem;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:.25rem;background-color:rgba(var(--ax-sys-color-lightest-surface));padding-inline:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--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)}.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in srgb,#fff 20%,transparent);color:var(--color-white, #fff)}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__chip--active .axp-query-filters__chip-value,.axp-query-filters__chip--search .axp-query-filters__chip-value{background-color:color-mix(in oklab,var(--color-white, #fff) 20%,transparent)}}.axp-query-filters__chip-remove{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;justify-content:center;opacity:70%}.axp-query-filters__chip-remove:hover{opacity:100%}.axp-query-filters__mode-toggle{flex:0 0 auto;max-width:6rem;overflow:visible;transition:max-width .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed{max-width:0;pointer-events:none}.axp-query-filters__mode-toggle-inner{position:relative;z-index:10;margin-inline-start:var(--spacing, .25rem);display:inline-flex;border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);border-color:rgba(var(--ax-sys-color-light-surface));--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);width:max-content;transform:translate(0);transition:transform .32s cubic-bezier(.32,.72,0,1),margin .32s cubic-bezier(.32,.72,0,1)}.axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{margin-inline-start:0;transform:translate(5rem)}[dir=rtl] .axp-query-filters__mode-toggle--collapsed .axp-query-filters__mode-toggle-inner{transform:translate(-5rem)}.axp-query-filters__mode-toggle-btn{display:inline-flex;align-items:center;justify-content:center;font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));width:1.875rem;height:1.625rem}.axp-query-filters__mode-toggle-btn:first-child{border-start-start-radius:calc(infinity * 1px);border-end-start-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn:last-child{border-start-end-radius:calc(infinity * 1px);border-end-end-radius:calc(infinity * 1px)}.axp-query-filters__mode-toggle-btn--active{background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__mode-toggle-btn:disabled:not(.axp-query-filters__mode-toggle-btn--active){cursor:not-allowed;opacity:40%}.axp-query-filters__mobile-search{min-width:0px;flex:1}.axp-query-filters__mobile-search ax-search-box,.axp-query-filters__mobile-search ax-search-box .ax-editor,.axp-query-filters__mobile-search ax-search-box .ax-editor-container,.axp-query-filters__mobile-search ax-search-box .editor-container{min-height:1.875rem;height:1.875rem}.axp-query-filters__mobile-search ax-search-box input{min-height:1.875rem;height:1.875rem;font-size:.8125rem;line-height:1.125rem}.axp-query-filters__mobile-row{display:flex;min-width:0px;flex:1;flex-wrap:nowrap;align-items:center;gap:var(--spacing, .25rem);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none}.axp-query-filters__mobile-row::-webkit-scrollbar{display:none;width:0;height:0;background:transparent}.axp-query-filters__mobile-chip{display:inline-flex;flex-shrink:0;cursor:pointer;align-items:center;gap:var(--spacing, .25rem);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface);border-color:rgba(var(--ax-sys-color-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2.5);padding-block:calc(var(--spacing, .25rem) * .5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);white-space:nowrap}.axp-query-filters__mobile-chip--available{cursor:pointer;background-color:transparent}.axp-query-filters__mobile-chip--disabled{cursor:not-allowed;opacity:50%}.axp-query-filters__mobile-chip--applied{border-color:rgba(var(--ax-sys-color-primary-surface));background-color:transparent;color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__mobile-chip-text{max-width:10rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.axp-query-filters__mobile-chip-caret{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));opacity:70%}.axp-query-filters__editor-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3)}.axp-query-filters__logic-toggle ax-button-group-item.ax-state-selected ax-button button,.axp-query-filters__logic-toggle ax-button button.ax-state-selected{background-image:none;box-shadow:none;background-color:rgba(var(--ax-sys-color-primary-surface));color:var(--color-white, #fff)}.axp-query-filters__logic-toggle ax-button>button{min-height:2rem;height:2rem;padding-inline:.5rem;padding-block:0;font-size:.8125rem;line-height:1.125rem;font-weight:600}@media(max-width:600px){axp-query-filters{overflow:hidden}axp-query-filters>.flex{gap:.5rem;padding-block:0;padding-inline:.125rem;overflow:hidden}axp-query-filters>.flex.axp-query-filters__bar--toggle-collapsed{gap:0}.axp-query-filters__logic-toggle{flex-wrap:nowrap}.axp-query-filters__chip{gap:.375rem;padding-inline:.625rem;padding-block:.25rem;font-size:.8125rem}.axp-query-filters__chip-value{max-width:none;font-size:.8125rem}}.axp-query-filters__condition{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-head{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-heading{display:flex;min-width:0px;flex-wrap:wrap;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}.axp-query-filters__condition-title{font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-text-default));text-transform:uppercase}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-title{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove{display:inline-flex;cursor:pointer;align-items:center;justify-content:center;color:rgba(var(--ax-sys-color-text-default))}@supports (color: color-mix(in lab,red,red)){.axp-query-filters__condition-remove{color:color-mix(in oklab,rgba(var(--ax-sys-color-text-default)) 80%,transparent)}}.axp-query-filters__condition-remove:hover{color:rgba(var(--ax-sys-color-danger-surface))}.axp-query-filters__logic-split{position:relative;margin-block:calc(var(--spacing, .25rem) * 3);display:flex;align-items:center;justify-content:center}.axp-query-filters__logic-split:before,.axp-query-filters__logic-split:after{content:\"\";height:1px;flex:1;background-color:rgba(var(--ax-sys-color-border-light-surface))}.axp-query-filters__logic-split-label{margin-inline:calc(var(--spacing, .25rem) * 3);border-radius:calc(infinity * 1px);border-style:var(--tw-border-style);border-width:1px;border-color:rgba(var(--ax-sys-color-border-light-surface));padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * .5);font-size:10px;--tw-font-weight: var(--font-weight-semibold, 600);font-weight:var(--font-weight-semibold, 600);--tw-tracking: var(--tracking-wide, .025em);letter-spacing:var(--tracking-wide, .025em);color:rgba(var(--ax-sys-color-primary-surface));text-transform:uppercase}.axp-query-filters__add-condition{margin-top:calc(var(--spacing, .25rem) * 3);display:inline-flex;cursor:pointer;align-items:center;gap:calc(var(--spacing, .25rem) * 1.5);font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);color:rgba(var(--ax-sys-color-primary-surface))}.axp-query-filters__add-condition:hover{text-decoration-line:underline}.axp-list-items{display:flex;min-width:calc(var(--spacing, .25rem) * 40);flex-direction:column;border-radius:var(--radius-md, .375rem);border-style:var(--tw-border-style);border-width:1px;background-color:var(--color-lightest);color:var(--color-on-lightest);border-color:var(--color-border-lightest);padding-block:calc(var(--spacing, .25rem) * 4);--tw-shadow: 0 4px 6px -1px var(--tw-shadow-color, rgb(0 0 0 / .1)), 0 2px 4px -2px var(--tw-shadow-color, rgb(0 0 0 / .1));box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.axp-list-items>div{min-width:calc(var(--spacing, .25rem) * 28);cursor:pointer;padding-inline:calc(var(--spacing, .25rem) * 4);padding-block:calc(var(--spacing, .25rem) * 2);text-align:start}.axp-list-items>div:focus{outline:none}.axp-list-items>div.axp-state-focused,.axp-list-items>div:hover{background-color:var(--color-surface);color:var(--color-on-surface);border-color:var(--color-border-surface)}.axp-list-items>div.axp-query-filters__advance-item--disabled{cursor:not-allowed;opacity:50%}.axp-list-items>div.axp-query-filters__advance-item--disabled.axp-state-focused,.axp-list-items>div.axp-query-filters__advance-item--disabled:hover{background-color:transparent}.axp-query-filters__field-icon{display:inline-flex;height:calc(var(--spacing, .25rem) * 4);width:calc(var(--spacing, .25rem) * 5);flex-shrink:0;align-items:center;justify-content:center;--tw-leading: 1;line-height:1}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@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-tracking{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial;--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-tracking: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: i1$2.AXButtonItemComponent, selector: "ax-button-item", inputs: ["color", "disabled", "text", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange"] }, { kind: "component", type: i1$2.AXButtonItemListComponent, selector: "ax-button-item-list", inputs: ["items", "closeParentOnClick", "lockOnLoading"], outputs: ["onItemClick"] }, { kind: "ngmodule", type: AXButtonGroupModule }, { kind: "component", type: i4$2.AXButtonGroupComponent, selector: "ax-button-group", inputs: ["disabled", "fitParent", "color", "look", "class", "selection"], outputs: ["onBlur", "onFocus", "disabledChange", "colorChange", "lookChange", "onClick", "selectionChange", "selectedButtonChange"] }, { kind: "component", type: i4$2.AXButtonGroupItemComponent, selector: "ax-button-group-item", inputs: ["disabled", "color", "text", "class", "selected", "divided", "data", "name"], outputs: ["onClick", "onFocus", "onBlur", "disabledChange", "classChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXDropdownButtonModule }, { kind: "component", type: i6.AXDropdownButtonComponent, selector: "ax-dropdown-button", inputs: ["disabled", "size", "text", "selected", "color", "look", "type", "mode", "iconOnly"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "lookChange", "colorChange", "disabledChange"] }, { kind: "component", type: AXKBDComponent, selector: "ax-kbd", inputs: ["look"] }, { kind: "component", type: AXKBDItemComponent, selector: "ax-kbd-item", inputs: ["keys", "join", "look"], outputs: ["lookChange"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i2$2.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "visualContextScope", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "restoreFocusOnClose", "openAfter", "closeAfter", "closeOnScroll", "closeOnNavigation", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "ngmodule", type: AXSearchBoxModule }, { kind: "component", type: i3$2.AXSearchBoxComponent, selector: "ax-search-box", inputs: ["disabled", "readonly", "tabIndex", "placeholder", "value", "state", "name", "id", "look", "class", "delayTime", "type", "autoSearch"], outputs: ["valueChange", "stateChange", "onValueChanged", "onBlur", "onFocus", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress"] }, { kind: "ngmodule", type: AXSelectionListModule }, { kind: "ngmodule", type: AXTagBoxModule }, { kind: "component", type: i9.AXTagBoxComponent, selector: "ax-tag-box", inputs: ["disabled", "tabIndex", "readonly", "value", "state", "name", "id", "placeholder", "allowNull", "type", "look", "addOnComma", "addOnEnter", "valueField", "textField", "readonlyField", "allowDuplicateValues", "tagTemplate"], outputs: ["onBlur", "onFocus", "valueChange", "stateChange", "onValueChanged", "readonlyChange", "disabledChange", "onKeyDown", "onKeyUp", "onKeyPress", "onTagClick", "onTagDblClick", "onTagContextMenu"] }, { kind: "ngmodule", type: AXPWidgetCoreModule }, { kind: "component", type: i1$5.AXPWidgetContainerComponent, selector: "axp-widgets-container", inputs: ["context", "functions"], outputs: ["onContextChanged"] }, { kind: "directive", type: i1$5.AXPWidgetRendererDirective, selector: "[axp-widget-renderer]", inputs: ["parentNode", "index", "mode", "node"], outputs: ["onOptionsChanged", "onValueChanged", "onLoad"], exportAs: ["widgetRenderer"] }, { kind: "ngmodule", type: AXListNavigationModule }, { kind: "directive", type: i11.AXListNavigationDirective, selector: "[axListNavigation]", inputs: ["orientation"], outputs: ["onNavigationChanged", "onKeypress"], exportAs: ["axListNavigation"] }, { kind: "directive", type: i11.AXListNavigationItemDirective, selector: "[axListNavigationItem]", outputs: ["onKeypress"], exportAs: ["axListNavigationItem"] }, { kind: "ngmodule", type: AXBadgeModule }, { kind: "component", type: i1$3.AXBadgeComponent, selector: "ax-badge", inputs: ["color", "look", "text"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
7891
7891
|
}
|
|
7892
7892
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPQueryFiltersComponent, decorators: [{
|
|
7893
7893
|
type: Component,
|
|
@@ -8704,7 +8704,8 @@ class AXPPropertyViewerComponent {
|
|
|
8704
8704
|
this.context.set(event.data);
|
|
8705
8705
|
const isHydration = event.state === 'initiated' ||
|
|
8706
8706
|
event.state === 'restored' ||
|
|
8707
|
-
event.origin === 'system'
|
|
8707
|
+
event.origin === 'system' ||
|
|
8708
|
+
event.origin === 'hydrate';
|
|
8708
8709
|
this.onChanged.emit({
|
|
8709
8710
|
values: this.context(),
|
|
8710
8711
|
mode: isHydration ? 'init' : 'update',
|
|
@@ -9197,6 +9198,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9197
9198
|
}]
|
|
9198
9199
|
}] });
|
|
9199
9200
|
|
|
9201
|
+
/**
|
|
9202
|
+
* Fixed virtual-scroll row. The lookup paints a "loading" placeholder for any
|
|
9203
|
+
* index that is still a hole, so this must match the option template exactly.
|
|
9204
|
+
*/
|
|
9205
|
+
const ITEM_CONFIGURATOR_OPTION_HEIGHT = 56;
|
|
9206
|
+
/** One page covers the whole catalog so search/reopen never leaves unloaded holes. */
|
|
9207
|
+
const ITEM_CONFIGURATOR_PAGE_SIZE = 500;
|
|
9208
|
+
const ITEM_CONFIGURATOR_FALLBACK_ICON = 'fa-light fa-puzzle-piece';
|
|
9200
9209
|
//#endregion
|
|
9201
9210
|
//#region ---- Component ----
|
|
9202
9211
|
/**
|
|
@@ -9204,6 +9213,38 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9204
9213
|
* Bound state: {@link selectedItemId} and {@link values} (context returned from the viewer). Not tied to {@link AXPWidgetNode}.
|
|
9205
9214
|
*/
|
|
9206
9215
|
class AXPItemConfiguratorComponent {
|
|
9216
|
+
/**
|
|
9217
|
+
* Visible order follows the translated title. Sorting the raw `@scope:key`
|
|
9218
|
+
* puts the list in key order (PPE, Test Sheet, Address, …).
|
|
9219
|
+
*/
|
|
9220
|
+
async rowsInDisplayOrder() {
|
|
9221
|
+
const locale = this.translationService.getActiveLang();
|
|
9222
|
+
const labeled = await Promise.all(this.availableItems().map(async (row) => ({
|
|
9223
|
+
row,
|
|
9224
|
+
label: await this.displayLabel(row.title),
|
|
9225
|
+
})));
|
|
9226
|
+
labeled.sort((a, b) => a.label.localeCompare(b.label, locale, { sensitivity: 'base' }));
|
|
9227
|
+
return labeled.map((entry) => entry.row);
|
|
9228
|
+
}
|
|
9229
|
+
async filterRows(rows, needle) {
|
|
9230
|
+
const locale = this.translationService.getActiveLang();
|
|
9231
|
+
const matched = [];
|
|
9232
|
+
for (const row of rows) {
|
|
9233
|
+
const title = (await this.displayLabel(row.title)).toLocaleLowerCase(locale);
|
|
9234
|
+
const description = (await this.displayLabel(row.description)).toLocaleLowerCase(locale);
|
|
9235
|
+
if (title.includes(needle) || description.includes(needle)) {
|
|
9236
|
+
matched.push(row);
|
|
9237
|
+
}
|
|
9238
|
+
}
|
|
9239
|
+
return matched;
|
|
9240
|
+
}
|
|
9241
|
+
async displayLabel(value) {
|
|
9242
|
+
if (value == null || value === '') {
|
|
9243
|
+
return '';
|
|
9244
|
+
}
|
|
9245
|
+
const translated = await this.translationService.translateAsync(value);
|
|
9246
|
+
return translated.trim();
|
|
9247
|
+
}
|
|
9207
9248
|
enterEditMode() {
|
|
9208
9249
|
if (this.readonly()) {
|
|
9209
9250
|
return;
|
|
@@ -9251,17 +9292,17 @@ class AXPItemConfiguratorComponent {
|
|
|
9251
9292
|
if (!id) {
|
|
9252
9293
|
continue;
|
|
9253
9294
|
}
|
|
9254
|
-
const
|
|
9295
|
+
const sortText = resolveSearchableText(row.title, locale, this.translationService).trim() || id;
|
|
9255
9296
|
list.push({
|
|
9256
9297
|
value: id,
|
|
9257
|
-
text: title,
|
|
9298
|
+
text: typeof row.title === 'string' ? row.title : sortText,
|
|
9299
|
+
title: row.title,
|
|
9258
9300
|
icon: row.icon,
|
|
9259
|
-
description: row.description
|
|
9260
|
-
|
|
9261
|
-
: undefined,
|
|
9301
|
+
description: row.description,
|
|
9302
|
+
sortText,
|
|
9262
9303
|
});
|
|
9263
9304
|
}
|
|
9264
|
-
return list.sort((a, b) => compareMultiLanguageStrings(a.
|
|
9305
|
+
return list.sort((a, b) => compareMultiLanguageStrings(a.sortText, b.sortText, locale));
|
|
9265
9306
|
}, /* @ts-ignore */
|
|
9266
9307
|
...(ngDevMode ? [{ debugName: "availableItems" }] : /* istanbul ignore next */ []));
|
|
9267
9308
|
this.selectedListItem = computed(() => {
|
|
@@ -9317,8 +9358,41 @@ class AXPItemConfiguratorComponent {
|
|
|
9317
9358
|
...(ngDevMode ? [{ debugName: "isConfigured" }] : /* istanbul ignore next */ []));
|
|
9318
9359
|
this.visibleHeaderActions = computed(() => (this.headerActions() ?? []).filter((a) => a != null && a.visible !== false && !a.items?.length), /* @ts-ignore */
|
|
9319
9360
|
...(ngDevMode ? [{ debugName: "visibleHeaderActions" }] : /* istanbul ignore next */ []));
|
|
9361
|
+
this.optionRowHeight = ITEM_CONFIGURATOR_OPTION_HEIGHT;
|
|
9362
|
+
this.optionMaxVisibleRows = 8;
|
|
9363
|
+
this.fallbackIcon = ITEM_CONFIGURATOR_FALLBACK_ICON;
|
|
9364
|
+
/**
|
|
9365
|
+
* Owned datasource (not a raw array). The lookup wraps arrays at page size 20;
|
|
9366
|
+
* after a search the virtual list keeps a scroll offset into unloaded pages and
|
|
9367
|
+
* stays on the loading placeholder. One page fills every row.
|
|
9368
|
+
*/
|
|
9369
|
+
this.itemDataSource = new AXDataSource({
|
|
9370
|
+
key: 'value',
|
|
9371
|
+
pageSize: ITEM_CONFIGURATOR_PAGE_SIZE,
|
|
9372
|
+
load: async (query) => {
|
|
9373
|
+
const rows = await this.rowsInDisplayOrder();
|
|
9374
|
+
const needle = readLookupFilterText(query.filter);
|
|
9375
|
+
const matched = needle ? await this.filterRows(rows, needle) : rows;
|
|
9376
|
+
const skip = query.skip ?? 0;
|
|
9377
|
+
const take = query.take ?? matched.length;
|
|
9378
|
+
return {
|
|
9379
|
+
items: matched.slice(skip, skip + take),
|
|
9380
|
+
total: matched.length,
|
|
9381
|
+
};
|
|
9382
|
+
},
|
|
9383
|
+
byKey: (key) => this.availableItems().find((row) => row.value == key) ?? {
|
|
9384
|
+
value: String(key ?? ''),
|
|
9385
|
+
text: String(key ?? ''),
|
|
9386
|
+
title: String(key ?? ''),
|
|
9387
|
+
sortText: String(key ?? ''),
|
|
9388
|
+
},
|
|
9389
|
+
});
|
|
9320
9390
|
this.itemLookup = viewChild(AXLookupComponent, /* @ts-ignore */
|
|
9321
9391
|
...(ngDevMode ? [{ debugName: "itemLookup" }] : /* istanbul ignore next */ []));
|
|
9392
|
+
effect(() => {
|
|
9393
|
+
this.availableItems();
|
|
9394
|
+
untracked(() => this.itemDataSource.refresh());
|
|
9395
|
+
});
|
|
9322
9396
|
effect(() => {
|
|
9323
9397
|
if (!this.isEditMode()) {
|
|
9324
9398
|
return;
|
|
@@ -9424,7 +9498,7 @@ class AXPItemConfiguratorComponent {
|
|
|
9424
9498
|
return action.disabled === true;
|
|
9425
9499
|
}
|
|
9426
9500
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9427
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemLookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n @if (isEditMode()) {\n <div class=\"__item-selector\">\n <ax-lookup\n #itemLookup\n mode=\"drop-down-list\"\n [ngModel]=\"selectedItemId()\"\n [dataSource]=\"availableItems()\"\n [placeholder]=\"\n ('@general:actions.select.title' | translate | async) ?? ''\n \"\n [readonly]=\"readonly()\"\n (onValueChanged)=\"onSelectionChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n [itemHeight]=\"72\"\n [selectedTemplate]=\"selectedTemplate\"\n (onClosed)=\"exitEditMode()\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-lookup>\n </div>\n }\n\n @if (!isEditMode()) {\n @if (selectedItemId() && currentItemConfig(); as config) {\n <div class=\"__item-info\">\n <div\n class=\"__item-header\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <div>\n @if (config.icon) {\n <i [class]=\"config.icon\"></i>\n }\n <div>\n <span>\n {{ config.title | translate | async }}\n </span>\n @if (config.description) {\n <p>\n {{ (config.description | translate | async) ?? '' }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n @if (config.hasProperties) {\n <ax-button\n [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"\n ('@general:actions.configure.title' | translate | async) ?? ''\n \"\n look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\"\n size=\"sm\"\n (onClick)=\"openConfigureDialog()\"\n >\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n @for (\n action of visibleHeaderActions();\n track action.name ?? $index\n ) {\n <ax-button\n look=\"blank\"\n size=\"sm\"\n [color]=\"action.color ?? 'default'\"\n [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n [title]=\"(action.title | translate | async) ?? ''\"\n [class.icon-only]=\"action.iconOnly === true\"\n (onClick)=\"onHeaderActionClick(action)\"\n >\n @if (action.icon) {\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n }\n @if (action.iconOnly !== true) {\n <span>{{ (action.title | translate | async) ?? '' }}</span>\n }\n </ax-button>\n }\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"__item-empty\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{\n ('@general:widgets.widget-configurator.select-widget-type'\n | translate\n | async) ?? 'Select an item type'\n }}\n </span>\n </div>\n }\n }\n\n <ng-template #itemTemplate let-item>\n <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n @if (item.icon) {\n <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n }\n <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n <div class=\"text-sm font-medium\">\n {{ item.text | translate | async }}\n </div>\n @if (item.description) {\n <div class=\"text-xs text-neutral-600\">\n {{ item.description | translate | async }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.icon) {\n <i [class]=\"item.icon\"></i>\n }\n <span>\n {{ $safeNavigationMigration(item?.text) | translate | async }}\n </span>\n </div>\n </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9501
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AXPItemConfiguratorComponent, isStandalone: true, selector: "axp-item-configurator", inputs: { selectedItemId: { classPropertyName: "selectedItemId", publicName: "selectedItemId", isSignal: true, isRequired: false, transformFunction: null }, values: { classPropertyName: "values", publicName: "values", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, items: { classPropertyName: "items", publicName: "items", isSignal: true, isRequired: false, transformFunction: null }, headerActions: { classPropertyName: "headerActions", publicName: "headerActions", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { selectedItemId: "selectedItemIdChange", values: "valuesChange" }, viewQueries: [{ propertyName: "itemLookup", first: true, predicate: AXLookupComponent, descendants: true, isSignal: true }], ngImport: i0, template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n @if (isEditMode()) {\n <div class=\"__item-selector\">\n <ax-lookup\n #itemLookup\n mode=\"drop-down-list\"\n [ngModel]=\"selectedItemId()\"\n [dataSource]=\"itemDataSource\"\n [placeholder]=\"\n ('@general:actions.select.title' | translate | async) ?? ''\n \"\n [readonly]=\"readonly()\"\n (onValueChanged)=\"onSelectionChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n [loadingTemplate]=\"loadingTemplate\"\n [itemHeight]=\"optionRowHeight\"\n [maxVisibleItems]=\"optionMaxVisibleRows\"\n [selectedTemplate]=\"selectedTemplate\"\n (onClosed)=\"exitEditMode()\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-lookup>\n </div>\n }\n\n @if (!isEditMode()) {\n @if (selectedItemId() && currentItemConfig(); as config) {\n <div class=\"__item-info\">\n <div\n class=\"__item-header\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <div>\n @if (config.icon) {\n <ax-icon [icon]=\"config.icon\"></ax-icon>\n }\n <div>\n <span>\n {{ config.title | translate | async }}\n </span>\n @if (config.description) {\n <p>\n {{ (config.description | translate | async) ?? '' }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n @if (config.hasProperties) {\n <ax-button\n [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"\n ('@general:actions.configure.title' | translate | async) ?? ''\n \"\n look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\"\n size=\"sm\"\n (onClick)=\"openConfigureDialog()\"\n >\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n @for (\n action of visibleHeaderActions();\n track action.name ?? $index\n ) {\n <ax-button\n look=\"blank\"\n size=\"sm\"\n [color]=\"action.color ?? 'default'\"\n [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n [title]=\"(action.title | translate | async) ?? ''\"\n [class.icon-only]=\"action.iconOnly === true\"\n (onClick)=\"onHeaderActionClick(action)\"\n >\n @if (action.icon) {\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n }\n @if (action.iconOnly !== true) {\n <span>{{ (action.title | translate | async) ?? '' }}</span>\n }\n </ax-button>\n }\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"__item-empty\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{\n ('@general:widgets.widget-configurator.select-widget-type'\n | translate\n | async) ?? 'Select an item type'\n }}\n </span>\n </div>\n }\n }\n\n <ng-template #itemTemplate let-item>\n @let title = (item.title | translate | async) ?? '';\n @let description = (item.description | translate | async) ?? '';\n <div class=\"axp-item-configurator-option\">\n <ax-icon [icon]=\"item.icon || fallbackIcon\"></ax-icon>\n <div class=\"axp-item-configurator-option__text\">\n <span class=\"axp-item-configurator-option__title\">\n {{ title }}\n </span>\n <!-- ----- One-line description under the title ----- -->\n @if (item.description) {\n <span class=\"axp-item-configurator-option__description\">\n {{ description }}\n </span>\n }\n </div>\n </div>\n </ng-template>\n\n <ng-template #loadingTemplate>\n <div class=\"axp-item-configurator-option axp-item-configurator-option--loading\">\n <span class=\"axp-item-configurator-option__icon-slot\"></span>\n <span class=\"axp-item-configurator-option__bar\"></span>\n </div>\n </ng-template>\n\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.icon) {\n <ax-icon [icon]=\"item.icon\"></ax-icon>\n }\n <span>\n {{ (item?.title | translate | async) ?? '' }}\n </span>\n </div>\n </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}.ax-lookup-viewport:has(.axp-item-configurator-option){min-height:224px;overflow-y:scroll;scrollbar-gutter:stable}.ax-lookup-option-host:has(.axp-item-configurator-option){overflow:hidden}.axp-item-configurator-option{box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;height:100%;min-width:0;overflow:hidden;padding-inline:.75rem}.axp-item-configurator-option>ax-icon{flex-shrink:0;width:1.125rem;font-size:1rem;line-height:1;text-align:center}.axp-item-configurator-option__text{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:.125rem;line-height:1.25}.axp-item-configurator-option__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.25}.axp-item-configurator-option__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));font-size:.75rem;line-height:1.25}.axp-item-configurator-option--loading{gap:.5rem}.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{display:block;border-radius:.25rem;background:currentColor}@supports (color: color-mix(in lab,red,red)){.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{background:color-mix(in srgb,currentColor 12%,transparent)}}.axp-item-configurator-option__icon-slot{width:1rem;height:1rem;flex-shrink:0}.axp-item-configurator-option__bar{height:.5rem;width:40%}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: AXFormModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$2.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "component", type: AXLookupComponent, selector: "ax-lookup", inputs: ["name", "mode", "dataSource", "treeDataSource", "valueField", "textField", "disabledField", "columns", "treeParentField", "hasChildrenField", "searchable", "adaptivityEnabled", "caption", "alternate", "searchPlaceholder", "placeholder", "disabled", "readonly", "look", "itemHeight", "maxVisibleItems", "treeSelectionBehavior", "highlightSearch", "allowSelectAll", "itemTemplate", "selectedTemplate", "emptyTemplate", "loadingTemplate", "value", "valueItems"], outputs: ["lookChange", "valueChange", "onValueChanged", "onSelectionChanged", "onFocus", "onBlur", "onItemClick", "onItemSelected", "onOpened", "onClosed"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorIconComponent, selector: "ax-icon", inputs: ["icon"] }, { kind: "component", type: i2$1.AXDecoratorClearButtonComponent, selector: "ax-clear-button", inputs: ["icon"] }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
9428
9502
|
}
|
|
9429
9503
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AXPItemConfiguratorComponent, decorators: [{
|
|
9430
9504
|
type: Component,
|
|
@@ -9436,7 +9510,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9436
9510
|
AXLookupComponent,
|
|
9437
9511
|
AXDecoratorModule,
|
|
9438
9512
|
AXTranslationModule,
|
|
9439
|
-
], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n @if (isEditMode()) {\n <div class=\"__item-selector\">\n <ax-lookup\n #itemLookup\n mode=\"drop-down-list\"\n [ngModel]=\"selectedItemId()\"\n [dataSource]=\"availableItems()\"\n [placeholder]=\"\n ('@general:actions.select.title' | translate | async) ?? ''\n \"\n [readonly]=\"readonly()\"\n (onValueChanged)=\"onSelectionChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n [itemHeight]=\"72\"\n [selectedTemplate]=\"selectedTemplate\"\n (onClosed)=\"exitEditMode()\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-lookup>\n </div>\n }\n\n @if (!isEditMode()) {\n @if (selectedItemId() && currentItemConfig(); as config) {\n <div class=\"__item-info\">\n <div\n class=\"__item-header\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <div>\n @if (config.icon) {\n <i [class]=\"config.icon\"></i>\n }\n <div>\n <span>\n {{ config.title | translate | async }}\n </span>\n @if (config.description) {\n <p>\n {{ (config.description | translate | async) ?? '' }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n @if (config.hasProperties) {\n <ax-button\n [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"\n ('@general:actions.configure.title' | translate | async) ?? ''\n \"\n look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\"\n size=\"sm\"\n (onClick)=\"openConfigureDialog()\"\n >\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n @for (\n action of visibleHeaderActions();\n track action.name ?? $index\n ) {\n <ax-button\n look=\"blank\"\n size=\"sm\"\n [color]=\"action.color ?? 'default'\"\n [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n [title]=\"(action.title | translate | async) ?? ''\"\n [class.icon-only]=\"action.iconOnly === true\"\n (onClick)=\"onHeaderActionClick(action)\"\n >\n @if (action.icon) {\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n }\n @if (action.iconOnly !== true) {\n <span>{{ (action.title | translate | async) ?? '' }}</span>\n }\n </ax-button>\n }\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"__item-empty\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{\n ('@general:widgets.widget-configurator.select-widget-type'\n | translate\n | async) ?? 'Select an item type'\n }}\n </span>\n </div>\n }\n }\n\n <ng-template #itemTemplate let-item>\n <div class=\"__item-template flex w-full items-center gap-3 p-2\">\n @if (item.icon) {\n <i [class]=\"item.icon + 'text-base w-5 text-center'\"></i>\n }\n <div class=\"flex flex-col gap-1 flex-1 min-w-0\">\n <div class=\"text-sm font-medium\">\n {{ item.text | translate | async }}\n </div>\n @if (item.description) {\n <div class=\"text-xs text-neutral-600\">\n {{ item.description | translate | async }}\n </div>\n }\n </div>\n </div>\n </ng-template>\n\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.icon) {\n <i [class]=\"item.icon\"></i>\n }\n <span>\n {{ $safeNavigationMigration(item?.text) | translate | async }}\n </span>\n </div>\n </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-relaxed, 1.625);line-height:var(--leading-relaxed, 1.625);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-template>i{flex-shrink:0;display:inline-flex;align-items:center;justify-content:center}axp-item-configurator .__item-template>div>div:first-child{flex-shrink:0}axp-item-configurator .__item-template>div>div:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>i{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
9513
|
+
], template: "<!-- Item selector & info container -->\n<div class=\"__item-container\">\n @if (isEditMode()) {\n <div class=\"__item-selector\">\n <ax-lookup\n #itemLookup\n mode=\"drop-down-list\"\n [ngModel]=\"selectedItemId()\"\n [dataSource]=\"itemDataSource\"\n [placeholder]=\"\n ('@general:actions.select.title' | translate | async) ?? ''\n \"\n [readonly]=\"readonly()\"\n (onValueChanged)=\"onSelectionChange($event)\"\n valueField=\"value\"\n textField=\"text\"\n [searchable]=\"true\"\n [itemTemplate]=\"itemTemplate\"\n [loadingTemplate]=\"loadingTemplate\"\n [itemHeight]=\"optionRowHeight\"\n [maxVisibleItems]=\"optionMaxVisibleRows\"\n [selectedTemplate]=\"selectedTemplate\"\n (onClosed)=\"exitEditMode()\"\n >\n <ax-clear-button></ax-clear-button>\n </ax-lookup>\n </div>\n }\n\n @if (!isEditMode()) {\n @if (selectedItemId() && currentItemConfig(); as config) {\n <div class=\"__item-info\">\n <div\n class=\"__item-header\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <div>\n @if (config.icon) {\n <ax-icon [icon]=\"config.icon\"></ax-icon>\n }\n <div>\n <span>\n {{ config.title | translate | async }}\n </span>\n @if (config.description) {\n <p>\n {{ (config.description | translate | async) ?? '' }}\n </p>\n }\n </div>\n </div>\n\n <div class=\"__action-buttons\" (click)=\"$event.stopPropagation()\">\n @if (config.hasProperties) {\n <ax-button\n [disabled]=\"!canConfigure() || readonly()\"\n [title]=\"\n ('@general:actions.configure.title' | translate | async) ?? ''\n \"\n look=\"blank\"\n [color]=\"isConfigured() ? 'primary' : 'default'\"\n size=\"sm\"\n (onClick)=\"openConfigureDialog()\"\n >\n <ax-icon icon=\"fa-solid fa-cog\"></ax-icon>\n </ax-button>\n }\n @for (\n action of visibleHeaderActions();\n track action.name ?? $index\n ) {\n <ax-button\n look=\"blank\"\n size=\"sm\"\n [color]=\"action.color ?? 'default'\"\n [disabled]=\"readonly() || isHeaderActionDisabled(action)\"\n [title]=\"(action.title | translate | async) ?? ''\"\n [class.icon-only]=\"action.iconOnly === true\"\n (onClick)=\"onHeaderActionClick(action)\"\n >\n @if (action.icon) {\n <ax-icon [icon]=\"action.icon\"></ax-icon>\n }\n @if (action.iconOnly !== true) {\n <span>{{ (action.title | translate | async) ?? '' }}</span>\n }\n </ax-button>\n }\n </div>\n </div>\n </div>\n } @else {\n <div\n class=\"__item-empty\"\n [class.__editable]=\"!readonly()\"\n (click)=\"enterEditMode()\"\n >\n <i class=\"fa-solid fa-puzzle-piece\"></i>\n <span>\n {{\n ('@general:widgets.widget-configurator.select-widget-type'\n | translate\n | async) ?? 'Select an item type'\n }}\n </span>\n </div>\n }\n }\n\n <ng-template #itemTemplate let-item>\n @let title = (item.title | translate | async) ?? '';\n @let description = (item.description | translate | async) ?? '';\n <div class=\"axp-item-configurator-option\">\n <ax-icon [icon]=\"item.icon || fallbackIcon\"></ax-icon>\n <div class=\"axp-item-configurator-option__text\">\n <span class=\"axp-item-configurator-option__title\">\n {{ title }}\n </span>\n <!-- ----- One-line description under the title ----- -->\n @if (item.description) {\n <span class=\"axp-item-configurator-option__description\">\n {{ description }}\n </span>\n }\n </div>\n </div>\n </ng-template>\n\n <ng-template #loadingTemplate>\n <div class=\"axp-item-configurator-option axp-item-configurator-option--loading\">\n <span class=\"axp-item-configurator-option__icon-slot\"></span>\n <span class=\"axp-item-configurator-option__bar\"></span>\n </div>\n </ng-template>\n\n <ng-template #selectedTemplate let-item>\n <div class=\"__selected-template\">\n @if (item?.icon) {\n <ax-icon [icon]=\"item.icon\"></ax-icon>\n }\n <span>\n {{ (item?.title | translate | async) ?? '' }}\n </span>\n </div>\n </ng-template>\n</div>\n", styles: ["@layer properties;axp-item-configurator{display:flex;flex-direction:column}axp-item-configurator .__item-selector{display:flex;flex-direction:column}axp-item-configurator .__item-selector ax-lookup{width:100%}axp-item-configurator .__item-info{display:flex;flex-direction:column;gap:calc(var(--spacing, .25rem) * 3)}axp-item-configurator .__item-info .__item-header{display:flex;align-items:center;justify-content:space-between;gap:calc(var(--spacing, .25rem) * 3);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 1.5)}axp-item-configurator .__item-info .__item-header.__editable{cursor:pointer}axp-item-configurator .__item-info .__item-header.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-info .__item-header:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-info .__item-header>div:first-child{display:flex;flex:1;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-info .__item-header>div:first-child ax-icon{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));flex-shrink:0}axp-item-configurator .__item-info .__item-header>div:first-child>div{display:flex;flex:1;flex-direction:column;gap:calc(var(--spacing, .25rem) * .5)}axp-item-configurator .__item-info .__item-header>div:first-child>div>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}axp-item-configurator .__item-info .__item-header>div:first-child>div>p{margin:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:var(--text-xs, .75rem);line-height:var(--tw-leading, var(--text-xs--line-height, calc(1 / .75)));--tw-leading: var(--leading-tight, 1.25);line-height:var(--leading-tight, 1.25);color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__item-info .__action-buttons{display:flex;align-items:center;gap:var(--spacing, .25rem);flex-shrink:0}axp-item-configurator .__item-empty{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2);padding-inline:calc(var(--spacing, .25rem) * 2);padding-block:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__item-empty.__editable{cursor:pointer}axp-item-configurator .__item-empty.__editable:hover{border-radius:var(--radius-md, .375rem);background-color:rgba(var(--ax-sys-color-lighter-surface))}axp-item-configurator .__item-empty:not(.__editable){cursor:not-allowed}axp-item-configurator .__item-empty>i{font-size:var(--text-base, 1rem);line-height:var(--tw-leading, var(--text-base--line-height, 1.5 ));color:var(--color-neutral-400, oklch(70.8% 0 none))}axp-item-configurator .__item-empty>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));color:var(--color-neutral-600, oklch(43.9% 0 none))}axp-item-configurator .__selected-template{display:flex;align-items:center;gap:calc(var(--spacing, .25rem) * 2)}axp-item-configurator .__selected-template>ax-icon{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)))}axp-item-configurator .__selected-template>span{font-size:var(--text-sm, .875rem);line-height:var(--tw-leading, var(--text-sm--line-height, calc(1.25 / .875)));--tw-font-weight: var(--font-weight-medium, 500);font-weight:var(--font-weight-medium, 500)}axp-item-configurator :host([readonly]){pointer-events:none;opacity:.7}.ax-lookup-viewport:has(.axp-item-configurator-option){min-height:224px;overflow-y:scroll;scrollbar-gutter:stable}.ax-lookup-option-host:has(.axp-item-configurator-option){overflow:hidden}.axp-item-configurator-option{box-sizing:border-box;display:flex;align-items:center;gap:.625rem;width:100%;height:100%;min-width:0;overflow:hidden;padding-inline:.75rem}.axp-item-configurator-option>ax-icon{flex-shrink:0;width:1.125rem;font-size:1rem;line-height:1;text-align:center}.axp-item-configurator-option__text{display:flex;min-width:0;flex:1;flex-direction:column;justify-content:center;gap:.125rem;line-height:1.25}.axp-item-configurator-option__title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.875rem;font-weight:500;line-height:1.25}.axp-item-configurator-option__description{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--color-neutral-600, oklch(43.9% 0 none));font-size:.75rem;line-height:1.25}.axp-item-configurator-option--loading{gap:.5rem}.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{display:block;border-radius:.25rem;background:currentColor}@supports (color: color-mix(in lab,red,red)){.axp-item-configurator-option__icon-slot,.axp-item-configurator-option__bar{background:color-mix(in srgb,currentColor 12%,transparent)}}.axp-item-configurator-option__icon-slot{width:1rem;height:1rem;flex-shrink:0}.axp-item-configurator-option__bar{height:.5rem;width:40%}@property --tw-font-weight{syntax: \"*\"; inherits: false;}@property --tw-leading{syntax: \"*\"; inherits: false;}@layer properties{@supports ((-webkit-hyphens: none) and (not (margin-trim: inline))) or ((-moz-orient: inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-font-weight: initial;--tw-leading: initial}}}\n/*! tailwindcss v4.3.3 | MIT License | https://tailwindcss.com */\n"] }]
|
|
9440
9514
|
}], ctorParameters: () => [], propDecorators: { selectedItemId: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectedItemId", required: false }] }, { type: i0.Output, args: ["selectedItemIdChange"] }], values: [{ type: i0.Input, args: [{ isSignal: true, alias: "values", required: false }] }, { type: i0.Output, args: ["valuesChange"] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], items: [{ type: i0.Input, args: [{ isSignal: true, alias: "items", required: false }] }], headerActions: [{ type: i0.Input, args: [{ isSignal: true, alias: "headerActions", required: false }] }], itemLookup: [{ type: i0.ViewChild, args: [i0.forwardRef(() => AXLookupComponent), { isSignal: true }] }] } });
|
|
9441
9515
|
//#region ---- Helpers ----
|
|
9442
9516
|
function isPropertyDefinitionArray(value) {
|
|
@@ -9457,6 +9531,24 @@ function extractOptionsPatchFromPropertyViewerValues(values) {
|
|
|
9457
9531
|
}
|
|
9458
9532
|
return values;
|
|
9459
9533
|
}
|
|
9534
|
+
function readLookupFilterText(filter) {
|
|
9535
|
+
if (!filter || typeof filter !== 'object') {
|
|
9536
|
+
return '';
|
|
9537
|
+
}
|
|
9538
|
+
const candidate = filter;
|
|
9539
|
+
if (candidate.operator?.type === 'contains' && candidate.value != null) {
|
|
9540
|
+
return String(candidate.value).trim().toLocaleLowerCase();
|
|
9541
|
+
}
|
|
9542
|
+
if (Array.isArray(candidate.filters)) {
|
|
9543
|
+
for (const nested of candidate.filters) {
|
|
9544
|
+
const text = readLookupFilterText(nested);
|
|
9545
|
+
if (text) {
|
|
9546
|
+
return text;
|
|
9547
|
+
}
|
|
9548
|
+
}
|
|
9549
|
+
}
|
|
9550
|
+
return '';
|
|
9551
|
+
}
|
|
9460
9552
|
|
|
9461
9553
|
//#region ----- Imports -----
|
|
9462
9554
|
//#endregion
|