@koobiq/components 16.0.0-beta.9 → 17.0.0-beta.2

package/fesm2022/koobiq-components-navbar.mjs

@@ -15,11 +15,10 @@ import { isVerticalMovement, isHorizontalMovement, TAB, RIGHT_ARROW, LEFT_ARROW,
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import { toBoolean, PopUpTriggers, PopUpPlacements } from '@koobiq/components/core';
 import * as i5 from '@koobiq/components/dropdown';
+import { KbqFormField } from '@koobiq/components/form-field';
 import { merge, Subject, EMPTY } from 'rxjs';
 import { takeUntil, startWith, debounceTime, take } from 'rxjs/operators';
 import { FocusKeyManager } from '@koobiq/cdk/a11y';
-import { trigger, state, style, transition, animate } from '@angular/animations';
-import { VerticalNavbarSizeStatesCollapsedWidth, VerticalNavbarSizeStatesExpandedWidth } from '@koobiq/design-tokens/web';
 
 class KbqFocusableComponent {
     get tabIndex() {
@@ -117,22 +116,22 @@ class KbqFocusableComponent {
     hasFocusedItem() {
         return this.focusableItems.some((item) => item.hasFocus);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFocusableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqFocusableComponent, inputs: { tabIndex: "tabIndex" }, queries: [{ propertyName: "focusableItems", predicate: i0.forwardRef(function () { return KbqNavbarFocusableItem; }), descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFocusableComponent, deps: [{ token: i0.ChangeDetectorRef }, { token: i0.ElementRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqFocusableComponent, inputs: { tabIndex: "tabIndex" }, queries: [{ propertyName: "focusableItems", predicate: i0.forwardRef(() => KbqNavbarFocusableItem), descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqFocusableComponent, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqFocusableComponent, decorators: [{
             type: Directive
-        }], ctorParameters: function () { return [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.FocusMonitor }]; }, propDecorators: { focusableItems: [{
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }, { type: i0.ElementRef }, { type: i1.FocusMonitor }], propDecorators: { focusableItems: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqNavbarFocusableItem), { descendants: true }]
             }], tabIndex: [{
                 type: Input
             }] } });
 class KbqNavbarContainer {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarContainer, selector: "kbq-navbar-container", host: { classAttribute: "kbq-navbar-container" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarContainer, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarContainer, selector: "kbq-navbar-container", host: { classAttribute: "kbq-navbar-container" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarContainer, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarContainer, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-container',
@@ -199,23 +198,34 @@ class KbqNavbar extends KbqFocusableComponent {
     onKeyDown(event) {
         // tslint:disable-next-line: deprecation
         const keyCode = event.keyCode;
-        if (isVerticalMovement(event) || isHorizontalMovement(event)) {
+        if (!this.eventFromInput(event) && (isVerticalMovement(event) || isHorizontalMovement(event))) {
             event.preventDefault();
         }
         if (keyCode === TAB) {
             this.keyManager.tabOut.next();
             return;
         }
-        else if (keyCode === RIGHT_ARROW) {
+        else if (this.eventFromInput(event) && this.cursorOnLastPosition(event) && keyCode === RIGHT_ARROW) {
             this.keyManager.setNextItemActive();
         }
-        else if (keyCode === LEFT_ARROW) {
+        else if (this.eventFromInput(event) && this.cursorOnFirstPosition(event) && keyCode === LEFT_ARROW) {
             this.keyManager.setPreviousItemActive();
         }
-        else {
+        else if (!this.eventFromInput(event)) {
             this.keyManager.onKeydown(event);
         }
     }
+    eventFromInput(event) {
+        return !!event.target.attributes.getNamedItem('kbqinput');
+    }
+    cursorOnFirstPosition(event) {
+        const input = event.target;
+        return input.selectionStart === 0;
+    }
+    cursorOnLastPosition(event) {
+        const input = event.target;
+        return input.selectionEnd === input.value.length;
+    }
     collapseItems(collapseDelta) {
         let delta = collapseDelta;
         const unCollapsedItems = this.collapsableItems
@@ -239,10 +249,10 @@ class KbqNavbar extends KbqFocusableComponent {
             }
         });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbar, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(function () { return KbqNavbarRectangleElement; }), descendants: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(function () { return KbqNavbarItem; }), descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>`, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbar, selector: "kbq-navbar", host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)", "window:resize": "resizeStream.next($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-navbar" }, queries: [{ propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true }, { propertyName: "navbarItems", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true }], usesInheritance: true, ngImport: i0, template: `<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>`, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:24px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 12px}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:8px}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:12px}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 40px;flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset:4px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar', template: `<ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>`, host: {
                         class: 'kbq-navbar',
@@ -251,8 +261,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '(blur)': 'blur()',
                         '(keydown)': 'onKeyDown($event)',
                         '(window:resize)': 'resizeStream.next($event)'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }]; }, propDecorators: { rectangleElements: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:24px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 12px}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:8px}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:12px}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 40px;flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset:4px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { rectangleElements: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqNavbarRectangleElement), { descendants: true }]
             }], navbarItems: [{
@@ -260,14 +270,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 args: [forwardRef(() => KbqNavbarItem), { descendants: true }]
             }] } });
 
-function toggleVerticalNavbarAnimation() {
-    return trigger('toggle', [
-        state('0', style({ width: `var(--kbq-vertical-navbar-size-states-collapsed-width, ${VerticalNavbarSizeStatesCollapsedWidth})` })),
-        state('1', style({ width: `var(--kbq-vertical-navbar-size-states-expanded-width, ${VerticalNavbarSizeStatesExpandedWidth})` })),
-        transition('0 <=> 1', animate('200ms cubic-bezier(0, 1, 0.5, 1)'))
-    ]);
-}
-
 class KbqVerticalNavbar extends KbqFocusableComponent {
     get expanded() {
         return this._expanded;
@@ -313,7 +315,8 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
     onKeyDown(event) {
         // tslint:disable-next-line: deprecation
         const keyCode = event.keyCode;
-        if (isVerticalMovement(event) || isHorizontalMovement(event)) {
+        if (!event.target.attributes.getNamedItem('kbqinput') &&
+            (isVerticalMovement(event) || isHorizontalMovement(event))) {
             event.preventDefault();
         }
         if (keyCode === TAB) {
@@ -330,25 +333,21 @@ class KbqVerticalNavbar extends KbqFocusableComponent {
             this.keyManager.onKeydown(event);
         }
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqVerticalNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqVerticalNavbar, selector: "kbq-vertical-navbar", inputs: { expanded: "expanded" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-vertical-navbar" }, queries: [{ propertyName: "bento", first: true, predicate: i0.forwardRef(function () { return KbqNavbarBento; }), descendants: true }, { propertyName: "rectangleElements", predicate: i0.forwardRef(function () { return KbqNavbarRectangleElement; }), descendants: true }, { propertyName: "items", predicate: i0.forwardRef(function () { return KbqNavbarItem; }), descendants: true }], exportAs: ["KbqVerticalNavbar"], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqVerticalNavbar, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqVerticalNavbar, selector: "kbq-vertical-navbar", inputs: { expanded: "expanded" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "keydown": "onKeyDown($event)" }, properties: { "attr.tabindex": "tabIndex" }, classAttribute: "kbq-vertical-navbar" }, queries: [{ propertyName: "bento", first: true, predicate: i0.forwardRef(() => KbqNavbarBento), descendants: true }, { propertyName: "rectangleElements", predicate: i0.forwardRef(() => KbqNavbarRectangleElement), descendants: true }, { propertyName: "items", predicate: i0.forwardRef(() => KbqNavbarItem), descendants: true }], exportAs: ["KbqVerticalNavbar"], usesInheritance: true, ngImport: i0, template: `
         <div class="kbq-vertical-navbar__container"
-             [@toggle]="expanded"
-             (@toggle.done)="animationDone.next()"
              [class.kbq-collapsed]="!expanded"
              [class.kbq-expanded]="expanded">
 
             <ng-content select="[kbq-navbar-container], kbq-navbar-container"></ng-content>
             <ng-content select="[kbq-navbar-toggle], kbq-navbar-toggle"></ng-content>
         </div>
-    `, isInline: true, styles: [".kbq-vertical-navbar{position:relative;min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px);height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:var(--kbq-vertical-navbar-size-states-expanded-width, 240px)}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"], animations: [toggleVerticalNavbarAnimation()], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-vertical-navbar{position:relative;min-width:48px;height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:24px}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:48px}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 12px}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:8px}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:12px}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 40px;flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset:4px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqVerticalNavbar, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-vertical-navbar', exportAs: 'KbqVerticalNavbar', template: `
         <div class="kbq-vertical-navbar__container"
-             [@toggle]="expanded"
-             (@toggle.done)="animationDone.next()"
              [class.kbq-collapsed]="!expanded"
              [class.kbq-expanded]="expanded">
 
@@ -361,8 +360,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '(focus)': 'focus()',
                         '(blur)': 'blur()',
                         '(keydown)': 'onKeyDown($event)'
-                    }, animations: [toggleVerticalNavbarAnimation()], changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-vertical-navbar{position:relative;min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px);height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998;height:100%}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:var(--kbq-vertical-navbar-size-states-expanded-width, 240px)}\n", ".kbq-navbar-title,.kbq-navbar-subtitle{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;padding-left:var(--kbq-navbar-item-size-padding, 16px);padding-right:var(--kbq-navbar-item-size-padding, 16px)}.kbq-navbar-item .kbq-badge{position:absolute}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px)}.kbq-navbar-item.kbq-horizontal .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title+.kbq-icon{margin-left:var(--kbq-navbar-size-right-icon-margin, 2px)}.kbq-navbar-item.kbq-horizontal .kbq-icon+.kbq-navbar-item__container{margin-left:var(--kbq-navbar-size-icon-margin, 6px)}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{top:8px;right:8px}.kbq-navbar-item.kbq-vertical{height:var(--kbq-navbar-item-size-height-vertical, 56px)}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center;min-width:24px;min-height:24px}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-icon+.kbq-navbar-item__title,.kbq-navbar-item.kbq-vertical .kbq-navbar-item__title+.kbq-icon{padding-left:var(--kbq-vertical-navbar-size-icon-margin, 16px)}.kbq-navbar-item.kbq-vertical.kbq-navbar-item_button{padding-left:12px;padding-right:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded .kbq-badge{top:16px;right:16px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{top:4px;right:4px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__title{display:none}.kbq-navbar-item.kbq-navbar-item_button .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_button .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item .kbq-navbar-item__overlay,.kbq-navbar-brand .kbq-navbar-item__overlay,.kbq-navbar-toggle .kbq-navbar-item__overlay{position:absolute;inset:0}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;align-items:center}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{height:var(--kbq-navbar-item-size-height, 48px);padding-right:var(--kbq-navbar-brand-size-margin-right, 24px)}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-left:var(--kbq-navbar-brand-size-padding, 12px);padding-right:0}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{flex-direction:column;justify-content:center;align-items:center;min-height:var(--kbq-navbar-item-size-height-vertical, 56px);min-width:var(--kbq-vertical-navbar-size-states-collapsed-width, 56px)}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:flex;align-items:center;height:var(--kbq-navbar-item-size-height-vertical, 56px);padding-left:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded{align-items:unset}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 12px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:28px;margin-left:8px;margin-right:8px}\n"] }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }]; }, propDecorators: { rectangleElements: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-vertical-navbar{position:relative;min-width:48px;height:100%}.kbq-vertical-navbar .kbq-navbar-container{flex-direction:column;align-items:unset}.kbq-vertical-navbar .kbq-navbar-container+.kbq-navbar-container{padding-top:24px}.kbq-vertical-navbar .kbq-vertical-navbar__container{display:flex;flex-direction:column;justify-content:space-between;position:absolute;z-index:998}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-collapsed{width:48px}.kbq-vertical-navbar .kbq-vertical-navbar__container.kbq-expanded{width:240px}\n", ".kbq-no-select{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.kbq-navbar-item.kbq-vertical{align-items:flex-start}.kbq-navbar-item.kbq-vertical .kbq-navbar-item__container{gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded{height:48px;padding:16px 20px;gap:12px}.kbq-navbar-item.kbq-vertical.kbq-expanded:after{inset:4px 8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento{position:absolute;display:flex;justify-content:center;align-items:center;top:4px;right:4px;z-index:1;padding:8px;height:48px;width:48px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-bento:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-expanded.kbq-navbar-item_has-nested{align-items:center;padding:0 12px}.kbq-navbar-item.kbq-vertical.kbq-collapsed{height:48px;width:48px;padding:16px;justify-content:center}.kbq-navbar-item.kbq-vertical.kbq-collapsed:after{inset:8px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-vertical.kbq-collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-vertical>.kbq-icon{display:flex;justify-content:center;align-items:center}.kbq-navbar-item.kbq-horizontal{position:relative;flex-direction:row;box-sizing:border-box;outline:none;-webkit-tap-highlight-color:transparent;min-height:48px;min-width:48px;padding:8px;justify-content:center}.kbq-navbar-item.kbq-horizontal:after{inset:8px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__title{padding-left:4px;padding-right:4px}.kbq-navbar-item.kbq-horizontal .kbq-navbar-item__arrow-icon{padding-left:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed){padding:16px 12px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed):after{inset:8px 0}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_with-title:not(.kbq-navbar-item_collapsed)>.kbq-icon{padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento{min-width:44px;justify-content:center;padding-right:4px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-bento:after{inset:8px 4px 8px 8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed{justify-content:center;padding:8px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_collapsed .kbq-navbar-item__container{display:none}.kbq-navbar-item.kbq-horizontal .kbq-badge{position:absolute;z-index:1;top:6px;right:6px}.kbq-navbar-item.kbq-horizontal.kbq-navbar-item_has-nested{padding:0 12px}.kbq-navbar-item{box-sizing:border-box;position:relative;display:flex;align-items:center;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-item .kbq-icon{min-width:16px;min-height:16px}.kbq-navbar-item:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-title{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-item__title{display:flex;flex-direction:column;align-self:center;min-width:0}.kbq-navbar-item__container{display:flex;flex-direction:row;flex:1 1 auto;justify-content:space-between;min-width:0}.kbq-navbar-item__container .kbq-icon{align-self:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button{flex:1}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper{justify-content:center}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_left{margin-left:unset}.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button .kbq-button-wrapper .kbq-icon.kbq-icon_right{margin-right:unset}a.kbq-navbar-item,a.kbq-navbar-title{text-decoration:none}.kbq-navbar-item [kbq-button],.kbq-navbar-brand [kbq-button],.kbq-navbar-toggle [kbq-button]{z-index:1}\n", ".kbq-navbar-logo{display:flex}.kbq-navbar-brand{position:relative;display:flex;border-radius:8px}.kbq-navbar-brand:after{position:absolute;content:\"\";display:none;border-radius:var(--kbq-navbar-item-size-content-border-radius, 8px)}.kbq-navbar-brand .kbq-navbar-title{cursor:pointer}a.kbq-navbar-brand{text-decoration:none}.kbq-navbar-brand.kbq-horizontal{padding:8px 6px 8px 4px;align-items:center;gap:8px}.kbq-navbar-brand.kbq-horizontal:after{inset:4px 4px 4px 0}.kbq-navbar-brand.kbq-horizontal .kbq-navbar-title{padding-right:12px}.kbq-navbar-brand.kbq-vertical .kbq-navbar-logo{align-items:center}.kbq-navbar-brand.kbq-vertical .kbq-navbar-title{display:block;align-items:center;padding-top:4px;padding-bottom:4px;height:32px;padding-left:0;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.kbq-navbar-brand.kbq-vertical.kbq-expanded{position:relative;height:40px;width:40px;margin:16px 16px 40px;flex-direction:column}.kbq-navbar-brand.kbq-vertical.kbq-expanded:after{inset:0}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-logo{min-height:40px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-expanded .kbq-navbar-title{position:absolute;left:4px;bottom:-40px;max-width:200px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed{height:48px;width:48px;justify-content:center}.kbq-navbar-brand.kbq-vertical.kbq-collapsed:after{inset:4px}.kbq-navbar-brand.kbq-vertical.kbq-collapsed .kbq-navbar-title{display:none}\n", ".kbq-navbar-divider{display:block}.kbq-navbar-divider.kbq-vertical{height:1px;margin:8px 16px}.kbq-navbar-divider.kbq-horizontal{width:1px;height:12px;margin-left:12px;margin-right:12px}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }], propDecorators: { rectangleElements: [{
                 type: ContentChildren,
                 args: [forwardRef(() => KbqNavbarRectangleElement), { descendants: true }]
             }], items: [{
@@ -379,10 +378,10 @@ class KbqNavbarLogo {
     constructor() {
         this.hovered = new Subject();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarLogo, selector: "kbq-navbar-logo, [kbq-navbar-logo]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, classAttribute: "kbq-navbar-logo" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarLogo, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarLogo, selector: "kbq-navbar-logo, [kbq-navbar-logo]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, classAttribute: "kbq-navbar-logo" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarLogo, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarLogo, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-logo, [kbq-navbar-logo]',
@@ -394,10 +393,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }]
         }] });
 class KbqNavbarBento {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarBento, selector: "kbq-navbar-item[bento], [kbq-navbar-item][bento]", host: { classAttribute: "kbq-navbar-bento" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarBento, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarBento, selector: "kbq-navbar-item[bento], [kbq-navbar-item][bento]", host: { classAttribute: "kbq-navbar-bento" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarBento, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarBento, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item[bento], [kbq-navbar-item][bento]',
@@ -408,7 +407,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
         }] });
 class KbqNavbarTitle {
     get text() {
-        return this.elementRef.nativeElement.innerText;
+        return this.elementRef.nativeElement.textContent;
     }
     get isOverflown() {
         return this.elementRef.nativeElement.scrollWidth > this.elementRef.nativeElement.clientWidth;
@@ -429,10 +428,10 @@ class KbqNavbarTitle {
     ngAfterViewInit() {
         this.outerElementWidth = this.getOuterElementWidth();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarTitle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarTitle, selector: "kbq-navbar-title, [kbq-navbar-title]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, properties: { "class.kbq-navbar-title_small": "isTextOverflown" }, classAttribute: "kbq-navbar-title" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarTitle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarTitle, selector: "kbq-navbar-title, [kbq-navbar-title]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, properties: { "class.kbq-navbar-title_small": "isTextOverflown" }, classAttribute: "kbq-navbar-title" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarTitle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarTitle, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-title, [kbq-navbar-title]',
@@ -443,39 +442,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '(mouseleave)': 'hovered.next(false)'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
-class KbqNavbarSubTitle {
-    get text() {
-        return this.elementRef.nativeElement.innerText;
-    }
-    get isOverflown() {
-        return this.elementRef.nativeElement.scrollWidth > this.elementRef.nativeElement.clientWidth;
-    }
-    constructor(elementRef) {
-        this.elementRef = elementRef;
-        this.hovered = new Subject();
-    }
-    getOuterElementWidth() {
-        const { width, marginLeft, marginRight } = window.getComputedStyle(this.elementRef.nativeElement);
-        return [width, marginLeft, marginRight].reduce((acc, item) => acc + parseInt(item) || 0, 0);
-    }
-    ngAfterContentInit() {
-        this.outerElementWidth = this.getOuterElementWidth();
-    }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarSubTitle, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarSubTitle, selector: "kbq-navbar-subtitle, [kbq-navbar-subtitle]", host: { listeners: { "mouseenter": "hovered.next(true)", "mouseleave": "hovered.next(false)" }, classAttribute: "kbq-navbar-subtitle" }, ngImport: i0 }); }
-}
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarSubTitle, decorators: [{
-            type: Directive,
-            args: [{
-                    selector: 'kbq-navbar-subtitle, [kbq-navbar-subtitle]',
-                    host: {
-                        class: 'kbq-navbar-subtitle',
-                        '(mouseenter)': 'hovered.next(true)',
-                        '(mouseleave)': 'hovered.next(false)'
-                    }
-                }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; } });
+        }], ctorParameters: () => [{ type: i0.ElementRef }] });
 class KbqNavbarBrand {
     get hasBento() {
         return !!this.navbar?.bento;
@@ -496,29 +463,23 @@ class KbqNavbarBrand {
         this.destroyed.next();
         this.destroyed.complete();
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarBrand, deps: [{ token: KbqVerticalNavbar, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], ngImport: i0, template: `
-        <ng-content></ng-content>
-        <div class="kbq-navbar-item__overlay"></div>
-    `, isInline: true }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarBrand, deps: [{ token: KbqVerticalNavbar, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarBrand, selector: "kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-hovered": "hovered" }, classAttribute: "kbq-navbar-brand" }, queries: [{ propertyName: "logo", first: true, predicate: KbqNavbarLogo, descendants: true }, { propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }], exportAs: ["kbqNavbarBrand"], ngImport: i0, template: `<ng-content></ng-content>`, isInline: true }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarBrand, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarBrand, decorators: [{
             type: Component,
             args: [{
                     selector: 'kbq-navbar-brand, [kbq-navbar-brand]',
                     exportAs: 'kbqNavbarBrand',
-                    template: `
-        <ng-content></ng-content>
-        <div class="kbq-navbar-item__overlay"></div>
-    `,
+                    template: `<ng-content></ng-content>`,
                     host: {
                         class: 'kbq-navbar-brand',
                         '[class.kbq-hovered]': 'hovered'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: KbqVerticalNavbar, decorators: [{
+        }], ctorParameters: () => [{ type: KbqVerticalNavbar, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { logo: [{
+                }] }], propDecorators: { logo: [{
                 type: ContentChild,
                 args: [KbqNavbarLogo]
             }], title: [{
@@ -526,10 +487,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 args: [KbqNavbarTitle]
             }] } });
 class KbqNavbarDivider {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarDivider, selector: "kbq-navbar-divider", host: { classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarDivider, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarDivider, selector: "kbq-navbar-divider", host: { classAttribute: "kbq-navbar-divider" }, ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarDivider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarDivider, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-divider',
@@ -539,11 +500,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }]
         }] });
 class KbqNavbarFocusableItem {
+    get nestedElement() {
+        return this.button || this.formField;
+    }
     get tooltip() {
         return this._tooltip;
     }
     get hasFocus() {
-        return !!this.button?.hasFocus || this._hasFocus;
+        return !!this.nestedElement?.hasFocus || this._hasFocus;
     }
     set hasFocus(value) {
         this._hasFocus = value;
@@ -599,8 +563,8 @@ class KbqNavbarFocusableItem {
         if (origin === 'keyboard') {
             this.focusMonitor.focusVia(this.elementRef, origin);
         }
-        if (this.button) {
-            this.button.focusViaKeyboard();
+        if (this.nestedElement) {
+            this.nestedElement.focusViaKeyboard();
             this.changeDetector.markForCheck();
             return;
         }
@@ -629,10 +593,10 @@ class KbqNavbarFocusableItem {
     getLabel() {
         return this.title?.text || '';
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarFocusableItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarFocusableItem, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "focus": "onFocusHandler()", "blur": "blur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-navbar-item_button": "button" }, classAttribute: "kbq-navbar-focusable-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarFocusableItem, deps: [{ token: i0.ElementRef }, { token: i0.ChangeDetectorRef }, { token: i1.FocusMonitor }, { token: i0.NgZone }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarFocusableItem, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", inputs: { disabled: "disabled" }, host: { listeners: { "focus": "onFocusHandler()", "blur": "blur()" }, properties: { "attr.tabindex": "tabIndex", "attr.disabled": "disabled || null", "class.kbq-navbar-item_has-nested": "!!nestedElement", "class.kbq-disabled": "disabled" }, classAttribute: "kbq-navbar-focusable-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "button", first: true, predicate: KbqButton, descendants: true }, { propertyName: "formField", first: true, predicate: KbqFormField, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarFocusableItem, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle',
@@ -640,17 +604,21 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '[attr.tabindex]': 'tabIndex',
                         '[attr.disabled]': 'disabled || null',
                         class: 'kbq-navbar-focusable-item',
-                        '[class.kbq-navbar-item_button]': 'button',
+                        '[class.kbq-navbar-item_has-nested]': '!!nestedElement',
+                        '[class.kbq-disabled]': 'disabled',
                         '(focus)': 'onFocusHandler()',
                         '(blur)': 'blur()'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: i0.NgZone }]; }, propDecorators: { title: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.ChangeDetectorRef }, { type: i1.FocusMonitor }, { type: i0.NgZone }], propDecorators: { title: [{
                 type: ContentChild,
                 args: [KbqNavbarTitle]
             }], button: [{
                 type: ContentChild,
                 args: [KbqButton]
+            }], formField: [{
+                type: ContentChild,
+                args: [KbqFormField]
             }], disabled: [{
                 type: Input
             }] } });
@@ -684,10 +652,10 @@ class KbqNavbarRectangleElement {
         const { width, marginLeft, marginRight } = window.getComputedStyle(this.elementRef.nativeElement);
         return [width, marginLeft, marginRight].reduce((acc, item) => acc + parseInt(item), 0);
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarRectangleElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
-    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarRectangleElement, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-vertical": "vertical", "class.kbq-horizontal": "horizontal", "class.kbq-expanded": "vertical && !collapsed", "class.kbq-collapsed": "vertical && collapsed" } }, queries: [{ propertyName: "button", first: true, predicate: KbqButtonCssStyler, descendants: true }], ngImport: i0 }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarRectangleElement, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    /** @nocollapse */ static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarRectangleElement, selector: "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]", host: { properties: { "class.kbq-vertical": "vertical", "class.kbq-horizontal": "horizontal", "class.kbq-expanded": "vertical && !collapsed", "class.kbq-collapsed": "vertical && collapsed" } }, queries: [{ propertyName: "button", first: true, predicate: KbqButtonCssStyler, descendants: true }], ngImport: i0 }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarRectangleElement, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarRectangleElement, decorators: [{
             type: Directive,
             args: [{
                     selector: 'kbq-navbar-item, [kbq-navbar-item], kbq-navbar-divider, kbq-navbar-brand, [kbq-navbar-brand]',
@@ -698,7 +666,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         '[class.kbq-collapsed]': 'vertical && collapsed'
                     }
                 }]
-        }], ctorParameters: function () { return [{ type: i0.ElementRef }]; }, propDecorators: { button: [{
+        }], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { button: [{
                 type: ContentChild,
                 args: [KbqButtonCssStyler]
             }] } });
