@koobiq/components 18.33.0 → 18.35.0

package/filter-bar/pipes/pipe-tree-select.d.ts

@@ -1,4 +1,4 @@
-import { OnInit } from '@angular/core';
+import { AfterViewInit, OnInit } from '@angular/core';
 import { UntypedFormControl } from '@angular/forms';
 import { FlatTreeControl, KbqTreeFlatDataSource, KbqTreeFlattener, KbqTreeOption } from '@koobiq/components/tree';
 import { KbqTreeSelect } from '@koobiq/components/tree-select';
@@ -6,7 +6,7 @@ import { Observable } from 'rxjs';
 import { KbqPipeTemplate, KbqSelectValue, KbqTreeSelectFlatNode, KbqTreeSelectNode } from '../filter-bar.types';
 import { KbqBasePipe } from './base-pipe';
 import * as i0 from "@angular/core";
-export declare class KbqPipeTreeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit {
+export declare class KbqPipeTreeSelectComponent extends KbqBasePipe<KbqSelectValue> implements OnInit, AfterViewInit {
     /** control for search options */
     searchControl: UntypedFormControl;
     /** filtered by search options */
@@ -23,6 +23,7 @@ export declare class KbqPipeTreeSelectComponent extends KbqBasePipe<KbqSelectVal
     get isEmpty(): boolean;
     constructor();
     ngOnInit(): void;
+    ngAfterViewInit(): void;
     hasChild(_: number, nodeData: any): any;
     onSelect(item: KbqTreeOption): void;
     /** updates values for selection and value template */

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

@@ -66,32 +66,41 @@
         &.kbq-form-field-type-datepicker,
         &.kbq-form-field-type-input-password,
         &.kbq-form-field-type-tag-list,
-        &.kbq-form-field-type-select.cdk-keyboard-focused {
-            &.cdk-focused {
-                @include _kbq-form-field-state(states-focused);
-
-                & .kbq-form-field__container {
-                    box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
+        &.kbq-form-field-type-select {
+            &:not(:has(.cdk-keyboard-focused, .kbq-focused)) {
+                &.cdk-focused {
+                    @include _kbq-form-field-state(states-focused);
+
+                    & .kbq-form-field__container {
+                        box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-focused-focus-outline);
+                    }
                 }
-            }
 
-            // Invalid by control `ErrorStateMatcher`
-            &.kbq-form-field_invalid,
-            // Invalid by `KbqValidateDirective`
-            &.kbq-form-field_has-validate-directive.ng-invalid {
-                @include _kbq-form-field-state(states-error);
+                // Invalid by control `ErrorStateMatcher`
+                &.kbq-form-field_invalid,
+                // Invalid by `KbqValidateDirective`
+                &.kbq-form-field_has-validate-directive.ng-invalid {
+                    @include _kbq-form-field-state(states-error);
 
-                &.cdk-focused .kbq-form-field__container {
-                    box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
-                }
+                    &.cdk-focused .kbq-form-field__container {
+                        box-shadow: 0 0 0.1px 1px var(--kbq-form-field-states-error-focused-focus-outline);
+                    }
 
-                & .kbq-icon.kbq-empty {
-                    color: var(--kbq-form-field-states-error-text);
-                    -webkit-text-fill-color: var(--kbq-form-field-states-error-text);
+                    & .kbq-icon.kbq-empty {
+                        color: var(--kbq-form-field-states-error-text);
+                        -webkit-text-fill-color: var(--kbq-form-field-states-error-text);
+                    }
                 }
             }
         }
 
+        // todo quick fix for bug DS-4060. Technical debt DS-4096
+        & .kbq-form-field__container:has(.kbq-input:-webkit-autofill),
+        & .kbq-form-field__container:has(.kbq-input:-webkit-autofill:hover),
+        & .kbq-form-field__container:has(.kbq-input:-webkit-autofill:focus) {
+            background-color: var(--kbq-form-field-states-autofill-background) !important;
+        }
+
         &.kbq-disabled {
             @include _kbq-form-field-state(states-disabled);
 

package/form-field/cleaner.d.ts

@@ -1,9 +1,11 @@
+import { KbqIconButton } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 /**
  * Element to be placed in end of the form field.
  * Resets form control by click.
  */
-export declare class KbqCleaner {
+export declare class KbqCleaner extends KbqIconButton {
+    constructor();
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCleaner, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCleaner, "kbq-cleaner", ["kbqCleaner"], {}, {}, never, ["*"], true, never>;
 }

package/form-field/cleaner.scss

@@ -3,6 +3,10 @@
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-addon-width);
-    height: 100%;
+    width: 26px;
+    height: var(--kbq-size-xxl);
+
+    outline: none;
+
+    border-radius: var(--kbq-size-xxs);
 }

package/form-field/form-field.scss

@@ -41,6 +41,11 @@
 
         padding-left: var(--kbq-form-field-size-container-left-padding);
         padding-right: var(--kbq-form-field-size-container-right-padding);
+
+        &:has(.kbq-textarea) {
+            --kbq-form-field-size-container-left-padding: 0;
+            --kbq-form-field-size-container-right-padding: 0;
+        }
     }
 
     .kbq-form-field:not(.kbq-form-field-type-textarea) {
@@ -55,7 +60,8 @@
         padding-left: var(--kbq-form-field-size-infix-left-padding);
 
         &:has(.kbq-select_multiple, .kbq-select_multiline):not(:has(.kbq-select__trigger_empty)),
-        &:has(.kbq-tag-list) {
+        &:has(.kbq-tag-list),
+        &:has(.kbq-textarea) {
             padding-left: 0;
 
             max-width: 100%;
@@ -98,7 +104,11 @@
         justify-content: center;
         align-items: center;
 
-        min-width: var(--kbq-form-field-size-addon-width);
+        & .kbq-prefix,
+        & .kbq-suffix {
+            min-width: var(--kbq-form-field-size-addon-width);
+            text-align: center;
+        }
     }
 
     .kbq-form-field__prefix {

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

@@ -1,4 +1,5 @@
 import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
+import { KbqComponentColors } from '@koobiq/components/core';
 import { KbqFormField } from './form-field';
 import { KbqHint } from './hint';
 import * as i0 from "@angular/core";
@@ -31,6 +32,12 @@ export declare class KbqPasswordHint extends KbqHint implements AfterContentInit
     hasError: boolean;
     checked: boolean;
     get icon(): string;
+    /**
+     * The form field hint icon color.
+     *
+     * @docs-private
+     */
+    protected get iconColor(): KbqComponentColors;
     private checkRule;
     private get control();
     private lastControlValue;

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

@@ -1,10 +1,15 @@
-import { TemplateRef } from '@angular/core';
+import { FocusMonitor } from '@angular/cdk/a11y';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, OnDestroy, TemplateRef } from '@angular/core';
 import { KbqIconButton } from '@koobiq/components/icon';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import * as i0 from "@angular/core";
 /** Component which changes password visibility. */
-export declare class KbqPasswordToggle extends KbqTooltipTrigger {
+export declare class KbqPasswordToggle extends KbqTooltipTrigger implements AfterViewInit, OnDestroy, AfterContentInit {
+    protected readonly nativeElement: any;
+    protected readonly focusMonitor: FocusMonitor;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     private readonly formField;
+    tabindex: number;
     /**
      * @docs-private
      */
@@ -12,6 +17,7 @@ export declare class KbqPasswordToggle extends KbqTooltipTrigger {
     get content(): string | TemplateRef<any>;
     set content(content: string | TemplateRef<any>);
     kbqTooltipHidden: string | TemplateRef<any>;
+    protected hasError: boolean;
     /** Form field password control. */
     private get control();
     /**
@@ -27,10 +33,24 @@ export declare class KbqPasswordToggle extends KbqTooltipTrigger {
      */
     get visibility(): 'hidden' | 'visible';
     constructor();
+    /**
+     * @docs-private
+     */
+    ngAfterContentInit(): void;
+    /**
+     * @docs-private
+     */
+    ngAfterViewInit(): void;
+    /**
+     * @docs-private
+     */
+    ngOnDestroy(): void;
     /**
      * @docs-private
      */
     toggle(event: KeyboardEvent): void;
+    private updateState;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordToggle, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPasswordToggle, "kbq-password-toggle", ["kbqPasswordToggle"], { "tabindex": { "alias": "tabindex"; "required": false; }; "content": { "alias": "kbqTooltipNotHidden"; "required": false; }; "kbqTooltipHidden": { "alias": "kbqTooltipHidden"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ngAcceptInputType_tabindex: unknown;
 }

package/form-field/password-toggle.scss

@@ -3,14 +3,10 @@
     align-items: center;
     justify-content: center;
 
-    width: var(--kbq-form-field-size-addon-width);
-    height: 100%;
+    width: 26px;
+    height: var(--kbq-size-xxl);
 
-    &::-moz-focus-inner {
-        border: 0;
-    }
+    border-radius: var(--kbq-size-xxs);
 
-    &:focus {
-        outline: none;
-    }
+    outline: none;
 }

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

@@ -4,6 +4,7 @@ import * as i0 from "@angular/core";
 export declare class KbqReactivePasswordHint extends KbqHint {
     private readonly formField;
     private readonly destroyRef;
+    private readonly changeDetectorRef;
     /** Whether the form field control has an error. */
     readonly hasError: import("@angular/core").InputSignalWithTransform<boolean, unknown>;
     /**

package/icon/_icon-button-theme.scss

@@ -91,8 +91,14 @@
 
         &.cdk-keyboard-focused {
             box-shadow:
-                inset 0 0 0.1px 1px var(--kbq-states-line-focus-theme),
-                0 0 0.1px 1px var(--kbq-states-line-focus-theme);
+                inset 0 0 0 1px var(--kbq-states-line-focus-theme),
+                0 0 0 1px var(--kbq-states-line-focus-theme);
+
+            &.kbq-error {
+                box-shadow:
+                    inset 0 0 0 1px var(--kbq-states-line-focus-error),
+                    0 0 0 1px var(--kbq-states-line-focus-error);
+            }
         }
     }
 }

package/modal/modal.component.d.ts

@@ -31,7 +31,7 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     get kbqVisible(): boolean;
     set kbqVisible(value: boolean);
     private _kbqVisible;
-    kbqVisibleChange: EventEmitter<boolean>;
+    readonly kbqVisibleChange: EventEmitter<boolean>;
     kbqWidth: number | string;
     kbqSize: ModalSize;
     kbqWrapClassName: string;
@@ -50,20 +50,20 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private _kbqMaskClosable;
     kbqMaskStyle: object;
     kbqBodyStyle: object;
-    kbqAfterOpen: EventEmitter<void>;
-    kbqAfterClose: EventEmitter<R | undefined>;
+    readonly kbqAfterOpen: EventEmitter<void>;
+    readonly kbqAfterClose: EventEmitter<R | undefined>;
     kbqOkText: string;
     kbqOkType: KbqComponentColors;
     kbqRestoreFocus: boolean;
     get kbqOkLoading(): boolean;
     set kbqOkLoading(value: boolean);
     private _kbqOkLoading;
-    kbqOnOk: EventEmitter<T> | OnClickCallback<T>;
+    readonly kbqOnOk: EventEmitter<T> | OnClickCallback<T>;
     kbqCancelText: string;
     get kbqCancelLoading(): boolean;
     set kbqCancelLoading(value: boolean);
     private _kbqCancelLoading;
-    kbqOnCancel: EventEmitter<T> | OnClickCallback<T>;
+    readonly kbqOnCancel: EventEmitter<T> | OnClickCallback<T>;
     modalContainer: ElementRef;
     bodyContainer: ViewContainerRef;
     autoFocusedButtons: QueryList<ElementRef>;
@@ -85,8 +85,8 @@ export declare class KbqModalComponent<T = any, R = any> extends KbqModalRef<T,
     private container;
     constructor(overlay: Overlay, renderer: Renderer2, cfr: ComponentFactoryResolver, elementRef: ElementRef, viewContainer: ViewContainerRef, modalControl: KbqModalControlService, changeDetector: ChangeDetectorRef, focusMonitor: FocusMonitor);
     kbqGetContainer: HTMLElement | OverlayRef | (() => HTMLElement | OverlayRef);
-    ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
+    ngOnInit(): void;
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     checkOverflow(): void;

package/navbar-ic/_navbar-ic-theme.scss

@@ -0,0 +1,81 @@
+@use '../core/styles/common/tokens';
+
+@mixin kbq-navbar-ic-item($state-name) {
+    & .kbq-navbar-ic-item__inner,
+    & .kbq-navbar-ic-header__inner {
+        background: var(--kbq-navbar-ic-item-#{$state-name}-content-background);
+    }
+
+    .kbq-navbar-ic-title {
+        color: var(--kbq-navbar-ic-item-#{$state-name}-content-text);
+    }
+
+    & > .kbq-icon.kbq-empty {
+        color: var(--kbq-navbar-ic-item-#{$state-name}-content-icon-left);
+    }
+
+    .kbq-navbar-ic-item__arrow-icon {
+        color: var(--kbq-navbar-ic-item-#{$state-name}-content-icon-right);
+    }
+}
+
+@mixin kbq-navbar-ic-theme() {
+    .kbq-navbar-ic .kbq-navbar-ic__top-layer {
+        background-color: var(--kbq-navbar-ic-background);
+        box-shadow: var(--kbq-navbar-ic-border);
+    }
+
+    .kbq-navbar-ic-item,
+    .kbq-navbar-ic-header.kbq-navbar-ic-header_interactive,
+    .kbq-navbar-ic-toggle {
+        cursor: pointer;
+
+        @include kbq-navbar-ic-item(default);
+
+        &:not(.kbq-disabled) {
+            &:hover {
+                @include kbq-navbar-ic-item(states-hover);
+            }
+
+            &.cdk-keyboard-focused {
+                outline: none;
+
+                & .kbq-navbar-ic-item__inner,
+                & .kbq-navbar-ic-header__inner {
+                    box-shadow: inset 0 0 0 2px var(--kbq-states-line-focus-theme);
+                }
+            }
+
+            &.kbq-active,
+            &:active {
+                @include kbq-navbar-ic-item(states-selected);
+            }
+        }
+
+        &.kbq-disabled {
+            @include kbq-navbar-ic-item(states-disabled);
+
+            pointer-events: none;
+            cursor: default;
+        }
+    }
+
+    .kbq-navbar-ic-divider {
+        background: var(--kbq-line-contrast-less);
+    }
+}
+
+@mixin kbq-navbar-ic-typography() {
+    .kbq-navbar-ic-title {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
+    }
+
+    .kbq-navbar-ic-header .kbq-navbar-ic-title {
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big-strong);
+
+        &.kbq-navbar-ic-title_text-overflown {
+            @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-compact-strong);
+            line-height: 12px;
+        }
+    }
+}

package/navbar-ic/index.d.ts

@@ -0,0 +1 @@
+export * from './public-api';

package/navbar-ic/navbar-ic-divider.scss

@@ -0,0 +1,7 @@
+.kbq-navbar-ic-divider {
+    display: block;
+
+    height: 1px;
+
+    margin: var(--kbq-size-s) var(--kbq-size-l);
+}

package/navbar-ic/navbar-ic-header.d.ts

@@ -0,0 +1,18 @@
+import { AfterContentInit, DestroyRef } from '@angular/core';
+import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
+import { KbqNavbarIc } from './navbar-ic';
+import { KbqNavbarIcLogo, KbqNavbarIcTitle } from './navbar-ic-item';
+import * as i0 from "@angular/core";
+export declare class KbqNavbarIcHeader extends KbqTooltipTrigger implements AfterContentInit {
+    protected readonly navbar: KbqNavbarIc;
+    protected readonly nativeElement: any;
+    protected readonly destroyRef: DestroyRef;
+    logo: KbqNavbarIcLogo;
+    title: KbqNavbarIcTitle;
+    get titleText(): string;
+    get isLink(): boolean;
+    constructor();
+    ngAfterContentInit(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcHeader, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIcHeader, "kbq-navbar-ic-header, [kbq-navbar-ic-header]", ["kbqNavbarIcHeader"], {}, {}, ["logo", "title"], ["*"], true, never>;
+}

package/navbar-ic/navbar-ic-header.scss

@@ -0,0 +1,53 @@
+.kbq-navbar-ic-header {
+    display: block;
+
+    margin-top: var(--kbq-size-l);
+    margin-bottom: var(--kbq-size-l);
+
+    padding: var(--kbq-size-3xs) var(--kbq-size-m);
+
+    & .kbq-navbar-ic-header__inner {
+        display: flex;
+        flex-direction: row;
+
+        padding: var(--kbq-size-xs) var(--kbq-size-s);
+
+        gap: var(--kbq-size-s);
+
+        border-radius: var(--kbq-navbar-ic-item-size-content-border-radius);
+    }
+
+    & .kbq-navbar-ic-logo {
+        display: flex;
+        align-self: center;
+    }
+
+    & .kbq-navbar-ic-title {
+        display: block;
+        align-items: center;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+
+        &.kbq-navbar-ic-title_text-overflown {
+            display: -webkit-box;
+
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            white-space: normal;
+        }
+    }
+
+    &.kbq-navbar-ic-header_interactive {
+        cursor: pointer;
+    }
+
+    &.kbq-collapsed .kbq-navbar-ic-title {
+        display: none;
+    }
+}
+
+a.kbq-navbar-ic-header {
+    text-decoration: none;
+}

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

@@ -0,0 +1,125 @@
+import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, NgZone, OnDestroy } from '@angular/core';
+import { IFocusableOption } from '@koobiq/cdk/a11y';
+import { KbqButton, KbqButtonCssStyler } from '@koobiq/components/button';
+import { KbqRectangleItem } from '@koobiq/components/core';
+import { KbqFormField } from '@koobiq/components/form-field';
+import { KbqIcon } from '@koobiq/components/icon';
+import { KbqTooltipTrigger, TooltipModifier } from '@koobiq/components/tooltip';
+import { Subject } from 'rxjs';
+import { KbqNavbarIc } from './navbar-ic';
+import * as i0 from "@angular/core";
+import * as i1 from "@koobiq/components/core";
+/**
+ * The maximum number of characters that can be placed in a title without being wrapped.
+ */
+export declare const kbqMaxSymbolsInHeaderTitle = 22;
+export interface KbqNavbarFocusableItemEvent {
+    item: KbqNavbarIcFocusableItem;
+}
+export declare class KbqNavbarIcLogo {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcLogo, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarIcLogo, "[kbqNavbarIcLogo]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqNavbarIcTitle implements AfterViewInit {
+    protected readonly isBrowser: boolean;
+    protected readonly nativeElement: any;
+    private readonly window;
+    readonly hovered: Subject<boolean>;
+    outerElementWidth: number;
+    isTextOverflown: boolean;
+    get text(): string;
+    get isOverflown(): boolean;
+    ngAfterViewInit(): void;
+    getOuterElementWidth(): number;
+    checkTextOverflown(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcTitle, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarIcTitle, "[kbqNavbarIcTitle]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqNavbarIcDivider {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcDivider, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarIcDivider, "[kbqNavbarIcDivider]", never, {}, {}, never, never, true, never>;
+}
+export declare class KbqNavbarIcFocusableItem implements AfterContentInit, AfterViewInit, OnDestroy, IFocusableOption {
+    protected readonly elementRef: ElementRef<any>;
+    protected readonly changeDetector: ChangeDetectorRef;
+    protected readonly focusMonitor: FocusMonitor;
+    protected readonly ngZone: NgZone;
+    /** @docs-private */
+    title: KbqNavbarIcTitle;
+    /** @docs-private */
+    button: KbqButton;
+    /** @docs-private */
+    formField: KbqFormField;
+    get tooltip(): KbqTooltipTrigger;
+    private _tooltip;
+    readonly onFocus: Subject<KbqNavbarFocusableItemEvent>;
+    readonly onBlur: Subject<KbqNavbarFocusableItemEvent>;
+    get hasFocus(): boolean;
+    set hasFocus(value: boolean);
+    private _hasFocus;
+    /** Whether the item is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
+    ngOnDestroy(): void;
+    setTooltip(value: KbqTooltipTrigger): void;
+    focus(origin?: FocusOrigin): void;
+    /** @docs-private */
+    focusHandler(): void;
+    /** @docs-private */
+    blurHandler(): void;
+    getLabel(): string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcFocusableItem, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqNavbarIcFocusableItem, "kbq-navbar-ic-item, [kbq-navbar-ic-item], kbq-navbar-ic-header, [kbq-navbar-ic-header], kbq-navbar-ic-toggle", never, { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["title", "button", "formField"], never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+export declare class KbqNavbarIcItem extends KbqTooltipTrigger implements AfterContentInit {
+    readonly rectangleElement: KbqRectangleItem;
+    readonly navbarFocusableItem: KbqNavbarIcFocusableItem;
+    private changeDetectorRef;
+    private dropdownTrigger;
+    private tooltip;
+    /** @docs-private */
+    title: KbqNavbarIcTitle;
+    /** @docs-private */
+    icon: KbqIcon;
+    /** @docs-private */
+    button: KbqButtonCssStyler;
+    get trigger(): string;
+    set trigger(value: string);
+    set collapsed(value: boolean);
+    private _collapsed;
+    get croppedText(): string;
+    get titleText(): string;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    get hasDropDownTrigger(): boolean;
+    get showDropDownAngle(): boolean;
+    get hasCroppedText(): boolean;
+    constructor();
+    ngAfterContentInit(): void;
+    /** @docs-private */
+    updateTooltip(): void;
+    /** @docs-private */
+    onKeyDown($event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIcItem, "kbq-navbar-ic-item, [kbq-navbar-ic-item]", ["kbqNavbarIcItem"], { "trigger": { "alias": "kbqTrigger"; "required": false; }; }, {}, ["title", "icon", "button"], ["[kbq-icon]", "[kbqNavbarIcTitle]", "*"], true, [{ directive: typeof i1.KbqRectangleItem; inputs: {}; outputs: {}; }]>;
+}
+export declare class KbqNavbarIcToggle {
+    readonly navbar: KbqNavbarIc;
+    readonly rectangleElement: KbqRectangleItem;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
+    protected modifier: TooltipModifier;
+    /** localized data
+     * @docs-private */
+    get localeData(): any;
+    constructor();
+    /** @docs-private */
+    onKeydown($event: KeyboardEvent): void;
+    toggle: () => void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqNavbarIcToggle, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqNavbarIcToggle, "kbq-navbar-ic-toggle", never, {}, {}, never, ["[kbqNavbarIcTitle]"], true, [{ directive: typeof i1.KbqRectangleItem; inputs: {}; outputs: {}; }]>;
+}