@koobiq/components 18.39.0 → 19.1.0

package/fesm2022/koobiq-components-breadcrumbs.mjs

@@ -1,21 +1,328 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, TemplateRef, Directive, booleanAttribute, Component, ChangeDetectionStrategy, Input, ContentChild, ChangeDetectorRef, DestroyRef, ElementRef, ViewEncapsulation, ContentChildren, forwardRef, ViewChild, ViewChildren, NgModule } from '@angular/core';
+import { inject, NgZone, ElementRef, EventEmitter, signal, booleanAttribute, Output, Input, Directive, computed, InjectionToken, TemplateRef, ContentChild, ChangeDetectionStrategy, Component, ChangeDetectorRef, DestroyRef, ViewChildren, ViewChild, forwardRef, ContentChildren, ViewEncapsulation, NgModule } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
-import * as i3 from '@koobiq/components/button';
+import * as i4 from '@koobiq/components/button';
 import { KbqButton, KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
 import { KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
-import * as i4 from '@koobiq/components/dropdown';
+import * as i5 from '@koobiq/components/dropdown';
 import { KbqDropdownModule } from '@koobiq/components/dropdown';
-import * as i2 from '@koobiq/components/icon';
+import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
-import * as i6 from '@koobiq/components/overflow-items';
-import { KbqOverflowItemsResult, KbqOverflowItem, KbqOverflowItemsModule } from '@koobiq/components/overflow-items';
-import * as i5 from '@koobiq/components/title';
+import * as i7 from '@koobiq/components/overflow-items';
+import { KbqOverflowItemsModule, KbqOverflowItemsResult, KbqOverflowItem } from '@koobiq/components/overflow-items';
+import * as i6 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
-import * as i1 from '@radix-ng/primitives/roving-focus';
-import { RdxRovingFocusItemDirective, RdxRovingFocusGroupDirective } from '@radix-ng/primitives/roving-focus';
+
+const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+const MAP_KEY_TO_FOCUS_INTENT = {
+    ArrowLeft: 'prev',
+    ArrowUp: 'prev',
+    ArrowRight: 'next',
+    ArrowDown: 'next',
+    PageUp: 'first',
+    Home: 'first',
+    PageDown: 'last',
+    End: 'last'
+};
+function getDirectionAwareKey(key, dir) {
+    if (dir !== 'rtl')
+        return key;
+    return key === 'ArrowLeft' ? 'ArrowRight' : key === 'ArrowRight' ? 'ArrowLeft' : key;
+}
+function getFocusIntent(event, orientation, dir) {
+    const key = getDirectionAwareKey(event.key, dir);
+    if (orientation === 'vertical' && ['ArrowLeft', 'ArrowRight'].includes(key))
+        return undefined;
+    if (orientation === 'horizontal' && ['ArrowUp', 'ArrowDown'].includes(key))
+        return undefined;
+    return MAP_KEY_TO_FOCUS_INTENT[key];
+}
+function focusFirst(candidates, preventScroll = false, rootNode) {
+    // eslint-disable-next-line no-restricted-globals
+    const PREVIOUSLY_FOCUSED_ELEMENT = rootNode?.activeElement ?? window.document.activeElement;
+    for (const candidate of candidates) {
+        // if focus is already where we want to go, we don't want to keep going through the candidates
+        if (candidate === PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
+        candidate.focus({ preventScroll });
+        // eslint-disable-next-line no-restricted-globals
+        if (window.document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT)
+            return;
+    }
+}
+/**
+ * Wraps an array around itself at a given start index
+ * Example: `wrapArray(['a', 'b', 'c', 'd'], 2) === ['c', 'd', 'a', 'b']`
+ */
+function wrapArray(array, startIndex) {
+    return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function generateId() {
+    return `rf-item-${Math.random().toString(36).slice(2, 11)}`;
+}
+
+class RdxRovingFocusGroupDirective {
+    constructor() {
+        this.ngZone = inject(NgZone);
+        this.elementRef = inject(ElementRef);
+        this.dir = 'ltr';
+        this.loop = true;
+        this.preventScrollOnEntryFocus = false;
+        this.entryFocus = new EventEmitter();
+        this.currentTabStopIdChange = new EventEmitter();
+        /** @docs-private */
+        this.currentTabStopId = signal(null);
+        /** @docs-private */
+        this.focusableItems = signal([]);
+        this.isClickFocus = signal(false);
+        this.isTabbingBackOut = signal(false);
+        this.focusableItemsCount = signal(0);
+    }
+    /** @docs-private */
+    get dataOrientation() {
+        return this.orientation || 'horizontal';
+    }
+    /** @docs-private */
+    get tabIndex() {
+        return this.isTabbingBackOut() || this.getFocusableItemsCount() === 0 ? -1 : 0;
+    }
+    /** @docs-private */
+    handleBlur() {
+        this.isTabbingBackOut.set(false);
+    }
+    /** @docs-private */
+    handleMouseUp() {
+        // reset `isClickFocus` after 1 tick because handleFocus might not triggered due to focused element
+        this.ngZone.runOutsideAngular(() => {
+            Promise.resolve().then(() => {
+                this.ngZone.run(() => {
+                    this.isClickFocus.set(false);
+                });
+            });
+        });
+    }
+    /** @docs-private */
+    handleFocus(event) {
+        // We normally wouldn't need this check, because we already check
+        // that the focus is on the current target and not bubbling to it.
+        // We do this because Safari doesn't focus buttons when clicked, and
+        // instead, the wrapper will get focused and not through a bubbling event.
+        const isKeyboardFocus = !this.isClickFocus();
+        if (event.currentTarget === this.elementRef.nativeElement &&
+            event.target === event.currentTarget &&
+            isKeyboardFocus &&
+            !this.isTabbingBackOut()) {
+            const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+            this.elementRef.nativeElement.dispatchEvent(entryFocusEvent);
+            this.entryFocus.emit(entryFocusEvent);
+            if (!entryFocusEvent.defaultPrevented) {
+                const items = this.focusableItems().filter((item) => item.dataset['disabled'] !== '');
+                const activeItem = items.find((item) => item.getAttribute('data-active') === 'true');
+                const currentItem = items.find((item) => item.id === this.currentTabStopId());
+                const candidateItems = [activeItem, currentItem, ...items].filter(Boolean);
+                focusFirst(candidateItems, this.preventScrollOnEntryFocus);
+            }
+        }
+        this.isClickFocus.set(false);
+    }
+    /** @docs-private */
+    handleMouseDown() {
+        this.isClickFocus.set(true);
+    }
+    /** @docs-private */
+    onItemFocus(tabStopId) {
+        this.currentTabStopId.set(tabStopId);
+        this.currentTabStopIdChange.emit(tabStopId);
+    }
+    /** @docs-private */
+    onItemShiftTab() {
+        this.isTabbingBackOut.set(true);
+    }
+    /** @docs-private */
+    onFocusableItemAdd() {
+        this.focusableItemsCount.update((count) => count + 1);
+    }
+    /** @docs-private */
+    onFocusableItemRemove() {
+        this.focusableItemsCount.update((count) => Math.max(0, count - 1));
+    }
+    /** @docs-private */
+    registerItem(item) {
+        const currentItems = this.focusableItems();
+        this.focusableItems.set([...currentItems, item]);
+    }
+    /** @docs-private */
+    unregisterItem(item) {
+        const currentItems = this.focusableItems();
+        this.focusableItems.set(currentItems.filter((el) => el !== item));
+    }
+    /** @docs-private */
+    getFocusableItemsCount() {
+        return this.focusableItemsCount();
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RdxRovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.17", type: RdxRovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientation: "orientation", dir: "dir", loop: ["loop", "loop", booleanAttribute], preventScrollOnEntryFocus: ["preventScrollOnEntryFocus", "preventScrollOnEntryFocus", booleanAttribute] }, outputs: { entryFocus: "entryFocus", currentTabStopIdChange: "currentTabStopIdChange" }, host: { listeners: { "focus": "handleFocus($event)", "blur": "handleBlur()", "mouseup": "handleMouseUp()", "mousedown": "handleMouseDown()" }, properties: { "attr.data-orientation": "dataOrientation", "attr.tabindex": "tabIndex", "attr.dir": "dir" }, styleAttribute: "outline: none;" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RdxRovingFocusGroupDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxRovingFocusGroup]',
+                    host: {
+                        '[attr.data-orientation]': 'dataOrientation',
+                        '[attr.tabindex]': 'tabIndex',
+                        '[attr.dir]': 'dir',
+                        '(focus)': 'handleFocus($event)',
+                        '(blur)': 'handleBlur()',
+                        '(mouseup)': 'handleMouseUp()',
+                        '(mousedown)': 'handleMouseDown()',
+                        style: 'outline: none;'
+                    }
+                }]
+        }], propDecorators: { orientation: [{
+                type: Input
+            }], dir: [{
+                type: Input
+            }], loop: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], preventScrollOnEntryFocus: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], entryFocus: [{
+                type: Output
+            }], currentTabStopIdChange: [{
+                type: Output
+            }] } });
+
+class RdxRovingFocusItemDirective {
+    constructor() {
+        this.elementRef = inject(ElementRef);
+        this.ngZone = inject(NgZone);
+        this.parent = inject(RdxRovingFocusGroupDirective);
+        this.focusable = true;
+        this.active = true;
+        this.allowShiftKey = false;
+        this.id = computed(() => this.tabStopId || generateId());
+        /** @docs-private */
+        this.isCurrentTabStop = computed(() => this.parent.currentTabStopId() === this.id());
+    }
+    /**
+     * Lifecycle hook triggered on initialization.
+     * Registers the element with the parent roving focus group if it is focusable.
+     * @docs-private
+     */
+    ngOnInit() {
+        if (this.focusable) {
+            this.parent.registerItem(this.elementRef.nativeElement);
+            this.parent.onFocusableItemAdd();
+        }
+    }
+    /**
+     * Lifecycle hook triggered on destruction.
+     * Unregisters the element from the parent roving focus group if it is focusable.
+     * @docs-private
+     */
+    ngOnDestroy() {
+        if (this.focusable) {
+            this.parent.unregisterItem(this.elementRef.nativeElement);
+            this.parent.onFocusableItemRemove();
+        }
+    }
+    /**
+     * Determines the `tabIndex` of the element.
+     * Returns `0` if the element is the current tab stop; otherwise, returns `-1`.
+     * @docs-private
+     */
+    get tabIndex() {
+        return this.isCurrentTabStop() ? 0 : -1;
+    }
+    /** @docs-private */
+    handleMouseDown(event) {
+        if (!this.focusable) {
+            // We prevent focusing non-focusable items on `mousedown`.
+            // Even though the item has tabIndex={-1}, that only means take it out of the tab order.
+            event.preventDefault();
+        }
+        else {
+            // Safari doesn't focus a button when clicked so we run our logic on mousedown also
+            this.parent.onItemFocus(this.id());
+        }
+    }
+    /** @docs-private */
+    onFocus() {
+        this.parent.onItemFocus(this.id());
+    }
+    /**
+     * Handles the `keydown` event for keyboard navigation within the roving focus group.
+     * Supports navigation based on orientation and direction, and focuses appropriate elements.
+     *
+     * @param event The `KeyboardEvent` object.
+     * @docs-private
+     */
+    handleKeydown(event) {
+        if (event.key === 'Tab' && event.shiftKey) {
+            this.parent.onItemShiftTab();
+            return;
+        }
+        if (event.target !== this.elementRef.nativeElement)
+            return;
+        const focusIntent = getFocusIntent(event, this.parent.orientation, this.parent.dir);
+        if (focusIntent !== undefined) {
+            if (event.metaKey || event.ctrlKey || event.altKey || (this.allowShiftKey ? false : event.shiftKey)) {
+                return;
+            }
+            event.preventDefault();
+            let candidateNodes = this.parent.focusableItems().filter((item) => item.dataset['disabled'] !== '');
+            if (focusIntent === 'last') {
+                candidateNodes.reverse();
+            }
+            else if (focusIntent === 'prev' || focusIntent === 'next') {
+                if (focusIntent === 'prev')
+                    candidateNodes.reverse();
+                const currentIndex = candidateNodes.indexOf(this.elementRef.nativeElement);
+                candidateNodes = this.parent.loop
+                    ? wrapArray(candidateNodes, currentIndex + 1)
+                    : candidateNodes.slice(currentIndex + 1);
+            }
+            this.ngZone.runOutsideAngular(() => {
+                Promise.resolve().then(() => {
+                    focusFirst(candidateNodes, false, this.elementRef.nativeElement);
+                });
+            });
+        }
+    }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RdxRovingFocusItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.17", type: RdxRovingFocusItemDirective, isStandalone: true, selector: "[rdxRovingFocusItem]", inputs: { focusable: ["focusable", "focusable", booleanAttribute], active: ["active", "active", booleanAttribute], tabStopId: "tabStopId", allowShiftKey: ["allowShiftKey", "allowShiftKey", booleanAttribute] }, host: { listeners: { "mousedown": "handleMouseDown($event)", "keydown": "handleKeydown($event)", "focus": "onFocus()" }, properties: { "attr.tabindex": "tabIndex", "attr.data-orientation": "parent.orientation", "attr.data-active": "active", "attr.data-disabled": "!focusable ? \"\" : undefined" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: RdxRovingFocusItemDirective, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[rdxRovingFocusItem]',
+                    host: {
+                        '[attr.tabindex]': 'tabIndex',
+                        '[attr.data-orientation]': 'parent.orientation',
+                        '[attr.data-active]': 'active',
+                        '[attr.data-disabled]': '!focusable ? "" : undefined',
+                        '(mousedown)': 'handleMouseDown($event)',
+                        '(keydown)': 'handleKeydown($event)',
+                        '(focus)': 'onFocus()'
+                    }
+                }]
+        }], propDecorators: { focusable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], active: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabStopId: [{
+                type: Input
+            }], allowShiftKey: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
 
 const KBQ_BREADCRUMBS_DEFAULT_CONFIGURATION = {
     max: 4,
@@ -34,14 +341,13 @@ class KbqBreadcrumbsSeparator {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqBreadcrumbsSeparator, isStandalone: true, selector: "ng-template[kbqBreadcrumbsSeparator]", host: { classAttribute: "kbq-breadcrumbs-separator" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqBreadcrumbsSeparator, isStandalone: true, selector: "ng-template[kbqBreadcrumbsSeparator]", host: { classAttribute: "kbq-breadcrumbs-separator" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbsSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[kbqBreadcrumbsSeparator]',
-                    standalone: true,
                     host: {
                         class: 'kbq-breadcrumbs-separator'
                     }
@@ -62,13 +368,12 @@ class KbqBreadcrumbButton {
             this.button.kbqStyle = KbqButtonStyles.Transparent;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqBreadcrumbButton, isStandalone: true, selector: "[kbq-button][kbqBreadcrumb]", host: { classAttribute: "kbq-breadcrumb-item" }, hostDirectives: [{ directive: i1.RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqBreadcrumbButton, isStandalone: true, selector: "[kbq-button][kbqBreadcrumb]", host: { classAttribute: "kbq-breadcrumb-item" }, hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbButton, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[kbq-button][kbqBreadcrumb]',
                     host: { class: 'kbq-breadcrumb-item' },
                     hostDirectives: [
@@ -87,13 +392,12 @@ class KbqBreadcrumbView {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.14", type: KbqBreadcrumbView, isStandalone: true, selector: "[kbqBreadcrumbView]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.17", type: KbqBreadcrumbView, isStandalone: true, selector: "[kbqBreadcrumbView]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbView, decorators: [{
             type: Directive,
             args: [{
-                    standalone: true,
                     selector: '[kbqBreadcrumbView]'
                 }]
         }] });
@@ -113,15 +417,14 @@ class KbqBreadcrumbItem {
          */
         this.routerLink = inject(RouterLink, { optional: true, host: true });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "18.2.14", type: KbqBreadcrumbItem, isStandalone: true, selector: "kbq-breadcrumb-item", inputs: { text: "text", disabled: ["disabled", "disabled", booleanAttribute], current: ["current", "current", booleanAttribute] }, host: { properties: { "attr.tabIndex": "null" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: KbqBreadcrumbView, descendants: true, read: TemplateRef }], ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.17", type: KbqBreadcrumbItem, isStandalone: true, selector: "kbq-breadcrumb-item", inputs: { text: "text", disabled: ["disabled", "disabled", booleanAttribute], current: ["current", "current", booleanAttribute] }, host: { properties: { "attr.tabIndex": "null" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: KbqBreadcrumbView, descendants: true, read: TemplateRef }], ngImport: i0, template: `
         <ng-content />
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbItem, decorators: [{
             type: Component,
             args: [{
-                    standalone: true,
                     selector: 'kbq-breadcrumb-item',
                     template: `
         <ng-content />
@@ -218,12 +521,12 @@ class KbqBreadcrumbs {
     getItemWidth(item) {
         return item ? item.nativeElement.offsetWidth : 0;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.14", type: KbqBreadcrumbs, isStandalone: true, selector: "kbq-breadcrumbs,[kbq-breadcrumbs]", inputs: { firstItemNegativeMargin: ["firstItemNegativeMargin", "firstItemNegativeMargin", booleanAttribute], size: "size", max: "max", disabled: ["disabled", "disabled", booleanAttribute], wrapMode: "wrapMode" }, host: { properties: { "class.kbq-breadcrumbs_compact": "size === \"compact\"", "class.kbq-breadcrumbs_normal": "size === \"normal\"", "class.kbq-breadcrumbs_big": "size === \"big\"", "class.kbq-breadcrumbs_wrap": "wrapMode === \"wrap\"", "class.kbq-breadcrumbs_first-item-negative-margin": "firstItemNegativeMargin", "attr.aria-label": "'breadcrumb'" }, classAttribute: "kbq-breadcrumbs" }, queries: [{ propertyName: "separator", first: true, predicate: KbqBreadcrumbsSeparator, descendants: true, read: TemplateRef }, { propertyName: "items", predicate: i0.forwardRef(() => KbqBreadcrumbItem) }], viewQueries: [{ propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, read: ElementRef }, { propertyName: "overflowItems", predicate: KbqOverflowItem, descendants: true, read: ElementRef }], hostDirectives: [{ directive: i1.RdxRovingFocusGroupDirective }], ngImport: i0, template: "<!--\n@TODO: check when updated to Angular 20.x (#DS-4034)\nresolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259\n-->\n<ng-content />\n@if (items.length < minVisibleItems || wrapMode !== 'auto') {\n    @for (item of items; track item; let last = $last) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: last }\" />\n            @if (!last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        class=\"layout-align-start-center\"\n        [style.max-width.px]=\"maxWidth\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"items.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.first, last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <!-- @TODO delay rendering for proper elements order (#DS-3334)--->\n        @if (true) {\n            <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n                <button\n                    kbq-button\n                    kbqBreadcrumb\n                    class=\"kbq-breadcrumb__expand\"\n                    [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                    [kbqStyle]=\"KbqButtonStyles.Transparent\"\n                >\n                    <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n                </button>\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n                <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                    @for (item of items; track item) {\n                        @if (kbqOverflowItems.hiddenItemIDs().has($index)) {\n                            <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled\">\n                                {{ item.text }}\n                            </a>\n                        }\n                    }\n                </kbq-dropdown>\n            </div>\n        }\n        @for (item of itemsExcludingEdges; track item; let index = $index) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"items.length - 1\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.last, last: true }\" />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs:not(.kbq-breadcrumbs_wrap){overflow:hidden}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i2.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i3.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i3.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i3.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i4.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i4.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i4.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: KbqBreadcrumbButton, selector: "[kbq-button][kbqBreadcrumb]" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i5.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqOverflowItemsModule }, { kind: "directive", type: i6.KbqOverflowItems, selector: "[kbqOverflowItems]", inputs: ["reverseOverflowOrder", "debounceTime", "additionalResizeObserverTargets", "orientation"], outputs: ["changes"], exportAs: ["kbqOverflowItems"] }, { kind: "directive", type: i6.KbqOverflowItem, selector: "[kbqOverflowItem]", inputs: ["kbqOverflowItem", "order", "alwaysVisible"], exportAs: ["kbqOverflowItem"] }, { kind: "directive", type: i6.KbqOverflowItemsResult, selector: "[kbqOverflowItemsResult]", exportAs: ["kbqOverflowItemsResult"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.17", type: KbqBreadcrumbs, isStandalone: true, selector: "kbq-breadcrumbs,[kbq-breadcrumbs]", inputs: { firstItemNegativeMargin: ["firstItemNegativeMargin", "firstItemNegativeMargin", booleanAttribute], size: "size", max: "max", disabled: ["disabled", "disabled", booleanAttribute], wrapMode: "wrapMode" }, host: { properties: { "class.kbq-breadcrumbs_compact": "size === \"compact\"", "class.kbq-breadcrumbs_normal": "size === \"normal\"", "class.kbq-breadcrumbs_big": "size === \"big\"", "class.kbq-breadcrumbs_wrap": "wrapMode === \"wrap\"", "class.kbq-breadcrumbs_first-item-negative-margin": "firstItemNegativeMargin", "attr.aria-label": "'breadcrumb'" }, classAttribute: "kbq-breadcrumbs" }, queries: [{ propertyName: "separator", first: true, predicate: KbqBreadcrumbsSeparator, descendants: true, read: TemplateRef }, { propertyName: "items", predicate: i0.forwardRef(() => KbqBreadcrumbItem) }], viewQueries: [{ propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, read: ElementRef }, { propertyName: "overflowItems", predicate: KbqOverflowItem, descendants: true, read: ElementRef }], hostDirectives: [{ directive: RdxRovingFocusGroupDirective }], ngImport: i0, template: "<!--\n@TODO: check when updated to Angular 20.x (#DS-4034)\nresolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259\n-->\n<ng-content />\n@if (items.length < minVisibleItems || wrapMode !== 'auto') {\n    @for (item of items; track item) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: $last }\" />\n            @if (!$last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        class=\"layout-align-start-center\"\n        [style.max-width.px]=\"maxWidth\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"items.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.first, last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <!-- @TODO delay rendering for proper elements order (#DS-3334)--->\n        @if (true) {\n            <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n                <button\n                    kbq-button\n                    kbqBreadcrumb\n                    class=\"kbq-breadcrumb__expand\"\n                    [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                    [kbqStyle]=\"KbqButtonStyles.Transparent\"\n                >\n                    <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n                </button>\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n                <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                    @for (item of items; track item) {\n                        @if (kbqOverflowItems.hiddenItemIDs().has($index)) {\n                            <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled\">\n                                {{ item.text }}\n                            </a>\n                        }\n                    }\n                </kbq-dropdown>\n            </div>\n        }\n        @for (item of itemsExcludingEdges; track item) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"$index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"items.length - 1\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.last, last: true }\" />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs:not(.kbq-breadcrumbs_wrap){overflow:hidden}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "ngmodule", type: KbqIconModule }, { kind: "component", type: i3.KbqIcon, selector: "[kbq-icon]", inputs: ["small", "autoColor", "kbq-icon"] }, { kind: "ngmodule", type: KbqButtonModule }, { kind: "component", type: i4.KbqButton, selector: "[kbq-button]", inputs: ["kbqStyle", "disabled", "tabIndex"] }, { kind: "directive", type: i4.KbqButtonCssStyler, selector: "[kbq-button]" }, { kind: "directive", type: i4.KbqButtonDropdownTrigger, selector: "[kbq-button][kbqDropdownTriggerFor]" }, { kind: "ngmodule", type: KbqDropdownModule }, { kind: "component", type: i5.KbqDropdown, selector: "kbq-dropdown", inputs: ["navigationWithWrap", "xPosition", "yPosition", "overlapTriggerY", "overlapTriggerX", "hasBackdrop", "class", "backdropClass"], outputs: ["closed"], exportAs: ["kbqDropdown"] }, { kind: "component", type: i5.KbqDropdownItem, selector: "kbq-dropdown-item, [kbq-dropdown-item]", inputs: ["disabled"], exportAs: ["kbqDropdownItem"] }, { kind: "directive", type: i5.KbqDropdownTrigger, selector: "[kbqDropdownTriggerFor]", inputs: ["offsetX", "offsetY", "kbqDropdownTriggerData", "openByArrowDown", "kbqDropdownTriggerRestoreFocus", "kbqDropdownTriggerFor"], outputs: ["dropdownOpened", "dropdownClosed"], exportAs: ["kbqDropdownTrigger"] }, { kind: "directive", type: KbqBreadcrumbButton, selector: "[kbq-button][kbqBreadcrumb]" }, { kind: "ngmodule", type: KbqTitleModule }, { kind: "directive", type: i6.KbqTitleDirective, selector: "[kbq-title]", exportAs: ["kbqTitle"] }, { kind: "ngmodule", type: KbqOverflowItemsModule }, { kind: "directive", type: i7.KbqOverflowItems, selector: "[kbqOverflowItems]", inputs: ["reverseOverflowOrder", "debounceTime", "additionalResizeObserverTargets", "orientation"], outputs: ["changes"], exportAs: ["kbqOverflowItems"] }, { kind: "directive", type: i7.KbqOverflowItem, selector: "[kbqOverflowItem]", inputs: ["kbqOverflowItem", "order", "alwaysVisible"], exportAs: ["kbqOverflowItem"] }, { kind: "directive", type: i7.KbqOverflowItemsResult, selector: "[kbqOverflowItemsResult]", exportAs: ["kbqOverflowItemsResult"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbs, decorators: [{
             type: Component,
-            args: [{ standalone: true, selector: 'kbq-breadcrumbs,[kbq-breadcrumbs]', changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, imports: [
+            args: [{ selector: 'kbq-breadcrumbs,[kbq-breadcrumbs]', imports: [
                         NgTemplateOutlet,
                         RouterLink,
                         KbqIconModule,
@@ -232,7 +535,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         KbqBreadcrumbButton,
                         KbqTitleModule,
                         KbqOverflowItemsModule
-                    ], host: {
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
                         class: 'kbq-breadcrumbs',
                         '[class.kbq-breadcrumbs_compact]': 'size === "compact"',
                         '[class.kbq-breadcrumbs_normal]': 'size === "normal"',
@@ -240,7 +543,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
                         '[class.kbq-breadcrumbs_wrap]': 'wrapMode === "wrap"',
                         '[class.kbq-breadcrumbs_first-item-negative-margin]': 'firstItemNegativeMargin',
                         '[attr.aria-label]': "'breadcrumb'"
-                    }, hostDirectives: [RdxRovingFocusGroupDirective], template: "<!--\n@TODO: check when updated to Angular 20.x (#DS-4034)\nresolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259\n-->\n<ng-content />\n@if (items.length < minVisibleItems || wrapMode !== 'auto') {\n    @for (item of items; track item; let last = $last) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: last }\" />\n            @if (!last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        class=\"layout-align-start-center\"\n        [style.max-width.px]=\"maxWidth\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"items.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.first, last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <!-- @TODO delay rendering for proper elements order (#DS-3334)--->\n        @if (true) {\n            <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n                <button\n                    kbq-button\n                    kbqBreadcrumb\n                    class=\"kbq-breadcrumb__expand\"\n                    [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                    [kbqStyle]=\"KbqButtonStyles.Transparent\"\n                >\n                    <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n                </button>\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n                <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                    @for (item of items; track item) {\n                        @if (kbqOverflowItems.hiddenItemIDs().has($index)) {\n                            <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled\">\n                                {{ item.text }}\n                            </a>\n                        }\n                    }\n                </kbq-dropdown>\n            </div>\n        }\n        @for (item of itemsExcludingEdges; track item; let index = $index) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"items.length - 1\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.last, last: true }\" />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs:not(.kbq-breadcrumbs_wrap){overflow:hidden}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"] }]
+                    }, hostDirectives: [RdxRovingFocusGroupDirective], template: "<!--\n@TODO: check when updated to Angular 20.x (#DS-4034)\nresolved SSR issue with official hack https://github.com/angular/angular/issues/50543#issuecomment-1572900259\n-->\n<ng-content />\n@if (items.length < minVisibleItems || wrapMode !== 'auto') {\n    @for (item of items; track item) {\n        <div class=\"kbq-breadcrumb-item__container\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: $last }\" />\n            @if (!$last) {\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            }\n        </div>\n    }\n} @else {\n    <div\n        #kbqOverflowItems=\"kbqOverflowItems\"\n        kbqOverflowItems\n        reverseOverflowOrder\n        class=\"layout-align-start-center\"\n        [style.max-width.px]=\"maxWidth\"\n    >\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"items.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.first, last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <!-- @TODO delay rendering for proper elements order (#DS-3334)--->\n        @if (true) {\n            <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n                <button\n                    kbq-button\n                    kbqBreadcrumb\n                    class=\"kbq-breadcrumb__expand\"\n                    [kbqDropdownTriggerFor]=\"hiddenBreadcrumbsDropdown\"\n                    [kbqStyle]=\"KbqButtonStyles.Transparent\"\n                >\n                    <i kbq-icon=\"kbq-ellipsis-horizontal_16\" [color]=\"KbqComponentColors.ContrastFade\"></i>\n                </button>\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n\n                <kbq-dropdown #hiddenBreadcrumbsDropdown=\"kbqDropdown\">\n                    @for (item of items; track item) {\n                        @if (kbqOverflowItems.hiddenItemIDs().has($index)) {\n                            <a kbq-dropdown-item [routerLink]=\"item.routerLink?.urlTree\" [disabled]=\"item.disabled\">\n                                {{ item.text }}\n                            </a>\n                        }\n                    }\n                </kbq-dropdown>\n            </div>\n        }\n        @for (item of itemsExcludingEdges; track item) {\n            <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"$index + 1\">\n                <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: item, last: false }\" />\n                <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n            </div>\n        }\n        <div alwaysVisible class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"items.length - 1\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: items.last, last: true }\" />\n        </div>\n    </div>\n}\n\n<ng-template #breadcrumbTemplate let-item let-last=\"last\">\n    @if (item.customTemplateRef) {\n        <ng-container [ngTemplateOutlet]=\"item.customTemplateRef\" />\n    } @else {\n        <a\n            kbq-button\n            kbq-title\n            kbqBreadcrumb\n            [focusable]=\"!item.disabled && !last\"\n            [routerLink]=\"item.routerLink?.urlTree\"\n            [attr.aria-current]=\"last ? 'page' : null\"\n            [disabled]=\"item.disabled || last\"\n            [kbqPlacementPriority]=\"PopUpPlacements.Bottom\"\n            [kbqTooltipArrow]=\"false\"\n        >\n            {{ item.text }}\n        </a>\n    }\n</ng-template>\n\n<ng-template #separatorTemplate>\n    @if (separator) {\n        <ng-container [ngTemplateOutlet]=\"separator\" />\n    } @else {\n        <i kbq-icon=\"\" class=\"kbq-breadcrumb__separator\" [color]=\"KbqComponentColors.ContrastFade\">&nbsp;/&nbsp;</i>\n    }\n</ng-template>\n", styles: [".kbq-breadcrumbs{display:flex;align-items:center;gap:var(--kbq-breadcrumbs-gap);flex-grow:1}.kbq-breadcrumbs .kbq-overflow-items{padding:1px}.kbq-breadcrumbs .kbq-breadcrumb-item__container{display:inline-flex;align-items:center}.kbq-breadcrumbs.kbq-breadcrumbs_first-item-negative-margin .kbq-overflow-items{margin-left:var(--kbq-breadcrumb-item-negative-margin)}.kbq-breadcrumbs.kbq-breadcrumbs_wrap{flex-wrap:wrap}.kbq-breadcrumbs:not(.kbq-breadcrumbs_wrap){overflow:hidden}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{--kbq-breadcrumb-item-height: var(--kbq-size-xxl)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb__expand.kbq-button-icon{--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-size-height: var(--kbq-breadcrumb-item-height);--kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);--kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius)}.kbq-breadcrumbs .kbq-breadcrumb-item:focus-visible{outline-offset:unset}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);--kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page],.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page]{--kbq-button-transparent-contrast-fade-on-states-disabled-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button[aria-current=page].kbq-disabled,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-button-icon[aria-current=page].kbq-disabled{--kbq-button-transparent-contrast-fade-on-states-disabled-left-icon: var( --kbq-breadcrumb-item-icon-color );--kbq-button-transparent-contrast-fade-on-states-disabled-right-icon: var( --kbq-breadcrumb-item-icon-color )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-hover );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-hover )}.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button:not(.kbq-disabled).kbq-active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb-item.kbq-dropdown-trigger.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var( --kbq-states-icon-contrast-fade-active );--kbq-button-transparent-contrast-fade-on-right-icon: var( --kbq-states-icon-contrast-fade-active )}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon{--kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-hover .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).cdk-keyboard-focused .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-hover)}.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled):active .kbq-icon,.kbq-breadcrumbs .kbq-breadcrumb__expand.kbq-button-icon:not(.kbq-disabled).kbq-active .kbq-icon{--kbq-breadcrumb-expand-icon-color: var(--kbq-states-icon-contrast-fade-active)}.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button.kbq-button_transparent.kbq-contrast,.kbq-breadcrumbs .kbq-breadcrumb_current .kbq-button-icon.kbq-button_transparent.kbq-contrast{--kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast)}.kbq-breadcrumbs .kbq-breadcrumb_current{color:var(--kbq-foreground-contrast)}.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_compact .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-normal-font-size);font-style:var(--kbq-typography-text-normal-font-style);font-weight:var(--kbq-typography-text-normal-font-weight);line-height:var(--kbq-typography-text-normal-line-height);font-family:var(--kbq-typography-text-normal-font-family);text-transform:var(--kbq-typography-text-normal-text-transform);font-feature-settings:var(--kbq-typography-text-normal-font-feature-settings);letter-spacing:var(--kbq-typography-text-normal-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_normal .kbq-breadcrumb-item.kbq-button-icon{font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button,.kbq-breadcrumbs.kbq-breadcrumbs_big .kbq-button-icon{font-size:var(--kbq-typography-subheading-font-size);font-style:var(--kbq-typography-subheading-font-style);font-weight:var(--kbq-typography-subheading-font-weight);line-height:var(--kbq-typography-subheading-line-height);font-family:var(--kbq-typography-subheading-font-family);text-transform:var(--kbq-typography-subheading-text-transform);font-feature-settings:var(--kbq-typography-subheading-font-feature-settings);letter-spacing:var(--kbq-typography-subheading-letter-spacing)}.kbq-breadcrumbs .kbq-breadcrumb__separator{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;font-size:var(--kbq-typography-text-big-font-size);font-style:var(--kbq-typography-text-big-font-style);font-weight:var(--kbq-typography-text-big-font-weight);line-height:var(--kbq-typography-text-big-line-height);font-family:var(--kbq-typography-text-big-font-family);text-transform:var(--kbq-typography-text-big-text-transform);font-feature-settings:var(--kbq-typography-text-big-font-feature-settings);letter-spacing:var(--kbq-typography-text-big-letter-spacing)}\n", ":where(.kbq-breadcrumbs){--kbq-breadcrumb-item-horizontal-padding: var(--kbq-size-xs);--kbq-breadcrumb-item-height: var(--kbq-size-3xl);--kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-s);--kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);--kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);--kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));--kbq-breadcrumbs-gap: 0}\n"] }]
         }], ctorParameters: () => [], propDecorators: { firstItemNegativeMargin: [{
                 type: Input,
                 args: [{ transform: booleanAttribute }]
@@ -275,8 +578,8 @@ const COMPONENTS = [
     KbqBreadcrumbButton
 ];
 class KbqBreadcrumbsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs,
             KbqBreadcrumbItem,
             KbqBreadcrumbView,
             KbqBreadcrumbsSeparator,
@@ -285,9 +588,9 @@ class KbqBreadcrumbsModule {
             KbqBreadcrumbView,
             KbqBreadcrumbsSeparator,
             KbqBreadcrumbButton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: KbqBreadcrumbsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.17", ngImport: i0, type: KbqBreadcrumbsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,
@@ -299,5 +602,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { KBQ_BREADCRUMBS_CONFIGURATION, KbqBreadcrumbButton, KbqBreadcrumbItem, KbqBreadcrumbView, KbqBreadcrumbs, KbqBreadcrumbsModule, KbqBreadcrumbsSeparator, kbqBreadcrumbsConfigurationProvider };
+export { KBQ_BREADCRUMBS_CONFIGURATION, KbqBreadcrumbButton, KbqBreadcrumbItem, KbqBreadcrumbView, KbqBreadcrumbs, KbqBreadcrumbsModule, KbqBreadcrumbsSeparator, RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective, kbqBreadcrumbsConfigurationProvider };
 //# sourceMappingURL=koobiq-components-breadcrumbs.mjs.map