@@ -721,8 +689,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
     }
     get croppedText() {
         const croppedTitleText = this.title?.isOverflown ? this.titleText : '';
-        const croppedSubTitleText = this.subTitle?.isOverflown ? this.subTitleText : '';
-        return `${croppedTitleText}\n ${croppedSubTitleText}`;
+        return `${croppedTitleText}`;
     }
     get collapsable() {
         return this._collapsable;
@@ -733,9 +700,6 @@ class KbqNavbarItem extends KbqTooltipTrigger {
     get titleText() {
         return this.collapsedText || this.title?.text || null;
     }
-    get subTitleText() {
-        return this.subTitle?.text || null;
-    }
     get disabled() {
         if (this._disabled !== undefined) {
             return this._disabled;
@@ -755,7 +719,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
         return this.hasDropDownTrigger && this.rectangleElement.horizontal && !this.isCollapsed;
     }
     get hasCroppedText() {
-        return !!(this.title?.isOverflown || this.subTitle?.isOverflown);
+        return !!(this.title?.isOverflown);
     }
     constructor(rectangleElement, navbarFocusableItem, changeDetectorRef, overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction, dropdownTrigger, bento) {
         super(overlay, elementRef, ngZone, scrollDispatcher, hostView, scrollStrategy, direction);
@@ -782,7 +746,7 @@ class KbqNavbarItem extends KbqTooltipTrigger {
     }
     updateTooltip() {
         if (this.isCollapsed) {
-            this.content = `${this.titleText}\n ${this.subTitleText || ''}`;
+            this.content = `${this.titleText || ''}`;
         }
         else if (!this.isCollapsed && this.hasCroppedText) {
             this.content = this.croppedText;
@@ -809,19 +773,23 @@ class KbqNavbarItem extends KbqTooltipTrigger {
     }
     updateCollapsedState() {
         Promise.resolve()
-            .then(() => this.isCollapsed = this._collapsed);
+            .then(() => {
+            this.isCollapsed = this._collapsed;
+            this.changeDetectorRef.markForCheck();
+        });
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarItem, deps: [{ token: KbqNavbarRectangleElement }, { token: KbqNavbarFocusableItem }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: i5.KbqDropdownTrigger, optional: true }, { token: KbqNavbarBento, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarItem, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["kbqTrigger", "trigger"], collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "subTitle", first: true, predicate: KbqNavbarSubTitle, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], exportAs: ["kbqNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-navbar-item__container\" *ngIf=\"title\">\n    <div class=\"kbq-navbar-item__title\">\n        <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n        <ng-content select=\"kbq-navbar-subtitle, [kbq-navbar-subtitle]\"></ng-content>\n    </div>\n\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-right-M_24\" *ngIf=\"showVerticalDropDownAngle\"></i>\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-down-S_16\" *ngIf=\"showHorizontalDropDownAngle\"></i>\n\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"kbq-navbar-item__overlay\"></div>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarItem, deps: [{ token: KbqNavbarRectangleElement }, { token: KbqNavbarFocusableItem }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: i5.KbqDropdownTrigger, optional: true }, { token: KbqNavbarBento, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarItem, selector: "kbq-navbar-item, [kbq-navbar-item]", inputs: { collapsedText: "collapsedText", trigger: ["kbqTrigger", "trigger"], collapsable: "collapsable" }, host: { listeners: { "keydown": "onKeyDown($event)" }, properties: { "class.kbq-navbar-item_collapsed": "isCollapsed", "class.kbq-navbar-item_with-title": "!!title" }, classAttribute: "kbq-navbar-item" }, queries: [{ propertyName: "title", first: true, predicate: KbqNavbarTitle, descendants: true }, { propertyName: "icon", first: true, predicate: KbqIcon, descendants: true }], exportAs: ["kbqNavbarItem"], usesInheritance: true, ngImport: i0, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-navbar-item__container\" *ngIf=\"title\">\n    <div class=\"kbq-navbar-item__title\">\n        <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n    </div>\n\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-right-M_16\" *ngIf=\"showVerticalDropDownAngle\"></i>\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-down-S_16\" *ngIf=\"showHorizontalDropDownAngle\"></i>\n\n</div>\n\n<ng-content></ng-content>\n", dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarItem, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarItem, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-item, [kbq-navbar-item]', exportAs: 'kbqNavbarItem', host: {
                         class: 'kbq-navbar-item',
                         '[class.kbq-navbar-item_collapsed]': 'isCollapsed',
+                        '[class.kbq-navbar-item_with-title]': '!!title',
                         '(keydown)': 'onKeyDown($event)'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-navbar-item__container\" *ngIf=\"title\">\n    <div class=\"kbq-navbar-item__title\">\n        <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n        <ng-content select=\"kbq-navbar-subtitle, [kbq-navbar-subtitle]\"></ng-content>\n    </div>\n\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-right-M_24\" *ngIf=\"showVerticalDropDownAngle\"></i>\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-down-S_16\" *ngIf=\"showHorizontalDropDownAngle\"></i>\n\n</div>\n\n<ng-content></ng-content>\n\n<div class=\"kbq-navbar-item__overlay\"></div>\n" }]
-        }], ctorParameters: function () { return [{ type: KbqNavbarRectangleElement }, { type: KbqNavbarFocusableItem }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, template: "<ng-content select=\"[kbq-icon]\"></ng-content>\n\n<div class=\"kbq-navbar-item__container\" *ngIf=\"title\">\n    <div class=\"kbq-navbar-item__title\">\n        <ng-content select=\"kbq-navbar-title, [kbq-navbar-title]\"></ng-content>\n    </div>\n\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-right-M_16\" *ngIf=\"showVerticalDropDownAngle\"></i>\n    <i class=\"kbq-navbar-item__arrow-icon\" kbq-icon=\"mc-angle-down-S_16\" *ngIf=\"showHorizontalDropDownAngle\"></i>\n\n</div>\n\n<ng-content></ng-content>\n" }]
+        }], ctorParameters: () => [{ type: KbqNavbarRectangleElement }, { type: KbqNavbarFocusableItem }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
                 }] }, { type: i4.Directionality, decorators: [{
@@ -830,12 +798,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                     type: Optional
                 }] }, { type: KbqNavbarBento, decorators: [{
                     type: Optional
-                }] }]; }, propDecorators: { title: [{
+                }] }], propDecorators: { title: [{
                 type: ContentChild,
                 args: [KbqNavbarTitle]
-            }], subTitle: [{
-                type: ContentChild,
-                args: [KbqNavbarSubTitle]
             }], icon: [{
                 type: ContentChild,
                 args: [KbqIcon]
@@ -899,11 +864,11 @@ class KbqNavbarToggle extends KbqTooltipTrigger {
     getWindow() {
         return this.document?.defaultView || window;
     }
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarToggle, deps: [{ token: KbqVerticalNavbar }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
-    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.1.5", type: KbqNavbarToggle, selector: "kbq-navbar-toggle", inputs: { content: ["mcCollapsedTooltip", "content"] }, host: { listeners: { "keydown": "onKeydown($event)", "click": "toggle()", "touchend": "handleTouchend()" }, properties: { "class.kbq-tooltip_open": "isOpen" }, classAttribute: "kbq-navbar-item kbq-navbar-toggle kbq-vertical" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqIcon, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarToggle, deps: [{ token: KbqVerticalNavbar }, { token: i0.ChangeDetectorRef }, { token: i3.Overlay }, { token: i0.ElementRef }, { token: i0.NgZone }, { token: i3.ScrollDispatcher }, { token: i0.ViewContainerRef }, { token: KBQ_TOOLTIP_SCROLL_STRATEGY }, { token: i4.Directionality, optional: true }, { token: DOCUMENT, optional: true }], target: i0.ɵɵFactoryTarget.Component }); }
+    /** @nocollapse */ static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.2.0", type: KbqNavbarToggle, selector: "kbq-navbar-toggle", inputs: { content: ["kbqCollapsedTooltip", "content"] }, host: { listeners: { "keydown": "onKeydown($event)", "click": "toggle()", "touchend": "handleTouchend()" }, properties: { "class.kbq-tooltip_open": "isOpen", "class.kbq-collapsed": "!navbar.expanded", "class.kbq-expanded": "navbar.expanded" }, classAttribute: "kbq-navbar-item kbq-navbar-toggle kbq-vertical" }, queries: [{ propertyName: "customIcon", first: true, predicate: KbqIcon, descendants: true }], usesInheritance: true, ngImport: i0, template: `
         <i kbq-icon
-           [class.kbq-angle-left-M_24]="navbar.expanded"
-           [class.kbq-angle-right-M_24]="!navbar.expanded"
+           [class.mc-angle-left-M_16]="navbar.expanded"
+           [class.mc-angle-right-M_16]="!navbar.expanded"
            *ngIf="!customIcon">
         </i>
 
@@ -912,16 +877,14 @@ class KbqNavbarToggle extends KbqTooltipTrigger {
         <div class="kbq-navbar-item__title" *ngIf="navbar.expanded">
             <ng-content select="kbq-navbar-title"></ng-content>
         </div>
-
-        <div class="kbq-navbar-item__overlay"></div>
-    `, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+    `, isInline: true, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:24px}\n"], dependencies: [{ kind: "directive", type: i6.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: i7.KbqIcon, selector: "[kbq-icon]", inputs: ["color", "small", "autoColor"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarToggle, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarToggle, decorators: [{
             type: Component,
             args: [{ selector: 'kbq-navbar-toggle', template: `
         <i kbq-icon
-           [class.kbq-angle-left-M_24]="navbar.expanded"
-           [class.kbq-angle-right-M_24]="!navbar.expanded"
+           [class.mc-angle-left-M_16]="navbar.expanded"
+           [class.mc-angle-right-M_16]="!navbar.expanded"
            *ngIf="!customIcon">
         </i>
 
@@ -930,16 +893,16 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
         <div class="kbq-navbar-item__title" *ngIf="navbar.expanded">
             <ng-content select="kbq-navbar-title"></ng-content>
         </div>
-
-        <div class="kbq-navbar-item__overlay"></div>
     `, host: {
                         class: 'kbq-navbar-item kbq-navbar-toggle kbq-vertical',
                         '[class.kbq-tooltip_open]': 'isOpen',
+                        '[class.kbq-collapsed]': '!navbar.expanded',
+                        '[class.kbq-expanded]': 'navbar.expanded',
                         '(keydown)': 'onKeydown($event)',
                         '(click)': 'toggle()',
                         '(touchend)': 'handleTouchend()'
-                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}\n"] }]
-        }], ctorParameters: function () { return [{ type: KbqVerticalNavbar }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
+                    }, changeDetection: ChangeDetectionStrategy.OnPush, encapsulation: ViewEncapsulation.None, styles: [".kbq-navbar{display:flex;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar-container{display:flex;flex-shrink:0;flex-direction:row;justify-content:space-between;align-items:center;position:relative}.kbq-navbar .kbq-navbar-container+.kbq-navbar-container{margin-left:24px}\n"] }]
+        }], ctorParameters: () => [{ type: KbqVerticalNavbar }, { type: i0.ChangeDetectorRef }, { type: i3.Overlay }, { type: i0.ElementRef }, { type: i0.NgZone }, { type: i3.ScrollDispatcher }, { type: i0.ViewContainerRef }, { type: undefined, decorators: [{
                     type: Inject,
                     args: [KBQ_TOOLTIP_SCROLL_STRATEGY]
                 }] }, { type: i4.Directionality, decorators: [{
@@ -949,17 +912,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                 }, {
                     type: Inject,
                     args: [DOCUMENT]
-                }] }]; }, propDecorators: { customIcon: [{
+                }] }], propDecorators: { customIcon: [{
                 type: ContentChild,
                 args: [KbqIcon]
             }], content: [{
                 type: Input,
-                args: ['mcCollapsedTooltip']
+                args: ['kbqCollapsedTooltip']
             }] } });
 
 class KbqNavbarModule {
-    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
-    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarModule, declarations: [KbqNavbar,
+    /** @nocollapse */ static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    /** @nocollapse */ static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarModule, declarations: [KbqNavbar,
             KbqNavbarContainer,
             KbqNavbarTitle,
             KbqNavbarItem,
@@ -970,7 +933,6 @@ class KbqNavbarModule {
             KbqNavbarDivider,
             KbqNavbarFocusableItem,
             KbqNavbarRectangleElement,
-            KbqNavbarSubTitle,
             KbqNavbarBento], imports: [CommonModule,
             A11yModule,
             PlatformModule,
@@ -986,15 +948,14 @@ class KbqNavbarModule {
             KbqNavbarDivider,
             KbqNavbarFocusableItem,
             KbqNavbarRectangleElement,
-            KbqNavbarSubTitle,
             KbqNavbarBento] }); }
-    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarModule, imports: [CommonModule,
+    /** @nocollapse */ static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarModule, imports: [CommonModule,
             A11yModule,
             PlatformModule,
             KbqIconModule,
             KbqToolTipModule] }); }
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImport: i0, type: KbqNavbarModule, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.2.0", ngImport: i0, type: KbqNavbarModule, decorators: [{
             type: NgModule,
             args: [{
                     imports: [
@@ -1016,7 +977,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         KbqNavbarDivider,
                         KbqNavbarFocusableItem,
                         KbqNavbarRectangleElement,
-                        KbqNavbarSubTitle,
                         KbqNavbarBento
                     ],
                     declarations: [
@@ -1031,7 +991,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
                         KbqNavbarDivider,
                         KbqNavbarFocusableItem,
                         KbqNavbarRectangleElement,
-                        KbqNavbarSubTitle,
                         KbqNavbarBento
                     ]
                 }]
@@ -1041,5 +1000,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.1.5", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { KbqFocusableComponent, KbqNavbar, KbqNavbarBento, KbqNavbarBrand, KbqNavbarContainer, KbqNavbarDivider, KbqNavbarFocusableItem, KbqNavbarItem, KbqNavbarLogo, KbqNavbarModule, KbqNavbarRectangleElement, KbqNavbarSubTitle, KbqNavbarTitle, KbqNavbarToggle, KbqVerticalNavbar };
+export { KbqFocusableComponent, KbqNavbar, KbqNavbarBento, KbqNavbarBrand, KbqNavbarContainer, KbqNavbarDivider, KbqNavbarFocusableItem, KbqNavbarItem, KbqNavbarLogo, KbqNavbarModule, KbqNavbarRectangleElement, KbqNavbarTitle, KbqNavbarToggle, KbqVerticalNavbar };
 //# sourceMappingURL=koobiq-components-navbar.mjs.map