@koobiq/components 20.4.2 → 21.0.0

package/types/koobiq-components-autocomplete.d.ts

@@ -0,0 +1,443 @@
+import * as _angular_core from '@angular/core';
+import { ElementRef, InjectionToken, AfterContentChecked, AfterContentInit, TemplateRef, QueryList, Provider, AfterViewInit, OnDestroy } from '@angular/core';
+import * as i2 from '@angular/cdk/overlay';
+import { ScrollStrategy, ScrollDispatcher } from '@angular/cdk/overlay';
+import { ControlValueAccessor } from '@angular/forms';
+import * as i1 from '@koobiq/components/core';
+import { KbqOptionParentComponent, ActiveDescendantKeyManager, KbqOption, KbqOptgroup, KbqPanelWidth, KbqPanelMaxWidth, KeyboardNavigationHandler, KbqSiblingPopup, KbqOptionSelectionChange, KbqTextQuery } from '@koobiq/components/core';
+import { Observable } from 'rxjs';
+
+/**
+ * Directive applied to an element to make it usable
+ * as a connection point for an autocomplete panel.
+ */
+declare class KbqAutocompleteOrigin {
+    elementRef: ElementRef<HTMLElement>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteOrigin, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteOrigin, "[kbqAutocompleteOrigin]", ["kbqAutocompleteOrigin"], {}, {}, never, never, true, never>;
+}
+
+/** Footer that is rendered below the autocomplete options panel. */
+declare class KbqAutocompleteFooter {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteFooter, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteFooter, "[kbqAutocompleteFooter], kbq-autocomplete-footer", never, {}, {}, never, never, true, never>;
+}
+declare class KbqAutocompleteSelectedEvent {
+    source: KbqAutocomplete;
+    option: KbqOption;
+    constructor(source: KbqAutocomplete, option: KbqOption);
+}
+/** Default `kbq-autocomplete` options that can be overridden. */
+interface KbqAutocompleteDefaultOptions {
+    /** Whether the first option should be highlighted when an autocomplete panel is opened. */
+    autoActiveFirstOption?: boolean;
+}
+/** Injection token to be used to override the default options for `kbq-autocomplete`. */
+declare const KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS: InjectionToken<KbqAutocompleteDefaultOptions>;
+declare function KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY(): KbqAutocompleteDefaultOptions;
+declare class KbqAutocomplete implements AfterContentChecked, AfterContentInit, KbqOptionParentComponent {
+    private readonly nativeElement;
+    private readonly parentFormField;
+    private readonly destroyRef;
+    private readonly defaultOptions;
+    /** Unique id, rendered as the panel element's `id`. */
+    readonly id: string;
+    /**
+     * Id of the option list, which the trigger's `aria-controls` points at while the panel is open.
+     *
+     * @docs-private
+     */
+    readonly listboxId: string;
+    /**
+     * Manages active item in option list based on key events.
+     *
+     * @docs-private
+     */
+    keyManager: ActiveDescendantKeyManager<KbqOption>;
+    /**
+     * Whether the autocomplete panel should be visible, depending on option length.
+     *
+     * @docs-private
+     */
+    readonly showPanel: _angular_core.WritableSignal<boolean>;
+    readonly template: _angular_core.Signal<TemplateRef<any>>;
+    readonly panel: _angular_core.Signal<ElementRef<any>>;
+    private readonly scrollbarViewport;
+    private readonly optionsQuery;
+    private readonly optionsList;
+    get options(): QueryList<KbqOption>;
+    readonly optionGroups: _angular_core.Signal<readonly KbqOptgroup[]>;
+    /** Function that maps an option's control value to its display value in the trigger. */
+    readonly displayWith: _angular_core.InputSignal<((value: any) => string) | null>;
+    /**
+     * Specify the width of the autocomplete panel. If set to `auto`, the panel will match the width of
+     * its host, but will never be narrower than `panelMinWidth`. Any other CSS sizing value is used as an
+     * exact width, and `panelMinWidth` is not applied. When not set, the panel sizes to its content and is
+     * at least as wide as its host.
+     */
+    readonly panelWidth: _angular_core.InputSignal<KbqPanelWidth | undefined>;
+    /**
+     * Minimum width of the panel in pixels.
+     * When panelWidth is not set, the panel will be at least as wide as its host and no less than panelMinWidth.
+     */
+    readonly panelMinWidth: _angular_core.InputSignalWithTransform<number, unknown>;
+    /**
+     * Maximum width of the panel in pixels. Caps how far the panel grows with its content — it never makes
+     * the panel narrower than its host, and never clamps an explicit `panelWidth`.
+     * When null, the `--kbq-panel-size-width-max` token applies.
+     */
+    readonly panelMaxWidth: _angular_core.InputSignalWithTransform<KbqPanelMaxWidth, unknown>;
+    /** Event that is emitted whenever an option from the list is selected. */
+    readonly optionSelected: _angular_core.OutputEmitterRef<KbqAutocompleteSelectedEvent>;
+    /** Event that is emitted when the autocomplete panel is opened. */
+    readonly opened: _angular_core.OutputEmitterRef<void>;
+    /** Event that is emitted when the autocomplete panel is closed. */
+    readonly closed: _angular_core.OutputEmitterRef<void>;
+    /**
+     * Classes set on the host `kbq-autocomplete` element. They are applied to the panel inside the
+     * overlay container instead, to allow for easy styling.
+     *
+     * Accepts every shape Angular's own `[class]` binding does. The binding value arrives here raw:
+     * Angular converts it to a string before handing it to a styling-shadowing input only when the element
+     * carries a static `class` attribute, which `<kbq-autocomplete>` does not.
+     */
+    readonly hostClass: _angular_core.InputSignalWithTransform<string, string | ReadonlySet<string> | Record<string, boolean> | readonly string[] | null | undefined>;
+    /**
+     * Whether the first option should be highlighted when the autocomplete panel is opened.
+     * Can be configured globally through the `KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS` token.
+     */
+    readonly autoActiveFirstOption: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the panel opens as soon as the trigger receives focus. */
+    readonly openOnFocus: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Whether the trigger has attached the panel overlay. It is not the same thing as the panel being
+     * visible — see `isOpen`.
+     *
+     * @docs-private
+     */
+    readonly attached: _angular_core.WritableSignal<boolean>;
+    /**
+     * Accessible name of the option list: the ids of the elements that name it, or the name itself. The trigger
+     * copies it from its field on attaching the panel, so the list is announced under the field's name.
+     *
+     * @docs-private
+     */
+    readonly listboxName: _angular_core.WritableSignal<{
+        labelledby: string | null;
+        label: string | null;
+    }>;
+    /** Whether the panel is visible: attached by the trigger and holding at least one option. */
+    readonly isOpen: _angular_core.Signal<boolean>;
+    /** Whether the trigger's form field currently holds keyboard focus. */
+    private readonly keyboardFocused;
+    /** @docs-private */
+    protected readonly classList: _angular_core.Signal<Record<string, boolean>>;
+    constructor();
+    ngAfterContentInit(): void;
+    ngAfterContentChecked(): void;
+    /** @docs-private */
+    setScrollTop(scrollTop: number): void;
+    /** @docs-private */
+    getScrollTop(): number;
+    /** @docs-private */
+    setVisibility(): void;
+    /** @docs-private */
+    emitSelectEvent(option: KbqOption): void;
+    /** @docs-private */
+    onKeydown(event: KeyboardEvent): any;
+    private updateFocusClass;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocomplete, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<KbqAutocomplete, "kbq-autocomplete", ["kbqAutocomplete"], { "displayWith": { "alias": "displayWith"; "required": false; "isSignal": true; }; "panelWidth": { "alias": "panelWidth"; "required": false; "isSignal": true; }; "panelMinWidth": { "alias": "panelMinWidth"; "required": false; "isSignal": true; }; "panelMaxWidth": { "alias": "panelMaxWidth"; "required": false; "isSignal": true; }; "hostClass": { "alias": "class"; "required": false; "isSignal": true; }; "autoActiveFirstOption": { "alias": "autoActiveFirstOption"; "required": false; "isSignal": true; }; "openOnFocus": { "alias": "openOnFocus"; "required": false; "isSignal": true; }; }, { "optionSelected": "optionSelected"; "opened": "opened"; "closed": "closed"; }, ["optionsQuery", "optionGroups"], ["*", "[kbqAutocompleteFooter], kbq-autocomplete-footer"], true, never>;
+}
+
+/**
+ * Injection token that determines the scroll handling while the autocomplete panel is open. The root default
+ * keeps the trigger usable outside `KbqAutocompleteModule`'s injector; providing the token anywhere still wins
+ * over it.
+ */
+declare const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY: InjectionToken<() => ScrollStrategy>;
+/** @docs-private */
+declare function KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY(scrollDispatcher: ScrollDispatcher): () => ScrollStrategy;
+/**
+ * Redundant to the root factory of the token; kept so an app can restore the default under its own override (#DS-2196).
+ *
+ * @docs-private
+ */
+declare const KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER: {
+    provide: InjectionToken<() => ScrollStrategy>;
+    deps: (typeof ScrollDispatcher)[];
+    useFactory: typeof KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY;
+};
+/**
+ * Provider that allows the autocomplete to register as a ControlValueAccessor.
+ *
+ * @docs-private
+ */
+declare const KBQ_AUTOCOMPLETE_VALUE_ACCESSOR: Provider;
+declare class KbqAutocompleteTrigger implements AfterViewInit, ControlValueAccessor, OnDestroy, KeyboardNavigationHandler, KbqSiblingPopup {
+    private elementRef;
+    private viewContainerRef;
+    private changeDetectorRef;
+    private overlay;
+    private readonly overlayLayers;
+    private zone;
+    private readonly injector;
+    private dir;
+    private readonly formField;
+    private viewportRuler;
+    protected readonly document: Document;
+    /** The currently active option, coerced to MatOption type. */
+    get activeOption(): KbqOption | null;
+    get panelOpen(): boolean;
+    /** The autocomplete panel to be attached to this trigger. */
+    readonly autocomplete: _angular_core.InputSignal<KbqAutocomplete>;
+    /** Whether the autocomplete panel is currently on screen. Part of the `KbqSiblingPopup` contract. */
+    get isAttached(): boolean;
+    /** The bound panel, replayed to every subscriber: it may be bound, or rendered, after they subscribe. */
+    private readonly autocompleteChanges;
+    /**
+     * Emits `true` when the panel opens and `false` when it closes. Part of the `KbqSiblingPopup`
+     * contract.
+     *
+     * Built on top of the `autocomplete` signal rather than read once: the panel is bound after the consumers
+     * of this stream are created (a tooltip on the same element subscribes in its constructor).
+     */
+    readonly openedChange: Observable<boolean>;
+    readonly optionSelections: Observable<KbqOptionSelectionChange>;
+    /**
+     * Reference relative to which to position the autocomplete panel.
+     * Defaults to the autocomplete trigger element.
+     */
+    readonly connectedTo: _angular_core.InputSignal<KbqAutocompleteOrigin>;
+    /**
+     * `autocomplete` attribute to be set on the input element.
+     *
+     * @docs-private
+     */
+    readonly autocompleteAttribute: _angular_core.InputSignal<string>;
+    /**
+     * Whether the autocomplete is disabled. When disabled, the element will
+     * act as a regular input and the user won't be able to open the panel.
+     */
+    readonly autocompleteDisabled: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Event handler for input blur events.
+     * Determines whether the blur event is triggered outside the specific target
+     *
+     * @returns A boolean indicating if the blur event happened outside the target element
+     */
+    readonly onInputBlur: _angular_core.InputSignal<(event: FocusEvent) => boolean>;
+    /**
+     * Whether the panel opens from the text caret instead of the field: its left edge at the caret, right below the
+     * caret's line, following the caret while it moves. The panel is only as wide as its options — `panelMinWidth`
+     * does not apply there, an explicit `panelWidth` still does.
+     */
+    readonly relativeToCaret: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    /**
+     * Whether the autocomplete completes the text at the caret instead of the whole value. The query is the word
+     * before the caret, or the text after one of `kbqAutocompleteTriggers`; choosing an option replaces the query,
+     * trigger included, with the option. The form value stays the whole text.
+     */
+    readonly textMode: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    /** Strings that start a query in text mode, such as `/` or `@`. When empty, the query is the word before the caret. */
+    readonly queryTriggers: _angular_core.InputSignal<readonly string[]>;
+    /** Shortest query that opens the panel in text mode. Defaults to `1` for a word and to `0` after a trigger. */
+    readonly queryMinLength: _angular_core.InputSignalWithTransform<number | undefined, string | number | null | undefined>;
+    /**
+     * Whether text mode draws the rest of the active option after the caret, to be accepted with `Tab` or `→`. The
+     * field has to be inside `kbq-form-field`.
+     */
+    readonly inlineHint: _angular_core.InputSignalWithTransform<boolean, string | boolean | null | undefined>;
+    /**
+     * Emits the query at the caret in text mode whenever it changes, or `null` once there is none. The query is read
+     * again as the user types or clicks in the field, and as the caret moves while the panel is open. It carries the
+     * trigger it starts with, which tells apart the options to show for each trigger.
+     */
+    readonly queryChange: _angular_core.OutputEmitterRef<KbqTextQuery | null>;
+    /**
+     * Whether the host takes the `combobox` role. ARIA in HTML allows it on a text input only: a textarea and the
+     * other text fields keep their native role.
+     */
+    protected get isCombobox(): boolean;
+    /**
+     * Whether the host exposes the panel to assistive technology: a text field with the autocomplete enabled. Other
+     * fields, such as a number input, keep their native semantics.
+     */
+    protected get exposesPanel(): boolean;
+    private readonly renderer;
+    /** Origin of a caret-anchored panel, measured again whenever the panel is positioned. */
+    private readonly caretOrigin;
+    /** Query at the caret in text mode, or `null` while there is none. */
+    private query;
+    /** Stops the listeners that follow the caret while the panel is open. */
+    private stopCaretListeners;
+    /** Layer that draws the inline hint, created the first time there is a hint to draw. */
+    private textMirror;
+    /** Inline hint drawn after the caret, or `''` while there is none. */
+    private inlineHintText;
+    /** Whether the overlay is attached. A signal: host bindings read it, and it changes outside any listener. */
+    private readonly overlayAttached;
+    private overlayRef;
+    private portal;
+    private scrollStrategy;
+    /** Old value of the native input. Used to work around issues with the `input` event on IE. */
+    private previousValue;
+    /** Strategy that is used to position the panel. */
+    private positionStrategy;
+    /** The subscription for closing actions (some are bound to document). */
+    private closingActionsSubscription;
+    /** Subscription to viewport size changes. */
+    private viewportSubscription;
+    /**
+     * Whether the autocomplete can open the next time it is focused. Used to prevent a focused,
+     * closed autocomplete from being reopened if the user switches to another browser tab and then
+     * comes back.
+     */
+    private canOpenOnNextFocus;
+    /** Stream of keyboard events that can close the panel. */
+    private readonly closeKeyEventStream;
+    private readonly window;
+    constructor();
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /**
+     * Called when the value changes. Needed to properly implement `ControlValueAccessor`.
+     *
+     * @docs-private
+     */
+    onChange: (value: any) => void;
+    /**
+     * Called when the control is blurred. Needed to properly implement `ControlValueAccessor`.
+     *
+     * @docs-private
+     */
+    onTouched: () => void;
+    /** Opens the autocomplete suggestion panel. */
+    open(): void;
+    closePanel(): void;
+    /**
+     * Updates the position of the autocomplete suggestion panel to ensure that it fits all options
+     * within the viewport.
+     */
+    updatePosition(): void;
+    /**
+     * A stream of actions that should close the autocomplete panel, including
+     * when an option is selected, on blur, and when TAB is pressed.
+     */
+    get panelClosingActions(): Observable<KbqOptionSelectionChange | null>;
+    writeValue(value: any): void;
+    registerOnChange(fn: (value: any) => {}): void;
+    registerOnTouched(fn: () => {}): void;
+    setDisabledState(isDisabled: boolean): void;
+    handleKeydown(event: KeyboardEvent): void;
+    handleInput(event: Event): void;
+    /**
+     * Keeps `openOnFocus` from opening the panel the next time the input is focused. Lets a host that
+     * restores focus itself — after clearing, say — do so without the panel springing open.
+     *
+     * @docs-private
+     */
+    suppressOpenOnNextFocus(): void;
+    handleFocus(): void;
+    handleClick($event: Event): void;
+    scrollActiveOptionIntoView(): void;
+    /** Stream of clicks outside of the autocomplete panel. */
+    private getOutsideClickStream;
+    /**
+     * Event handler for when the window is blurred. Needs to be an
+     * arrow function in order to preserve the context.
+     */
+    private windowBlurHandler;
+    /**
+     * This method listens to a stream of panel closing actions and resets the
+     * stream every time the option list changes.
+     */
+    private subscribeToClosingActions;
+    /** Destroys the autocomplete suggestion panel. */
+    private destroyPanel;
+    private setTriggerValue;
+    /**
+     * This method closes the panel, and if a value is specified, also sets the associated
+     * control to that value. It will also mark the control as dirty if this interaction
+     * stemmed from the user.
+     */
+    private setValueAndClose;
+    /** Clear any previous selected option and emit a selection change event for this option */
+    private clearPreviousSelectedOption;
+    private attachOverlay;
+    private getOverlayConfig;
+    private getOverlayPosition;
+    private getConnectedElement;
+    /**
+     * Positions of the panel, below and then above its origin, starting where the origin starts. A panel opened from
+     * the caret may also end at the caret: nothing else holds it on screen when the caret is near the right edge.
+     */
+    private getPanelPositions;
+    /** What the panel is positioned against: the caret when anchored to the caret, otherwise the field. */
+    private getPositionOrigin;
+    /** The caret's line, or the field when the caret cannot be located. */
+    private measureCaretOrigin;
+    private getOverlaySize;
+    private getHostWidth;
+    /**
+     * Name of the option list, taken from what names the field, in the order its own name is computed:
+     * `aria-labelledby`, `aria-label`, its labels, `title`, the placeholder.
+     */
+    private getListboxName;
+    /**
+     * Resets the active item to -1 so arrow events will activate the
+     * correct options, or to 0 if the consumer opted into it.
+     */
+    private resetActiveItem;
+    /**
+     * Re-reads the query at the caret in text mode and closes the panel once there is none. `open` lets a query open
+     * the panel: typing, focusing and clicking do, moving the caret through the text does not.
+     */
+    private refreshQuery;
+    /** Query at the caret, or `null` when there is none — including while text is selected, which is no caret. */
+    private readQuery;
+    /** Stores the query and reports it when it differs from the stored one. */
+    private setQuery;
+    /**
+     * Follows the caret while the panel is open, outside the zone and at most once per attach: text mode re-reads the
+     * query, and a caret-anchored panel is positioned again, which measures the caret anew.
+     */
+    private startFollowingCaret;
+    private stopFollowingCaret;
+    /**
+     * Replaces the query at the caret, trigger included, with the option, and puts the caret right after it. Without a
+     * query — the panel was opened with `open()`, or text is selected — the option goes in at the caret, over the
+     * selection. The query is read from the field again: the text may have changed since it was last read.
+     *
+     * `setRangeText` dispatches no `input`, and `KbqTextarea` grows on that event, so it is dispatched by hand — with
+     * `previousValue` already updated, so that `handleInput` does not take it for the user typing a new query.
+     */
+    private insertOption;
+    /** Text the option puts into the field. */
+    private getOptionText;
+    /**
+     * Whether `event` accepts the inline hint. The hint is checked against the field again first: the text can change
+     * without an input event, and a hint drawn for the old text would write the option into the new one.
+     */
+    private acceptsInlineHint;
+    /** Draws the rest of the active option after the caret, or hides the hint when there is none to draw. */
+    private updateInlineHint;
+    /**
+     * Rest of the active option to draw after the caret, or `''`. A hint is only drawn where accepting it produces the
+     * text drawn: the option has to continue the text it replaces, and nothing may follow the caret on its line, where
+     * the hint would be drawn over it.
+     */
+    private resolveInlineHint;
+    private canOpen;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteTrigger, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<KbqAutocompleteTrigger, "input[kbqAutocomplete], textarea[kbqAutocomplete]", ["kbqAutocompleteTrigger"], { "autocomplete": { "alias": "kbqAutocomplete"; "required": false; "isSignal": true; }; "connectedTo": { "alias": "kbqAutocompleteConnectedTo"; "required": false; "isSignal": true; }; "autocompleteAttribute": { "alias": "autocomplete"; "required": false; "isSignal": true; }; "autocompleteDisabled": { "alias": "kbqAutocompleteDisabled"; "required": false; "isSignal": true; }; "onInputBlur": { "alias": "kbqAutocompleteOnBlur"; "required": false; "isSignal": true; }; "relativeToCaret": { "alias": "kbqAutocompleteRelativeToCaret"; "required": false; "isSignal": true; }; "textMode": { "alias": "kbqAutocompleteTextMode"; "required": false; "isSignal": true; }; "queryTriggers": { "alias": "kbqAutocompleteTriggers"; "required": false; "isSignal": true; }; "queryMinLength": { "alias": "kbqAutocompleteMinLength"; "required": false; "isSignal": true; }; "inlineHint": { "alias": "kbqAutocompleteInlineHint"; "required": false; "isSignal": true; }; }, { "queryChange": "kbqAutocompleteQueryChange"; }, never, never, true, never>;
+}
+
+declare class KbqAutocompleteModule {
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<KbqAutocompleteModule, never>;
+    static ɵmod: _angular_core.ɵɵNgModuleDeclaration<KbqAutocompleteModule, never, [typeof i1.KbqOptionModule, typeof i2.OverlayModule, typeof KbqAutocomplete, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter], [typeof KbqAutocomplete, typeof i1.KbqOptionModule, typeof KbqAutocompleteTrigger, typeof KbqAutocompleteOrigin, typeof KbqAutocompleteFooter]>;
+    static ɵinj: _angular_core.ɵɵInjectorDeclaration<KbqAutocompleteModule>;
+}
+
+export { KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS, KBQ_AUTOCOMPLETE_DEFAULT_OPTIONS_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY, KBQ_AUTOCOMPLETE_SCROLL_STRATEGY_FACTORY_PROVIDER, KBQ_AUTOCOMPLETE_VALUE_ACCESSOR, KbqAutocomplete, KbqAutocompleteFooter, KbqAutocompleteModule, KbqAutocompleteOrigin, KbqAutocompleteSelectedEvent, KbqAutocompleteTrigger };
+export type { KbqAutocompleteDefaultOptions };

