@koobiq/components 19.8.0 → 20.0.0

package/fesm2022/koobiq-components-breadcrumbs.mjs

@@ -1,7 +1,7 @@
 import { NgTemplateOutlet } from '@angular/common';
 import * as i0 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 { inject, NgZone, ElementRef, input, booleanAttribute, output, signal, Input, Directive, computed, InjectionToken, TemplateRef, contentChild, ChangeDetectionStrategy, Component, contentChildren, forwardRef, viewChild, viewChildren, effect, ContentChild, ViewEncapsulation, NgModule } from '@angular/core';
+import { toObservable, outputToObservable, takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { RouterLink } from '@angular/router';
 import * as i4 from '@koobiq/components/button';
 import { KbqButton, KbqButtonStyles, KbqButtonModule } from '@koobiq/components/button';
@@ -11,9 +11,10 @@ import { KbqDropdownModule } from '@koobiq/components/dropdown';
 import * as i3 from '@koobiq/components/icon';
 import { KbqIconModule } from '@koobiq/components/icon';
 import * as i7 from '@koobiq/components/overflow-items';
-import { KbqOverflowItemsModule, KbqOverflowItemsResult, KbqOverflowItem } from '@koobiq/components/overflow-items';
+import { KbqOverflowItemsResult, KbqOverflowItem, KbqOverflowItems, KbqOverflowItemsModule } from '@koobiq/components/overflow-items';
 import * as i6 from '@koobiq/components/title';
 import { KbqTitleModule } from '@koobiq/components/title';
+import { merge, switchMap, EMPTY, skip } from 'rxjs';
 
 const ENTRY_FOCUS = 'rovingFocusGroup.onEntryFocus';
 const EVENT_OPTIONS = { bubbles: false, cancelable: true };
@@ -68,18 +69,18 @@ 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();
+        this.dir = input('ltr', ...(ngDevMode ? [{ debugName: "dir" }] : []));
+        this.loop = input(true, ...(ngDevMode ? [{ debugName: "loop", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.preventScrollOnEntryFocus = input(false, ...(ngDevMode ? [{ debugName: "preventScrollOnEntryFocus", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.entryFocus = output();
+        this.currentTabStopIdChange = output();
         /** @docs-private */
-        this.currentTabStopId = signal(null);
+        this.currentTabStopId = signal(null, ...(ngDevMode ? [{ debugName: "currentTabStopId" }] : []));
         /** @docs-private */
-        this.focusableItems = signal([]);
-        this.isClickFocus = signal(false);
-        this.isTabbingBackOut = signal(false);
-        this.focusableItemsCount = signal(0);
+        this.focusableItems = signal([], ...(ngDevMode ? [{ debugName: "focusableItems" }] : []));
+        this.isClickFocus = signal(false, ...(ngDevMode ? [{ debugName: "isClickFocus" }] : []));
+        this.isTabbingBackOut = signal(false, ...(ngDevMode ? [{ debugName: "isTabbingBackOut" }] : []));
+        this.focusableItemsCount = signal(0, ...(ngDevMode ? [{ debugName: "focusableItemsCount" }] : []));
     }
     /** @docs-private */
     get dataOrientation() {
@@ -123,7 +124,7 @@ class RdxRovingFocusGroupDirective {
                 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);
+                focusFirst(candidateItems, this.preventScrollOnEntryFocus());
             }
         }
         this.isClickFocus.set(false);
@@ -163,17 +164,17 @@ class RdxRovingFocusGroupDirective {
     getFocusableItemsCount() {
         return this.focusableItemsCount();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RdxRovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RdxRovingFocusGroupDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: RdxRovingFocusGroupDirective, isStandalone: true, selector: "[rdxRovingFocusGroup]", inputs: { orientation: { classPropertyName: "orientation", publicName: "orientation", isSignal: false, isRequired: false, transformFunction: null }, dir: { classPropertyName: "dir", publicName: "dir", isSignal: true, isRequired: false, transformFunction: null }, loop: { classPropertyName: "loop", publicName: "loop", isSignal: true, isRequired: false, transformFunction: null }, preventScrollOnEntryFocus: { classPropertyName: "preventScrollOnEntryFocus", publicName: "preventScrollOnEntryFocus", isSignal: true, isRequired: false, transformFunction: null } }, 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.21", ngImport: i0, type: RdxRovingFocusGroupDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RdxRovingFocusGroupDirective, decorators: [{
             type: Directive,
             args: [{
                     selector: '[rdxRovingFocusGroup]',
                     host: {
                         '[attr.data-orientation]': 'dataOrientation',
                         '[attr.tabindex]': 'tabIndex',
-                        '[attr.dir]': 'dir',
+                        '[attr.dir]': 'dir()',
                         '(focus)': 'handleFocus($event)',
                         '(blur)': 'handleBlur()',
                         '(mouseup)': 'handleMouseUp()',
@@ -183,31 +184,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                 }]
         }], 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
-            }] } });
+            }], dir: [{ type: i0.Input, args: [{ isSignal: true, alias: "dir", required: false }] }], loop: [{ type: i0.Input, args: [{ isSignal: true, alias: "loop", required: false }] }], preventScrollOnEntryFocus: [{ type: i0.Input, args: [{ isSignal: true, alias: "preventScrollOnEntryFocus", required: false }] }], entryFocus: [{ type: i0.Output, args: ["entryFocus"] }], currentTabStopIdChange: [{ type: i0.Output, args: ["currentTabStopIdChange"] }] } });
 
 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());
