@quadrel-enterprise-ui/framework 20.6.1 → 20.6.2

package/fesm2022/quadrel-enterprise-ui-framework.mjs

@@ -6855,185 +6855,230 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImpo
         }] });
 
 /**
- * Service for handling real-time server-sent events.
+ * Manages a server-sent event (SSE) connection with automatic reconnection and heartbeat monitoring.
  *
- * ### Benefits
+ * All service endpoints — including SSE — must be protected. The connection is therefore secured
+ * via Quadrel Auth (Bearer token) by default. When the access token refreshes, the connection is
+ * transparently rebuilt. Only disable authentication for endpoints that are explicitly public.
  *
- * - **Real-Time Interaction**: Enables live updates without user actions or polling.
- * - **Scalable and Flexible**: The system is flexible and easily expandable to handle new events.
- * - **Consistency**: Ensures synchronization between server and client states for a consistent user experience.
- * - **Authorization**: It uses the user's authentication (QdAuth) to secure the connection against the backend out-of-the-box. This requires a proper QdAuth setup. You can disable this feature when starting the connection.
+ * ### Reconnection behavior
+ *
+ * - **Heartbeat timeout**: If no HEARTBEAT event arrives within the expected interval, the service reconnects.
+ * - **401 Unauthorized**: Triggers exponential-backoff reconnection (max 5 attempts, capped at 30 s).
+ * - **Other errors**: Reconnects immediately when the EventSource transitions to CLOSED.
+ *
+ * Existing `observe()` subscriptions are preserved across reconnections.
  *
  * ### Usage
  *
  * ```ts
- * // Start the connection to the events
- * pushEventsService.connect('http://service-endpint/events');
- * // or start without authentication in case you don't need:
- * pushEventsService.connect('http://service-endpint/events', { disableAuthentication: true });
- *
- * // Subscribe to the event (Side Effect)
- * const subscription = pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleEvent(event));
+ * pushEventsService.connect('https://api.example.com/events');
  *
- * // Unsubscribe to prevent memory leaks
- * subscription.unsubscribe();
+ * const sub = pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleEvent(event));
  *
- * // Disconnect the connection
+ * sub.unsubscribe();
  * pushEventsService.disconnect();
  * ```
  */
 class QdPushEventsService {
     authenticationService = inject('QdAuthenticationService', { optional: true });
     _eventSource;
-    _eventSubscriptionSubjects = new Map();
+    _subjects = new Map();
     _listeners = [];
-    _heartbeatTimeout;
-    _reconnectDelayTime = 10000;
-    _heartbeatReconnectDelayTime = 100;
     _accessTokenSub;
     _options;
+    _heartbeatTimeout;
+    _heartbeatGracePeriod = 100;
+    _initialHeartbeatTimeout = 10000;
     _isUnauthorized = false;
+    _reconnectAttempts = 0;
+    _maxReconnectAttempts = 5;
+    _backoffTimer;
     /**
-     * Establishes an EventSource connection to the given URL.
-     * Automatically reconnects if heartbeat fails or is delayed.
-     * Subscribers are retained across reconnections.
+     * Opens an SSE connection to the given URL.
      *
-     * @param url The backend URL for the event stream.
-     * @param options Options for the connection
+     * With authentication enabled (default), the service subscribes to the `accessToken$` observable
+     * provided by Quadrel Auth and rebuilds the connection whenever the token changes.
+     * No-op if already connected.
+     *
+     * @param url The SSE endpoint URL.
+     * @param options Set `{ disableAuthentication: true }` only for explicitly public endpoints.
+     *
+     * @example
+     * ```ts
+     * // Authenticated (default — requires Quadrel Auth)
+     * pushEventsService.connect('https://api.example.com/events');
+     *
+     * // Without authentication (only for public endpoints)
+     * pushEventsService.connect('https://api.example.com/public-events', { disableAuthentication: true });
+     * ```
      */
     connect(url, options) {
         if (this.isConnectedOrConnecting())
             return;
-        if (!options?.disableAuthentication) {
-            if (!this.authenticationService) {
-                this.logError("Can't connect to SSE without QdAuth as the connection has to be secured. Please install QdAuth or disable authentication when connecting.");
-                return;
-            }
-            if (this._accessTokenSub)
-                this._accessTokenSub.unsubscribe();
-            this._accessTokenSub = this.authenticationService.accessToken$.subscribe((token) => {
-                this._options = { url, options };
-                this.connectEventSource(url, {
-                    headers: { Authorization: `Bearer ${token}` }
-                }, true);
-            });
+        this._options = { url, options };
+        if (options?.disableAuthentication) {
+            this.openEventSource(url);
         }
         else {
-            this._options = { url, options };
-            this.connectEventSource(url);
+            this.connectWithAuth(url);
         }
     }
     /**
-     * Closes the EventSource connection and clears all listeners.
-     * Subscribers are preserved for reconnection.
+     * Closes the EventSource connection, clears all event listeners, and cancels pending backoff timers.
+     * Subscription subjects are preserved so that a subsequent `connect()` re-attaches them.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.disconnect();
+     * // Subjects survive — a new connect() will re-attach existing observe() subscriptions.
+     * ```
      */
     disconnect() {
         if (!this._eventSource) {
             this.logWarn('No active connection to disconnect.');
             return;
         }
-        this.removeAllEventListenersFromEventSource();
+        if (this._accessTokenSub) {
+            this._accessTokenSub.unsubscribe();
+            this._accessTokenSub = undefined;
+        }
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        if (this._backoffTimer) {
+            clearTimeout(this._backoffTimer);
+            this._backoffTimer = undefined;
+        }
+        this.removeAllListeners();
         this._eventSource.close();
     }
     /**
-     * Returns an Observable for the specified event name.
-     * If not connected, returns `NEVER` and logs an error.
-     * Automatically adds a listener for the event if needed.
+     * Returns an Observable that emits whenever the server sends an event of the given type.
+     *
+     * Lazily registers an EventSource listener on first call per event name.
+     * Returns `NEVER` and logs an error if no connection exists.
      *
-     * @param eventName The event type ('RESOURCE_CREATED', 'RESOURCE_UPDATED', 'RESOURCE_DELETED').
-     * @returns Observable<MessageEvent> The event stream.
+     * @param eventName The SSE event type to listen for.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.observe('RESOURCE_UPDATED').subscribe(event => handleUpdate(event));
+     * ```
      */
     observe(eventName) {
         if (!this._eventSource) {
-            this.logError('Cannot observe events without a connection. Call connect() first.');
+            this.logWarn('Cannot observe events without a connection. Call connect() first.');
             return NEVER;
         }
-        if (!this._eventSubscriptionSubjects.has(eventName)) {
-            this._eventSubscriptionSubjects.set(eventName, new Subject());
-            this.addEventListenerForEventName(eventName);
+        if (!this._subjects.has(eventName)) {
+            this._subjects.set(eventName, new Subject());
+            this.addListener(eventName, (event) => this._subjects.get(eventName).next(event));
         }
-        return this._eventSubscriptionSubjects.get(eventName).asObservable();
+        return this._subjects.get(eventName).asObservable();
     }
     /**
-     * Removes all listeners and clears all subscriptions.
-     * The EventSource connection remains open.
+     * Removes all event listeners and clears all subscription subjects. The connection stays open.
+     * Use this to reset all subscriptions without disconnecting the SSE stream.
+     *
+     * @example
+     * ```ts
+     * pushEventsService.unobserveAll();
+     * // Connection remains open, but no events are forwarded until observe() is called again.
+     * ```
      */
     unobserveAll() {
-        this.removeAllEventListenersFromEventSource();
-        this._eventSubscriptionSubjects.clear();
+        this.removeAllListeners();
+        this._subjects.clear();
     }
-    /**
-     * Checks if the EventSource is connected or in the process of connecting.
-     */
+    /** Returns `true` when the EventSource is in state OPEN or CONNECTING. */
     isConnectedOrConnecting() {
         return (this._eventSource &&
             (this._eventSource.readyState === EventSource.OPEN || this._eventSource.readyState === EventSource.CONNECTING));
     }
-    reconnect() {
-        if (this.isConnectedOrConnecting())
+    connectWithAuth(url) {
+        if (!this.authenticationService) {
+            this.logError("Can't connect to SSE without Quadrel Auth as the connection has to be secured. Please install Quadrel Auth or disable authentication when connecting.");
             return;
-        if (this._isUnauthorized)
+        }
+        this._accessTokenSub = this.authenticationService.accessToken$.subscribe((token) => {
+            this.openEventSource(url, { headers: { Authorization: `Bearer ${token}` } });
+        });
+    }
+    openEventSource(url, options = {}) {
+        this._isUnauthorized = false;
+        if (this._eventSource && this._eventSource.readyState !== EventSource.CLOSED)
+            this._eventSource.close();
+        this._eventSource = new EventSourcePolyfill(url, options);
+        this._eventSource.onerror = (err) => this.handleError(err);
+        this._eventSource.addEventListener('HEARTBEAT', (message) => this.handleHeartbeat(message));
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        this._heartbeatTimeout = setTimeout(() => this.reconnect(), this._initialHeartbeatTimeout);
+        if (this._backoffTimer) {
+            clearTimeout(this._backoffTimer);
+            this._backoffTimer = undefined;
+        }
+        this._listeners = [];
+        this.reattachListeners();
+    }
+    reconnect() {
+        if (this.isConnectedOrConnecting() || this._isUnauthorized)
             return;
         this.disconnect();
         this.connect(this._options.url, this._options.options);
     }
-    addEventListenerForEventName(eventName) {
-        const callback = (messageEvent) => {
-            const subject = this._eventSubscriptionSubjects.get(eventName);
-            if (subject)
-                subject.next(messageEvent);
-        };
-        this._eventSource.addEventListener(eventName, callback);
-        this._listeners.push([eventName, callback]);
+    handleError(err) {
+        const status = err?.status || err?.target?.status;
+        if (status === 401) {
+            this._isUnauthorized = true;
+            this.logError('SSE connection unauthorized (401):', err);
+            this._eventSource.close();
+            this.scheduleRetry();
+            return;
+        }
+        if (this._eventSource.readyState === EventSource.CLOSED)
+            this.reconnect();
+        this.logError('SSE connection error:', err);
     }
-    addEventListenersForExistingSubscriptions() {
-        this._eventSubscriptionSubjects.forEach((subject, eventName) => this.addEventListenerToEventSource(eventName, (messageEvent) => subject.next(messageEvent)));
+    scheduleRetry() {
+        if (this._reconnectAttempts >= this._maxReconnectAttempts) {
+            this.logError(`SSE reconnect aborted after ${this._maxReconnectAttempts} failed attempts.`);
+            return;
+        }
+        const delay = Math.min(1000 * Math.pow(2, this._reconnectAttempts), 30000);
+        this._reconnectAttempts++;
+        this._backoffTimer = setTimeout(() => {
+            this._isUnauthorized = false;
+            this.reconnect();
+        }, delay);
+    }
+    handleHeartbeat(message) {
+        if (this._isUnauthorized)
+            return;
+        if (this._heartbeatTimeout)
+            clearTimeout(this._heartbeatTimeout);
+        this._reconnectAttempts = 0;
+        const interval = JSON.parse(message.data).interval;
+        this._heartbeatTimeout = setTimeout(() => this.reconnect(), interval + this._heartbeatGracePeriod);
     }
-    addEventListenerToEventSource(eventName, callback) {
+    addListener(eventName, callback) {
         this._eventSource.addEventListener(eventName, callback);
         this._listeners.push([eventName, callback]);
     }
-    removeAllEventListenersFromEventSource() {
-        if (!this._eventSource) {
-            this.logWarn('Cannot remove listeners: No active connection.');
+    reattachListeners() {
+        this._subjects.forEach((subject, eventName) => this.addListener(eventName, (event) => subject.next(event)));
+    }
+    removeAllListeners() {
+        if (!this._eventSource)
             return;
-        }
         this._listeners.forEach(([eventName, callback]) => this._eventSource.removeEventListener(eventName, callback));
         this._listeners = [];
     }
     logWarn(message) {
-        console.warn(`QD-UI | QdPushEventsService - ${message}`);
+        console.warn(`QD-UI | QdPushEvents - ${message}`);
     }
     logError(message, err) {
-        console.error(`QD-UI | QdPushEventsService - ${message}`, err);
-    }
-    connectEventSource(url, options = {}, reconnect) {
-        if (this._eventSource && this._eventSource.readyState !== EventSource.CLOSED)
-            this._eventSource.close();
-        if (!this._eventSource || this._eventSource.readyState === EventSource.CLOSED || reconnect)
-            this._eventSource = new EventSourcePolyfill(url, options);
-        this._eventSource.onerror = (err) => {
-            const status = err?.status || err?.target?.status;
-            if (status === 401) {
-                this._isUnauthorized = true;
-                this.logError('SSE connection unauthorized (401):', err);
-                this._eventSource.close();
-                return;
-            }
-            if (this._eventSource.readyState === EventSource.CLOSED)
-                this.reconnect();
-            this.logError('SSE connection error:', err);
-        };
-        this._eventSource.addEventListener('HEARTBEAT', (message) => {
-            if (this._isUnauthorized)
-                return;
-            if (this._heartbeatTimeout)
-                clearTimeout(this._heartbeatTimeout);
-            const interval = JSON.parse(message.data).interval;
-            this._heartbeatTimeout = setTimeout(() => this.reconnect(), interval + this._heartbeatReconnectDelayTime);
-        });
-        this._heartbeatTimeout = setTimeout(() => this.reconnect(), this._reconnectDelayTime);
-        this.addEventListenersForExistingSubscriptions();
+        console.error(`QD-UI | QdPushEvents - ${message}`, err);
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdPushEventsService, providedIn: 'root' });
@@ -20736,11 +20781,11 @@ class QdFilterItemSelectCategoryComponent {
         }));
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.18", type: QdFilterItemSelectCategoryComponent, isStandalone: false, selector: "qd-filter-category-select", inputs: { filterId: "filterId", categoryIndex: "categoryIndex", testId: ["data-test-id", "testId"] }, host: { classAttribute: "qd-filter__category-select" }, viewQueries: [{ propertyName: "popoverDirective", first: true, predicate: QdPopoverOnClickDirective, descendants: true }], ngImport: i0, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"], dependencies: [{ kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i1.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i1.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "component", type: QdChipComponent, selector: "qd-chip", inputs: ["state", "close", "data", "data-test-id"], outputs: ["closeClickEmitter"] }, { kind: "component", type: QdFilterFormItemsComponent, selector: "qd-filter-form-items", inputs: ["inputFilterValue", "data-test-id"], outputs: ["filterValueChange"] }, { kind: "component", type: QdIconComponent, selector: "qd-icon", inputs: ["icon"] }, { kind: "directive", type: QdPopoverOnClickDirective, selector: "[qdPopoverOnClick]", inputs: ["qdPopoverOnClick", "positionStrategy", "qdPopoverCloseStrategy", "qdPopoverDisabled", "qdPopoverStopPropagation", "qdPopoverBackgroundColor", "qdPopoverMaxHeight", "qdPopoverMinWidth", "qdPopoverMaxWidth", "qdPopoverAutoSize", "qdPopoverEnableKeyControl"], outputs: ["opened", "closed"], exportAs: ["qdPopoverOnClick"] }, { kind: "component", type: QdFilterItemMultiSelectComponent, selector: "qd-filter-item-multi-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"] }, { kind: "component", type: QdFilterItemSingleSelectComponent, selector: "qd-filter-item-single-select", inputs: ["filterId", "categoryIndex", "itemIndex", "data-test-id"], outputs: ["closeEventEmitter"] }, { kind: "pipe", type: i1.AsyncPipe, name: "async" }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.18", ngImport: i0, type: QdFilterItemSelectCategoryComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n" }]
+            args: [{ selector: 'qd-filter-category-select', host: { class: 'qd-filter__category-select' }, changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div\n  *ngIf=\"showSelectButton$ | async\"\n  [class]=\"buttonClassName\"\n  [qdPopoverOnClick]=\"filterLayer\"\n  [qdPopoverCloseStrategy]=\"'onOutsideClick'\"\n  [qdPopoverStopPropagation]=\"true\"\n  [qdPopoverMaxHeight]=\"maxFlyoutHeight\"\n  [positionStrategy]=\"positionStrategy\"\n  (opened)=\"onLayerOpened()\"\n  (closed)=\"onLayerClosed()\"\n  [attr.data-test-id]=\"testId + '-select-button'\"\n>\n  <qd-icon\n    *ngIf=\"!open\"\n    [icon]=\"'ctrlDown'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--closed'\"\n    [attr.data-test-id]=\"testId + '-closed'\"\n  ></qd-icon>\n  <qd-icon\n    *ngIf=\"open\"\n    [icon]=\"'ctrlTop'\"\n    [class]=\"'qd-filter__category-icon qd-filter__category-icon--open'\"\n    [attr.data-test-id]=\"testId + '-opened'\"\n  ></qd-icon>\n\n  <div class=\"qd-filter__category-button-caption\">\n    <span>\n      {{ i18n | translate }}\n    </span>\n  </div>\n\n  <ng-container *ngTemplateOutlet=\"SelectedChip\"></ng-container>\n</div>\n\n<ng-template #filterLayer>\n  <div [class]=\"layerContentClassName\">\n    <qd-icon\n      *ngIf=\"closeButton\"\n      [class]=\"'qd-filter__category-layer-close'\"\n      (click)=\"closeLayer()\"\n      [icon]=\"'timesLargeLight'\"\n      [attr.data-test-id]=\"testId + '-layer-close'\"\n    ></qd-icon>\n\n    <ng-container [ngSwitch]=\"type\">\n      <ng-container *ngSwitchCase=\"'multiSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-multi-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-multi-select>\n          </ng-container>\n        </div>\n      </ng-container>\n\n      <ng-container *ngSwitchCase=\"'singleSelect'\">\n        <qd-filter-form-items\n          *ngIf=\"filter\"\n          [inputFilterValue]=\"filterCategoryValue$ | async\"\n          (filterValueChange)=\"changeValue($event)\"\n          [data-test-id]=\"testId\"\n        ></qd-filter-form-items>\n\n        <div class=\"qd-filter__category-layer-items\">\n          <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n            <qd-filter-item-single-select\n              *ngIf=\"!item.hidden\"\n              [categoryIndex]=\"categoryIndex\"\n              [itemIndex]=\"itemIndex\"\n              (closeEventEmitter)=\"closeLayer()\"\n              [filterId]=\"filterId\"\n              [data-test-id]=\"testId + '-item-' + itemIndex + '-' + item.item\"\n            >\n            </qd-filter-item-single-select>\n          </ng-container>\n        </div>\n      </ng-container>\n    </ng-container>\n  </div>\n</ng-template>\n\n<ng-template #SelectedChip>\n  <ng-container *ngFor=\"let item of items; let itemIndex = index\">\n    <!-- TODO: Add tooltip-->\n    <qd-chip\n      *ngIf=\"item.active\"\n      [state]=\"'filter'\"\n      [close]=\"true\"\n      (closeClickEmitter)=\"close($event)\"\n      [data]=\"itemIndex\"\n      [data-test-id]=\"testId + '-selected-chip-' + item.item\"\n      >{{ item.i18n | translate }}</qd-chip\n    >\n  </ng-container>\n</ng-template>\n", styles: ["::ng-deep .qd-filter__category-layer{display:flex;overflow:hidden;min-width:16.25rem;max-width:56.25rem;height:100%;flex-direction:column;padding:1rem 0 0;border:.0625rem solid rgb(151,151,151);background:#fff;box-shadow:#d5d5d5 .125rem .25rem .4375rem}::ng-deep .qd-filter__category-layer .qd-filter-form-items__filter{flex-shrink:0;margin-bottom:0}::ng-deep .qd-filter__category-layer .qd-checkbox__label{display:flex;height:2.5rem}::ng-deep .qd-filter__category-layer .qd-checkbox__indicator,::ng-deep .qd-filter__category-layer .qd-radio-buttons__indicator{transform:translateY(-.0625rem)}::ng-deep .qd-filter__category-layer-items{flex:1;overflow-y:auto}::ng-deep .qd-filter__category-layer-container{position:relative}::ng-deep .qd-filter__category-layer-close{position:absolute;z-index:1;top:1rem;right:1rem;color:#757575;cursor:pointer}::ng-deep .qd-filter__category-layer-close:before{position:absolute;content:\"\";inset:-.5rem}::ng-deep .qd-filter__category-layer-close:hover,::ng-deep .qd-filter__category-layer-close:focus{color:#171717}\n"] }]
         }], propDecorators: { filterId: [{
                 type: Input
             }], categoryIndex: [{