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

package/file-upload/_file-upload-theme.scss

@@ -135,7 +135,9 @@ $tokens: meta.module-variables(tokens) !default;
     .kbq-single-file-upload,
     .kbq-multiple-file-upload {
         .kbq-file-upload__hint:not(.kbq-error) {
-            //color: map-get($foreground, text-less-contrast);
+            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
+
+            color: map.get($form-field-hint, text);
         }
     }
 }
@@ -184,5 +186,12 @@ $tokens: meta.module-variables(tokens) !default;
             }
         }
     }
+
+    .kbq-single-file-upload,
+    .kbq-multiple-file-upload {
+        .kbq-file-upload__hint.kbq-hint .kbq-hint__text {
+            @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
+        }
+    }
 }
 /* stylelint-enable no-descending-specificity */

package/file-upload/file-drop.d.ts

@@ -1,8 +1,9 @@
 import { EventEmitter } from '@angular/core';
+import { KbqFile } from './file-upload';
 import * as i0 from "@angular/core";
 export declare class KbqFileDropDirective {
     dragover: boolean;
-    filesDropped: EventEmitter<FileList>;
+    filesDropped: EventEmitter<FileList | KbqFile[]>;
     onDragOver(event: DragEvent): void;
     onDragLeave(event: DragEvent): void;
     onDrop(event: DragEvent): void;

package/file-upload/file-upload.d.ts

@@ -1,5 +1,8 @@
 import { InjectionToken } from '@angular/core';
 import { BehaviorSubject } from 'rxjs';
+export interface KbqFile extends File {
+    fullPath: string;
+}
 export interface KbqFileItem {
     file: File;
     hasError?: boolean;
@@ -11,7 +14,7 @@ export interface KbqInputFile {
     files: KbqFileItem[] | KbqFileItem | null;
     accept?: string[];
     onFileSelectedViaClick(event: Event): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
 }
 export interface KbqInputFileLabel {
     captionText: string;

package/file-upload/multiple-file-upload.component.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2, TemplateRef } from '@angular/core';
 import { CanDisable } from '@koobiq/components/core';
-import { KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     captionTextWhenSelected: string;
@@ -40,7 +40,7 @@ export declare class KbqMultipleFileUploadComponent implements AfterViewInit, On
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
     deleteFile(index: number, event?: MouseEvent): void;
     onFileListChange(): void;
     onFocus(focusState: boolean): void;

package/file-upload/single-file-upload.component.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { CanDisable } from '@koobiq/components/core';
-import { KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
+import { KbqFile, KbqFileItem, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
 export declare const KBQ_SINGLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileLabel;
 export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDestroy, KbqInputFile, CanDisable {
@@ -25,7 +25,7 @@ export declare class KbqSingleFileUploadComponent implements AfterViewInit, OnDe
     ngOnDestroy(): void;
     onFileSelectedViaClick({ target }: Event): void;
     deleteItem(event?: MouseEvent): void;
-    onFileDropped(files: FileList): void;
+    onFileDropped(files: FileList | KbqFile[]): void;
     onFocus(focusState: boolean): void;
     private mapToFileItem;
     private validateFile;

package/form-field/_form-field-theme.scss

@@ -12,6 +12,7 @@
     }
 
     .kbq-input,
+    .kbq-tag-input,
     .kbq-textarea {
         color: map.get($state, text);
 
@@ -75,27 +76,20 @@
         &.kbq-disabled {
             @include kbq-form-field-state($disabled);
 
-            .kbq-icon,
-            .kbq-input,
-            .kbq-textarea {
+            .kbq-icon {
                 color: map.get($disabled, text);
-                background: map.get($disabled, background);
                 -webkit-text-fill-color: map.get($disabled, text);
             }
         }
         /* stylelint-enable no-descending-specificity */
     }
 
-    .kbq-form-field__hint > .kbq-hint {
-        $form-field-hint: map.get(map.get($theme, components), form-field-hint);
+    .kbq-form-field__hint {
+        & > .kbq-hint:not(.kbq-password-hint, .kbq-contrast-fade, .kbq-success, .kbq-warning, .kbq-error) {
+            $form-field-hint: map.get(map.get($theme, components), form-field-hint);
 
-        color: map.get($form-field-hint, text);
-    }
-
-    .kbq-password-hint {
-        $password-hint: map.get(map.get($theme, components), form-field-password-hint);
-
-        color: map.get($password-hint, text-color);
+            color: map.get($form-field-hint, text);
+        }
     }
 }
 
@@ -106,7 +100,7 @@
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-font-text));
     }
 
-    .kbq-form-field__hint > .kbq-hint .kbq-hint__text {
+    .kbq-form-field__hint > .kbq-hint:not(.kbq-password-hint) .kbq-hint__text {
         @include kbq-typography-level-to-styles($config, map.get($tokens, form-field-hint-font-text));
     }
 }

package/form-field/form-field.d.ts

@@ -35,6 +35,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     hovered: boolean;
     canCleanerClearByEsc: boolean;
     private $unsubscribe;
+    get hasFocus(): boolean;
     get hasHint(): boolean;
     get hasSuffix(): boolean;
     get hasPrefix(): boolean;
@@ -48,6 +49,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
+    focusViaKeyboard(): void;
     clearValue($event: any): void;
     onContainerClick($event: any): void;
     onKeyDown(event: KeyboardEvent): void;

package/form-field/form-field.scss

@@ -70,6 +70,10 @@ $tokens: meta.module-variables(tokens) !default;
             );
         }
     }
