@koobiq/components 18.20.0 → 18.22.0

package/badge/badge.component.d.ts

@@ -17,7 +17,6 @@ export declare class KbqBadgeCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCaption, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCaption, "[kbq-badge-caption]", never, {}, {}, never, never, false, never>;
 }
-export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
 export declare const leftIconClassName = "kbq-icon_left";
 export declare const rightIconClassName = "kbq-icon_right";
 export declare const badgeLeftIconClassName = "kbq-badge-icon_left";

package/breadcrumbs/breadcrumbs-tokens.scss

@@ -5,5 +5,6 @@
     --kbq-breadcrumb-expand-icon-color: var(--kbq-icon-contrast-fade);
     --kbq-breadcrumb-item-border-radius: var(--kbq-size-xs);
     --kbq-breadcrumb-item-icon-color: var(--kbq-icon-contrast-fade);
+    --kbq-breadcrumb-item-negative-margin: calc(-1 * var(--kbq-size-xs));
     --kbq-breadcrumbs-gap: 0;
 }

package/breadcrumbs/breadcrumbs.d.ts

@@ -2,21 +2,13 @@ import { AfterContentInit, InjectionToken, OnInit, Provider, QueryList, Template
 import { RouterLink } from '@angular/router';
 import { KbqButtonStyles } from '@koobiq/components/button';
 import { KbqComponentColors, KbqDefaultSizes, PopUpPlacements } from '@koobiq/components/core';
+import { KbqBreadcrumbsConfiguration, KbqBreadcrumbsWrapMode } from './breadcrumbs.types';
 import * as i0 from "@angular/core";
 import * as i1 from "@radix-ng/primitives/roving-focus";
-export type KbqBreadcrumbsConfiguration = {
-    /**
-     * Specifies the maximum number of breadcrumb items to display.
-     * - If a number is provided, only that many items will be shown.
-     * - If `null`, no limit is applied, and all breadcrumb items are displayed.
-     */
-    max: number | null;
-    size: KbqDefaultSizes;
-};
 /** Breadcrumbs options global configuration provider. */
 export declare const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
 /** Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`. */
-export declare const provideKbqBreadcrumbsConfiguration: (configuration: KbqBreadcrumbsConfiguration) => Provider;
+export declare const kbqBreadcrumbsConfigurationProvider: (configuration: Partial<KbqBreadcrumbsConfiguration>) => Provider;
 export declare class KbqBreadcrumbsSeparator {
     readonly templateRef: TemplateRef<any>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbsSeparator, never>;
@@ -77,6 +69,12 @@ export declare class KbqBreadcrumbItem {
 }
 export declare class KbqBreadcrumbs implements AfterContentInit {
     protected readonly configuration: KbqBreadcrumbsConfiguration;
+    /**
+     * Determines if a negative margin should be applied to the first breadcrumb item.
+     *
+     * @see KbqBreadcrumbsConfiguration
+     */
+    firstItemNegativeMargin: boolean;
     /**
      * Size of the breadcrumbs. Affects font size.
      * Default value is taken from the global configuration.
@@ -93,25 +91,35 @@ export declare class KbqBreadcrumbs implements AfterContentInit {
      * When disabled, user interactions are blocked.
      */
     disabled: boolean;
+    /**
+     * Wrapping behavior of the breadcrumb items.
+     */
+    wrapMode: KbqBreadcrumbsWrapMode;
     protected readonly separator?: TemplateRef<any>;
     protected readonly items: QueryList<KbqBreadcrumbItem>;
+    private readonly result;
+    private readonly overflowItems;
     /**
      * Ensures at least minimum number of breadcrumb items are shown.
-     *
-     * This prevents the appearance of unnecessary expand button that would hide only a single breadcrumb.
      */
-    readonly minVisibleItems = 2;
-    private readonly destroyRef;
-    private readonly cdr;
+    protected readonly minVisibleItems = 2;
     protected readonly KbqComponentColors: typeof KbqComponentColors;
     protected readonly KbqButtonStyles: typeof KbqButtonStyles;
     protected readonly PopUpPlacements: typeof PopUpPlacements;
+    private readonly cdr;
+    private readonly destroyRef;
     /** @docs-private */
-    protected get hiddenBreadcrumbItems(): KbqBreadcrumbItem[];
-    /** @docs-private */
-    protected get visibleBreadcrumbItems(): KbqBreadcrumbItem[];
+    protected get itemsExcludingEdges(): KbqBreadcrumbItem[];
+    /**
+     * Calculates the total width of visible items based on the `max` value and overflow items.
+     * @returns {number | null} The computed max width for overflow items or null if conditions are not met.
+     * @docs-private
+     */
+    protected get maxWidth(): number | null;
     ngAfterContentInit(): void;
+    private getItemWidth;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; }; "size": { "alias": "size"; "required": false; }; "max": { "alias": "max"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "wrapMode": { "alias": "wrapMode"; "required": false; }; }, {}, ["separator", "items"], never, true, [{ directive: typeof i1.RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+    static ngAcceptInputType_firstItemNegativeMargin: unknown;
     static ngAcceptInputType_disabled: unknown;
 }

package/breadcrumbs/breadcrumbs.scss

@@ -1,10 +1,63 @@
 @use '../core/styles/common/tokens';
 @use '../core/styles/common/vendor-prefixes';
 
-.kbq-breadcrumbs {
+@mixin _kbq-breadcrumbs-geometry {
     display: flex;
     align-items: center;
     gap: var(--kbq-breadcrumbs-gap);
+    flex-grow: 1;
+    flex-wrap: wrap;
+
+    .kbq-overflow-items {
+        // add space not to cut focus outline
+        padding: 1px;
+    }
+
+    .kbq-breadcrumb-item__container {
+        display: inline-flex;
+        align-items: center;
+    }
+
+    &.kbq-breadcrumbs_first-item-negative-margin {
+        .kbq-overflow-items {
+            margin-left: var(--kbq-breadcrumb-item-negative-margin);
+        }
+    }
+
+    &.kbq-breadcrumbs_wrap {
+        flex-wrap: wrap;
+    }
+
+    &.kbq-breadcrumbs_compact {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-height: var(--kbq-size-xxl);
+            }
+        }
+
+        .kbq-breadcrumb__expand {
+            &.kbq-button-icon {
+                --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_normal {
+        .kbq-breadcrumb-item {
+            &.kbq-button,
+            &.kbq-button-icon {
+                --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
+            }
+        }
+    }
+
+    &.kbq-breadcrumbs_big {
+        .kbq-button,
+        .kbq-button-icon {
+            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
+        }
+    }
 
     .kbq-breadcrumb-item {
         &.kbq-button,
@@ -12,6 +65,20 @@
             --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
             --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
             --kbq-button-size-border-radius: var(--kbq-breadcrumb-item-border-radius);
+        }
+    }
+
+    .kbq-breadcrumb__expand {
+        &.kbq-button-icon {
+            --kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding);
+        }
+    }
+}
+
+@mixin _kbq-breadcrumbs-theme {
+    .kbq-breadcrumb-item {
+        &.kbq-button,
+        &.kbq-button-icon {
             --kbq-button-transparent-contrast-fade-on-foreground: var(--kbq-foreground-contrast-secondary);
             --kbq-button-transparent-contrast-fade-on-right-icon: var(--kbq-breadcrumb-item-icon-color);
             --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-item-icon-color);
@@ -65,7 +132,6 @@
 
     .kbq-breadcrumb__expand {
         &.kbq-button-icon {
-            --kbq-button-icon-size-horizontal-padding: var(--kbq-breadcrumb-item-expand-horizontal-padding);
             --kbq-button-transparent-contrast-fade-on-left-icon: var(--kbq-breadcrumb-expand-icon-color);
 
             .kbq-icon {
@@ -101,35 +167,22 @@
 
         color: var(--kbq-foreground-contrast);
     }
+}
 
-    // typography
-    .kbq-breadcrumb__separator {
-        @include vendor-prefixes.user-select(none);
-        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
-    }
-
+@mixin _kbq-breadcrumbs-typography {
     &.kbq-breadcrumbs_compact {
         .kbq-breadcrumb-item {
             &.kbq-button,
             &.kbq-button-icon {
-                --kbq-breadcrumb-item-height: var(--kbq-size-xxl);
                 @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-normal);
             }
         }
-
-        .kbq-breadcrumb__expand {
-            &.kbq-button-icon {
-                --kbq-breadcrumb-item-expand-horizontal-padding: var(--kbq-size-xxs);
-            }
-        }
     }
 
     &.kbq-breadcrumbs_normal {
         .kbq-breadcrumb-item {
             &.kbq-button,
             &.kbq-button-icon {
-                --kbq-button-size-horizontal-padding: var(--kbq-breadcrumb-item-horizontal-padding);
-
                 @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
             }
         }
@@ -138,10 +191,20 @@
     &.kbq-breadcrumbs_big {
         .kbq-button,
         .kbq-button-icon {
-            --kbq-button-size-height: var(--kbq-breadcrumb-item-height);
             @include tokens.kbq-typography-level-to-styles-css-variables(typography, subheading);
         }
     }
+
+    .kbq-breadcrumb__separator {
+        @include vendor-prefixes.user-select(none);
+        @include tokens.kbq-typography-level-to-styles-css-variables(typography, text-big);
+    }
+}
+
+.kbq-breadcrumbs {
+    @include _kbq-breadcrumbs-geometry();
+    @include _kbq-breadcrumbs-theme();
+    @include _kbq-breadcrumbs-typography();
 }
 
 .kbq-breadcrumb-item__link-behavior {

package/breadcrumbs/breadcrumbs.types.d.ts

@@ -0,0 +1,22 @@
+import { KbqDefaultSizes } from '@koobiq/components/core';
+export type KbqBreadcrumbsWrapMode = 'auto' | 'wrap' | 'none';
+export type KbqBreadcrumbsConfiguration = {
+    /**
+     * Specifies the maximum number of breadcrumb items to display.
+     * - If a number is provided, only that many items will be shown.
+     * - If `null`, no limit is applied, and all breadcrumb items are displayed.
+     */
+    max: number | null;
+    size: KbqDefaultSizes;
+    /**
+     * Determines if a negative margin should be applied to the first breadcrumb item.
+     */
+    firstItemNegativeMargin: boolean;
+    /**
+     * Manages breadcrumb items when space is limited:
+     * - `auto`: Adjusts based on space and item count.
+     * - `wrap`: Moves items to the next line if needed.
+     * - `none`: Prevents wrapping, allowing overflow.
+     */
+    wrapMode: KbqBreadcrumbsWrapMode;
+};

package/breadcrumbs/public-api.d.ts

@@ -1,2 +1,3 @@
 export * from './breadcrumbs';
 export * from './breadcrumbs.module';
+export * from './breadcrumbs.types';

package/button/button-tokens.scss

@@ -4,7 +4,7 @@
     --kbq-button-size-border-width: var(--kbq-size-border-width);
     --kbq-button-size-border-radius: var(--kbq-size-border-radius);
     --kbq-button-size-horizontal-padding: var(--kbq-size-m);
-    --kbq-button-size-content-padding: var(--kbq-size-s);
+    --kbq-button-size-content-padding: var(--kbq-size-xs);
     --kbq-button-icon-size-horizontal-padding: var(--kbq-size-s);
     --kbq-button-icon-size-vertical-padding: var(--kbq-size-s);
     --kbq-button-icon-size-content-padding: var(--kbq-size-xxs);

package/button/button.component.d.ts

@@ -1,6 +1,6 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterContentInit, AfterViewInit, ChangeDetectorRef, ElementRef, OnDestroy, QueryList, Renderer2 } from '@angular/core';
-import { CanColor, CanColorCtor, CanDisable, HasTabIndexCtor, KbqTitleTextRef } from '@koobiq/components/core';
+import { KbqColorDirective, KbqTitleTextRef } from '@koobiq/components/core';
 import { KbqIcon } from '@koobiq/components/icon';
 import * as i0 from "@angular/core";
 export declare enum KbqButtonStyles {
@@ -8,11 +8,8 @@ export declare enum KbqButtonStyles {
     Outline = "outline",
     Transparent = "transparent"
 }
-export declare const leftIconClassName = "kbq-icon_left";
-export declare const rightIconClassName = "kbq-icon_right";
 export declare const buttonLeftIconClassName = "kbq-button-icon_left";
 export declare const buttonRightIconClassName = "kbq-button-icon_right";
-export declare const getNodesWithoutComments: (nodes: NodeList) => Node[];
 export declare class KbqButtonCssStyler implements AfterContentInit {
     private renderer;
     private cdr;
@@ -25,14 +22,7 @@ export declare class KbqButtonCssStyler implements AfterContentInit {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, [null, null, { skipSelf: true; }]>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonCssStyler, "[kbq-button]", never, {}, {}, ["icons"], never, false, never>;
 }
-/** @docs-private */
-export declare class KbqButtonBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqButtonMixinBase: HasTabIndexCtor & CanColorCtor & typeof KbqButtonBase;
-export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy, AfterViewInit, CanDisable, CanColor, KbqTitleTextRef {
+export declare class KbqButton extends KbqColorDirective implements OnDestroy, AfterViewInit, KbqTitleTextRef {
     private focusMonitor;
     private styler;
     hasFocus: boolean;
@@ -40,10 +30,13 @@ export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy,
     get kbqStyle(): string;
     set kbqStyle(value: string | KbqButtonStyles);
     private _kbqStyle;
-    get disabled(): any;
-    set disabled(value: any);
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
-    constructor(elementRef: ElementRef, focusMonitor: FocusMonitor, styler: KbqButtonCssStyler);
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    constructor(focusMonitor: FocusMonitor, styler: KbqButtonCssStyler);
     ngAfterViewInit(): void;
     ngOnDestroy(): void;
     onFocus($event: any): void;
@@ -56,5 +49,7 @@ export declare class KbqButton extends KbqButtonMixinBase implements OnDestroy,
     private runFocusMonitor;
     private stopFocusMonitor;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqButton, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButton, "[kbq-button]", never, { "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, never, ["*"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }

package/button/button.scss

@@ -1,5 +1,6 @@
-@use 'button-base' as *;
+@use '../core/styles/common/animation';
 
+@use 'button-base' as *;
 @use '../core/styles/common/tokens' as *;
 
 @use './button-theme' as *;
@@ -10,20 +11,6 @@
     // base padding - border-width
     padding-left: kbq-difference-series-css-variables([button-size-horizontal-padding, button-size-border-width]);
     padding-right: kbq-difference-series-css-variables([button-size-horizontal-padding, button-size-border-width]);
-
-    &.kbq-button-icon_left {
-        padding-left: kbq-difference-series-css-variables(
-            [button-icon-size-horizontal-padding,
-            button-size-border-width]
-        );
-    }
-
-    &.kbq-button-icon_right {
-        padding-right: kbq-difference-series-css-variables(
-            [button-icon-size-horizontal-padding,
-            button-size-border-width]
-        );
-    }
 }
 
 .kbq-light-button {

package/checkbox/checkbox-tokens.scss

@@ -5,12 +5,14 @@
     --kbq-checkbox-size-normal-horizontal-content-padding: var(--kbq-size-s);
     --kbq-checkbox-size-normal-vertical-content-padding: var(--kbq-size-3xs);
     --kbq-checkbox-size-normal-top: var(--kbq-size-3xs);
+    --kbq-checkbox-size-normal-margin-bottom: var(--kbq-size-s);
     --kbq-checkbox-size-big-width: var(--kbq-size-l);
     --kbq-checkbox-size-big-border-width: var(--kbq-size-border-width);
     --kbq-checkbox-size-big-border-radius: var(--kbq-size-xxs);
     --kbq-checkbox-size-big-horizontal-content-padding: var(--kbq-size-s);
     --kbq-checkbox-size-big-vertical-content-padding: var(--kbq-size-3xs);
     --kbq-checkbox-size-big-top: var(--kbq-size-xxs);
+    --kbq-checkbox-size-big-margin-bottom: var(--kbq-size-m);
     /* THEME TOKENS */
     --kbq-checkbox-theme-default-border: var(--kbq-line-contrast-fade);
     --kbq-checkbox-theme-default-color: var(--kbq-icon-white);

package/checkbox/checkbox.d.ts

@@ -1,7 +1,7 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { AfterViewInit, ChangeDetectorRef, ElementRef, EventEmitter, OnDestroy } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
-import { CanColor, CanColorCtor, CanDisable, CanDisableCtor, HasTabIndex, HasTabIndexCtor } from '@koobiq/components/core';
+import { KbqColorDirective } from '@koobiq/components/core';
 import { KbqCheckboxClickAction } from './checkbox-config';
 import * as i0 from "@angular/core";
 /**
@@ -31,13 +31,6 @@ export declare class KbqCheckboxChange {
     /** The new `checked` value of the checkbox. */
     checked: boolean;
 }
-/** @docs-private */
-export declare class KbqCheckboxBase {
-    elementRef: ElementRef;
-    constructor(elementRef: ElementRef);
-}
-/** @docs-private */
-export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanDisableCtor & typeof KbqCheckboxBase;
 /**
  * A Koobiq checkbox component. Supports all of the functionality of an HTML5 checkbox,
  * and exposes a similar API. A KbqCheckbox can be either checked, unchecked, indeterminate, or
@@ -45,7 +38,7 @@ export declare const KbqCheckboxMixinBase: HasTabIndexCtor & CanColorCtor & CanD
  * so there is no need to provide them yourself. However, if you want to omit a label and still
  * have the checkbox be accessible, you may supply an [aria-label] input.
  */
-export declare class KbqCheckbox extends KbqCheckboxMixinBase implements ControlValueAccessor, AfterViewInit, OnDestroy, CanColor, CanDisable, HasTabIndex {
+export declare class KbqCheckbox extends KbqColorDirective implements ControlValueAccessor, AfterViewInit, OnDestroy {
     private changeDetectorRef;
     private focusMonitor;
     private clickAction;
@@ -74,13 +67,13 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     get checked(): boolean;
     set checked(value: boolean);
     private _checked;
-    /**
-     * Whether the checkbox is disabled. This fully overrides the implementation provided by
-     * mixinDisabled, but the mixin is still required because mixinTabIndex requires it.
-     */
-    get disabled(): any;
-    set disabled(value: any);
+    /** Whether the checkbox is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
     private _disabled;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
     /**
      * Whether the checkbox is indeterminate. This is also known as "mixed" mode and can be used to
      * represent a checkbox with three states, e.g. a checkbox that represents a nested list of
@@ -93,7 +86,7 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     private uniqueId;
     private currentAnimationClass;
     private currentCheckState;
-    constructor(elementRef: ElementRef, changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, clickAction: KbqCheckboxClickAction);
+    constructor(changeDetectorRef: ChangeDetectorRef, focusMonitor: FocusMonitor, clickAction: KbqCheckboxClickAction);
     /**
      * Called when the checkbox is blurred. Needed to properly implement ControlValueAccessor.
      * @docs-private
@@ -126,7 +119,9 @@ export declare class KbqCheckbox extends KbqCheckboxMixinBase implements Control
     private emitChangeEvent;
     /** Function is called whenever the focus changes for the input element. */
     private onInputFocusChange;
-    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, null, { optional: true; }]>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "color": { "alias": "color"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqCheckbox, [null, null, { optional: true; }]>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqCheckbox, "kbq-checkbox", ["kbqCheckbox"], { "big": { "alias": "big"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "name": { "alias": "name"; "required": false; }; "value": { "alias": "value"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "indeterminate": { "alias": "indeterminate"; "required": false; }; }, { "change": "change"; "indeterminateChange": "indeterminateChange"; }, never, ["*", "kbq-hint"], false, never>;
     static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
 }

package/checkbox/checkbox.scss

@@ -1,8 +1,4 @@
-@use '../core/styles/common/visually-hidden';
-@use '../core/styles/common/layout';
-
 @use '../core/styles/common/tokens' as *;
-
 @use './checkbox-theme' as *;
 
 .kbq-checkbox-checkmark,
@@ -68,6 +64,8 @@
     cursor: pointer;
     -webkit-tap-highlight-color: transparent;
 
+    margin-bottom: var(--kbq-checkbox-size-normal-margin-bottom);
+
     &.kbq-checked {
         .kbq-checkbox-checkmark {
             display: block;
@@ -102,6 +100,8 @@
 }
 
 .kbq-checkbox.kbq-checkbox_big {
+    margin-bottom: var(--kbq-checkbox-size-big-margin-bottom);
+
     & .kbq-checkbox__layout {
         padding-left: kbq-sum-series-css-variables(
             [ checkbox-size-normal-width,

package/core/common-behaviors/color.d.ts

@@ -1,5 +1,6 @@
 import { ElementRef } from '@angular/core';
 import { AbstractConstructor, Constructor } from './constructor';
+import * as i0 from "@angular/core";
 export interface CanColor {
     color: KbqComponentColors | ThemePalette | string;
 }
@@ -31,3 +32,13 @@ export declare enum KbqComponentColors {
 }
 /** Mixin to augment a directive with a `color` property. */
 export declare function mixinColor<T extends AbstractConstructor<HasElementRef>>(base: T, defaultColor?: KbqComponentColors | ThemePalette): CanColorCtor & T;
+export declare class KbqColorDirective {
+    readonly elementRef: ElementRef<any>;
+    get colorClassName(): KbqComponentColors | ThemePalette | string;
+    get color(): KbqComponentColors | ThemePalette | string;
+    set color(color: KbqComponentColors | ThemePalette | string);
+    protected _color: KbqComponentColors | ThemePalette | string;
+    constructor();
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqColorDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqColorDirective, never, never, { "color": { "alias": "color"; "required": false; }; }, {}, never, never, true, never>;
+}

package/core/common-behaviors/index.d.ts

@@ -1,5 +1,5 @@
 import { InjectionToken } from '@angular/core';
-export { CanColor, CanColorCtor, KbqComponentColors, mixinColor, ThemePalette } from './color';
+export { CanColor, CanColorCtor, KbqColorDirective, KbqComponentColors, mixinColor, ThemePalette } from './color';
 export { KBQ_SANITY_CHECKS, KbqCommonModule } from './common-module';
 export { CanDisable, CanDisableCtor, mixinDisabled } from './disabled';
 export { CanUpdateErrorState, CanUpdateErrorStateCtor, mixinErrorState } from './error-state';

package/core/formatters/date/formatter.d.ts

@@ -3,7 +3,8 @@ import { DateFormatter as BaseDateFormatter } from '@koobiq/date-formatter';
 import * as i0 from "@angular/core";
 export declare class DateFormatter<D> extends BaseDateFormatter<D> {
     readonly adapter: DateAdapter<D>;
-    constructor(adapter: DateAdapter<D>, locale: string);
-    static ɵfac: i0.ɵɵFactoryDeclaration<DateFormatter<any>, never>;
+    protected localeService?: any;
+    constructor(adapter: DateAdapter<D>, locale: string, localeService?: any);
+    static ɵfac: i0.ɵɵFactoryDeclaration<DateFormatter<any>, [null, null, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<DateFormatter<any>>;
 }

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

@@ -906,6 +906,10 @@ export declare class KbqLocaleService {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqLocaleService, [{ optional: true; }, { optional: true; }]>;
     static ɵprov: i0.ɵɵInjectableDeclaration<KbqLocaleService>;
 }
+export declare function numberByParts(value: string, fractionSeparator: string, groupSeparator: string): {
+    integer: string;
+    fraction: string;
+};
 /**
  * Function that returns a string representation of a number without localized separators
  */
@@ -916,4 +920,4 @@ export declare function normalizeNumber(value: string | null | undefined, custom
 /**
  * Function that parse string and return a number. The string can be in any locale.
  */
-export declare function checkAndNormalizeLocalizedNumber(num: string | null | undefined): number | null;
+export declare function checkAndNormalizeLocalizedNumber(num: string | null | undefined, locale?: string): number | null;

package/core/option/action.d.ts

@@ -1,6 +1,5 @@
 import { FocusMonitor, FocusOrigin } from '@angular/cdk/a11y';
 import { AfterViewInit, ElementRef, EventEmitter, InjectionToken, OnDestroy } from '@angular/core';
-import { CanDisableCtor, HasTabIndexCtor } from '../common-behaviors';
 import * as i0 from "@angular/core";
 export interface KbqOptionActionParent {
     dropdownTrigger: {
@@ -17,16 +16,14 @@ export interface KbqOptionActionParent {
     focus(): void;
 }
 export declare const KBQ_OPTION_ACTION_PARENT: InjectionToken<KbqOptionActionParent>;
-/** @docs-private */
-export declare class KbqOptionActionBase {
-}
-/** @docs-private */
-export declare const KbqOptionActionMixinBase: HasTabIndexCtor & CanDisableCtor & typeof KbqOptionActionBase;
-export declare class KbqOptionActionComponent extends KbqOptionActionMixinBase implements AfterViewInit, OnDestroy {
+export declare class KbqOptionActionComponent implements AfterViewInit, OnDestroy {
     private elementRef;
     private focusMonitor;
     private option;
     customIcon: ElementRef;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     hasFocus: boolean;
     get active(): boolean;
     private readonly destroyRef;
@@ -41,4 +38,5 @@ export declare class KbqOptionActionComponent extends KbqOptionActionMixinBase i
     private preventShowingTooltip;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptionActionComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptionActionComponent, "kbq-option-action", ["kbqOptionAction"], { "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["customIcon"], ["[kbq-icon]"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

package/core/option/optgroup.d.ts

@@ -1,17 +1,16 @@
-import { CanDisable, CanDisableCtor } from '../common-behaviors';
 import * as i0 from "@angular/core";
-/** @docs-private */
-export declare class KbqOptgroupBase {
-}
-export declare const KbqOptgroupMixinBase: CanDisableCtor & typeof KbqOptgroupBase;
 /**
  * Component that is used to group instances of `kbq-option`.
  * When options aren't provided as `ng-content`, used as a Group Header with styling.
  */
-export declare class KbqOptgroup extends KbqOptgroupMixinBase implements CanDisable {
+export declare class KbqOptgroup {
     label: string;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
     /** Unique id for the underlying label. */
     labelId: string;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqOptgroup, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqOptgroup, "kbq-optgroup", ["kbqOptgroup"], { "disabled": { "alias": "disabled"; "required": false; }; "label": { "alias": "label"; "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"], false, never>;
+    static ngAcceptInputType_disabled: unknown;
 }

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

@@ -17,6 +17,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     isOpen: boolean;
     enterDelay: number;
     leaveDelay: number;
+    triggerName: string;
     abstract disabled: boolean;
     abstract arrow: boolean;
     abstract trigger: string;
@@ -40,7 +41,6 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     protected readonly availablePositions: {
         [key: string]: ConnectionPositionPair;
     };
-    protected triggerName: string;
     protected mouseEvent?: MouseEvent;
     protected strategy: FlexibleConnectedPositionStrategy;
     abstract updateClassMap(newPlacement?: string): void;
@@ -55,7 +55,7 @@ export declare abstract class KbqPopUpTrigger<T> implements OnInit, OnDestroy {
     handleKeydown(event: KeyboardEvent): void;
     handleTouchend(): void;
     show(delay?: number): void;
-    hide(delay?: number): void;
+    hide: (delay?: number) => void;
     detach: () => void;
     /** Create the overlay config and position strategy */
     createOverlay(): OverlayRef;