@koobiq/components 19.8.1 → 20.0.0

package/breadcrumbs/index.d.ts

@@ -1 +1,243 @@
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import { OnInit, OnDestroy, InjectionToken, Provider, TemplateRef } from '@angular/core';
+import { RouterLink } from '@angular/router';
+import { KbqButtonStyles } from '@koobiq/components/button';
+import { KbqDefaultSizes, KbqComponentColors, PopUpPlacements } from '@koobiq/components/core';
+
+type KbqBreadcrumbsWrapMode = 'auto' | 'wrap' | 'none';
+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;
+};
+
+type Orientation = 'horizontal' | 'vertical';
+type Direction = 'ltr' | 'rtl';
+
+declare class RdxRovingFocusGroupDirective {
+    private readonly ngZone;
+    private readonly elementRef;
+    orientation: Orientation | undefined;
+    readonly dir: _angular_core.InputSignal<Direction>;
+    readonly loop: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly preventScrollOnEntryFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly entryFocus: _angular_core.OutputEmitterRef<Event>;
+    readonly currentTabStopIdChange: _angular_core.OutputEmitterRef<string | null>;
+    /** @docs-private */
+    readonly currentTabStopId: _angular_core.WritableSignal<string | null>;
+    /** @docs-private */
+    readonly focusableItems: _angular_core.WritableSignal<HTMLElement[]>;
+    private readonly isClickFocus;
+    private readonly isTabbingBackOut;
+    private readonly focusableItemsCount;
+    /** @docs-private */
+    get dataOrientation(): Orientation;
+    /** @docs-private */
+    get tabIndex(): 0 | -1;
+    /** @docs-private */
+    handleBlur(): void;
+    /** @docs-private */
+    handleMouseUp(): void;
+    /** @docs-private */
+    handleFocus(event: FocusEvent): void;
+    /** @docs-private */
+    handleMouseDown(): void;
+    /** @docs-private */
+    onItemFocus(tabStopId: string): void;
+    /** @docs-private */
+    onItemShiftTab(): void;
+    /** @docs-private */
+    onFocusableItemAdd(): void;
+    /** @docs-private */
+    onFocusableItemRemove(): void;
+    /** @docs-private */
+    registerItem(item: HTMLElement): void;
+    /** @docs-private */
+    unregisterItem(item: HTMLElement): void;
+    /** @docs-private */
+    getFocusableItemsCount(): number;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRovingFocusGroupDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRovingFocusGroupDirective, "[rdxRovingFocusGroup]", never, { "orientation": { "alias": "orientation"; "required": false; }; "dir": { "alias": "dir"; "required": false; "isSignal": true; }; "loop": { "alias": "loop"; "required": false; "isSignal": true; }; "preventScrollOnEntryFocus": { "alias": "preventScrollOnEntryFocus"; "required": false; "isSignal": true; }; }, { "entryFocus": "entryFocus"; "currentTabStopIdChange": "currentTabStopIdChange"; }, never, never, true, never>;
+}
+
+declare class RdxRovingFocusItemDirective implements OnInit, OnDestroy {
+    private readonly elementRef;
+    private readonly ngZone;
+    protected readonly parent: RdxRovingFocusGroupDirective;
+    readonly focusable: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly active: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly tabStopId: _angular_core.InputSignal<string>;
+    readonly allowShiftKey: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    private readonly id;
+    /** @docs-private */
+    readonly isCurrentTabStop: _angular_core.Signal<boolean>;
+    /**
+     * Lifecycle hook triggered on initialization.
+     * Registers the element with the parent roving focus group if it is focusable.
+     * @docs-private
+     */
+    ngOnInit(): void;
+    /**
+     * Lifecycle hook triggered on destruction.
+     * Unregisters the element from the parent roving focus group if it is focusable.
+     * @docs-private
+     */
+    ngOnDestroy(): void;
+    /**
+     * Determines the `tabIndex` of the element.
+     * Returns `0` if the element is the current tab stop; otherwise, returns `-1`.
+     * @docs-private
+     */
+    get tabIndex(): 0 | -1;
+    /** @docs-private */
+    handleMouseDown(event: MouseEvent): void;
+    /** @docs-private */
+    onFocus(): void;
+    /**
+     * Handles the `keydown` event for keyboard navigation within the roving focus group.
+     * Supports navigation based on orientation and direction, and focuses appropriate elements.
+     *
+     * @param event The `KeyboardEvent` object.
+     * @docs-private
+     */
+    handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RdxRovingFocusItemDirective, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<RdxRovingFocusItemDirective, "[rdxRovingFocusItem]", never, { "focusable": { "alias": "focusable"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; "tabStopId": { "alias": "tabStopId"; "required": false; "isSignal": true; }; "allowShiftKey": { "alias": "allowShiftKey"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
+}
+
+/** Breadcrumbs options global configuration provider. */
+declare const KBQ_BREADCRUMBS_CONFIGURATION: InjectionToken<KbqBreadcrumbsConfiguration>;
+/** Utility provider for `KBQ_BREADCRUMBS_CONFIGURATION`. */
+declare const kbqBreadcrumbsConfigurationProvider: (configuration: Partial<KbqBreadcrumbsConfiguration>) => Provider;
+declare class KbqBreadcrumbsSeparator {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbsSeparator, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqBreadcrumbsSeparator, "ng-template[kbqBreadcrumbsSeparator]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to style and configure buttons used as breadcrumb items.
+ * - Inherits focus management behavior from `RdxRovingFocusItemDirective`.
+ * - Optionally injects `KbqButton` to customize its style for breadcrumb usage.
+ */
+declare class KbqBreadcrumbButton implements OnInit {
+    private readonly button;
+    ngOnInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbButton, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqBreadcrumbButton, "[kbq-button][kbqBreadcrumb]", never, {}, {}, never, never, true, [{ directive: typeof RdxRovingFocusItemDirective; inputs: { "focusable": "focusable"; }; outputs: {}; }]>;
+}
+/**
+ * Directive provides a way to define a custom template for breadcrumb rendering, leveraging TemplateRef
+ *
+ */
+declare class KbqBreadcrumbView {
+    readonly templateRef: TemplateRef<any>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbView, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqBreadcrumbView, "[kbqBreadcrumbView]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Component represents an individual breadcrumb item with optional support for router navigation and styling.
+ */
+declare class KbqBreadcrumbItem {
+    /**
+     * The text displayed for the breadcrumb item.
+     * This text will be shown if breadcrumb item is hidden in dropdown.
+     */
+    readonly text: _angular_core.InputSignal<string>;
+    /**
+     * Indicates whether the breadcrumb item is disabled.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Indicates whether the breadcrumb item is the current/active item.
+     * Defaults to `false`.
+     */
+    readonly current: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * A reference to a custom template provided for the breadcrumb item content.
+     * The template can be used to override the default appearance of the breadcrumb.
+     */
+    readonly customTemplateRef: _angular_core.Signal<TemplateRef<any> | undefined>;
+    /**
+     * An optional `RouterLink` instance for navigating to a specific route.
+     * Injected from the host element, if available and projecting to the hidden breadcrumb item in dropdown.
+     */
+    readonly routerLink: RouterLink | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbItem, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqBreadcrumbItem, "kbq-breadcrumb-item", never, { "text": { "alias": "text"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "current": { "alias": "current"; "required": false; "isSignal": true; }; }, {}, ["customTemplateRef"], ["*"], true, never>;
+}
+declare class KbqBreadcrumbs {
+    protected readonly configuration: KbqBreadcrumbsConfiguration;
+    /**
+     * Determines if a negative margin should be applied to the first breadcrumb item.
+     *
+     * @see KbqBreadcrumbsConfiguration
+     */
+    readonly firstItemNegativeMargin: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Size of the breadcrumbs. Affects font size.
+     * Default value is taken from the global configuration.
+     */
+    readonly size: _angular_core.InputSignal<KbqDefaultSizes>;
+    /**
+     * Maximum number of visible breadcrumb items.
+     * Remaining items are collapsed into a dropdown if the total exceeds this value.
+     * Default value is taken from the global configuration.
+     */
+    readonly max: _angular_core.InputSignal<number | null>;
+    /**
+     * Indicates whether the breadcrumbs are disabled.
+     * When disabled, user interactions are blocked.
+     */
+    readonly disabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Wrapping behavior of the breadcrumb items.
+     */
+    readonly wrapMode: _angular_core.InputSignal<KbqBreadcrumbsWrapMode>;
+    protected readonly separator?: TemplateRef<any>;
+    protected readonly items: _angular_core.Signal<readonly KbqBreadcrumbItem[]>;
+    private readonly breadcrumbsResult;
+    private readonly result;
+    private readonly overflowItems;
+    private readonly overflowItemsDir;
+    /**
+     * Ensures at least minimum number of breadcrumb items are shown.
+     */
+    protected readonly minVisibleItems = 2;
+    protected readonly KbqComponentColors: typeof KbqComponentColors;
+    protected readonly KbqButtonStyles: typeof KbqButtonStyles;
+    protected readonly PopUpPlacements: typeof PopUpPlacements;
+    /** @docs-private */
+    protected readonly itemsExcludingEdges: _angular_core.Signal<KbqBreadcrumbItem[]>;
+    protected readonly hiddenItemIDs: _angular_core.Signal<Set<unknown>>;
+    /** @docs-private */
+    protected readonly maxVisibleItems: _angular_core.Signal<number | null>;
+    private readonly maxHiddenItems;
+    constructor();
+    private enforceMaxVisible;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbs, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqBreadcrumbs, "kbq-breadcrumbs,[kbq-breadcrumbs]", never, { "firstItemNegativeMargin": { "alias": "firstItemNegativeMargin"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "max": { "alias": "max"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; "isSignal": true; }; "wrapMode": { "alias": "wrapMode"; "required": false; "isSignal": true; }; }, {}, ["items", "separator"], ["*"], true, [{ directive: typeof RdxRovingFocusGroupDirective; inputs: {}; outputs: {}; }]>;
+}
+
+declare class KbqBreadcrumbsModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqBreadcrumbsModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqBreadcrumbsModule, never, [typeof KbqBreadcrumbs, typeof KbqBreadcrumbItem, typeof KbqBreadcrumbView, typeof KbqBreadcrumbsSeparator, typeof KbqBreadcrumbButton], [typeof KbqBreadcrumbs, typeof KbqBreadcrumbItem, typeof KbqBreadcrumbView, typeof KbqBreadcrumbsSeparator, typeof KbqBreadcrumbButton]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqBreadcrumbsModule>;
+}
+
+export { KBQ_BREADCRUMBS_CONFIGURATION, KbqBreadcrumbButton, KbqBreadcrumbItem, KbqBreadcrumbView, KbqBreadcrumbs, KbqBreadcrumbsModule, KbqBreadcrumbsSeparator, RdxRovingFocusGroupDirective, RdxRovingFocusItemDirective, kbqBreadcrumbsConfigurationProvider };
+export type { KbqBreadcrumbsConfiguration, KbqBreadcrumbsWrapMode };

package/button/_button-base.scss

@@ -1,4 +1,5 @@
 @use '../core/styles/common/button';
+@use '../core/styles/common/list';
 
 @use '../core/styles/common/tokens' as *;
 
@@ -47,6 +48,17 @@
     & .kbq-button-wrapper {
         display: flex;
         align-items: center;
+
+        min-width: 0;
+    }
+
+    & .kbq-button-text {
+        @include list.kbq-truncate-line();
+
+        display: flex;
+        align-items: center;
+
+        min-width: 0;
     }
 
     & .kbq-icon_left {
@@ -56,4 +68,12 @@
     & .kbq-icon_right {
         margin-left: var(--kbq-button-size-content-padding);
     }
+
+    & .kbq-button-prefix {
+        margin-right: var(--kbq-button-size-content-padding);
+    }
+
+    & .kbq-button-suffix {
+        margin-left: var(--kbq-button-size-content-padding);
+    }
 }

package/button/_button-theme.scss

@@ -46,10 +46,6 @@
 }
 
 @mixin kbq-button-theme() {
-    .kbq-button-overlay {
-        display: none;
-    }
-
     .kbq-button,
     .kbq-button-icon {
         -webkit-font-smoothing: antialiased;
@@ -87,7 +83,9 @@
         &.kbq-button_filled,
         &.kbq-button_outline,
         &.kbq-button_transparent {
-            &.cdk-keyboard-focused {
+            // :not(.kbq-disabled): a disabled <a kbq-button> can keep DOM focus (tabindex=-1 does
+            // not blur it), and FocusMonitor stays attached for the whole component lifetime.
+            &.cdk-keyboard-focused:not(.kbq-disabled) {
                 $focused-color: var(--kbq-states-line-focus-theme);
                 outline: 1px solid $focused-color;
                 border-color: $focused-color;
@@ -101,10 +99,4 @@
     .kbq-button-icon {
         @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
     }
-
-    .kbq-button-icon.kbq-button-wrapper {
-        .kbq-icon {
-            @include kbq-css-font-variable(typography, body, line-height, '');
-        }
-    }
 }

package/button/button.scss

@@ -24,16 +24,5 @@
     padding-right: kbq-difference-series-css-variables([button-icon-size-horizontal-padding, button-size-border-width]);
 }
 
-.kbq-button-overlay {
-    position: absolute;
-
-    top: calc(-1 * #{var(--kbq-button-size-border-width)});
-    left: calc(-1 * #{var(--kbq-button-size-border-width)});
-    right: calc(-1 * #{var(--kbq-button-size-border-width)});
-    bottom: calc(-1 * #{var(--kbq-button-size-border-width)});
-
-    border-radius: inherit;
-}
-
 @include kbq-button-theme();
 @include kbq-button-typography();

package/button/index.d.ts

@@ -1 +1,153 @@
-export * from './public-api';
+import * as i0 from '@angular/core';
+import { AfterContentInit, OnDestroy, AfterViewInit, ElementRef } from '@angular/core';
+import { KbqColorDirective, KbqTitleTextRef, KbqComponentColors, ThemePalette, KbqOrientation } from '@koobiq/components/core';
+import { KbqDropdownTrigger } from '@koobiq/components/dropdown';
+import * as i1 from '@angular/cdk/a11y';
+import * as i2 from '@angular/cdk/platform';
+import * as i3 from '@angular/cdk/observers';
+
+declare enum KbqButtonStyles {
+    Filled = "filled",
+    Outline = "outline",
+    Transparent = "transparent"
+}
+declare const buttonLeftIconClassName = "kbq-button-icon_left";
+declare const buttonRightIconClassName = "kbq-button-icon_right";
+/**
+ * Applies the `kbq-button`/`kbq-button-icon` host class and the left/right icon modifier classes.
+ *
+ * A button is treated as an icon button when its projected content consists only of `KbqIcon`s
+ * and there are at most 2 of them. When icons are mixed with other content, only the outermost
+ * icons receive the left/right classes.
+ *
+ * Must be used together with `KbqButton` (both match `[kbq-button]`): icon detection relies on
+ * the `.kbq-button-wrapper` element rendered by the component's template.
+ */
+declare class KbqButtonCssStyler implements AfterContentInit {
+    private renderer;
+    readonly icons: i0.Signal<readonly any[]>;
+    nativeElement: HTMLElement;
+    /** Whether the button contains only icons (at most 2). */
+    get isIconButton(): boolean;
+    private readonly _isIconButton;
+    private leftIcon;
+    private rightIcon;
+    constructor();
+    ngAfterContentInit(): void;
+    updateClassModifierForIcons(): void;
+    private updateIconClass;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonCssStyler, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonCssStyler, "[kbq-button]", never, {}, {}, ["icons"], never, true, never>;
+}
+declare class KbqButton extends KbqColorDirective implements OnDestroy, AfterViewInit, KbqTitleTextRef {
+    private focusMonitor;
+    protected styler: KbqButtonCssStyler;
+    private readonly changeDetectorRef;
+    hasFocus: boolean;
+    textElement: ElementRef<HTMLElement>;
+    /** The flex row that lays out the icons and text, used as the overflow width constraint. */
+    parentTextElement: ElementRef<HTMLElement>;
+    get kbqStyle(): string;
+    set kbqStyle(value: string | KbqButtonStyles);
+    private _kbqStyle;
+    /** Whether the button is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    readonly disabledSignal: i0.WritableSignal<boolean>;
+    get tabIndex(): number;
+    set tabIndex(value: number);
+    private _tabIndex;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    onFocus(): void;
+    onBlur(): void;
+    getHostElement(): HTMLElement;
+    focus(): void;
+    focusViaKeyboard(): void;
+    haltDisabledEvents: (event: Event) => void;
+    private haltDisabledKeydownEvents;
+    projectContentChanged(): void;
+    private runFocusMonitor;
+    private stopFocusMonitor;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButton, 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, ["[kbqButtonPrefix]", "*", "[kbqButtonSuffix]"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+
+/**
+ * Root directive that groups related buttons,
+ * propagating a shared style, color, and disabled state to every nested button
+ */
+declare class KbqButtonGroupRoot extends KbqColorDirective {
+    private readonly buttons;
+    /**
+     * Style applied to the group and propagated to every nested button.
+     * individual button's style preserved but updated when group input changed.
+     */
+    get kbqStyle(): string;
+    set kbqStyle(value: KbqButtonStyles | string);
+    private _kbqStyle;
+    /**
+     * Color applied to the group and propagated to every nested button.
+     * individual button's color preserved but updated when group input changed.
+     */
+    get color(): KbqComponentColors | ThemePalette | string;
+    set color(value: KbqComponentColors | ThemePalette | string);
+    /** Whether the root is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** @docs-private */
+    protected _disabled: boolean;
+    constructor();
+    private updateColor;
+    private updateStyle;
+    private updateDisabledState;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonGroupRoot, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonGroupRoot, "[kbqButtonGroupRoot]", never, { "kbqStyle": { "alias": "kbqStyle"; "required": false; }; "color": { "alias": "color"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, {}, ["buttons"], never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+}
+/** Groups and styling related `KbqButton`s into a single visual unit. */
+declare class KbqButtonGroup {
+    /**
+     * Layout direction: `'horizontal'` or `'vertical'`
+     * @default 'horizontal'
+     */
+    readonly orientation: i0.InputSignal<KbqOrientation>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonGroup, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqButtonGroup, "kbq-button-group, [kbq-button-group]", never, { "orientation": { "alias": "orientation"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, [{ directive: typeof KbqButtonGroupRoot; inputs: { "color": "color"; "kbqStyle": "kbqStyle"; "disabled": "disabled"; }; outputs: {}; }]>;
+}
+
+/** Marks content to be projected into the prefix (leading) slot of a button. */
+declare class KbqButtonPrefix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonPrefix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonPrefix, "[kbqButtonPrefix]", never, {}, {}, never, never, true, never>;
+}
+/** Marks content to be projected into the suffix (trailing) slot of a button. */
+declare class KbqButtonSuffix {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonSuffix, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonSuffix, "[kbqButtonSuffix]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * This directive enhances `kbq-button` elements acting as dropdown triggers,
+ * visually indicating the active state with the `kbq-active` class,
+ * following Koobiq Design System.
+ *
+ * The directive relies on a separate `KbqDropdownTrigger` directive to get dropdown's state.
+ */
+declare class KbqButtonDropdownTrigger {
+    dropdownTrigger: KbqDropdownTrigger;
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonDropdownTrigger, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<KbqButtonDropdownTrigger, "[kbq-button][kbqDropdownTriggerFor]", never, {}, {}, never, never, true, never>;
+}
+
+declare class KbqButtonModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<KbqButtonModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<KbqButtonModule, never, [typeof i1.A11yModule, typeof i2.PlatformModule, typeof i3.ObserversModule, typeof KbqButtonDropdownTrigger, typeof KbqButton, typeof KbqButtonCssStyler, typeof KbqButtonPrefix, typeof KbqButtonSuffix, typeof KbqButtonGroup, typeof KbqButtonGroupRoot], [typeof KbqButton, typeof KbqButtonCssStyler, typeof KbqButtonPrefix, typeof KbqButtonSuffix, typeof KbqButtonDropdownTrigger, typeof KbqButtonGroup, typeof KbqButtonGroupRoot]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<KbqButtonModule>;
+}
+
+export { KbqButton, KbqButtonCssStyler, KbqButtonDropdownTrigger, KbqButtonGroup, KbqButtonGroupRoot, KbqButtonModule, KbqButtonPrefix, KbqButtonStyles, KbqButtonSuffix, buttonLeftIconClassName, buttonRightIconClassName };

package/button-toggle/index.d.ts

@@ -1 +1,155 @@
-export * from './public-api';
+import * as _angular_core from '@angular/core';
+import { OnInit, AfterContentInit, AfterViewInit, OnDestroy } from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i1 from '@koobiq/components/button';
+import { KbqButton } from '@koobiq/components/button';
+import { KbqIcon } from '@koobiq/components/icon';
+import * as i2 from '@koobiq/components/title';
+
+/** Acceptable types for a button toggle. */
+type ToggleType = 'checkbox' | 'radio';
+/**
+ * Provider Expression that allows kbq-button-toggle-group to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+declare const KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR: any;
+/** Change event object emitted by MсButtonToggle. */
+declare class KbqButtonToggleChange {
+    /** The MсButtonToggle that emits the event. */
+    source: KbqButtonToggle;
+    /** The value assigned to the MсButtonToggle. */
+    value: any;
+    constructor(
+    /** The MсButtonToggle that emits the event. */
+    source: KbqButtonToggle, 
+    /** The value assigned to the MсButtonToggle. */
+    value: any);
+}
+/** Exclusive selection button toggle group that behaves like a radio-button group. */
+declare class KbqButtonToggleGroup implements ControlValueAccessor, OnInit, AfterContentInit {
+    private _changeDetector;
+    /** Whether the toggle group is vertical. */
+    get vertical(): boolean;
+    set vertical(value: boolean);
+    /** Value of the toggle group. */
+    get value(): any;
+    set value(newValue: any);
+    /** Selected button toggles in the group. */
+    get selected(): any;
+    /** Whether multiple button toggles can be selected. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    /** Child button toggle buttons. */
+    readonly buttonToggles: _angular_core.Signal<readonly any[]>;
+    /** Whether multiple button toggle group is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Event that emits whenever the value of the group changes.
+     * Used to facilitate two-way data binding.
+     * @docs-private
+     */
+    readonly valueChange: _angular_core.OutputEmitterRef<any>;
+    /** Event emitted when the group's value changes. */
+    readonly change: _angular_core.OutputEmitterRef<KbqButtonToggleChange>;
+    private _vertical;
+    private _multiple;
+    private _disabled;
+    private selectionModel;
+    /**
+     * Reference to the raw value that the consumer tried to assign. The real
+     * value will exclude any values from this one that don't correspond to a
+     * toggle. Useful for the cases where the value is assigned before the toggles
+     * have been initialized or at the same that they're being swapped out.
+     */
+    private rawValue;
+    /**
+     * The method to be called in order to update ngModel.
+     * Now `ngModel` binding is not supported in multiple selection mode.
+     */
+    controlValueAccessorChangeFn: (value: any) => void;
+    /** onTouch function registered via registerOnTouch (ControlValueAccessor). */
+    onTouched: () => any;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    /**
+     * Sets the model value. Implemented as part of ControlValueAccessor.
+     * @param value Value to be set to the model.
+     */
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => void): void;
+    registerOnTouched(fn: any): void;
+    setDisabledState(isDisabled: boolean): void;
+    /** Dispatch change event with current selection and group value. */
+    emitChangeEvent(): void;
+    /**
+     * Syncs a button toggle's selected state with the model value.
+     * @param toggle Toggle to be synced.
+     * @param select Whether the toggle should be selected.
+     * @param isUserInput Whether the change was a result of a user interaction.
+     */
+    syncButtonToggle(toggle: KbqButtonToggle, select: boolean, isUserInput?: boolean): void;
+    /** Checks whether a button toggle is selected. */
+    isSelected(toggle: KbqButtonToggle): boolean;
+    /** Determines whether a button toggle should be checked on init. */
+    isPrechecked(toggle: KbqButtonToggle): boolean;
+    /** Updates the selection state of the toggles in the group based on a value. */
+    private setSelectionByValue;
+    /** Clears the selected toggles. */
+    private clearSelection;
+    /** Selects a value if there's a toggle that corresponds to it. */
+    private selectValue;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqButtonToggleGroup, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqButtonToggleGroup, "kbq-button-toggle-group", ["kbqButtonToggleGroup"], { "vertical": { "alias": "vertical"; "required": false; }; "value": { "alias": "value"; "required": false; }; "multiple": { "alias": "multiple"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "valueChange": "valueChange"; "change": "change"; }, ["buttonToggles"], never, true, never>;
+}
+/** Single button inside of a toggle group. */
+declare class KbqButtonToggle implements OnInit, AfterContentInit, AfterViewInit, OnDestroy {
+    buttonToggleGroup: KbqButtonToggleGroup;
+    private changeDetectorRef;
+    private focusMonitor;
+    private element;
+    readonly icons: _angular_core.Signal<readonly KbqIcon[]>;
+    /** Whether the button is checked. */
+    get checked(): boolean;
+    set checked(value: boolean);
+    type: ToggleType;
+    iconType: string;
+    readonly mcButton: _angular_core.Signal<KbqButton>;
+    /** KbqButtonToggleGroup reads this to assign its own value. */
+    value: any;
+    /** Tabindex for the toggle. */
+    readonly tabIndex: _angular_core.InputSignal<number | null>;
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /** Event emitted when the group value changes. */
+    readonly change: _angular_core.OutputEmitterRef<KbqButtonToggleChange>;
+    private isSingleSelector;
+    private _checked;
+    private _disabled;
+    ngOnInit(): void;
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Focuses the button. */
+    focus(): void;
+    /** Checks the button toggle due to an interaction with the underlying native button. */
+    onToggleClick(): void;
+    /**
+     * Marks the button toggle as needing checking for change detection.
+     * This method is exposed because the parent button toggle group will directly
+     * update bound properties of the radio button.
+     */
+    markForCheck(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqButtonToggle, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqButtonToggle, "kbq-button-toggle", ["kbqButtonToggle"], { "checked": { "alias": "checked"; "required": false; }; "value": { "alias": "value"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; "isSignal": true; }; "disabled": { "alias": "disabled"; "required": false; }; }, { "change": "change"; }, ["icons"], ["*"], true, never>;
+}
+
+declare class KbqButtonToggleModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqButtonToggleModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqButtonToggleModule, never, [typeof i1.KbqButtonModule, typeof i2.KbqTitleModule, typeof KbqButtonToggleGroup, typeof KbqButtonToggle], [typeof KbqButtonToggleGroup, typeof KbqButtonToggle]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqButtonToggleModule>;
+}
+
+export { KBQ_BUTTON_TOGGLE_GROUP_VALUE_ACCESSOR, KbqButtonToggle, KbqButtonToggleChange, KbqButtonToggleGroup, KbqButtonToggleModule };
+export type { ToggleType };