package/{badge/index.d.ts → types/koobiq-components-badge.d.ts}

@@ -1,8 +1,8 @@
 import * as i0 from '@angular/core';
-import { KbqIconItem } from '@koobiq/components/icon';
 import * as i1 from '@angular/cdk/a11y';
 import * as i2 from '@angular/cdk/platform';
 
+/** Colors supported by the badge. */
 declare enum KbqBadgeColors {
     FadeContrast = "fade-contrast",
     FadeTheme = "fade-theme",
@@ -16,35 +16,40 @@ declare enum KbqBadgeColors {
     Error = "error",
     Disabled = "disabled"
 }
+/** Directive that marks the caption part of a badge. */
 declare class KbqBadgeCaption {
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCaption, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCaption, "[kbq-badge-caption]", never, {}, {}, never, never, true, never>;
 }
-declare const leftIconClassName = "kbq-icon_left";
-declare const rightIconClassName = "kbq-icon_right";
-declare const badgeLeftIconClassName = "kbq-badge-icon_left";
-declare const badgeRightIconClassName = "kbq-badge-icon_right";
+/**
+ * Applies the icon spacing modifiers to the badge and to the icons projected into it.
+ *
+ * @docs-private
+ */
 declare class KbqBadgeCssStyler {
-    private renderer;
-    private cdr;
-    readonly icons: i0.Signal<readonly any[]>;
-    nativeElement: HTMLElement;
-    isIconButton: boolean;
+    private readonly renderer;
+    private readonly nativeElement;
+    private readonly icons;
     constructor();
-    /** @docs-private */
-    updateClassModifierForIcons(): void;
+    private updateClassModifierForIcons;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadgeCssStyler, never>;
     static ɵdir: i0.ɵɵDirectiveDeclaration<KbqBadgeCssStyler, "kbq-badge", never, {}, {}, ["icons"], never, true, never>;
 }
+/** Component used to highlight the status, count or another important characteristic of an object. */
 declare class KbqBadge {
-    readonly iconItem: i0.Signal<KbqIconItem | undefined>;
-    readonly compact: i0.InputSignal<boolean>;
-    readonly outline: i0.InputSignal<boolean>;
-    get badgeColor(): string;
-    set badgeColor(value: string | KbqBadgeColors);
-    private _badgeColor;
+    /** Whether the badge uses the compact size. */
+    readonly compact: i0.InputSignalWithTransform<boolean, unknown>;
+    /** Whether the badge is outlined instead of filled. */
+    readonly outline: i0.InputSignalWithTransform<boolean, unknown>;
+    /**
+     * Color of the badge. An empty, `null` or `undefined` value falls back to the default, so a read of the
+     * signal reports the color the badge actually renders in. Defaults to `'fade-contrast'`.
+     */
+    readonly badgeColor: i0.InputSignalWithTransform<string, string | null | undefined>;
+    /** @docs-private */
+    protected readonly badgeColorClass: i0.Signal<string>;
     static ɵfac: i0.ɵɵFactoryDeclaration<KbqBadge, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBadge, "kbq-badge", never, { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; }; }, {}, ["iconItem"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<KbqBadge, "kbq-badge", never, { "compact": { "alias": "compact"; "required": false; "isSignal": true; }; "outline": { "alias": "outline"; "required": false; "isSignal": true; }; "badgeColor": { "alias": "badgeColor"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
 declare class KbqBadgeModule {
@@ -53,4 +58,4 @@ declare class KbqBadgeModule {
     static ɵinj: i0.ɵɵInjectorDeclaration<KbqBadgeModule>;
 }
 
-export { KbqBadge, KbqBadgeCaption, KbqBadgeColors, KbqBadgeCssStyler, KbqBadgeModule, badgeLeftIconClassName, badgeRightIconClassName, leftIconClassName, rightIconClassName };
+export { KbqBadge, KbqBadgeCaption, KbqBadgeColors, KbqBadgeCssStyler, KbqBadgeModule };