+
+    & + .kbq-password-hint {
+        margin-top: var(--kbq-size-m, map.get($tokens, size-m));
+    }
 }
 
 .kbq-form-field__container {
@@ -137,7 +141,14 @@ $tokens: meta.module-variables(tokens) !default;
     flex-direction: column;
     margin-top: var(--kbq-form-field-hint-size-margin-top, map.get($tokens, form-field-hint-size-margin-top));
 
-    gap: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
+    & .kbq-password-hint:first-child {
+        margin-top: var(--kbq-size-s, map.get($tokens, size-s));
+    }
+}
+
+.kbq-password-hint {
+    margin-top: var(--kbq-form-field-hint-size-gap, map.get($tokens, form-field-hint-size-gap));
 }
 
+
 /* stylelint-enable no-descending-specificity */

package/form-field/hint.scss

@@ -7,7 +7,7 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-hint {
-    display: block;
+    display: flex;
 
     & .kbq-icon {
         margin-right: var(--kbq-hint-size-normal-content-padding, map-get($tokens, hint-size-normal-content-padding));

package/form-field/password-hint.d.ts

@@ -1,5 +1,6 @@
-import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
 import { KbqFormField } from './form-field';
+import { KbqHint } from './hint';
 import * as i0 from "@angular/core";
 export declare enum PasswordRules {
     Length = 0,
@@ -16,7 +17,7 @@ export declare const regExpPasswordValidator: {
     4: RegExp;
 };
 export declare const hasPasswordStrengthError: (passwordHints: QueryList<KbqPasswordHint>) => boolean;
-export declare class KbqPasswordHint implements AfterContentInit {
+export declare class KbqPasswordHint extends KbqHint implements AfterContentInit {
     private changeDetectorRef;
     private formField;
     id: string;
@@ -26,19 +27,20 @@ export declare class KbqPasswordHint implements AfterContentInit {
     regex: RegExp | null;
     customCheckRule: (value: string) => boolean;
     viewFormField?: KbqFormField;
+    fillTextOff: boolean;
     hasError: boolean;
     checked: boolean;
     get icon(): string;
     private checkRule;
     private get control();
     private lastControlValue;
-    constructor(changeDetectorRef: ChangeDetectorRef, formField: any);
+    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, formField: any);
     ngAfterContentInit(): void;
     private checkValue;
     private checkLengthRule;
     private checkRegexRule;
     private checkSpecialSymbolsRegexRule;
     private isValueChanged;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; "customCheckRule": { "alias": "checkRule"; "required": false; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordHint, "kbq-password-hint", never, { "id": { "alias": "id"; "required": false; }; "rule": { "alias": "rule"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "regex": { "alias": "regex"; "required": false; }; "customCheckRule": { "alias": "checkRule"; "required": false; }; "viewFormField": { "alias": "viewFormField"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

package/icon/icon-button.component.d.ts

@@ -13,6 +13,7 @@ export declare class KbqIconButton extends KbqIcon implements OnDestroy, CanColo
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    name: string;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngOnDestroy(): void;
     private runFocusMonitor;

package/icon/icon-item.component.d.ts

@@ -4,6 +4,7 @@ import { KbqIcon } from './icon.component';
 import * as i0 from "@angular/core";
 export declare class KbqIconItem extends KbqIcon implements CanColor {
     protected changeDetectorRef: ChangeDetectorRef;
+    name: string;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { attribute: "kbq-icon-item"; }, { optional: true; }, null]>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; }, {}, never, ["*"], false, never>;

package/icon/icon.component.d.ts

@@ -9,13 +9,16 @@ export declare class KbqIconBase {
 /** @docs-private */
 export declare const KbqIconMixinBase: CanColorCtor & typeof KbqIconBase;
 export declare class KbqIcon extends KbqIconMixinBase implements CanColor, AfterContentInit {
+    protected iconName: string;
     protected formField: KbqFormFieldRef;
     protected changeDetectorRef: ChangeDetectorRef;
     small: boolean;
     autoColor: boolean;
     hasError: boolean;
+    protected name: string;
     constructor(elementRef: ElementRef, iconName: string, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     getHostElement(): any;
+    updateMaxHeight(): void;
     ngAfterContentInit(): void;
     private updateState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, [null, { attribute: "kbq-icon"; }, { optional: true; }, null]>;

package/input/input-number.d.ts

@@ -1,4 +1,4 @@
-import { ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
+import { AfterContentInit, ElementRef, EventEmitter, OnDestroy, Renderer2 } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { KbqLocaleService } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
@@ -13,7 +13,7 @@ export declare function isDigit(value: string): boolean;
 export declare function getPrecision(value: number): number;
 export declare function add(value1: number, value2: number): number;
 export declare const KBQ_NUMBER_INPUT_VALUE_ACCESSOR: any;
-export declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAccessor, OnDestroy {
+export declare class KbqNumberInput implements KbqFormFieldControl<any>, ControlValueAccessor, AfterContentInit, OnDestroy {
     private elementRef;
     private readonly renderer;
     private localeService;
@@ -53,6 +53,7 @@ export declare class KbqNumberInput implements KbqFormFieldControl<any>, Control
     private valueFromPaste;
     private localeSubscription;
     constructor(elementRef: ElementRef, renderer: Renderer2, step: string, bigStep: string, min: string, max: string, localeService: KbqLocaleService);
+    ngAfterContentInit(): void;
     ngOnDestroy(): void;
     onContainerClick(): void;
     focus(): void;

package/link/_link-theme.scss

@@ -174,6 +174,7 @@
 
         & .kbq-icon {
             line-height: inherit;
+            vertical-align: text-bottom;
         }
     }
 

package/list/_list-theme.scss

@@ -46,8 +46,7 @@
             }
         }
 
-        &.kbq-disabled,
-        &[disabled] {
+        &.kbq-disabled {
             @include kbq-list-item(map.get($list-item, disabled));
         }
     }

package/list/list.scss

@@ -29,9 +29,9 @@ $tokens: meta.module-variables(tokens) !default;
         display: none;
     }
 
-    &:not([disabled]):hover,
-    &:not([disabled]).kbq-focused,
-    &:not([disabled]).kbq-action-button-focused {
+    &:not(.kbq-disabled):hover,
+    &:not(.kbq-disabled).kbq-focused,
+    &:not(.kbq-disabled).kbq-action-button-focused {
         & .kbq-option-action {
             display: flex;
         }

package/modal/_modal-confirm.scss

@@ -7,37 +7,13 @@
 $tokens: meta.module-variables(tokens) !default;
 
 .kbq-confirm {
-    .kbq-modal-header {
-
-    }
-
     .kbq-modal-close {
         display: none;
     }
 
-    .kbq-modal-body {
-        padding-right: var(
-            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-        );
-
-        padding-left: var(
-            --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-        );
-
-        padding-bottom: var(
-            --kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom)
-        );
-    }
-
     .kbq-confirm-footer {
         display: flex;
 
-        padding:
-            var(--kbq-modal-size-footer-padding-top, map.get($tokens, modal-size-footer-padding-top))
-            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontalt))
-            var(--kbq-modal-size-footer-padding-bottom, map.get($tokens, modal-size-footer-padding-bottom))
-            var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
-
         gap: var(
             --kbq-modal-size-footer-content-gap-horizontal, map.get($tokens, modal-size-footer-content-gap-horizontal)
         );

package/modal/modal.component.d.ts

@@ -65,6 +65,8 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     bodyContainer: ViewContainerRef;
     autoFocusedButtons: QueryList<ElementRef>;
     modalBody: ElementRef;
+    isTopOverflow: boolean;
+    isBottomOverflow: boolean;
     maskAnimationClassMap: object;
     modalAnimationClassMap: object;
     transformOrigin: string;
@@ -84,6 +86,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
+    checkOverflow(): void;
     open(): void;
     close(result?: R): void;
     destroy(result?: R): void;

package/modal/modal.scss

@@ -43,6 +43,21 @@ $tokens: meta.module-variables(tokens) !default;
     &.kbq-modal_large {
         width: var(--kbq-modal-size-large-width, map.get($tokens, modal-size-large-width));
     }
+
+    // todo реализуем когда будем делать 2.0, пока нет возможности отслеживать наличие/отстутствие футера
+    //&.kbq-modal_no-footer .kbq-modal-body {
+    //    padding-bottom: var(
+    //        --kbq-modal-size-content-padding-bottom-without-footer,
+    //        map.get($tokens, modal-size-content-padding-bottom-without-footer)
+    //    );
+    //}
+
+    & .kbq-modal-close {
+        position: absolute;
+
+        top: 16px;
+        right: 8px;
+    }
 }
 
 .kbq-modal-wrap {
@@ -78,6 +93,10 @@ $tokens: meta.module-variables(tokens) !default;
         var(--kbq-modal-size-header-padding-right, map.get($tokens, modal-size-header-padding-right))
         var(--kbq-modal-size-header-padding-vertical, map.get($tokens, modal-size-header-padding-vertical))
         var(--kbq-modal-size-header-padding-left, map.get($tokens, modal-size-header-padding-left));
+
+    & + .kbq-modal-body {
+        padding-top: var(--kbq-modal-size-content-padding-top, map.get($tokens, modal-size-content-padding-top));
+    }
 }
 
 .kbq-modal-title {
@@ -87,35 +106,33 @@ $tokens: meta.module-variables(tokens) !default;
     overflow: hidden;
 }
 
+/* stylelint-disable no-descending-specificity */
 .kbq-modal-body {
     display: block;
     overflow-y: auto;
 
     max-height: calc(100vh - 260px);
 
-    padding-right: var(
-        --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-    );
-
-    padding-left: var(
-        --kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal)
-    );
-
-    padding-bottom: var(
-        --kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom)
-    );
+    padding:
+        var(
+            --kbq-modal-size-content-padding-top-without-header,
+            map.get($tokens, modal-size-content-padding-top-without-header)
+        )
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal))
+        var(--kbq-modal-size-content-padding-bottom, map.get($tokens, modal-size-content-padding-bottom))
+        var(--kbq-modal-size-content-padding-horizontal, map.get($tokens, modal-size-content-padding-horizontal));
 
     word-wrap: break-word;
 }
+/* stylelint-enable no-descending-specificity */
 
-.kbq-modal-footer {
+.kbq-modal-footer,
+.kbq-confirm-footer {
     display: flex;
     align-items: center;
 
     padding:
-        var(--kbq-modal-size-footer-padding-top, map.get($tokens, modal-size-footer-padding-top))
-        var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontalt))
-        var(--kbq-modal-size-footer-padding-bottom, map.get($tokens, modal-size-footer-padding-bottom))
+        var(--kbq-modal-size-footer-padding-vertical, map.get($tokens, modal-size-footer-padding-vertical))
         var(--kbq-modal-size-footer-padding-horizontal, map.get($tokens, modal-size-footer-padding-horizontal));
 
     gap: var(

package/navbar/_navbar-theme.scss

@@ -6,7 +6,6 @@
 
 @mixin kbq-navbar-theme($theme) {
     $background: map.get($theme, background);
-    $primary: map.get($theme, theme);
 
     $navbar: map.get(map.get($theme, components), navbar);
     $navbar-item: map.get(map.get($theme, components), navbar-item);
@@ -35,11 +34,13 @@
     .kbq-navbar-toggle {
         color: map.get($navbar-item, color);
 
-        & > .kbq-icon {
-            color: map.get($navbar-item, icon-color);
+        &.kbq-horizontal, &.kbq-vertical {
+            & > .kbq-icon {
+                color: map.get($navbar-item, icon-color);
+            }
         }
 
-        & .kbq-navbar-item__arrow-icon {
+        & .kbq-icon.kbq-navbar-item__arrow-icon {
             color: map.get($navbar-item, color);
         }
 
@@ -47,7 +48,7 @@
             background: map.get($navbar-item, state-selected);
         }
 
-        &:hover:not(.kbq-navbar-item_button) {
+        &:hover:not(.kbq-navbar-item_has-nested, .kbq-navbar-item_form-field) {
             cursor: pointer;
 
             & .kbq-navbar-item__overlay {
@@ -55,13 +56,13 @@
             }
         }
 
-        &:active:not(.kbq-navbar-item_button) {
+        &:active:not(.kbq-navbar-item_has-nested, .kbq-navbar-item_form-field) {
             & .kbq-navbar-item__overlay {
                 background: map.get($navbar-item, state-active);
             }
         }
 
-        &[disabled] {
+        &.kbq-disabled {
             pointer-events: none;
             cursor: default;
 

package/navbar/navbar-item.component.d.ts

@@ -5,6 +5,7 @@ import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone,
 import { IFocusableOption } from '@koobiq/cdk/a11y';
 import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import { KbqFormField } from '@koobiq/components/form-field';
 import { KbqIcon } from '@koobiq/components/icon';
 import { KbqTooltipTrigger, TooltipModifier } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
@@ -72,6 +73,8 @@ export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterCo
     private ngZone;
     title: KbqNavbarTitle;
     button: KbqButton;
+    formField: KbqFormField;
+    get nestedElement(): KbqButton | KbqFormField;
     get tooltip(): KbqTooltipTrigger;
     private _tooltip;
     readonly onFocus: Subject<KbqNavbarFocusableItemEvent>;
@@ -92,7 +95,7 @@ export declare class KbqNavbarFocusableItem implements IFocusableOption, AfterCo
     blur(): void;
     getLabel(): string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarFocusableItem, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarFocusableItem, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "button"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarFocusableItem, "kbq-navbar-item, [kbq-navbar-item], kbq-navbar-brand, [kbq-navbar-brand], kbq-navbar-toggle", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "button", "formField"], never, false, never>;
 }
 export declare class KbqNavbarRectangleElement {
     elementRef: ElementRef;
@@ -164,5 +167,5 @@ export declare class KbqNavbarToggle extends KbqTooltipTrigger implements OnDest
     private getWindow;
     private windowToggleHandler;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarToggle, [null, null, null, null, null, null, null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "mcCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarToggle, "kbq-navbar-toggle", never, { "content": { "alias": "kbqCollapsedTooltip"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]", "kbq-navbar-title"], false, never>;
 }

package/navbar/navbar-item.scss

@@ -100,7 +100,7 @@ $tokens: meta.module-variables(tokens) !default;
         padding-left: var(--kbq-vertical-navbar-size-icon-margin, map.get($tokens, vertical-navbar-size-icon-margin));
     }
 
-    &.kbq-navbar-item_button {
+    &.kbq-navbar-item_has-nested {
         padding-left: 12px;
         padding-right: 12px;
     }
@@ -124,7 +124,7 @@ $tokens: meta.module-variables(tokens) !default;
     }
 }
 
-.kbq-navbar-item.kbq-navbar-item_button .kbq-button {
+.kbq-navbar-item.kbq-navbar-item_has-nested .kbq-button {
     flex: 1;
 
     & .kbq-button-wrapper {
@@ -157,3 +157,8 @@ a.kbq-navbar-title {
         z-index: 1;
     }
 }
+
+.kbq-navbar-item.kbq-navbar-item_form-field .kbq-navbar-item__overlay {
+    display: none;
+}
+

package/navbar/navbar.component.d.ts

@@ -53,6 +53,9 @@ export declare class KbqNavbar extends KbqFocusableComponent implements AfterVie
     ngOnDestroy(): void;
     onKeyDown(event: KeyboardEvent): void;
     updateExpandedStateForItems: () => void;
+    private eventFromInput;
+    private cursorOnFirstPosition;
+    private cursorOnLastPosition;
     private collapseItems;
     private expandItems;
     private setItemsState;

package/package.json

@@ -1,10 +1,10 @@
 {
     "name": "@koobiq/components",
-    "version": "16.0.0-beta.9",
+    "version": "17.0.0-beta.1",
     "description": "koobiq",
     "repository": {
         "type": "git",
-        "url": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic.git"
+        "url": "https://github.com/koobiq/angular-components.git"
     },
     "keywords": [
         "angular",
@@ -13,23 +13,23 @@
     ],
     "license": "MIT",
     "bugs": {
-        "url": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/issues"
+        "url": "https://github.com/koobiq/angular-components/issues"
     },
-    "homepage": "https://gitlab.ptsecurity.com/frontend/design-system/mosaic/-/blob/master/README.md",
+    "homepage": "https://github.com/koobiq/angular-components/blob/master/README.md",
     "peerDependencies": {
-        "@angular/cdk": "^16.1.5",
-        "@angular/forms": "^16.1.5",
-        "@koobiq/cdk": "^16.0.0-beta.9",
-        "@koobiq/angular-moment-adapter": "^16.0.0-beta.9",
-        "@koobiq/angular-luxon-adapter": "^16.0.0-beta.9",
+        "@angular/cdk": "^17.2.0",
+        "@angular/forms": "^17.2.0",
+        "@koobiq/cdk": "^17.0.0-beta.1",
+        "@koobiq/angular-moment-adapter": "^17.0.0-beta.1",
+        "@koobiq/angular-luxon-adapter": "^17.0.0-beta.1",
         "@mosaic-design/date-formatter": "^2.1.1",
         "@koobiq/icons": "^7.1.0",
-        "@koobiq/tokens-builder": "^3.0.0-beta.6",
-        "@koobiq/design-tokens": "^3.0.0-beta.6",
+        "@koobiq/tokens-builder": "^3.0.0-beta.23",
+        "@koobiq/design-tokens": "^3.0.0-beta.23",
         "marked": "^4.0.18"
     },
     "dependencies": {
-        "tslib": "^2.4.0"
+        "tslib": "^2.6.2"
     },
     "ng-update": {
         "packageGroup": [