@acorex/platform 20.9.45 → 20.9.46

package/fesm2022/acorex-platform-layout-widgets.mjs

@@ -24324,50 +24324,66 @@ const AXPImageWidget = {
 class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
     constructor() {
         super(...arguments);
-        //services
+        //#region ---- Services & Dependencies ----
         this.settingsService = inject(AXPSettingsService);
-        //options
+        //#endregion
+        //#region ---- Options ----
         this.canSort = computed(() => this.options()['canSort'] ?? true, ...(ngDevMode ? [{ debugName: "canSort" }] : /* istanbul ignore next */ []));
         this.canFilter = computed(() => this.options()['canFilter'] ?? true, ...(ngDevMode ? [{ debugName: "canFilter" }] : /* istanbul ignore next */ []));
         this.canColumns = computed(() => this.options()['canColumns'] ?? true, ...(ngDevMode ? [{ debugName: "canColumns" }] : /* istanbul ignore next */ []));
         this.filterTriggerMode = signal('manual', ...(ngDevMode ? [{ debugName: "filterTriggerMode" }] : /* istanbul ignore next */ []));
-        this.previousFilterQueries = signal(this.getValue()?.filters || [], ...(ngDevMode ? [{ debugName: "previousFilterQueries" }] : /* istanbul ignore next */ []));
-        this.currentFilterQueries = signal(this.getValue()?.filters || [], ...(ngDevMode ? [{ debugName: "currentFilterQueries" }] : /* istanbul ignore next */ []));
-        //filters
+        //#endregion
+        //#region ---- Filter state ----
+        /** Gates query-filters until value is seeded (prevents empty emit wiping hidden related filters). */
+        this.filtersReady = signal(false, ...(ngDevMode ? [{ debugName: "filtersReady" }] : /* istanbul ignore next */ []));
+        this.previousFilterQueries = signal([], ...(ngDevMode ? [{ debugName: "previousFilterQueries" }] : /* istanbul ignore next */ []));
+        this.currentFilterQueries = signal([], ...(ngDevMode ? [{ debugName: "currentFilterQueries" }] : /* istanbul ignore next */ []));
+        this.initialFilters = signal([], ...(ngDevMode ? [{ debugName: "initialFilters" }] : /* istanbul ignore next */ []));
+        this.isFiltersDirty = computed(() => !isEqual(this.currentFilterQueries(), this.previousFilterQueries()), ...(ngDevMode ? [{ debugName: "isFiltersDirty" }] : /* istanbul ignore next */ []));
+        /** Hidden parent-scope filters captured once after defaultValue is applied. */
+        this.scopedHiddenFilters = [];
+        //#endregion
+        //#region ---- Definitions ----
         this.filterDefinitions = computed(() => this.options()['filterDefinitions'] || [], ...(ngDevMode ? [{ debugName: "filterDefinitions" }] : /* istanbul ignore next */ []));
-        // columns
         this.columnDefinitions = computed(() => this.options()['columnDefinitions'] || [], ...(ngDevMode ? [{ debugName: "columnDefinitions" }] : /* istanbul ignore next */ []));
-        // sorts
         this.sortDefinitions = computed(() => this.options()['sortDefinitions'] || [], ...(ngDevMode ? [{ debugName: "sortDefinitions" }] : /* istanbul ignore next */ []));
-        //initials — seed once (like master toolbar); do not live-bind getValue().filters
-        // or every emit resets axp-query-filters context and select labels fall back to raw keys.
-        this.initialFilters = signal(this.getValue()?.filters || [], ...(ngDevMode ? [{ debugName: "initialFilters" }] : /* istanbul ignore next */ []));
         this.initialColumns = computed(() => this.getValue()?.columns ?? [], ...(ngDevMode ? [{ debugName: "initialColumns" }] : /* istanbul ignore next */ []));
         this.initialSorts = computed(() => this.getValue()?.sorts ?? [], ...(ngDevMode ? [{ debugName: "initialSorts" }] : /* istanbul ignore next */ []));
-        this.isFiltersDirty = computed(() => !isEqual(this.currentFilterQueries(), this.previousFilterQueries()), ...(ngDevMode ? [{ debugName: "isFiltersDirty" }] : /* istanbul ignore next */ []));
-        //effects
+        //#endregion
+        //#region ---- Effects ----
         this.#eff = effect(() => {
             this.loadSettings();
         }, ...(ngDevMode ? [{ debugName: "#eff" }] : /* istanbul ignore next */ []));
     }
