@koobiq/components 18.39.0 → 19.1.0

package/core/line/line.d.ts

@@ -7,7 +7,7 @@ import * as i0 from "@angular/core";
  */
 export declare class KbqLine {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLine, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLine, "[kbq-line], [mcLine]", never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqLine, "[kbq-line], [mcLine]", never, {}, {}, never, never, true, never>;
 }
 /**
  * Helper that takes a query list of lines and sets the correct class on the host.
@@ -21,8 +21,3 @@ export declare class KbqLineSetter {
     private resetClasses;
     private setClass;
 }
-export declare class KbqLineModule {
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqLineModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqLineModule, [typeof KbqLine], never, [typeof KbqLine]>;
-    static ɵinj: i0.ɵɵInjectorDeclaration<KbqLineModule>;
-}

package/core/locales/en-US.d.ts

@@ -15,13 +15,21 @@ export declare const enUSLocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/es-LA.d.ts

@@ -14,13 +14,21 @@ export declare const esLALocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/locale-service.d.ts

@@ -60,13 +60,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -266,13 +274,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -468,13 +484,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -676,13 +700,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;
@@ -880,13 +912,21 @@ export declare function KBQ_DEFAULT_LOCALE_DATA_FACTORY(): {
         fileUpload: {
             single: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
             };
             multiple: {
                 captionText: string;
+                captionTextOnlyFolder: string;
+                captionTextWithFolder: string;
                 captionTextWhenSelected: string;
                 captionTextForCompactSize: string;
                 browseLink: string;
+                browseLinkFolder: string;
+                browseLinkFolderMixed: string;
                 title: string;
                 gridHeaders: {
                     file: string;

package/core/locales/pt-BR.d.ts

@@ -14,13 +14,21 @@ export declare const ptBRLocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/ru-RU.d.ts

@@ -15,13 +15,21 @@ export declare const ruRULocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/tk-TM.d.ts

@@ -15,13 +15,21 @@ export declare const tkTMLocaleData: {
     fileUpload: {
         single: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
         };
         multiple: {
             captionText: string;
+            captionTextOnlyFolder: string;
+            captionTextWithFolder: string;
             captionTextWhenSelected: string;
             captionTextForCompactSize: string;
             browseLink: string;
+            browseLinkFolder: string;
+            browseLinkFolderMixed: string;
             title: string;
             gridHeaders: {
                 file: string;

package/core/locales/types.d.ts

@@ -56,3 +56,24 @@ export type KbqTimeRangeLocaleConfig = {
         option: FormatterDurationTemplate;
     };
 };
+export interface KbqBaseFileUploadLocaleConfig {
+    captionText: string;
+    captionTextOnlyFolder: string;
+    captionTextWithFolder: string;
+    browseLink: string;
+    browseLinkFolder: string;
+    browseLinkFolderMixed?: string;
+}
+export interface KbqMultipleFileUploadLocaleConfig extends KbqBaseFileUploadLocaleConfig {
+    captionTextWhenSelected: string;
+    captionTextForCompactSize: string;
+    title: string;
+    gridHeaders: {
+        file: string;
+        size: string;
+    };
+}
+export type KbqFileUploadLocaleConfig = {
+    single: KbqBaseFileUploadLocaleConfig;
+    multiple: KbqMultipleFileUploadLocaleConfig;
+};

package/core/option/_option-theme.scss

@@ -20,10 +20,12 @@
     .kbq-option {
         @include kbq-option(default);
 
+        &.kbq-hovered:not(.kbq-disabled),
         &:hover:not(.kbq-disabled) {
             @include kbq-option(states-hover);
         }
 
+        &.kbq-active:not(.kbq-disabled),
         &:active:not(.kbq-disabled) {
             @include kbq-option(states-active);
         }
@@ -31,10 +33,12 @@
         &.kbq-selected:not(.kbq-disabled) {
             @include kbq-option(states-selected);
 
+            &.kbq-hovered,
             &:hover {
                 @include kbq-option(states-selected-hover);
             }
 
+            &.kbq-active,
             &:active {
                 @include kbq-option(states-selected-active);
             }
@@ -70,8 +74,7 @@
     }
 
     .cdk-keyboard-focused {
-        .kbq-option.kbq-focused,
-        .kbq-option.kbq-active {
+        .kbq-option.kbq-focused {
             border-color: var(--kbq-list-states-focused-focus-outline-color);
         }
     }

package/core/option/action.d.ts

@@ -34,6 +34,6 @@ export declare class KbqOptionActionComponent implements AfterViewInit, OnDestro
     onKeyDown($event: any): void;
     private preventShowingTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionActionComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["kbqOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[kbq-icon]"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["kbqOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["[kbq-icon]"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }

package/core/option/optgroup.d.ts

@@ -11,6 +11,6 @@ export declare class KbqOptgroup {
     /** Unique id for the underlying label. */
     labelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptgroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptgroup, "kbq-optgroup", ["kbqOptgroup"], { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["kbq-option, kbq-list-option, kbq-timezone-option, ng-container"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptgroup, "kbq-optgroup", ["kbqOptgroup"], { "label": { "alias": "label"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["kbq-option, kbq-list-option, kbq-timezone-option, ng-container"], true, never>;
     static ngAcceptInputType_disabled: unknown;
 }

package/core/option/option-module.d.ts

@@ -1,10 +1,10 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./option";
-import * as i2 from "./optgroup";
-import * as i3 from "./action";
-import * as i4 from "../selection/pseudo-checkbox/pseudo-checkbox.module";
+import * as i1 from "../selection/pseudo-checkbox/pseudo-checkbox";
+import * as i2 from "./option";
+import * as i3 from "./optgroup";
+import * as i4 from "./action";
 export declare class KbqOptionModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqOptionModule, [typeof i1.KbqOption, typeof i2.KbqOptgroup, typeof i3.KbqOptionActionComponent], [typeof i4.KbqPseudoCheckboxModule], [typeof i1.KbqOption, typeof i2.KbqOptgroup, typeof i3.KbqOptionActionComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqOptionModule, never, [typeof i1.KbqPseudoCheckbox, typeof i2.KbqOption, typeof i3.KbqOptgroup, typeof i4.KbqOptionActionComponent], [typeof i2.KbqOption, typeof i3.KbqOptgroup, typeof i4.KbqOptionActionComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqOptionModule>;
 }

package/core/option/option.d.ts

@@ -17,6 +17,8 @@ export declare class KbqOptionSelectionChange<T = KbqOption> {
 export interface KbqOptionParentComponent {
     multiple?: boolean;
     multiSelection?: boolean;
+    withVirtualScroll?: boolean;
+    setSelectedOptionsByClick: (option: KbqOption) => void;
 }
 /**
  * Handler that will update scroll position of elements inside overlay
@@ -120,6 +122,8 @@ export declare class KbqOption extends KbqOptionBase implements AfterViewChecked
     setInactiveStyles(): void;
     /** Gets the label to be used when determining whether the option should be focused. */
     getLabel(): string;
+    /** @docs-private */
+    handleClick(event: MouseEvent): void;
     /** Ensures the option is selected when activated from the keyboard. */
     handleKeydown(event: KeyboardEvent): void;
     /**
@@ -130,7 +134,7 @@ export declare class KbqOption extends KbqOptionBase implements AfterViewChecked
     getTabIndex(): string;
     getHostElement(): HTMLElement;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOption, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOption, "kbq-option", ["kbqOption"], { "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "userSelect": { "alias": "userSelect"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "viewValue": { "alias": "viewValue"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["kbq-pseudo-checkbox", "*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOption, "kbq-option", ["kbqOption"], { "value": { "alias": "value"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "userSelect": { "alias": "userSelect"; "required": false; }; "showCheckbox": { "alias": "showCheckbox"; "required": false; }; "viewValue": { "alias": "viewValue"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "onSelectionChange": "onSelectionChange"; }, never, ["kbq-pseudo-checkbox", "*"], true, never>;
     static ngAcceptInputType_selectable: unknown;
     static ngAcceptInputType_userSelect: unknown;
 }

package/core/pop-up/constants.d.ts

@@ -1,5 +1,6 @@
 import { InjectionToken } from '@angular/core';
 import { Observable } from 'rxjs';
+import { KbqEnumValues } from '../utils';
 export interface KbqParentPopup {
     closedStream: Observable<boolean>;
 }
@@ -21,6 +22,8 @@ export declare enum PopUpPlacements {
     BottomLeft = "bottomLeft",
     BottomRight = "bottomRight"
 }
+export type KbqPopUpPlacementValues = KbqEnumValues<PopUpPlacements>;
+export type KbqStickToWindowPlacementValues = KbqEnumValues<PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left>;
 export declare enum PopUpVisibility {
     Initial = "initial",
     Visible = "visible",
@@ -39,6 +42,7 @@ export declare enum PopUpSizes {
     Normal = "medium",
     Large = "large"
 }
+export type KbqPopUpSizeValues = KbqEnumValues<PopUpSizes>;
 /**
  * Default value when configuring overlay in popups (Autocomplete, Datepicker, Dropdown, Select, Tags Autocomplete,
  * Tags Input, Timezone, TreeSelect).

package/core/pop-up/pop-up-trigger.d.ts

@@ -4,7 +4,7 @@ import { ComponentPortal } from '@angular/cdk/portal';
 import { DestroyRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, TemplateRef, Type, ViewContainerRef } from '@angular/core';
 import { BehaviorSubject, Observable, Subscription } from 'rxjs';
 import { AsyncScheduler } from 'rxjs/internal/scheduler/AsyncScheduler';
-import { PopUpPlacements } from './constants';
+import { KbqPopUpPlacementValues, KbqStickToWindowPlacementValues } from './constants';
 import * as i0 from "@angular/core";
 export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     /** Stream that emits when the popupTrigger is hovered. */
@@ -24,7 +24,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     leaveDelay: number;
     triggerName: string;
     overlayRef: OverlayRef | null;
-    stickToWindow: PopUpPlacements.Top | PopUpPlacements.Right | PopUpPlacements.Bottom | PopUpPlacements.Left | string;
+    stickToWindow: KbqStickToWindowPlacementValues;
     container: HTMLElement;
     abstract disabled: boolean;
     abstract arrow: boolean;
@@ -35,7 +35,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     abstract visibleChange: EventEmitter<boolean>;
     protected abstract originSelector: string;
     protected abstract overlayConfig: OverlayConfig;
-    protected placement: PopUpPlacements;
+    protected placement: KbqPopUpPlacementValues;
     protected placementPriority: string | string[] | null;
     protected visible: boolean;
     protected _content: string | TemplateRef<any>;
@@ -60,7 +60,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     abstract getOverlayHandleComponentType(): Type<T>;
     ngOnInit(): void;
     ngOnDestroy(): void;
-    updatePlacement(value: PopUpPlacements): void;
+    updatePlacement(value: KbqPopUpPlacementValues): void;
     updatePlacementPriority(value: any): void;
     updateVisible(externalValue: boolean): void;
     keydownHandler(event: KeyboardEvent): void;
@@ -91,5 +91,5 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     private removeEventListener;
     private subscribeOnClosingActions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopUpTrigger<any>, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopUpTrigger<any>, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopUpTrigger<any>, never, never, {}, {}, never, never, true, never>;
 }

package/core/pop-up/pop-up.d.ts

@@ -53,5 +53,5 @@ export declare abstract class KbqPopUp implements OnDestroy {
     protected addEventListenerForHide(): void;
     protected setStickPosition(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPopUp, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopUp, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqPopUp, never, never, {}, {}, never, never, true, never>;
 }

package/core/select/common.d.ts

@@ -55,5 +55,5 @@ export declare abstract class KbqAbstractSelect {
     protected resetOverlay(): void;
     protected resolveSearchMinOptionsThreshold(value?: 'auto' | number): number | undefined;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqAbstractSelect, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAbstractSelect, never, never, {}, {}, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqAbstractSelect, never, never, {}, {}, never, never, true, never>;
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.d.ts

@@ -19,5 +19,5 @@ export declare class KbqPseudoCheckbox extends KbqColorDirective {
     state: KbqPseudoCheckboxState;
     disabled: boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPseudoCheckbox, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPseudoCheckbox, "kbq-pseudo-checkbox", never, { "big": { "alias": "big"; "required": false; }; "state": { "alias": "state"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqPseudoCheckbox, "kbq-pseudo-checkbox", never, { "big": { "alias": "big"; "required": false; }; "state": { "alias": "state"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, never, true, never>;
 }

package/core/selection/pseudo-checkbox/pseudo-checkbox.module.d.ts

@@ -1,8 +1,8 @@
 import * as i0 from "@angular/core";
-import * as i1 from "./pseudo-checkbox";
-import * as i2 from "@angular/common";
+import * as i1 from "@angular/common";
+import * as i2 from "./pseudo-checkbox";
 export declare class KbqPseudoCheckboxModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqPseudoCheckboxModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqPseudoCheckboxModule, [typeof i1.KbqPseudoCheckbox], [typeof i2.CommonModule], [typeof i1.KbqPseudoCheckbox]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqPseudoCheckboxModule, never, [typeof i1.CommonModule, typeof i2.KbqPseudoCheckbox], [typeof i2.KbqPseudoCheckbox]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqPseudoCheckboxModule>;
 }

package/core/styles/common/_select.scss

@@ -122,7 +122,7 @@
         overflow: hidden;
 
         & .kbq-select__match-hidden-text {
-            flex: 0 0 70px;
+            flex: 0 0 40px;
             align-self: center;
             padding-left: 4px;
             padding-right: var(--kbq-select-size-multiple-content-gap, var(--kbq-size-xxs));

package/core/styles/common/_visually-hidden.scss

@@ -3,6 +3,7 @@
 @mixin a11y-visually-hidden() {
     .cdk-visually-hidden {
         border: 0;
+        /* stylelint-disable-next-line property-no-deprecated */
         clip: rect(0 0 0 0);
         height: 1px;
         margin: -1px;

package/core/styles/theming/_scrollbar-theme.scss

@@ -3,9 +3,24 @@
 @use '../common/tokens';
 @use './scrollbar-tokens';
 
+@mixin _scrollbar-state($state, $color) {
+    &.kbq-#{$state} {
+        &::-webkit-scrollbar-thumb,
+        ::-webkit-scrollbar-thumb {
+            background-color: $color;
+        }
+    }
+
+    &::-webkit-scrollbar-thumb:#{$state},
+    ::-webkit-scrollbar-thumb:#{$state} {
+        background-color: $color;
+    }
+}
+
 @mixin _kbq-scrollbar() {
     // For Firefox compatibility
     @supports not selector(::-webkit-scrollbar) {
+        /* stylelint-disable-next-line no-invalid-position-declaration */
         scrollbar-width: auto;
     }
 
@@ -69,18 +84,10 @@
             // https://stackoverflow.com/a/16829330/6386666
             background-clip: content-box;
             background-color: var(--kbq-scrollbar-thumb-default-background);
-
-            &:hover {
-                background-color: var(--kbq-scrollbar-thumb-hover-background);
-            }
-
-            &:disabled {
-                background-color: var(--kbq-scrollbar-thumb-disabled-background);
-            }
-
-            &:active {
-                background-color: var(--kbq-scrollbar-thumb-active-background);
-            }
         }
+
+        @include _scrollbar-state(hover, var(--kbq-scrollbar-thumb-hover-background));
+        @include _scrollbar-state(disabled, var(--kbq-scrollbar-thumb-disabled-background));
+        @include _scrollbar-state(active, var(--kbq-scrollbar-thumb-active-background));
     }
 }

package/core/utils/utils.d.ts

@@ -14,3 +14,6 @@ export declare const leftIconClassName = "kbq-icon_left";
 export declare const rightIconClassName = "kbq-icon_right";
 /** Whether the current platform is a Mac. */
 export declare function isMac(): boolean;
+/** Converts an enumeration (enum) type into a string literal type containing
+ * all possible string representations of the values. */
+export type KbqEnumValues<T extends string | number> = `${T}`;

package/datepicker/calendar-body.component.d.ts

@@ -51,5 +51,5 @@ export declare class KbqCalendarBody implements OnChanges {
     ngOnChanges(changes: SimpleChanges): void;
     isActiveCell(rowIndex: number, colIndex: number): boolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendarBody, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarBody, "[kbq-calendar-body]", ["kbqCalendarBody"], { "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarBody, "[kbq-calendar-body]", ["kbqCalendarBody"], { "rows": { "alias": "rows"; "required": false; }; "todayValue": { "alias": "todayValue"; "required": false; }; "selectedValue": { "alias": "selectedValue"; "required": false; }; "labelMinRequiredCells": { "alias": "labelMinRequiredCells"; "required": false; }; "numCols": { "alias": "numCols"; "required": false; }; "activeCell": { "alias": "activeCell"; "required": false; }; "cellAspectRatio": { "alias": "cellAspectRatio"; "required": false; }; }, { "selectedValueChange": "selectedValueChange"; }, never, never, true, never>;
 }

package/datepicker/calendar-header.component.d.ts

@@ -47,5 +47,5 @@ export declare class KbqCalendarHeader<D> implements AfterContentInit {
     private updateYearsOptions;
     private updateMonthOptions;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendarHeader<any>, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["kbqCalendarHeader"], { "activeDate": { "alias": "activeDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendarHeader<any>, "kbq-calendar-header", ["kbqCalendarHeader"], { "activeDate": { "alias": "activeDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; }, { "activeDateChange": "activeDateChange"; "monthSelected": "monthSelected"; "yearSelected": "yearSelected"; }, never, never, true, never>;
 }

package/datepicker/calendar.component.d.ts

@@ -85,5 +85,5 @@ export declare class KbqCalendar<D> implements AfterContentInit, OnDestroy, OnCh
     private getValidDateOrNull;
     private getActiveDateDefault;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqCalendar<any>, [null, { optional: true; }, null]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendar<any>, "kbq-calendar", ["kbqCalendar"], { "startAt": { "alias": "startAt"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "userSelection": "userSelection"; }, never, never, false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCalendar<any>, "kbq-calendar", ["kbqCalendar"], { "startAt": { "alias": "startAt"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; "minDate": { "alias": "minDate"; "required": false; }; "maxDate": { "alias": "maxDate"; "required": false; }; "dateFilter": { "alias": "dateFilter"; "required": false; }; "dateClass": { "alias": "dateClass"; "required": false; }; }, { "selectedChange": "selectedChange"; "yearSelected": "yearSelected"; "monthSelected": "monthSelected"; "userSelection": "userSelection"; }, never, never, true, never>;
 }

package/datepicker/datepicker-input.directive.d.ts

@@ -2,7 +2,7 @@ import { AfterContentInit, DoCheck, ElementRef, EventEmitter, InjectionToken, On
 import { AbstractControl, ControlValueAccessor, ValidationErrors, Validator } from '@angular/forms';
 import { DateAdapter, ErrorStateMatcher, KbqDateFormats } from '@koobiq/components/core';
 import { KbqFormFieldControl } from '@koobiq/components/form-field';
-import { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
+import type { KbqWarningTooltipTrigger } from '@koobiq/components/tooltip';
 import { Subject } from 'rxjs';
 import { KbqCalendar } from './calendar.component';
 import { KbqDatepicker } from './datepicker.component';
@@ -211,5 +211,5 @@ export declare class KbqDatepickerInput<D> implements KbqFormFieldControl<D>, Co
     private createDateTime;
     private correctCursorPosition;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqDatepickerInput<any>, [null, null, { optional: true; }, { optional: true; }]>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerInput<any>, "input[kbqDatepicker], input[kbqCalendar]", ["kbqDatepickerInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "kbqDatepicker": { "alias": "kbqDatepicker"; "required": false; }; "kbqCalendar": { "alias": "kbqCalendar"; "required": false; }; "kbqDatepickerFilter": { "alias": "kbqDatepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqDatepickerInput<any>, "input[kbqDatepicker], input[kbqCalendar]", ["kbqDatepickerInput"], { "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "kbqDatepicker": { "alias": "kbqDatepicker"; "required": false; }; "kbqCalendar": { "alias": "kbqCalendar"; "required": false; }; "kbqDatepickerFilter": { "alias": "kbqDatepickerFilter"; "required": false; }; "value": { "alias": "value"; "required": false; }; "min": { "alias": "min"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "id": { "alias": "id"; "required": false; }; "kbqValidationTooltip": { "alias": "kbqValidationTooltip"; "required": false; }; }, { "incorrectInput": "incorrectInput"; "dateChange": "dateChange"; "dateInput": "dateInput"; }, never, never, true, never>;
 }