@koobiq/components 18.21.0 → 18.22.0

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

@@ -1,6 +1,6 @@
 import { AfterViewInit, DoCheck, ElementRef, EventEmitter, QueryList, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { CanDisable, ErrorStateMatcher } from '@koobiq/components/core';
+import { ErrorStateMatcher } from '@koobiq/components/core';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
 import { KbqFile, KbqFileItem, KbqFileUploadBase, KbqFileValidatorFn, KbqInputFile, KbqInputFileLabel } from './file-upload';
 import * as i0 from "@angular/core";
@@ -14,7 +14,7 @@ export interface KbqInputFileMultipleLabel extends KbqInputFileLabel {
     [k: string | number | symbol]: unknown;
 }
 export declare const KBQ_MULTIPLE_FILE_UPLOAD_DEFAULT_CONFIGURATION: KbqInputFileMultipleLabel;
-export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, KbqInputFile, CanDisable, ControlValueAccessor, DoCheck {
+export declare class KbqMultipleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, KbqInputFile, ControlValueAccessor, DoCheck {
     /**
      * A value responsible for progress spinner type.
      * Loading logic depends on selected mode */

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

@@ -1,11 +1,11 @@
 import { AfterViewInit, DoCheck, ElementRef, EventEmitter } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { CanDisable, ErrorStateMatcher } from '@koobiq/components/core';
+import { ErrorStateMatcher } from '@koobiq/components/core';
 import { ProgressSpinnerMode } from '@koobiq/components/progress-spinner';
 import { KbqFile, KbqFileItem, KbqFileUploadBase, 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 extends KbqFileUploadBase implements AfterViewInit, KbqInputFile, CanDisable, ControlValueAccessor, DoCheck {
+export declare class KbqSingleFileUploadComponent extends KbqFileUploadBase implements AfterViewInit, KbqInputFile, ControlValueAccessor, DoCheck {
     /**
      * A value responsible for progress spinner type.
      * Loading logic depends on selected mode */

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

@@ -1,7 +1,7 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { AfterContentChecked, AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList } from '@angular/core';
 import { NgControl } from '@angular/forms';
-import { CanColor, CanColorCtor } from '@koobiq/components/core';
+import { KbqColorDirective } from '@koobiq/components/core';
 import { KbqCleaner } from './cleaner';
 import { KbqFormFieldControl } from './form-field-control';
 import { KbqHint } from './hint';
@@ -11,15 +11,7 @@ import { KbqPrefix } from './prefix';
 import { KbqStepper } from './stepper';
 import { KbqSuffix } from './suffix';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqFormFieldBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqFormFieldMixinBase: CanColorCtor & typeof KbqFormFieldBase;
-export declare class KbqFormField extends KbqFormFieldMixinBase implements AfterContentInit, AfterContentChecked, AfterViewInit, CanColor, OnDestroy {
-    elementRef: ElementRef;
+export declare class KbqFormField extends KbqColorDirective implements AfterContentInit, AfterContentChecked, AfterViewInit, OnDestroy {
     private changeDetectorRef;
     private focusMonitor;
     control: KbqFormFieldControl<any>;
@@ -47,7 +39,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     get canShowCleaner(): boolean;
     get disabled(): boolean;
     get canShowStepper(): boolean;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
+    constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     ngAfterViewInit(): void;
@@ -74,7 +66,7 @@ export declare class KbqFormField extends KbqFormFieldMixinBase implements After
     /** Throws an error if the form field's control is missing. */
     protected validateControlChild(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormField, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], { "color": { "alias": "color"; "required": false; }; }, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[kbqPrefix]", "*", "[kbqSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqFormField, "kbq-form-field", ["kbqFormField"], {}, {}, ["control", "stepper", "cleaner", "passwordToggle", "hint", "passwordHints", "suffix", "prefix"], ["[kbqPrefix]", "*", "[kbqSuffix]", "kbq-cleaner", "kbq-password-toggle", "kbq-stepper", "kbq-hint, kbq-password-hint"], false, never>;
 }
 export declare class KbqFormFieldWithoutBorders {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqFormFieldWithoutBorders, never>;

package/form-field/hint.d.ts

@@ -1,20 +1,11 @@
-import { ElementRef } from '@angular/core';
-import { CanColorCtor } from '@koobiq/components/core';
+import { KbqColorDirective } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqHintBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqHintMixinBase: CanColorCtor & typeof KbqHintBase;
-export declare class KbqHint extends KbqHintMixinBase {
+export declare class KbqHint extends KbqColorDirective {
     id: string;
     fillTextOff: boolean;
     compact: boolean;
-    constructor(elementRef: ElementRef);
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqHint, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "color": { "alias": "color"; "required": false; }; "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqHint, "kbq-hint", ["kbqHint"], { "id": { "alias": "id"; "required": false; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; }, {}, never, ["[kbq-icon]", "*"], false, never>;
     static ngAcceptInputType_fillTextOff: unknown;
     static ngAcceptInputType_compact: unknown;
 }

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

@@ -1,4 +1,4 @@
-import { AfterContentInit, ChangeDetectorRef, ElementRef, QueryList } from '@angular/core';
+import { AfterContentInit, ChangeDetectorRef, QueryList } from '@angular/core';
 import { KbqFormField } from './form-field';
 import { KbqHint } from './hint';
 import * as i0 from "@angular/core";
@@ -34,13 +34,13 @@ export declare class KbqPasswordHint extends KbqHint implements AfterContentInit
     private checkRule;
     private get control();
     private lastControlValue;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, formField: any);
+    constructor(changeDetectorRef: ChangeDetectorRef, formField: any);
     ngAfterContentInit(): void;
     private checkValue;
     private checkLengthRule;
     private checkRegexRule;
     private checkSpecialSymbolsRegexRule;
     private isValueChanged;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqPasswordHint, [null, null, { optional: true; }]>;
+    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; }; "fillTextOff": { "alias": "fillTextOff"; "required": false; }; }, {}, never, ["*"], false, never>;
 }

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

@@ -1,11 +1,9 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
-import { CanColor, KbqFormFieldRef } from '@koobiq/components/core';
+import { AfterViewInit, OnDestroy } from '@angular/core';
 import { KbqIcon } from './icon.component';
 import * as i0 from "@angular/core";
-export declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy, CanColor {
-    protected changeDetectorRef: ChangeDetectorRef;
-    private focusMonitor;
+export declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnDestroy {
+    protected readonly focusMonitor: FocusMonitor;
     small: boolean;
     /** Name of an icon within a @koobiq/icons. */
     iconName: string;
@@ -17,12 +15,11 @@ export declare class KbqIconButton extends KbqIcon implements AfterViewInit, OnD
     set disabled(value: boolean);
     private _disabled;
     name: string;
-    constructor(elementRef: ElementRef, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     private runFocusMonitor;
     private stopFocusMonitor;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, [null, { optional: true; }, null, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "iconName": { "alias": "kbq-icon-button"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconButton, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconButton, "[kbq-icon-button]", never, { "small": { "alias": "small"; "required": false; }; "iconName": { "alias": "kbq-icon-button"; "required": false; }; "tabindex": { "alias": "tabindex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }

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

@@ -1,15 +1,11 @@
-import { ChangeDetectorRef, ElementRef } from '@angular/core';
-import { CanColor, KbqFormFieldRef } from '@koobiq/components/core';
 import { KbqIcon } from './icon.component';
 import * as i0 from "@angular/core";
-export declare class KbqIconItem extends KbqIcon implements CanColor {
-    protected changeDetectorRef: ChangeDetectorRef;
+export declare class KbqIconItem extends KbqIcon {
     name: string;
     /** Name of an icon within a @koobiq/icons. */
     iconName: string;
     fade: boolean;
     big: boolean;
-    constructor(elementRef: ElementRef, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, [null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "color": { "alias": "color"; "required": false; }; "iconName": { "alias": "kbq-icon-item"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "big": { "alias": "big"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIconItem, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIconItem, "[kbq-icon-item]", never, { "iconName": { "alias": "kbq-icon-item"; "required": false; }; "fade": { "alias": "fade"; "required": false; }; "big": { "alias": "big"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/icon/icon.component.d.ts

@@ -1,27 +1,20 @@
 import { AfterContentInit, ChangeDetectorRef, ElementRef } from '@angular/core';
-import { CanColor, CanColorCtor, KbqFormFieldRef } from '@koobiq/components/core';
+import { KbqColorDirective } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqIconBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqIconMixinBase: CanColorCtor & typeof KbqIconBase;
-export declare class KbqIcon extends KbqIconMixinBase implements CanColor, AfterContentInit {
-    protected formField: KbqFormFieldRef;
-    protected changeDetectorRef: ChangeDetectorRef;
+export declare class KbqIcon extends KbqColorDirective implements AfterContentInit {
+    readonly elementRef: ElementRef<any>;
+    protected readonly formField: import("@koobiq/components/core").KbqFormFieldRef | null;
+    protected readonly changeDetectorRef: ChangeDetectorRef;
     small: boolean;
     autoColor: boolean;
     hasError: boolean;
     /** Name of an icon within a @koobiq/icons. */
     iconName: string;
     protected name: string;
-    constructor(elementRef: ElementRef, formField: KbqFormFieldRef, changeDetectorRef: ChangeDetectorRef);
     getHostElement(): any;
     updateMaxHeight(): void;
     ngAfterContentInit(): void;
     private updateState;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, [null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "color": { "alias": "color"; "required": false; }; "small": { "alias": "small"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; "iconName": { "alias": "kbq-icon"; "required": false; }; }, {}, never, ["*"], true, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqIcon, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqIcon, "[kbq-icon]", never, { "small": { "alias": "small"; "required": false; }; "autoColor": { "alias": "autoColor"; "required": false; }; "iconName": { "alias": "kbq-icon"; "required": false; }; }, {}, never, ["*"], true, never>;
 }

package/input/input-password.d.ts

@@ -3,10 +3,15 @@ import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
 import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Subject } from 'rxjs';
-import { KbqInputMixinBase } from './input';
 import * as i0 from "@angular/core";
-export declare class KbqInputPassword extends KbqInputMixinBase implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState, OnChanges {
+export declare class KbqInputPassword implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, OnChanges, CanUpdateErrorState {
     protected elementRef: ElementRef;
+    ngControl: NgControl;
+    parentForm: NgForm;
+    parentFormGroup: FormGroupDirective;
+    defaultErrorStateMatcher: ErrorStateMatcher;
+    /** Whether the component is in an error state. */
+    errorState: boolean;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
     /**
@@ -70,6 +75,7 @@ export declare class KbqInputPassword extends KbqInputMixinBase implements KbqFo
     ngOnChanges(): void;
     ngOnDestroy(): void;
     ngDoCheck(): void;
+    updateErrorState(): void;
     checkRules(): void;
     toggleType(): void;
     /** Focuses the input. */

package/input/input.d.ts

@@ -1,29 +1,19 @@
 import { DoCheck, ElementRef, OnChanges, OnDestroy } from '@angular/core';
 import { FormGroupDirective, NgControl, NgForm } from '@angular/forms';
-import { CanUpdateErrorState, CanUpdateErrorStateCtor, ErrorStateMatcher } from '@koobiq/components/core';
+import { CanUpdateErrorState, ErrorStateMatcher } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
 import { Subject } from 'rxjs';
 import { KbqNumberInput } from './input-number';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqInputBase {
-    defaultErrorStateMatcher: ErrorStateMatcher;
-    parentForm: NgForm;
-    parentFormGroup: FormGroupDirective;
-    ngControl: NgControl;
-    /**
-     * Emits whenever the component state changes and should cause the parent
-     * form-field to update. Implemented as part of `KbqFormFieldControl`.
-     * @docs-private
-     */
-    readonly stateChanges: Subject<void>;
-    constructor(defaultErrorStateMatcher: ErrorStateMatcher, parentForm: NgForm, parentFormGroup: FormGroupDirective, ngControl: NgControl);
-}
-/** @docs-private */
-export declare const KbqInputMixinBase: CanUpdateErrorStateCtor & typeof KbqInputBase;
-export declare class KbqInput extends KbqInputMixinBase implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, CanUpdateErrorState, OnChanges {
+export declare class KbqInput implements KbqFormFieldControl<any>, OnChanges, OnDestroy, DoCheck, OnChanges, CanUpdateErrorState {
     protected elementRef: ElementRef;
+    ngControl: NgControl;
     numberInput: KbqNumberInput;
+    parentForm: NgForm;
+    parentFormGroup: FormGroupDirective;
+    defaultErrorStateMatcher: ErrorStateMatcher;
+    /** Whether the component is in an error state. */
+    errorState: boolean;
     /** An object used to control when error messages are shown. */
     errorStateMatcher: ErrorStateMatcher;
     /**
@@ -85,6 +75,7 @@ export declare class KbqInput extends KbqInputMixinBase implements KbqFormFieldC
     ngOnChanges(): void;
     ngOnDestroy(): void;
     ngDoCheck(): void;
+    updateErrorState(): void;
     /** Focuses the input. */
     focus(): void;
     onBlur(): void;

package/link/_link-theme.scss

@@ -21,9 +21,8 @@
         border-bottom-color: transparent;
     }
 
-    &.kbq-text-with-icon {
-        display: inline-flex;
-        align-items: center;
+    &.kbq-text-with-icon .kbq-icon {
+        vertical-align: baseline;
     }
 
     &.kbq-text-with-icon .kbq-link__text {
@@ -37,13 +36,23 @@
     }
 
     &.kbq-link_compact {
-        &.kbq-text-with-icon .kbq-link__text {
-            &:not(:first-child) {
-                margin-left: var(--kbq-link-size-compact-content-padding);
+        &.kbq-text-with-icon {
+            .kbq-icon.kbq-icon_left {
+                vertical-align: text-top;
             }
 
-            &:not(:last-child) {
-                margin-right: var(--kbq-link-size-compact-content-padding);
+            .kbq-icon.kbq-icon_right {
+                vertical-align: middle;
+            }
+
+            .kbq-link__text {
+                &:not(:first-child) {
+                    margin-left: var(--kbq-link-size-compact-content-padding);
+                }
+
+                &:not(:last-child) {
+                    margin-right: var(--kbq-link-size-compact-content-padding);
+                }
             }
         }
     }

package/link/link.component.d.ts

@@ -1,22 +1,23 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy } from '@angular/core';
-import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
+import { AfterContentInit, AfterViewInit, ChangeDetectorRef, DestroyRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqLinkBase {
-}
-/** @docs-private */
-export declare const KbqLinkMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqLinkBase;
 export declare const baseURLRegex: RegExp;
-export declare class KbqLink extends KbqLinkMixinBase implements AfterViewInit, OnDestroy, HasTabIndex, CanDisable {
+export declare class KbqLink implements AfterContentInit, AfterViewInit, OnDestroy {
     private elementRef;
     private focusMonitor;
     private changeDetector;
+    protected readonly renderer: Renderer2;
+    protected readonly destroyRef: DestroyRef;
+    protected readonly nativeElement: any;
+    icons: QueryList<ElementRef>;
     /** Whether the link is disabled. */
     get disabled(): boolean;
     set disabled(value: boolean);
     private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
     pseudo: boolean;
     noUnderline: boolean;
     big: boolean;
@@ -33,10 +34,13 @@ export declare class KbqLink extends KbqLinkMixinBase implements AfterViewInit,
     ngOnDestroy(): void;
     focus(): void;
     getHostElement(): any;
+    ngAfterContentInit(): void;
+    private updateClassModifierForIcons;
     private updatePrintUrl;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLink, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["kbqLink"], { "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon"], never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLink, "[kbq-link]", ["kbqLink"], { "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "pseudo": { "alias": "pseudo"; "required": false; }; "noUnderline": { "alias": "noUnderline"; "required": false; }; "big": { "alias": "big"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "useVisited": { "alias": "useVisited"; "required": false; }; "print": { "alias": "print"; "required": false; }; }, {}, ["icon", "icons"], never, false, never>;
     static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
     static ngAcceptInputType_pseudo: unknown;
     static ngAcceptInputType_noUnderline: unknown;
     static ngAcceptInputType_big: unknown;

package/list/list-selection.component.d.ts

@@ -4,7 +4,7 @@ import { SelectionModel } from '@angular/cdk/collections';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, QueryList } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { FocusKeyManager, IFocusableOption } from '@koobiq/cdk/a11y';
-import { CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor, KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
+import { KbqOptgroup, KbqOptionActionComponent, KbqTitleTextRef, MultipleMode } from '@koobiq/components/core';
 import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
 import { KbqTooltipTrigger } from '@koobiq/components/tooltip';
 import { Observable, Subject } from 'rxjs';
@@ -28,14 +28,8 @@ export declare class KbqListCopyEvent<T> {
     option: T;
     constructor(source: KbqListSelection, option: T);
 }
-/** @docs-private */
-export declare class KbqListSelectionBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqListSelectionMixinBase: CanDisableCtor & HasTabIndexCtor & typeof KbqListSelectionBase;
-export declare class KbqListSelection extends KbqListSelectionMixinBase implements CanDisable, HasTabIndex, AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {
+export declare class KbqListSelection implements AfterContentInit, AfterViewInit, OnDestroy, ControlValueAccessor {
+    private elementRef;
     private changeDetectorRef;
     private clipboard;
     protected readonly focusMonitor: FocusMonitor;
@@ -55,6 +49,9 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     get tabIndex(): any;
     set tabIndex(value: any);
     private _tabIndex;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     /**
      * Function used for comparing an option against the selected value when determining which
      * options should appear as selected. The first argument is the value of an options. The second
@@ -117,8 +114,9 @@ export declare class KbqListSelection extends KbqListSelectionMixinBase implemen
     private selectAllOptions;
     private copyActiveOption;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListSelection, [null, null, { attribute: "multiple"; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["kbqListSelection"], { "disabled": { "alias": "disabled"; "required": false; }; "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqListSelection, "kbq-list-selection", ["kbqListSelection"], { "autoSelect": { "alias": "autoSelect"; "required": false; }; "noUnselectLast": { "alias": "noUnselectLast"; "required": false; }; "horizontal": { "alias": "horizontal"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; }, { "onSelectAll": "onSelectAll"; "onCopy": "onCopy"; "selectionChange": "selectionChange"; }, ["options"], ["*"], false, never>;
     static ngAcceptInputType_horizontal: unknown;
+    static ngAcceptInputType_disabled: unknown;
 }
 export declare class KbqListOptionCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqListOptionCaption, never>;

package/loader-overlay/_loader-overlay-theme.scss

@@ -7,11 +7,11 @@
             background: var(--kbq-loader-overlay-filled-overlay-background);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             color: var(--kbq-loader-overlay-filled-text-color);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             color: var(--kbq-loader-overlay-filled-caption-color);
         }
     }
@@ -21,11 +21,11 @@
             background: var(--kbq-loader-overlay-transparent-overlay-background);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             color: var(--kbq-loader-overlay-transparent-text-color);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             color: var(--kbq-loader-overlay-transparent-caption-color);
         }
     }
@@ -33,21 +33,31 @@
 
 @mixin kbq-loader-overlay-typography() {
     .kbq-loader-overlay_big {
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
+            @include kbq-typography-level-to-styles-css-variables(typography, headline);
+        }
+
+        .kbq-loader-overlay-caption {
+            @include kbq-typography-level-to-styles-css-variables(typography, text-big);
+        }
+    }
+
+    .kbq-loader-overlay_normal {
+        .kbq-loader-overlay-text {
             @include kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
     }
 
     .kbq-loader-overlay_compact {
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
         }
 
-        & .kbq-loader-overlay-caption {
+        .kbq-loader-overlay-caption {
             @include kbq-typography-level-to-styles-css-variables(typography, text-compact);
         }
     }

package/loader-overlay/loader-overlay-tokens.scss

@@ -1,10 +1,13 @@
-.kbq-loader-overlay {
+:where(.kbq-loader-overlay) {
     --kbq-loader-overlay-size-big-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-big-loader-margin-bottom: var(--kbq-size-xxl);
-    --kbq-loader-overlay-size-big-content-content-gap-vertical: var(--kbq-size-xxs);
+    --kbq-loader-overlay-size-big-content-content-gap-vertical: var(--kbq-size-l);
+    --kbq-loader-overlay-size-normal-overlay-padding-horizontal: var(--kbq-sizeа-3xl);
+    --kbq-loader-overlay-size-normal-loader-margin-bottom: var(--kbq-size-xxl);
+    --kbq-loader-overlay-size-normal-content-content-gap-vertical: var(--kbq-size-xxs);
     --kbq-loader-overlay-size-compact-overlay-padding-horizontal: var(--kbq-size-3xl);
     --kbq-loader-overlay-size-compact-loader-margin-bottom: var(--kbq-size-s);
-    --kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-3xs);
+    --kbq-loader-overlay-size-compact-content-content-gap-vertical: var(--kbq-size-xxs);
     /* THEME TOKENS */
     --kbq-loader-overlay-transparent-overlay-background: var(--kbq-background-overlay-inverse);
     --kbq-loader-overlay-transparent-text-color: var(--kbq-foreground-contrast);

package/loader-overlay/loader-overlay.component.d.ts

@@ -1,4 +1,5 @@
 import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { KbqDefaultSizes } from '@koobiq/components/core';
 import * as i0 from "@angular/core";
 export declare class KbqLoaderOverlayIndicator {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlayIndicator, never>;
@@ -17,7 +18,7 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     private renderer;
     text: string;
     caption: string;
-    compact: boolean;
+    size: KbqDefaultSizes;
     transparent: boolean;
     private parent;
     get isExternalIndicator(): boolean;
@@ -25,6 +26,10 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     get isExternalCaption(): boolean;
     get isEmpty(): boolean;
     get spinnerSize(): string;
+    /**
+     * @docs-private
+     */
+    protected get loaderSizeClass(): string;
     externalIndicator: KbqLoaderOverlayIndicator | null;
     externalText: KbqLoaderOverlayText | null;
     externalCaption: KbqLoaderOverlayCaption | null;
@@ -32,5 +37,5 @@ export declare class KbqLoaderOverlay implements OnInit, OnDestroy {
     ngOnInit(): void;
     ngOnDestroy(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLoaderOverlay, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "compact": { "alias": "compact"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqLoaderOverlay, "kbq-loader-overlay", never, { "text": { "alias": "text"; "required": false; }; "caption": { "alias": "caption"; "required": false; }; "size": { "alias": "size"; "required": false; }; "transparent": { "alias": "transparent"; "required": false; }; }, {}, ["externalIndicator", "externalText", "externalCaption"], ["[kbq-loader-overlay-indicator]", "[kbq-loader-overlay-text]", "[kbq-loader-overlay-caption]"], false, never>;
 }

package/loader-overlay/loader-overlay.scss

@@ -30,7 +30,7 @@
     // todo
     z-index: 10;
 
-    & .kbq-loader-overlay__container {
+    .kbq-loader-overlay__container {
         display: flex;
         flex-direction: column;
 
@@ -46,25 +46,39 @@
 
         padding-right: var(--kbq-loader-overlay-size-big-overlay-padding-horizontal);
 
-        & .kbq-progress-spinner {
+        .kbq-progress-spinner {
             margin-bottom: var(--kbq-loader-overlay-size-big-loader-margin-bottom);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             margin-bottom: var(--kbq-loader-overlay-size-big-content-content-gap-vertical);
         }
     }
 
+    &.kbq-loader-overlay_normal {
+        padding-left: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
+
+        padding-right: var(--kbq-loader-overlay-size-normal-overlay-padding-horizontal);
+
+        .kbq-progress-spinner {
+            margin-bottom: var(--kbq-loader-overlay-size-normal-loader-margin-bottom);
+        }
+
+        .kbq-loader-overlay-text {
+            margin-bottom: var(--kbq-loader-overlay-size-normal-content-content-gap-vertical);
+        }
+    }
+
     &.kbq-loader-overlay_compact {
         padding-left: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
 
         padding-right: var(--kbq-loader-overlay-size-compact-overlay-padding-horizontal);
 
-        & .kbq-progress-spinner {
+        .kbq-progress-spinner {
             margin-bottom: var(--kbq-loader-overlay-size-compact-loader-margin-bottom);
         }
 
-        & .kbq-loader-overlay-text {
+        .kbq-loader-overlay-text {
             margin-bottom: var(--kbq-loader-overlay-size-compact-content-content-gap-vertical);
         }
     }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@koobiq/components",
-    "version": "18.21.0",
+    "version": "18.22.0",
     "description": "koobiq",
     "repository": {
         "type": "git",
@@ -24,9 +24,9 @@
         "@angular/cdk": "^18.0.0",
         "@angular/core": "^18.0.0",
         "@angular/forms": "^18.0.0",
-        "@koobiq/cdk": "18.21.0",
-        "@koobiq/angular-moment-adapter": "18.21.0",
-        "@koobiq/angular-luxon-adapter": "18.21.0",
+        "@koobiq/cdk": "18.22.0",
+        "@koobiq/angular-moment-adapter": "18.22.0",
+        "@koobiq/angular-luxon-adapter": "18.22.0",
         "@koobiq/date-formatter": "^3.2.3",
         "@koobiq/icons": "^9.4.0",
         "@koobiq/tokens-builder": "3.11.0",