+        this.focusable = input(true, ...(ngDevMode ? [{ debugName: "focusable", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.active = input(true, ...(ngDevMode ? [{ debugName: "active", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.tabStopId = input(undefined, ...(ngDevMode ? [{ debugName: "tabStopId" }] : []));
+        this.allowShiftKey = input(false, ...(ngDevMode ? [{ debugName: "allowShiftKey", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        this.id = computed(() => this.tabStopId() || generateId(), ...(ngDevMode ? [{ debugName: "id" }] : []));
         /** @docs-private */
-        this.isCurrentTabStop = computed(() => this.parent.currentTabStopId() === this.id());
+        this.isCurrentTabStop = computed(() => this.parent.currentTabStopId() === this.id(), ...(ngDevMode ? [{ debugName: "isCurrentTabStop" }] : []));
     }
     /**
      * Lifecycle hook triggered on initialization.
@@ -215,7 +205,7 @@ class RdxRovingFocusItemDirective {
      * @docs-private
      */
     ngOnInit() {
-        if (this.focusable) {
+        if (this.focusable()) {
             this.parent.registerItem(this.elementRef.nativeElement);
             this.parent.onFocusableItemAdd();
         }
@@ -226,7 +216,7 @@ class RdxRovingFocusItemDirective {
      * @docs-private
      */
     ngOnDestroy() {
-        if (this.focusable) {
+        if (this.focusable()) {
             this.parent.unregisterItem(this.elementRef.nativeElement);
             this.parent.onFocusableItemRemove();
         }
@@ -241,7 +231,7 @@ class RdxRovingFocusItemDirective {
     }
     /** @docs-private */
     handleMouseDown(event) {
-        if (!this.focusable) {
+        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();
@@ -269,9 +259,9 @@ class RdxRovingFocusItemDirective {
         }
         if (event.target !== this.elementRef.nativeElement)
             return;
-        const focusIntent = getFocusIntent(event, this.parent.orientation, this.parent.dir);
+        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)) {
+            if (event.metaKey || event.ctrlKey || event.altKey || (this.allowShiftKey() ? false : event.shiftKey)) {
                 return;
             }
             event.preventDefault();
@@ -283,7 +273,7 @@ class RdxRovingFocusItemDirective {
                 if (focusIntent === 'prev')
                     candidateNodes.reverse();
                 const currentIndex = candidateNodes.indexOf(this.elementRef.nativeElement);
-                candidateNodes = this.parent.loop
+                candidateNodes = this.parent.loop()
                     ? wrapArray(candidateNodes, currentIndex + 1)
                     : candidateNodes.slice(currentIndex + 1);
             }
@@ -294,35 +284,24 @@ class RdxRovingFocusItemDirective {
             });
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: RdxRovingFocusItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "19.2.21", 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: RdxRovingFocusItemDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.25", type: RdxRovingFocusItemDirective, isStandalone: true, selector: "[rdxRovingFocusItem]", inputs: { focusable: { classPropertyName: "focusable", publicName: "focusable", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null }, tabStopId: { classPropertyName: "tabStopId", publicName: "tabStopId", isSignal: true, isRequired: false, transformFunction: null }, allowShiftKey: { classPropertyName: "allowShiftKey", publicName: "allowShiftKey", isSignal: true, isRequired: false, transformFunction: null } }, 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.21", ngImport: i0, type: RdxRovingFocusItemDirective, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", 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',
+                        '[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 }]
-            }] } });
+        }], propDecorators: { focusable: [{ type: i0.Input, args: [{ isSignal: true, alias: "focusable", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], tabStopId: [{ type: i0.Input, args: [{ isSignal: true, alias: "tabStopId", required: false }] }], allowShiftKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "allowShiftKey", required: false }] }] } });
 
 const KBQ_BREADCRUMBS_DEFAULT_CONFIGURATION = {
     max: 4,
@@ -341,10 +320,10 @@ class KbqBreadcrumbsSeparator {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", 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: "20.3.25", ngImport: i0, type: KbqBreadcrumbsSeparator, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqBreadcrumbsSeparator, isStandalone: true, selector: "ng-template[kbqBreadcrumbsSeparator]", host: { classAttribute: "kbq-breadcrumbs-separator" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbsSeparator, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbsSeparator, decorators: [{
             type: Directive,
             args: [{
                     selector: 'ng-template[kbqBreadcrumbsSeparator]',
@@ -368,10 +347,10 @@ class KbqBreadcrumbButton {
             this.button.kbqStyle = KbqButtonStyles.Transparent;
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqBreadcrumbButton, isStandalone: true, selector: "[kbq-button][kbqBreadcrumb]", host: { classAttribute: "kbq-breadcrumb-item" }, hostDirectives: [{ directive: RdxRovingFocusItemDirective, inputs: ["focusable", "focusable"] }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbButton, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", 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: "19.2.21", ngImport: i0, type: KbqBreadcrumbButton, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbButton, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbq-button][kbqBreadcrumb]',
@@ -392,10 +371,10 @@ class KbqBreadcrumbView {
     constructor() {
         this.templateRef = inject(TemplateRef);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.2.21", type: KbqBreadcrumbView, isStandalone: true, selector: "[kbqBreadcrumbView]", ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbView, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.25", type: KbqBreadcrumbView, isStandalone: true, selector: "[kbqBreadcrumbView]", ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbView, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbView, decorators: [{
             type: Directive,
             args: [{
                     selector: '[kbqBreadcrumbView]'
@@ -406,23 +385,37 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
  */
 class KbqBreadcrumbItem {
     constructor() {
+        /**
+         * The text displayed for the breadcrumb item.
+         * This text will be shown if breadcrumb item is hidden in dropdown.
+         */
+        this.text = input(undefined, ...(ngDevMode ? [{ debugName: "text" }] : []));
+        /**
+         * Indicates whether the breadcrumb item is disabled.
+         */
+        this.disabled = input(undefined, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * Indicates whether the breadcrumb item is the current/active item.
          * Defaults to `false`.
          */
-        this.current = false;
+        this.current = input(false, ...(ngDevMode ? [{ debugName: "current", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
+        /**
+         * A reference to a custom template provided for the breadcrumb item content.
+         * The template can be used to override the default appearance of the breadcrumb.
+         */
+        this.customTemplateRef = contentChild(KbqBreadcrumbView, ...(ngDevMode ? [{ debugName: "customTemplateRef", read: TemplateRef }] : [{ read: TemplateRef }]));
         /**
          * An optional `RouterLink` instance for navigating to a specific route.
          * Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown.
          */
         this.routerLink = inject(RouterLink, { optional: true, host: true });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "19.2.21", 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: "20.3.25", ngImport: i0, type: KbqBreadcrumbItem, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.2.0", version: "20.3.25", type: KbqBreadcrumbItem, isStandalone: true, selector: "kbq-breadcrumb-item", inputs: { text: { classPropertyName: "text", publicName: "text", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, current: { classPropertyName: "current", publicName: "current", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "attr.tabIndex": "null" } }, queries: [{ propertyName: "customTemplateRef", first: true, predicate: KbqBreadcrumbView, descendants: true, read: TemplateRef, isSignal: true }], ngImport: i0, template: `
         <ng-content />
     `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbItem, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-breadcrumb-item',
@@ -434,48 +427,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         '[attr.tabIndex]': 'null'
                     }
                 }]
-        }], propDecorators: { text: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], current: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], customTemplateRef: [{
-                type: ContentChild,
-                args: [KbqBreadcrumbView, { read: TemplateRef }]
-            }] } });
+        }], propDecorators: { text: [{ type: i0.Input, args: [{ isSignal: true, alias: "text", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], current: [{ type: i0.Input, args: [{ isSignal: true, alias: "current", required: false }] }], customTemplateRef: [{ type: i0.ContentChild, args: [i0.forwardRef(() => KbqBreadcrumbView), { ...{ read: TemplateRef }, isSignal: true }] }] } });
 class KbqBreadcrumbs {
-    /** @docs-private */
-    get itemsExcludingEdges() {
-        return this.items.toArray().slice(1, -1);
-    }
-    /**
-     * Calculates the total width of visible items based on the `max` value and overflow items.
-     * @returns {number | null} The computed max width for overflow items or null if conditions are not met.
-     * @docs-private
-     */
-    get maxWidth() {
-        if (!this.overflowItems ||
-            !this.overflowItems.length ||
-            this.max === null ||
-            this.max >= this.items.length ||
-            this.max < this.minVisibleItems) {
-            return null;
-        }
-        let visibleItemsWidth = this.getItemWidth(this.result);
-        // Reorders overflow items to prioritize the first and last elements
-        const sortedItems = [
-            ...this.overflowItems.toArray().slice(1, -1),
-            this.overflowItems.first,
-            this.overflowItems.last
-        ];
-        for (let i = 0; i < this.max - 1; i++) {
-            visibleItemsWidth += this.getItemWidth(sortedItems[sortedItems.length - i - 1]);
-        }
-        return visibleItemsWidth;
-    }
     constructor() {
         this.configuration = inject(KBQ_BREADCRUMBS_CONFIGURATION);
         /**
@@ -483,27 +436,34 @@ class KbqBreadcrumbs {
          *
          * @see KbqBreadcrumbsConfiguration
          */
-        this.firstItemNegativeMargin = this.configuration.firstItemNegativeMargin;
+        this.firstItemNegativeMargin = input(this.configuration.firstItemNegativeMargin, ...(ngDevMode ? [{ debugName: "firstItemNegativeMargin", transform: booleanAttribute }] : [{
+                transform: booleanAttribute
+            }]));
         /**
          * Size of the breadcrumbs. Affects font size.
          * Default value is taken from the global configuration.
          */
-        this.size = this.configuration.size;
+        this.size = input(this.configuration.size, ...(ngDevMode ? [{ debugName: "size" }] : []));
         /**
          * Maximum number of visible breadcrumb items.
          * Remaining items are collapsed into a dropdown if the total exceeds this value.
          * Default value is taken from the global configuration.
          */
-        this.max = this.configuration.max;
+        this.max = input(this.configuration.max, ...(ngDevMode ? [{ debugName: "max" }] : []));
         /**
          * Indicates whether the breadcrumbs are disabled.
          * When disabled, user interactions are blocked.
          */
-        this.disabled = false;
+        this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled", transform: booleanAttribute }] : [{ transform: booleanAttribute }]));
         /**
          * Wrapping behavior of the breadcrumb items.
          */
-        this.wrapMode = this.configuration.wrapMode;
+        this.wrapMode = input(this.configuration.wrapMode, ...(ngDevMode ? [{ debugName: "wrapMode" }] : []));
+        this.items = contentChildren(forwardRef(() => KbqBreadcrumbItem), ...(ngDevMode ? [{ debugName: "items" }] : []));
+        this.breadcrumbsResult = viewChild('breadcrumbsResult', ...(ngDevMode ? [{ debugName: "breadcrumbsResult", read: ElementRef }] : [{ read: ElementRef }]));
+        this.result = viewChild(KbqOverflowItemsResult, ...(ngDevMode ? [{ debugName: "result" }] : []));
+        this.overflowItems = viewChildren(forwardRef(() => KbqOverflowItem), ...(ngDevMode ? [{ debugName: "overflowItems" }] : []));
+        this.overflowItemsDir = viewChild(KbqOverflowItems, ...(ngDevMode ? [{ debugName: "overflowItemsDir" }] : []));
         /**
          * Ensures at least minimum number of breadcrumb items are shown.
          */
@@ -511,20 +471,72 @@ class KbqBreadcrumbs {
         this.KbqComponentColors = KbqComponentColors;
         this.KbqButtonStyles = KbqButtonStyles;
         this.PopUpPlacements = PopUpPlacements;
-        this.cdr = inject(ChangeDetectorRef);
-        this.destroyRef = inject(DestroyRef);
-        inject(RdxRovingFocusGroupDirective, { self: true }).orientation = 'horizontal';
-    }
-    ngAfterContentInit() {
-        this.items.changes.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(() => this.cdr.markForCheck());
+        /** @docs-private */
+        this.itemsExcludingEdges = computed(() => this.items().slice(1, -1), ...(ngDevMode ? [{ debugName: "itemsExcludingEdges" }] : []));
+        this.hiddenItemIDs = computed(() => new Set(this.overflowItems()
+            .filter((item) => item.hidden())
+            .map((item) => item.id())), ...(ngDevMode ? [{ debugName: "hiddenItemIDs" }] : []));
+        /** @docs-private */
+        this.maxVisibleItems = computed(() => {
+            const max = this.max();
+            const count = this.items().length;
+            if (max === null || max >= count || max < this.minVisibleItems)
+                return null;
+            return max - 1;
+        }, ...(ngDevMode ? [{ debugName: "maxVisibleItems" }] : []));
+        this.maxHiddenItems = new Set();
+        const group = inject(RdxRovingFocusGroupDirective, { self: true });
+        group.orientation = 'horizontal';
+        merge(toObservable(this.overflowItemsDir).pipe(switchMap((dir) => (dir ? outputToObservable(dir.changes) : EMPTY))), toObservable(this.max).pipe(skip(1)))
+            .pipe(takeUntilDestroyed())
+            .subscribe(() => this.enforceMaxVisible());
+        effect(() => {
+            const focusableItems = group.focusableItems();
+            const expandButton = this.breadcrumbsResult()?.nativeElement;
+            if (focusableItems.length < 2 || focusableItems[0] !== expandButton)
+                return;
+            const [first, second, ...rest] = focusableItems;
+            group.focusableItems.set([second, first, ...rest]);
+        });
     }
-    getItemWidth(item) {
-        return item ? item.nativeElement.offsetWidth : 0;
+    enforceMaxVisible() {
+        const max = this.maxVisibleItems();
+        const items = this.overflowItems();
+        const result = this.result();
+        const overflowHiddenIds = this.overflowItemsDir()?.hiddenItemIDs() ?? new Set();
+        this.maxHiddenItems.forEach((item) => {
+            if (!overflowHiddenIds.has(item.id())) {
+                item.show();
+            }
+        });
+        this.maxHiddenItems.clear();
+        const allVisibleItems = items
+            .map((item, index) => ({ item, order: item.order() ?? index }))
+            .filter(({ item }) => !item.hidden());
+        const extraToHide = max === null ? 0 : allVisibleItems.length - max;
+        const hideResultIfAllVisible = () => {
+            if (allVisibleItems.length === items.length) {
+                result?.hide();
+            }
+        };
+        if (extraToHide <= 0) {
+            hideResultIfAllVisible();
+            return;
+        }
+        const hideable = allVisibleItems
+            .filter(({ item }) => !item.alwaysVisible())
+            .sort((a, b) => a.order - b.order)
+            .map(({ item }) => item);
+        for (let i = 0; i < extraToHide && i < hideable.length; i++) {
+            hideable[i].hide();
+            this.maxHiddenItems.add(hideable[i]);
+            result?.show();
+        }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.2.21", 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.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", "demoteOverlay", "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", "wrap"], 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 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbs, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.25", type: KbqBreadcrumbs, isStandalone: true, selector: "kbq-breadcrumbs,[kbq-breadcrumbs]", inputs: { firstItemNegativeMargin: { classPropertyName: "firstItemNegativeMargin", publicName: "firstItemNegativeMargin", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, max: { classPropertyName: "max", publicName: "max", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, wrapMode: { classPropertyName: "wrapMode", publicName: "wrapMode", isSignal: true, isRequired: false, transformFunction: null } }, 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: "items", predicate: i0.forwardRef(() => KbqBreadcrumbItem), isSignal: true }, { propertyName: "separator", first: true, predicate: KbqBreadcrumbsSeparator, descendants: true, read: TemplateRef }], viewQueries: [{ propertyName: "breadcrumbsResult", first: true, predicate: ["breadcrumbsResult"], descendants: true, read: ElementRef, isSignal: true }, { propertyName: "result", first: true, predicate: KbqOverflowItemsResult, descendants: true, isSignal: true }, { propertyName: "overflowItems", predicate: i0.forwardRef(() => KbqOverflowItem), descendants: true, isSignal: true }, { propertyName: "overflowItemsDir", first: true, predicate: KbqOverflowItems, descendants: true, isSignal: true }], 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@let allItems = items();\n@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {\n    @for (item of allItems; 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 #kbqOverflowItems=\"kbqOverflowItems\" kbqOverflowItems reverseOverflowOrder class=\"layout-align-start-center\">\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"allItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: allItems[0], last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n            <button\n                #breadcrumbsResult\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 allItems; track item) {\n                    @if (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        @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]=\"allItems.length - 1\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    breadcrumbTemplate;\n                    context: { $implicit: allItems[allItems.length - 1], last: true }\n                \"\n            />\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-breadcrumb-item{display:none;position:absolute;top:0;left:0}.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.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", "demoteOverlay", "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", "wrap"], 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: "19.2.21", ngImport: i0, type: KbqBreadcrumbs, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbs, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-breadcrumbs,[kbq-breadcrumbs]', imports: [
                         NgTemplateOutlet,
@@ -535,40 +547,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImpo
                         KbqBreadcrumbButton,
                         KbqTitleModule,
                         KbqOverflowItemsModule
-                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                    ], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, host: {
                         class: 'kbq-breadcrumbs',
-                        '[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',
+                        '[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'"
-                    }, 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.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 }]
-            }], size: [{
-                type: Input
-            }], max: [{
-                type: Input
-            }], disabled: [{
-                type: Input,
-                args: [{ transform: booleanAttribute }]
-            }], wrapMode: [{
-                type: Input
-            }], separator: [{
+                    }, 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@let allItems = items();\n@if (allItems.length < minVisibleItems || wrapMode() !== 'auto') {\n    @for (item of allItems; 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 #kbqOverflowItems=\"kbqOverflowItems\" kbqOverflowItems reverseOverflowOrder class=\"layout-align-start-center\">\n        <div class=\"kbq-breadcrumb-item__container\" [kbqOverflowItem]=\"0\" [order]=\"allItems.length\">\n            <ng-container *ngTemplateOutlet=\"breadcrumbTemplate; context: { $implicit: allItems[0], last: false }\" />\n            <ng-container [ngTemplateOutlet]=\"separatorTemplate\" />\n        </div>\n        <div kbqOverflowItemsResult class=\"kbq-breadcrumb-item__container\">\n            <button\n                #breadcrumbsResult\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 allItems; track item) {\n                    @if (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        @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]=\"allItems.length - 1\">\n            <ng-container\n                *ngTemplateOutlet=\"\n                    breadcrumbTemplate;\n                    context: { $implicit: allItems[allItems.length - 1], last: true }\n                \"\n            />\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-breadcrumb-item{display:none;position:absolute;top:0;left:0}.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.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: i0.Input, args: [{ isSignal: true, alias: "firstItemNegativeMargin", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], max: [{ type: i0.Input, args: [{ isSignal: true, alias: "max", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], wrapMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "wrapMode", required: false }] }], separator: [{
                 type: ContentChild,
                 args: [KbqBreadcrumbsSeparator, { read: TemplateRef }]
-            }], items: [{
-                type: ContentChildren,
-                args: [forwardRef(() => KbqBreadcrumbItem)]
-            }], result: [{
-                type: ViewChild,
-                args: [KbqOverflowItemsResult, { read: ElementRef }]
-            }], overflowItems: [{
-                type: ViewChildren,
-                args: [KbqOverflowItem, { read: ElementRef }]
-            }] } });
+            }], items: [{ type: i0.ContentChildren, args: [forwardRef(() => KbqBreadcrumbItem), { isSignal: true }] }], breadcrumbsResult: [{ type: i0.ViewChild, args: ['breadcrumbsResult', { ...{ read: ElementRef }, isSignal: true }] }], result: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOverflowItemsResult), { isSignal: true }] }], overflowItems: [{ type: i0.ViewChildren, args: [forwardRef(() => KbqOverflowItem), { isSignal: true }] }], overflowItemsDir: [{ type: i0.ViewChild, args: [i0.forwardRef(() => KbqOverflowItems), { isSignal: true }] }] } });
 
 const COMPONENTS = [
     KbqBreadcrumbs,
@@ -578,8 +569,8 @@ const COMPONENTS = [
     KbqBreadcrumbButton
 ];
 class KbqBreadcrumbsModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs,
             KbqBreadcrumbItem,
             KbqBreadcrumbView,
             KbqBreadcrumbsSeparator,
@@ -588,9 +579,9 @@ class KbqBreadcrumbsModule {
             KbqBreadcrumbView,
             KbqBreadcrumbsSeparator,
             KbqBreadcrumbButton] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs] }); }
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbsModule, imports: [KbqBreadcrumbs] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.21", ngImport: i0, type: KbqBreadcrumbsModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.25", ngImport: i0, type: KbqBreadcrumbsModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: COMPONENTS,