@quadrel-enterprise-ui/framework 20.26.2 → 20.27.1

package/index.d.ts

@@ -3355,6 +3355,7 @@ declare class QdMockFilterItemDateRangeComponent {
     timePickerConfig?: QdFormTimepickerConfiguration;
     testId: any;
     get dataTestId(): string;
+    open(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<QdMockFilterItemDateRangeComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<QdMockFilterItemDateRangeComponent, "qd-filter-item-date-range", never, { "filterId": { "alias": "filterId"; "required": false; }; "categoryIndex": { "alias": "categoryIndex"; "required": false; }; "itemIndex": { "alias": "itemIndex"; "required": false; }; "timePickerConfig": { "alias": "timePickerConfig"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, {}, never, never, false, never>;
 }
@@ -3412,12 +3413,15 @@ declare class QdMockFilterService {
     private postBodyWithEmptyDefaultSubjects;
     private categoryByIdSubject;
     private itemByIdSubject;
+    private loadingSubject;
     initializeFilterState(): void;
     updateFilterState(): void;
     getFilterState(): void;
     setFilterSelection: any;
     updateItem: any;
     setItemIsActive: any;
+    clearCategorySelection: any;
+    setItemsLoading: any;
     selectFilterDataById$: any;
     getQueryString$(filterId: any): Observable<string>;
     getFilterUrlParameter$(filterId: any): Observable<string>;
@@ -3426,6 +3430,7 @@ declare class QdMockFilterService {
     getPostBodyWithEmptyDefault$(filterId: any): Observable<QdFilterPostBodyData>;
     getCategoryById$(filterId: any): Observable<any>;
     getItemById$(filterId: any): Observable<any>;
+    getItemsLoading$(filterId: any): Observable<boolean>;
     getQueryStringSubject(filterId: any): Subject<string>;
     getFilterUrlParameterSubject(filterId: any): Subject<string>;
     getPostBodySubject(filterId: any): Subject<QdFilterPostBodyData>;
@@ -3434,6 +3439,7 @@ declare class QdMockFilterService {
     getMaxDate$: any;
     emitCategory(value: any, filterId: any): void;
     emitItem(value: any, filterId: any): void;
+    emitLoading(value: any, filterId: any): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<QdMockFilterService, never>;
     static ɵprov: i0.ɵɵInjectableDeclaration<QdMockFilterService>;
 }
@@ -5190,6 +5196,7 @@ interface QdPopoverSizeConstraints {
  * - The returned Observable emits `true` once initial sizing is applied and overlay is visible.
  * - Even if autosize is turned off, the minimum and maximum width or height constraints are always enforced as hard limits.
  * - This means the popover can never be smaller or larger than the values you set, no matter what content it contains.
+ * - The width is also capped to the current screen width, so the popover never reaches past the screen edge — even if a larger maxWidth is set.
  *
  * #### For the hidden-content measuring
  * @see https://stackoverflow.com/questions/1841124/find-the-potential-width-of-a-hidden-element
@@ -5209,6 +5216,7 @@ declare class QdPopoverSizingService {
     observe(host: HTMLElement, popover: HTMLElement, overlayRef: OverlayRef, autoSize: QdPopoverAutoSizeConfig, constraints: QdPopoverSizeConstraints): Observable<boolean>;
     private showOverlay;
     private hideOverlay;
+    private resolveWidthLimits;
     private applySize;
     private measureContentSize;
     disconnect(): void;
@@ -5223,6 +5231,26 @@ declare class QdPopoverParentService {
     static ɵprov: i0.ɵɵInjectableDeclaration<QdPopoverParentService>;
 }
 
+/**
+ * **QdPopoverOnClickDirective**
+ *
+ * Shows a popover next to its host element and opens or closes it on host click.
+ *
+ * It is an internal building block. Quadrel components such as dropdowns, menu buttons and
+ * filters build on it; consumers do not use it directly.
+ *
+ * #### Features:
+ * - Opens the popover on click and closes it on the next click or an outside click.
+ * - With `qdPopoverEnableKeyControl`, Enter and Space open it, Escape and Tab close it.
+ * - Sizes the popover to its host or content within the min/max limits, and never wider than the screen.
+ * - Places it with the Angular CDK; with `qdPopoverFlipIntoViewport` it opens to the side that has room instead of off the screen edge.
+ * - Keeps only one popover open: opening one closes the others, but a nested popover keeps its parents open.
+ *
+ * #### Notes & Best Practices
+ * - Emits `opened` and `closed` so consumers can react.
+ * - The flip is opt-in, so popovers that already sit correctly stay as they are.
+ * - Not part of the public API; use the higher-level components like `qd-dropdown` or `qd-menu-button` instead.
+ */
 declare class QdPopoverOnClickDirective implements OnInit, OnDestroy {
     protected hostRef: ElementRef<HTMLElement>;
     protected overlayPositionBuilder: OverlayPositionBuilder;
@@ -5241,6 +5269,7 @@ declare class QdPopoverOnClickDirective implements OnInit, OnDestroy {
     qdPopoverMaxWidth: number | 'none';
     qdPopoverAutoSize: QdPopoverAutoSizeConfig;
     qdPopoverEnableKeyControl: boolean;
+    qdPopoverFlipIntoViewport: boolean;
     readonly opened: EventEmitter<any>;
     readonly closed: EventEmitter<any>;
     handleClick(event: MouseEvent): void;
@@ -5251,14 +5280,26 @@ declare class QdPopoverOnClickDirective implements OnInit, OnDestroy {
     private _host;
     private _popoverRef;
     private _positionStrategyInstance;
+    private _resolvedPositions;
     private _subscriptions;
     constructor();
     ngOnInit(): void;
     ngOnDestroy(): void;
     open(): void;
+    /**
+     * Re-aligns an open overlay with its origin element.
+     *
+     * The connected position is only recomputed on scroll/resize, not when a
+     * layout reflow moves the origin (e.g. a chip or action buttons appearing in
+     * the host). Call this after such a reflow to keep the overlay attached to the
+     * host. Deferred by one frame so the new layout is measured, and a no-op while
+     * the overlay is detached, so it stays cheap to call on discrete events.
+     */
+    updatePosition(): void;
     close(): void;
     private popoverInstance;
     private initPositionStrategy;
+    private withHorizontalFallbacks;
     private createOverlay;
     private runSizingAndOpen;
     private setPopoverContent;
@@ -5268,7 +5309,7 @@ declare class QdPopoverOnClickDirective implements OnInit, OnDestroy {
     private unsubscribeAll;
     private cleanup;
     static ɵfac: i0.ɵɵFactoryDeclaration<QdPopoverOnClickDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<QdPopoverOnClickDirective, "[qdPopoverOnClick]", ["qdPopoverOnClick"], { "qdPopoverOnClick": { "alias": "qdPopoverOnClick"; "required": false; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; }; "qdPopoverCloseStrategy": { "alias": "qdPopoverCloseStrategy"; "required": false; }; "qdPopoverDisabled": { "alias": "qdPopoverDisabled"; "required": false; }; "qdPopoverStopPropagation": { "alias": "qdPopoverStopPropagation"; "required": false; }; "qdPopoverBackgroundColor": { "alias": "qdPopoverBackgroundColor"; "required": false; }; "qdPopoverMaxHeight": { "alias": "qdPopoverMaxHeight"; "required": false; }; "qdPopoverMinWidth": { "alias": "qdPopoverMinWidth"; "required": false; }; "qdPopoverMaxWidth": { "alias": "qdPopoverMaxWidth"; "required": false; }; "qdPopoverAutoSize": { "alias": "qdPopoverAutoSize"; "required": false; }; "qdPopoverEnableKeyControl": { "alias": "qdPopoverEnableKeyControl"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<QdPopoverOnClickDirective, "[qdPopoverOnClick]", ["qdPopoverOnClick"], { "qdPopoverOnClick": { "alias": "qdPopoverOnClick"; "required": false; }; "positionStrategy": { "alias": "positionStrategy"; "required": false; }; "qdPopoverCloseStrategy": { "alias": "qdPopoverCloseStrategy"; "required": false; }; "qdPopoverDisabled": { "alias": "qdPopoverDisabled"; "required": false; }; "qdPopoverStopPropagation": { "alias": "qdPopoverStopPropagation"; "required": false; }; "qdPopoverBackgroundColor": { "alias": "qdPopoverBackgroundColor"; "required": false; }; "qdPopoverMaxHeight": { "alias": "qdPopoverMaxHeight"; "required": false; }; "qdPopoverMinWidth": { "alias": "qdPopoverMinWidth"; "required": false; }; "qdPopoverMaxWidth": { "alias": "qdPopoverMaxWidth"; "required": false; }; "qdPopoverAutoSize": { "alias": "qdPopoverAutoSize"; "required": false; }; "qdPopoverEnableKeyControl": { "alias": "qdPopoverEnableKeyControl"; "required": false; }; "qdPopoverFlipIntoViewport": { "alias": "qdPopoverFlipIntoViewport"; "required": false; }; }, { "opened": "opened"; "closed": "closed"; }, never, never, false, never>;
 }
 
 /**
@@ -6288,6 +6329,7 @@ declare class QdDatepickerComponent implements ControlValueAccessor, OnInit, OnC
     registerOnTouched(fn: () => void): void;
     writeValue(date: Date): void;
     setDisabledState(disabled: boolean): void;
+    open(): void;
     handleUpdatedDate($rawValue: QdInputRawEventValue): void;
     handleUpdatedTime($event: string): void;
     handleUpdatedDateTime($rawValue: QdInputRawEventValue): void;
@@ -11521,6 +11563,7 @@ declare class QdFilterService {
     private queryStringSubjects;
     private filterUrlParameterSubjects;
     private postBodySubjects;
+    private itemsLoadingSubjects;
     getItems$(filterId: any, categoryIndex: any): Observable<any>;
     getItemById$(filterId: any, categoryIndex: any, itemIndex: any): Observable<QdFilterItem>;
     getMinDate$(filterId: any, categoryIndex: any, itemIndex: any): Observable<string | undefined>;
@@ -11540,6 +11583,7 @@ declare class QdFilterService {
     selectFilterDataById$(filterId: any): Observable<QdFilterCategory[]>;
     selectHasActiveCategory$(filterId: any): Observable<boolean>;
     getCategoryById$(filterId: any, categoryIndex: any): Observable<any>;
+    getItemsLoading$(filterId: any, categoryIndex: any): Observable<boolean>;
     getFilterCategoryValue$(filterId: any, categoryIndex: any): Observable<any>;
     /**
      * Action dispatcher
@@ -11555,6 +11599,9 @@ declare class QdFilterService {
     resetEmissionReplaySubjects(filterId: any): void;
     setCategoryFilter(filterId: any, categoryIndex: number, filter: string): void;
     resetCategoryFilter(filterId: string, categoryIndex: number): void;
+    clearCategorySelection(filterId: string, categoryIndex: number): void;
+    setItemsLoading(filterId: string, categoryIndex: number, loading: boolean): void;
+    private getItemsLoadingSubject;
     private getQueryStringSubject;
     private getFilterUrlParameterSubject;
     private getPostBodySubject;
@@ -11563,43 +11610,123 @@ declare class QdFilterService {
 }
 
 /**
- * The **QdFilter** is responsible for the filtering of data.
+ * **QdFilterComponent** lets users build and apply a filter with several categories over a data set.
+ *
+ * #### **Features**
+ *
+ * - **Category types**: single and multi select dropdowns, a boolean toggle, date and date-time pickers, date and date-time ranges, and free text. A select dropdown can also show a filter field that narrows the item list.
+ * - **Outputs**: react to the applied selection through the query-string and post-body outputs, or read the current selection at any time.
+ * - **Multi-staging**: chain categories so one stage loads its items from the selection of another.
+ * - **URL sync**: the selection is kept in the URL, so a view can be shared, bookmarked, and reopened.
+ *
+ * #### **Quick start**
+ *
+ * **1. Add the filter to the template**
+ *
+ * ```html
+ * <qd-filter
+ *   [filterData]="myFilterConfig"
+ *   (queryStringOutput)="callBackendWithQueryString($event)"
+ *   (postBodyOutput)="callBackendWithResultObject($event)"
+ * ></qd-filter>
+ * ```
+ *
+ * **2. Define the config in your component**
+ *
+ * ```typescript
+ * myFilterConfig: QdFilterConfigData = {
+ *   categories: [
+ *     {
+ *       type: 'singleSelect',
+ *       category: 'controlObject',
+ *       i18n: 'i18n.my.category.controlObject',
+ *       items: [
+ *         { item: 'vehicle', i18n: 'i18n.my.item.vehicle', active: true },
+ *         { item: 'article', i18n: 'i18n.my.item.article' }
+ *       ],
+ *       filter: true
+ *     },
+ *     {
+ *       type: 'multiSelect',
+ *       category: 'enrollmentCountry',
+ *       i18n: 'i18n.my.category.enrollmentCountry',
+ *       items: [
+ *         { item: 'de', i18n: 'i18n.my.item.de' },
+ *         { item: 'ch', i18n: 'i18n.my.item.ch' }
+ *       ]
+ *     }
+ *   ],
+ *   uid: 'overview-filter'
+ * };
+ * ```
+ *
+ * The `filterData` input is the only configuration. It holds the categories and the behavior flags.
  *
- * Hirarchical structure::
- * - **Filter**: Name of the component.
- * - **Categories**: A list of one or more different categories.
- * - **Items**: A list with one or more items belongs to a parent category.
+ * #### **Category types**
  *
- * ### Filter selection ###
+ * A category sets its type to one of: singleSelect, multiSelect, boolean, date, dateTime,
+ * dateRange, dateTimeRange or freeText. Single and multi select show a dropdown, boolean is a
+ * toggle, the date types open a picker (the date-time variants add a time picker), and free text
+ * is a text field applied on enter.
  *
- * To get the applied filters you can listen to the outputs `(queryStringOutput)` and `(postBodyOutput)`.
- * These outputs will be emitted when the filter is triggered. The `(queryStringOutput)` returns
- * the applied filters as an url string with an encoded *filter* parameter. The `(postBodyOutput)`
- * yields an object containing the categories and active items.
+ * On a single or multi select you can add a filter field above the items with `filter: true` to
+ * narrow the item list. It has no effect on the other types.
  *
- * In addition to the outputs, you also can query the current filter selection with the
- * filter component methods `getCurrentQueryString`, `getCurrentFilterUrlParameterString` and `getCurrentPostBody`.
+ * #### **Filter selection**
  *
- * ### Preserve filter state ###
+ * Listen to the outputs to react when the user applies the filter. The query-string output gives
+ * the selection as a URL string (for example filter=...); the post-body output gives it as an
+ * object with the active categories and their values.
  *
- * To preserve the filter state when navigating, for example between detail and overview page, you just have to define
- * a uid in the filter data config.
+ * The outputs fire when the user applies the filter, on reset (only when a preselection exists),
+ * when the last active item is removed, and on load if a category starts active.
  *
- * ### Multi Staging Filters
+ * To read the selection without waiting for an apply, call `getCurrentQueryString` or
+ * `getCurrentPostBody`, or subscribe to `getFilterChanges$` for a continuous stream.
  *
- * To build a dependency chain of filters you can use the `dependsOn` property of a filter that depends on
- * other filters. In the `dependsOn` property you set the names of the filter categories the category depends on.
- * Always when one of these categories change the `itemsResolver` will be called with the list
- * of categories given in `dependsOn`. The `itemsResolver` can also be defined in the config where `dependsOn`
- * is also defined.
+ * #### **Multi-staging filters**
  *
- * If the items resolver has not been called yet or when it returns an empty array of items,
- * the corresponding filter stage won't be rendered.
+ * To chain categories, give one a `dependsOn` list and an `itemsResolver`. In `dependsOn` you
+ * name the parent categories. The resolver receives the active parents and returns the items for
+ * this stage.
  *
- * #### Support
+ * ```typescript
+ * const cityCategory: QdDependentFilterCategory = {
+ *   type: 'multiSelect',
+ *   category: 'city',
+ *   i18n: 'i18n.my.category.city',
+ *   dependsOn: ['country'],
+ *   itemsResolver: ([country]) =>
+ *     loadCitiesFor(country.items.filter(item => item.active)),
+ *   filter: true
+ * };
+ * ```
  *
- * Multi Staging Filters only work for `singleSelect` and `multiSelect` filters.
+ * The stage appears once every parent has an active item. While its items load, the open
+ * dropdown shows a loading text instead of the list. If the resolver returns nothing, the list
+ * stays empty. Multi-staging works only for single and multi select categories.
  *
+ * #### **URL synchronization**
+ *
+ * The filter keeps its selection in the URL filter parameter: it is saved when the selection
+ * changes and read back when the page opens, so a user can share or bookmark the URL and return
+ * to the same filter.
+ *
+ * This is on by default. With more than one filter in a view, only one may own the URL, so set
+ * `connectWithRouter` to false on every other filter.
+ *
+ * #### **Preserve filter state**
+ *
+ * Give the config a stable `uid` to keep the selection while the user moves around the app, for
+ * example from an overview to a detail page and back. The selection is restored the next time a
+ * filter with the same `uid` is shown.
+ *
+ * #### **Reset behavior**
+ *
+ * An item set to active is a preselection. The reset button reads "Reset" when there is no
+ * preselection, and "Back to preselection" when the config starts with active items. It restores
+ * the initial state. With instant filtering (`isInstantFiltering`) the apply and reset buttons
+ * are hidden and the filter applies on every change.
  */
 declare class QdFilterComponent implements OnInit, OnChanges, OnDestroy {
     readonly filterService: QdFilterService;
@@ -11846,6 +11973,7 @@ declare class QdFilterItemDateComponent implements OnInit, OnDestroy {
     clickTimePlaceholder: EventEmitter<boolean>;
     testId: string;
     get dataTestId(): string;
+    private datepicker?;
     datepickerConfig: QdFormDatepickerConfiguration;
     item: Date;
     private _destroyed$;
@@ -11853,36 +11981,12 @@ declare class QdFilterItemDateComponent implements OnInit, OnDestroy {
     ngOnDestroy(): void;
     handleDateChange(date: Date): void;
     handleClickTimePlaceholder($event: boolean): void;
+    open(): void;
     private subscribeGetItem;
     static ɵfac: i0.ɵɵFactoryDeclaration<QdFilterItemDateComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<QdFilterItemDateComponent, "qd-filter-item-date", never, { "filterId": { "alias": "filterId"; "required": false; }; "categoryIndex": { "alias": "categoryIndex"; "required": false; }; "itemIndex": { "alias": "itemIndex"; "required": false; }; "timePickerConfig": { "alias": "timePickerConfig"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, { "clickTimePlaceholder": "clickTimePlaceholder"; }, never, never, false, never>;
 }
 
-declare class QdFilterItemDateRangeCategoryComponent implements OnInit {
-    private readonly filterService;
-    filterId: string;
-    categoryIndex: number;
-    testId: string;
-    timePickerConfig?: QdFormTimepickerConfiguration;
-    i18n$: Observable<string>;
-    fromItem$: Observable<QdFilterItem>;
-    fromItemIndex: number;
-    fromItemTimePickerConfig: QdFormTimepickerConfiguration;
-    fromItemTimePlaceholderClicked: boolean;
-    untilItem$: Observable<QdFilterItem>;
-    untilItemIndex: number;
-    untilItemTimePickerConfig: QdFormTimepickerConfiguration;
-    untilItemTimePlaceholderClicked: boolean;
-    ngOnInit(): void;
-    removeItem(itemIndex: any): void;
-    handleFromTimePlaceholderClicked($event: boolean): void;
-    handleUntilTimePlaceholderClicked($event: boolean): void;
-    private setCategoryI18n;
-    private setFromItem;
-    static ɵfac: i0.ɵɵFactoryDeclaration<QdFilterItemDateRangeCategoryComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<QdFilterItemDateRangeCategoryComponent, "qd-filter-category-date-range", never, { "filterId": { "alias": "filterId"; "required": false; }; "categoryIndex": { "alias": "categoryIndex"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; "timePickerConfig": { "alias": "timePickerConfig"; "required": false; }; }, {}, never, never, false, never>;
-}
-
 declare class QdFilterItemDateRangeComponent implements OnInit, OnDestroy {
     private readonly filterService;
     filterId: string;
@@ -11896,6 +12000,8 @@ declare class QdFilterItemDateRangeComponent implements OnInit, OnDestroy {
     private _destroyed$;
     get itemClassName(): string;
     get dataTestId(): string;
+    private datepicker?;
+    open(): void;
     get minDate$(): Observable<string | undefined>;
     get maxDate$(): Observable<string | undefined>;
     ngOnInit(): void;
@@ -11909,6 +12015,32 @@ declare class QdFilterItemDateRangeComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<QdFilterItemDateRangeComponent, "qd-filter-item-date-range", never, { "filterId": { "alias": "filterId"; "required": false; }; "categoryIndex": { "alias": "categoryIndex"; "required": false; }; "itemIndex": { "alias": "itemIndex"; "required": false; }; "timePickerConfig": { "alias": "timePickerConfig"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, { "clickTimePlaceholder": "clickTimePlaceholder"; }, never, never, false, never>;
 }
 
+declare class QdFilterItemDateRangeCategoryComponent implements OnInit {
+    private readonly filterService;
+    filterId: string;
+    categoryIndex: number;
+    testId: string;
+    timePickerConfig?: QdFormTimepickerConfiguration;
+    i18n$: Observable<string>;
+    fromItem$: Observable<QdFilterItem>;
+    fromItemIndex: number;
+    fromItemTimePickerConfig: QdFormTimepickerConfiguration;
+    fromItemTimePlaceholderClicked: boolean;
+    untilItem$: Observable<QdFilterItem>;
+    untilItemIndex: number;
+    untilItemTimePickerConfig: QdFormTimepickerConfiguration;
+    untilItemTimePlaceholderClicked: boolean;
+    ngOnInit(): void;
+    openItem(itemRef: QdFilterItemDateRangeComponent, event: Event): void;
+    removeItem(itemIndex: any): void;
+    handleFromTimePlaceholderClicked($event: boolean): void;
+    handleUntilTimePlaceholderClicked($event: boolean): void;
+    private setCategoryI18n;
+    private setFromItem;
+    static ɵfac: i0.ɵɵFactoryDeclaration<QdFilterItemDateRangeCategoryComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<QdFilterItemDateRangeCategoryComponent, "qd-filter-category-date-range", never, { "filterId": { "alias": "filterId"; "required": false; }; "categoryIndex": { "alias": "categoryIndex"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; "timePickerConfig": { "alias": "timePickerConfig"; "required": false; }; }, {}, never, never, false, never>;
+}
+
 declare class QdFilterItemFreeTextComponent implements OnInit, OnDestroy {
     private readonly filterService;
     filterId: string;
@@ -11921,6 +12053,7 @@ declare class QdFilterItemFreeTextComponent implements OnInit, OnDestroy {
     i18n: any;
     get dataTestId(): string;
     get value(): string;
+    inputValue: string;
     private _destroyed$;
     ngOnInit(): void;
     ngOnDestroy(): void;
@@ -11931,8 +12064,14 @@ declare class QdFilterItemFreeTextComponent implements OnInit, OnDestroy {
     static ɵcmp: i0.ɵɵComponentDeclaration<QdFilterItemFreeTextComponent, "qd-filter-item-free-text", never, { "filterId": { "alias": "filterId"; "required": false; }; "isInstantFiltering": { "alias": "isInstantFiltering"; "required": false; }; "categoryIndex": { "alias": "categoryIndex"; "required": false; }; "itemIndex": { "alias": "itemIndex"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, { "enterClick": "enterClick"; }, never, never, false, never>;
 }
 
+interface QdFilterItemEntry {
+    item: QdFilterItem;
+    itemIndex: number;
+}
 declare class QdFilterItemSelectCategoryComponent implements OnInit {
     private readonly filterService;
+    private readonly breakpointService;
+    readonly isMobile$: Observable<boolean>;
     filterId: string;
     categoryIndex: number;
     testId: string;
@@ -11944,10 +12083,18 @@ declare class QdFilterItemSelectCategoryComponent implements OnInit {
     items: QdFilterItem[];
     dependsOn: string[];
     showSelectButton$: Observable<boolean>;
+    itemsLoading$: Observable<boolean>;
     positionStrategy: ConnectedPosition[];
     maxFlyoutHeight: number;
     private _destroyRef;
+    private frozenSelectedKeys;
+    private frozenUnselectedKeys;
     get closeButton(): boolean;
+    get activeItemCount(): number;
+    get selectedDropdownEntries(): QdFilterItemEntry[];
+    get unselectedDropdownEntries(): QdFilterItemEntry[];
+    get showSelectedSeparator(): boolean;
+    get hasNoVisibleItems(): boolean;
     get buttonClassName(): string;
     get layerContentClassName(): string;
     get filterCategoryValue$(): Observable<string>;
@@ -11956,9 +12103,14 @@ declare class QdFilterItemSelectCategoryComponent implements OnInit {
     onLayerClosed(): void;
     closeLayer(): void;
     close(itemIndex: string): void;
+    clearAll(): void;
+    trackByItem(_index: number, entry: QdFilterItemEntry): string;
+    private freezeDropdownOrder;
+    private toEntries;
     changeValue($event: string): void;
     private initCategorySubscription;
     private initItemsSubscription;
+    private haveSameItemKeys;
     private initShowSelectButton;
     static ɵfac: i0.ɵɵFactoryDeclaration<QdFilterItemSelectCategoryComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<QdFilterItemSelectCategoryComponent, "qd-filter-category-select", never, { "filterId": { "alias": "filterId"; "required": false; }; "categoryIndex": { "alias": "categoryIndex"; "required": false; }; "testId": { "alias": "data-test-id"; "required": false; }; }, {}, never, never, false, never>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quadrel-enterprise-ui/framework",
-  "version": "20.26.2",
+  "version": "20.27.1",
   "exports": {
     "./jest-preset": "./jest-preset.js",
     "./package.json": {

package/src/assets/i18n/de.json

@@ -33,6 +33,8 @@
   "i18n.qd.container.toolbar.filter.reset": "Zurücksetzen",
   "i18n.qd.container.toolbar.filter.backToPreSelect": "Zurück zur Vorauswahl",
   "i18n.qd.filter.layer.caption": "Filter",
+  "i18n.qd.filter.noResults": "Keine Treffer",
+  "i18n.qd.filter.loading": "Wird geladen …",
   "i18n.qd.filter.category.date": "Datum",
   "i18n.qd.filter.category.dateRange": "Datumsbereich",
   "i18n.qd.filter.date.on": "am",

package/src/assets/i18n/en.json

@@ -33,6 +33,8 @@
   "i18n.qd.container.toolbar.filter.reset": "Reset",
   "i18n.qd.container.toolbar.filter.backToPreSelect": "Back to preselection",
   "i18n.qd.filter.layer.caption": "Filter",
+  "i18n.qd.filter.noResults": "No results",
+  "i18n.qd.filter.loading": "Loading …",
   "i18n.qd.filter.category.date": "Date",
   "i18n.qd.filter.category.dateRange": "Date range",
   "i18n.qd.filter.date.on": "on",
@@ -68,12 +70,10 @@
   "i18n.qd.input.units.percentage": "%",
   "i18n.qd.input.options.loading": "Suggestions are loading...",
   "i18n.qd.input.options.error": "Error loading suggestions",
-
   "i18n.qd.input.number.ambiguousHint.comma": "The entered value is interpreted according to the regional formatting and uses a comma (,) as the decimal separator.",
   "i18n.qd.input.number.ambiguousHint.dot": "The entered value is interpreted according to the regional formatting and uses a dot (.) as the decimal separator.",
   "i18n.qd.input.number.invalidCharacters.comma": "The entered value is invalid. Expected number format: \"123,45\".",
   "i18n.qd.input.number.invalidCharacters.dot": "The entered value is invalid. Expected number format: \"123.45\".",
-
   "i18n.qd.multiInput.label.tariffNumbers": "[en]Tarifnummern",
   "i18n.qd.multiInput.label.tariffNumbers.hint": "[en]Bitte erfassen Sie mindestens eine Tarifnummer.",
   "i18n.qd.multiInput.label.tariffNumbers.hintFormat": "[en]Bitte erfassen Sie mindestens eine Tarifnummer (Format: 9- od. 13-stellig).",

package/src/assets/i18n/fr.json

@@ -33,6 +33,8 @@
   "i18n.qd.container.toolbar.filter.reset": "Réinitialiser",
   "i18n.qd.container.toolbar.filter.backToPreSelect": "Retour à la présélection",
   "i18n.qd.filter.layer.caption": "Filtre",
+  "i18n.qd.filter.noResults": "Aucun résultat",
+  "i18n.qd.filter.loading": "Chargement …",
   "i18n.qd.filter.category.date": "Date",
   "i18n.qd.filter.category.dateRange": "Plage de dates",
   "i18n.qd.filter.date.on": "le",
@@ -68,12 +70,10 @@
   "i18n.qd.input.units.percentage": "%",
   "i18n.qd.input.options.loading": "[fr] Vorschläge werden geladen...",
   "i18n.qd.input.options.error": "[fr] Fehler beim Laden der Vorschläge",
-
   "i18n.qd.input.number.ambiguousHint.comma": "La valeur saisie est interprétée conformément au format régional et utilise une virgule (,) comme séparateur décimal.",
   "i18n.qd.input.number.ambiguousHint.dot": "La valeur saisie est interprétée conformément au format régional et utilise un point (.) comme séparateur décimal.",
   "i18n.qd.input.number.invalidCharacters.comma": "La valeur saisie est invalide. Format numérique attendu : « 123,45 ».",
   "i18n.qd.input.number.invalidCharacters.dot": "La valeur saisie est invalide. Format numérique attendu : « 123.45 ».",
-
   "i18n.qd.multiInput.label.tariffNumbers": "[fr]Tarifnummern",
   "i18n.qd.multiInput.label.tariffNumbers.hint": "[fr]Bitte erfassen Sie mindestens eine Tarifnummer.",
   "i18n.qd.multiInput.label.tariffNumbers.hintFormat": "[fr]Bitte erfassen Sie mindestens eine Tarifnummer (Format: 9- od. 13-stellig).",

package/src/assets/i18n/it.json

@@ -33,6 +33,8 @@
   "i18n.qd.container.toolbar.filter.reset": "Azzerare",
   "i18n.qd.container.toolbar.filter.backToPreSelect": "Torna alla preselezione",
   "i18n.qd.filter.layer.caption": "Filtrare",
+  "i18n.qd.filter.noResults": "Nessun risultato",
+  "i18n.qd.filter.loading": "Caricamento …",
   "i18n.qd.filter.category.date": "Date",
   "i18n.qd.filter.category.dateRange": "Intervallo di date",
   "i18n.qd.filter.date.on": "il",
@@ -68,12 +70,10 @@
   "i18n.qd.input.units.percentage": "%",
   "i18n.qd.input.options.loading": "[it] Vorschläge werden geladen...",
   "i18n.qd.input.options.error": "[it] Fehler beim Laden der Vorschläge",
-
   "i18n.qd.input.number.ambiguousHint.comma": "Il valore inserito viene interpretato in base al formato regionale e utilizza una virgola (,) come separatore decimale.",
   "i18n.qd.input.number.ambiguousHint.dot": "Il valore inserito viene interpretato in base al formato regionale e utilizza un punto (.) come separatore decimale.",
   "i18n.qd.input.number.invalidCharacters.comma": "Il valore inserito non è valido. Formato numerico previsto: \"123,45\".",
   "i18n.qd.input.number.invalidCharacters.dot": "Il valore inserito non è valido. Formato numerico previsto: \"123.45\".",
-
   "i18n.qd.multiInput.label.tariffNumbers": "[it]Tarifnummern",
   "i18n.qd.multiInput.label.tariffNumbers.hint": "[it]Bitte erfassen Sie mindestens eine Tarifnummer.",
   "i18n.qd.multiInput.label.tariffNumbers.hintFormat": "[it]Bitte erfassen Sie mindestens eine Tarifnummer (Format: 9- od. 13-stellig).",