-    async loadSettings() {
-        const filterTriggerMode = await this.settingsService.get(AXPCommonSettings.EntityFilterApplyMode);
-        this.filterTriggerMode.set((filterTriggerMode?.value ?? 'auto'));
+    //#endregion
+    //#region ---- Lifecycle ----
+    ngOnInit() {
+        super.ngOnInit();
+        const filters = (this.getValue()?.filters ?? []);
+        this.scopedHiddenFilters = filters.filter((filter) => filter.hidden === true);
+        this.initialFilters.set(filters);
+        this.previousFilterQueries.set(filters);
+        this.currentFilterQueries.set(filters);
+        this.filtersReady.set(true);
     }
-    //effects
+    //#endregion
+    //#region ---- Effects ----
     #eff;
-    //actions
+    //#endregion
+    //#region ---- Actions ----
     applyFilters() {
-        this.previousFilterQueries.set(this.currentFilterQueries());
-        this.setValue({ ...this.getValue(), filters: this.currentFilterQueries() });
+        const filters = this.mergeScopedHiddenFilters(this.currentFilterQueries());
+        this.previousFilterQueries.set(filters);
+        this.setValue({ ...this.getValue(), filters });
     }
     onFiltersChanged(filters) {
-        if (!isEqual(this.getValue()?.filters || [], filters)) {
+        const merged = this.mergeScopedHiddenFilters(filters);
+        if (!isEqual(this.getValue()?.filters || [], merged)) {
             if (this.filterTriggerMode() === 'auto') {
-                this.setValue({ ...this.getValue(), filters });
+                this.setValue({ ...this.getValue(), filters: merged });
             }
             else {
-                this.currentFilterQueries.set(filters);
+                this.currentFilterQueries.set(merged);
             }
         }
     }
@@ -24381,8 +24397,25 @@ class AXPListToolbarWidgetViewComponent extends AXPValueWidgetComponent {
             this.setValue({ ...this.getValue(), sorts });
         }
     }
+    //#endregion
+    //#region ---- Helpers ----
+    async loadSettings() {
+        const filterTriggerMode = await this.settingsService.get(AXPCommonSettings.EntityFilterApplyMode);
+        this.filterTriggerMode.set((filterTriggerMode?.value ?? 'auto'));
+    }
+    /**
+     * Re-attaches hidden related-list filters so user-applied filters cannot drop parent scope.
+     */
+    mergeScopedHiddenFilters(filters) {
+        if (!this.scopedHiddenFilters.length) {
+            return filters;
+        }
+        const scopedFields = new Set(this.scopedHiddenFilters.map((filter) => filter.field));
+        const rest = filters.filter((filter) => !scopedFields.has(filter.field));
+        return [...this.scopedHiddenFilters, ...rest];
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPListToolbarWidgetViewComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.9", type: AXPListToolbarWidgetViewComponent, isStandalone: true, selector: "axp-list-toolbar-widget-view", usesInheritance: true, ngImport: i0, template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter() && filtersReady()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n", dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: AXButtonModule }, { kind: "component", type: i1$1.AXButtonComponent, selector: "ax-button", inputs: ["disabled", "size", "tabIndex", "color", "look", "text", "toggleable", "selected", "iconOnly", "type", "loadingText"], outputs: ["onBlur", "onFocus", "onClick", "selectedChange", "toggleableChange", "lookChange", "colorChange", "disabledChange", "loadingTextChange"] }, { kind: "ngmodule", type: AXDecoratorModule }, { kind: "component", type: i2$1.AXDecoratorGenericComponent, selector: "ax-footer, ax-header, ax-content, ax-divider, ax-form-hint, ax-prefix, ax-suffix, ax-text, ax-title, ax-subtitle, ax-placeholder, ax-overlay" }, { kind: "ngmodule", type: AXTranslationModule }, { kind: "component", type: AXPQueryFiltersComponent, selector: "axp-query-filters", inputs: ["filtersDefinitions", "initialFilters"], outputs: ["onFiltersChanged"] }, { kind: "ngmodule", type: AXPopoverModule }, { kind: "component", type: i3$1.AXPopoverComponent, selector: "ax-popover", inputs: ["width", "disablePanelClass", "disabled", "offsetX", "offsetY", "target", "placement", "content", "openOn", "closeOn", "hasBackdrop", "openAfter", "closeAfter", "closeOnScroll", "backdropClass", "panelClass", "adaptivityEnabled"], outputs: ["onOpened", "onClosed"] }, { kind: "component", type: AXPQuerySortsComponent, selector: "axp-query-sorts", inputs: ["sortDefinitions", "initialSortQueries"], outputs: ["sortDefinitionsChange", "sortQueriesChange"] }, { kind: "component", type: AXPQueryColumnsComponent, selector: "axp-query-columns", inputs: ["columns"], outputs: ["columnsChange"] }, { kind: "pipe", type: i1$4.AsyncPipe, name: "async" }, { kind: "pipe", type: i6.AXTranslatorPipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImport: i0, type: AXPListToolbarWidgetViewComponent, decorators: [{
             type: Component,
@@ -24395,7 +24428,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.9", ngImpor
                         AXPopoverModule,
                         AXPQuerySortsComponent,
                         AXPQueryColumnsComponent,
-                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n" }]
+                    ], template: "<div class=\"ax-flex ax-items-center ax-gap-2 ax-border-b ax-border-light w-full\">\n  @if (canFilter() && filtersReady()) {\n    <axp-query-filters\n      [filtersDefinitions]=\"filterDefinitions()\"\n      [initialFilters]=\"initialFilters()\"\n      (onFiltersChanged)=\"onFiltersChanged($event)\"\n    ></axp-query-filters>\n  }\n  <div class=\"ax-flex ax-items-center ax-gap-1 md:ax-gap-2\">\n    @if (filterTriggerMode() === 'manual' && isFiltersDirty()) {\n      <ax-button\n        [title]=\"'@general:actions.apply.title'\"\n        [iconOnly]=\"true\"\n        #filterButton\n        [color]=\"'primary'\"\n        (onClick)=\"applyFilters()\"\n      >\n        <ax-prefix>\n          <i class=\"fa-light fa-search\"></i>\n        </ax-prefix>\n      </ax-button>\n    }\n    @if (canColumns()) {\n      <ax-button [iconOnly]=\"true\" #columnButton [color]=\"'default'\">\n        <i class=\"fa-light fa-table-columns\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"30\"\n        [target]=\"columnButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.columns' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-columns\n              [columns]=\"columnDefinitions()\"\n              (columnsChange)=\"onColumnsChanged($event)\"\n            ></axp-query-columns>\n          </div>\n        </div>\n      </ax-popover>\n    }\n    @if (canSort()) {\n      <ax-button [iconOnly]=\"true\" [text]=\"'Sorts'\" #sortButton [color]=\"'default'\">\n        <i class=\"fa-light fa-sort-amount-up\"></i>\n      </ax-button>\n      <ax-popover\n        [adaptivityEnabled]=\"true\"\n        [offsetY]=\"10\"\n        [target]=\"sortButton\"\n        [openOn]=\"'toggle'\"\n        [closeOn]=\"'clickOut'\"\n        #popover\n      >\n        <div class=\"ax-lightest-surface ax-shadow-md ax-border md:ax-w-72 ax-w-full ax-rounded-md\">\n          <ax-header class=\"ax-border-b ax-lighter-surface ax-rounded-t-md ax-p-4 ax-font-bold\">\n            {{ '@general:terms.common.sorts' | translate | async }}\n          </ax-header>\n          <div class=\"ax-py-2 ax-px-4\">\n            <axp-query-sorts\n              [sortDefinitions]=\"sortDefinitions()\"\n              (sortQueriesChange)=\"onSortsChanged($event)\"\n              [initialSortQueries]=\"initialSorts()\"\n            ></axp-query-sorts>\n          </div>\n        </div>\n      </ax-popover>\n    }\n  </div>\n</div>\n" }]
         }] });
 
 var listToolbarWidgetView_component = /*#__PURE__*/Object.freeze({