@cute-widgets/base 20.0.1

package/chips/index.d.ts

@@ -0,0 +1,963 @@
+import * as i0 from '@angular/core';
+import { ElementRef, OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy, ChangeDetectorRef, NgZone, QueryList, EventEmitter, OnChanges } from '@angular/core';
+import { Subject, Observable } from 'rxjs';
+import { CuteFocusableControl } from '@cute-widgets/base/abstract';
+import { ControlValueAccessor, NgControl } from '@angular/forms';
+import { ErrorStateMatcher } from '@cute-widgets/base/core/error';
+import { CuteFormFieldControl } from '@cute-widgets/base/form-field';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import * as i1 from '@angular/common';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+
+/**
+ * Section within a chip.
+ * @docs-private
+ */
+declare class CuteChipAction {
+    _elementRef: ElementRef<HTMLElement>;
+    protected _parentChip: {
+        _handlePrimaryActionInteraction(): void;
+        remove(): void;
+        disabled: boolean;
+        _edit(): void;
+        _isEditing?: boolean;
+    };
+    /** Whether the action is interactive. */
+    isInteractive: boolean;
+    /** Whether this is the primary action in the chip. */
+    _isPrimary: boolean;
+    /** Whether this is the leading action in the chip. */
+    _isLeading: boolean;
+    /** Whether the action is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Tab index of the action. */
+    tabIndex: number;
+    /**
+     * Private API to allow focusing this chip when it is disabled.
+     */
+    _allowFocusWhenDisabled: boolean;
+    /**
+     * Determine the value of the disabled attribute for this chip action.
+     */
+    protected _getDisabledAttribute(): string | null;
+    /**
+     * Determine the value of the tabindex attribute for this chip action.
+     */
+    protected _getTabindex(): string | null;
+    constructor(...args: unknown[]);
+    focus(): void;
+    protected _handleClick(event: MouseEvent): void;
+    protected _handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipAction, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteChipAction, "[cuteChipAction]", never, { "isInteractive": { "alias": "isInteractive"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; "_allowFocusWhenDisabled": { "alias": "_allowFocusWhenDisabled"; "required": false; }; }, {}, never, never, true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+
+/** Avatar image within a chip. */
+declare class CuteChipAvatar {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipAvatar, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteChipAvatar, "cute-chip-avatar, [cuteChipAvatar]", never, {}, {}, never, never, true, never>;
+}
+/** Non-interactive trailing icon in a chip. */
+declare class CuteChipTrailingIcon extends CuteChipAction {
+    /**
+     * MDC considers all trailing actions as a remove icon,
+     * but we support non-interactive trailing icons.
+     */
+    isInteractive: boolean;
+    _isPrimary: boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipTrailingIcon, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteChipTrailingIcon, "cute-chip-trailing-icon, [cuteChipTrailingIcon]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to edit the parent chip when the leading action icon is clicked or
+ * when the ENTER key is pressed on it.
+ *
+ * Recommended for use with the Material Design "edit" icon
+ * available at https://material.io/icons/#ic_edit.
+ *
+ * Example:
+ *
+ * ```
+ * <cute-chip>
+ *   <button cuteChipEdit aria-label="Edit">
+ *     <cute-icon>edit</cute-icon>
+ *   </button>
+ * </cute-chip>
+ * ```
+ */
+declare class CuteChipEdit extends CuteChipAction {
+    _isPrimary: boolean;
+    _isLeading: boolean;
+    _handleClick(event: MouseEvent): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipEdit, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteChipEdit, "[cuteChipEdit]", never, {}, {}, never, never, true, never>;
+}
+/**
+ * Directive to remove the parent chip when the trailing icon is clicked or
+ * when the ENTER key is pressed on it.
+ *
+ * Recommended for use with the Material Design "cancel" icon
+ * available at https://material.io/icons/#ic_cancel.
+ *
+ * Example:
+ *
+ * ```
+ * <cute-chip>
+ *   <cute-icon cuteChipRemove>cancel</cute-icon>
+ * </cute-chip>
+ * ```
+ */
+declare class CuteChipRemove extends CuteChipAction {
+    _isPrimary: boolean;
+    _handleClick(event: MouseEvent): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipRemove, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteChipRemove, "[cuteChipRemove]", never, {}, {}, never, never, true, never>;
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+
+/** Represents an event fired on an individual `mat-chip`. */
+interface CuteChipEvent {
+    /** The chip the event was fired on. */
+    chip: CuteChip;
+}
+/**
+ * A Chip base component used inside the `CuteChipSet` component.
+ * Extended by `CuteChipOption` and `CuteChipRow` for different interaction patterns.
+ */
+declare class CuteChip extends CuteFocusableControl implements OnInit, AfterViewInit, AfterContentInit, DoCheck, OnDestroy {
+    _changeDetectorRef: ChangeDetectorRef;
+    protected _ngZone: NgZone;
+    private readonly _tagName;
+    protected _document: Document;
+    /** Emits when the chip is focused. */
+    readonly _onFocus: Subject<CuteChipEvent>;
+    /** Emits when the chip is blurred. */
+    readonly _onBlur: Subject<CuteChipEvent>;
+    /** Whether this chip is a basic (unstyled) chip. */
+    protected _isBasicChip: boolean | undefined;
+    protected _isStandardStaticChip: boolean | undefined;
+    /** Whether the chip has focus. */
+    private _hasFocusInternal;
+    /** Whether moving focus into the chip is pending. */
+    private _pendingFocus;
+    /** Subscription to changes in the chip's actions. */
+    private _actionChanges;
+    /** Whether animations for the chip are enabled. */
+    protected _animationsDisabled: boolean;
+    /** All avatars present in the chip. */
+    protected _allLeadingIcons: QueryList<CuteChipAvatar>;
+    /** All trailing icons present in the chip. */
+    protected _allTrailingIcons: QueryList<CuteChipTrailingIcon>;
+    /** All edit icons present in the chip. */
+    protected _allEditIcons: QueryList<CuteChipEdit>;
+    /** All remove icons present in the chip. */
+    protected _allRemoveIcons: QueryList<CuteChipRemove>;
+    _hasFocus(): boolean;
+    /** A unique id for the chip. If none is supplied, it will be auto-generated. */
+    protected generateId(): string;
+    /** The `id` of a span that contains this chip's aria description. */
+    protected _ariaDescriptionId: string;
+    /** Whether the chip list is disabled. */
+    _chipListDisabled: boolean;
+    /** Whether the chip was focused when it was removed. */
+    _hadFocusOnRemove: boolean;
+    private _textElement;
+    /**
+     * The value of the chip. Defaults to the content inside
+     * the `cute-chip-action-label` element.
+     */
+    get value(): any;
+    set value(value: any);
+    protected _value: any;
+    /**
+     * Determines whether the chip displays the remove styling and emits (removed) events.
+     */
+    removable: boolean;
+    /**
+     * Colors the chip for emphasis as if it were selected.
+     */
+    highlighted: boolean;
+    /** Whether the ripple effect is disabled or not. */
+    disableRipple: boolean;
+    /** Emitted when a chip is to be removed. */
+    readonly removed: EventEmitter<CuteChipEvent>;
+    /** Emitted when the chip is destroyed. */
+    readonly destroyed: EventEmitter<CuteChipEvent>;
+    /** The unstyled chip selector for this component. */
+    protected basicChipAttrName: string;
+    /** The chip's leading icon. */
+    leadingIcon: CuteChipAvatar | undefined;
+    /** The chip's leading edit icon. */
+    editIcon: CuteChipEdit | undefined;
+    /** The chip's trailing icon. */
+    trailingIcon: CuteChipTrailingIcon | undefined;
+    /** The chip's trailing remove icon. */
+    removeIcon: CuteChipRemove | undefined;
+    /** Action receiving the primary set of user interactions. */
+    primaryAction: CuteChipAction | undefined;
+    /**
+     * Handles the lazy creation of the CuteChip ripple.
+     * Used to improve initial load time of large applications.
+     */
+    getDisabledState(): boolean;
+    private _injector;
+    constructor(...args: unknown[]);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngAfterContentInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    /**
+     * Allows for programmatic removal of the chip.
+     *
+     * Informs any listeners of the removal request. Does not remove the chip from the DOM.
+     */
+    remove(): void;
+    /** Whether the ripple should be disabled. */
+    /** Returns whether the chip has a trailing icon. */
+    _hasTrailingIcon(): boolean;
+    /** Handles keyboard events on the chip. */
+    _handleKeydown(event: KeyboardEvent): void;
+    /** Allows for programmatic focusing of the chip. */
+    focus(): void;
+    /** Gets the action that contains a specific target node. */
+    _getSourceAction(target: Node): CuteChipAction | undefined;
+    /** Gets all the actions within the chip. */
+    _getActions(): CuteChipAction[];
+    /** Handles interactions with the primary action of the chip. */
+    protected _handlePrimaryActionInteraction(): void;
+    /** Handles interactions with the edit action of the chip. */
+    _edit(event: Event): void;
+    /** Gets the tabindex of the chip. */
+    protected _getTabIndex(): number | null | undefined;
+    /** Starts the focus monitoring process on the chip. */
+    private _monitorFocus;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChip, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteChip, "cute-basic-chip, [cute-basic-chip], cute-chip, [cute-chip]", ["cuteChip"], { "value": { "alias": "value"; "required": false; }; "removable": { "alias": "removable"; "required": false; }; "highlighted": { "alias": "highlighted"; "required": false; }; "disableRipple": { "alias": "disableRipple"; "required": false; }; }, { "removed": "removed"; "destroyed": "destroyed"; }, ["leadingIcon", "editIcon", "trailingIcon", "removeIcon", "_allLeadingIcons", "_allTrailingIcons", "_allEditIcons", "_allRemoveIcons"], ["cute-avatar, cute-chip-avatar, [cuteChipAvatar]", "*", "cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]"], true, never>;
+    static ngAcceptInputType_removable: unknown;
+    static ngAcceptInputType_highlighted: unknown;
+    static ngAcceptInputType_disableRipple: unknown;
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/** Interface for a text control that is used to drive interaction with a cute-chip-list. */
+interface CuteChipTextControl {
+    /** Unique identifier for the text control. */
+    id: string;
+    /** The text control's placeholder text. */
+    placeholder: string;
+    /** Whether the text control has browser focus. */
+    focused: boolean;
+    /** Whether the text control is empty. */
+    empty: boolean;
+    /** Focuses the text control. */
+    focus(): void;
+    /** Sets the list of ids the input is described by. */
+    setDescribedByIds(ids: string[]): void;
+}
+
+/**
+ * A directive that makes a <span> editable and exposes functions to modify and retrieve the
+ * element's contents.
+ */
+declare class CuteChipEditInput {
+    private readonly _elementRef;
+    private readonly _document;
+    constructor(...args: unknown[]);
+    initialize(initialValue: string): void;
+    getNativeElement(): HTMLElement;
+    setValue(value: string): void;
+    getValue(): string;
+    private _moveCursorToEndOfInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipEditInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteChipEditInput, "span[cuteChipEditInput]", never, {}, {}, never, never, true, never>;
+}
+
+/** Represents an event fired on an individual `cute-chip` when it is edited. */
+interface CuteChipEditedEvent extends CuteChipEvent {
+    /** The final edit value. */
+    value: string;
+}
+/**
+ * An extension of the CuteChip component used with CuteChipGrid and
+ * the cuteChipInputFor directive.
+ */
+declare class CuteChipRow extends CuteChip implements AfterViewInit {
+    protected basicChipAttrName: string;
+    /**
+     * The editing action has to be triggered in a timeout. While we're waiting on it, a blur
+     * event might occur which will interrupt the editing. This flag is used to avoid interruptions
+     * while the editing action is being initialized.
+     */
+    private _editStartPending;
+    editable: boolean;
+    /** Emitted when the chip is edited. */
+    readonly edited: EventEmitter<CuteChipEditedEvent>;
+    /** The default chip edit input that is used if none is projected into this chip row. */
+    defaultEditInput?: CuteChipEditInput;
+    /** The projected chip edit input. */
+    contentEditInput?: CuteChipEditInput;
+    _isEditing: boolean;
+    constructor(...args: unknown[]);
+    _hasTrailingIcon(): boolean;
+    /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
+    _handleFocus(): void;
+    _handleKeydown(event: KeyboardEvent): void;
+    _handleDoubleclick(event: MouseEvent): void;
+    private _startEditing;
+    private _onEditFinish;
+    /**
+     * Gets the projected chip edit input, or the default input if none is projected in. One of these
+     * two values is guaranteed to be defined.
+     */
+    private _getEditInput;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipRow, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteChipRow, "cute-chip-row, [cute-chip-row], cute-basic-chip-row, [cute-basic-chip-row]", never, { "editable": { "alias": "editable"; "required": false; }; }, { "edited": "edited"; }, ["contentEditInput"], ["cute-avatar, cute-chip-avatar, [cuteChipAvatar]", "[cuteChipEditInput]", "*", "cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]"], true, never>;
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+
+/**
+ * Basic container component for the `CuteChip` component.
+ * Extended by `CuteChipListbox` and `CuteChipGrid` for different interaction patterns.
+ */
+declare class CuteChipSet implements AfterViewInit, OnDestroy {
+    protected _elementRef: ElementRef<HTMLElement>;
+    protected _changeDetectorRef: ChangeDetectorRef;
+    private _dir;
+    /** Index of the last destroyed chip that had focus. */
+    private _lastDestroyedFocusedChipIndex;
+    /** Used to manage focus within the chip list. */
+    protected _keyManager: FocusKeyManager<CuteChipAction> | undefined;
+    /** Subject that emits when the component has been destroyed. */
+    protected _destroyed: Subject<void>;
+    /** Role to use if it hasn't been overwritten by the user. */
+    protected _defaultRole: string;
+    /** Combined stream of all the child chips' focus events. */
+    get chipFocusChanges(): Observable<CuteChipEvent>;
+    /** Combined stream of all the child chips' destroy events. */
+    get chipDestroyedChanges(): Observable<CuteChipEvent>;
+    /** Combined stream of all the child chips' remove events. */
+    get chipRemovedChanges(): Observable<CuteChipEvent>;
+    /** Whether the chip set is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    protected _disabled: boolean;
+    /** Whether the chip list contains chips or not. */
+    get empty(): boolean;
+    /** The ARIA role applied to the chip set. */
+    get role(): string | null;
+    set role(value: string | null);
+    private _explicitRole;
+    /** Tabindex of the chip set. */
+    tabIndex: number;
+    /** Whether any of the chips inside this chip-set has focus. */
+    get focused(): boolean;
+    /** The chips that are part of this chip set. */
+    _chips: QueryList<CuteChip> | undefined;
+    /** Flat list of all the actions contained within the chips. */
+    _chipActions: QueryList<CuteChipAction>;
+    constructor(...args: unknown[]);
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    /** Checks whether any of the chips is focused. */
+    protected _hasFocusedChip(): boolean;
+    /** Syncs the chip-set's state with the individual chips. */
+    protected _syncChipsState(): void;
+    /** The dummy method for subclasses to override. Base chip set cannot be focused. */
+    focus(): void;
+    /** Handles keyboard events on the chip set. */
+    protected _handleKeydown(event: KeyboardEvent): void;
+    /**
+     * Utility to ensure all indexes are valid.
+     *
+     * @param index The index to be checked.
+     * @returns True if the index is valid for our list of chips.
+     */
+    protected _isValidIndex(index: number): boolean;
+    /**
+     * Removes the `tabindex` from the chip set and resets it back afterward, allowing the
+     * user to tab out of it. This prevents the set from capturing focus and redirecting
+     * it back to the first chip, creating a focus trap if its user tries to tab away.
+     */
+    protected _allowFocusEscape(): void;
+    /**
+     * Gets a stream of events from all the chips within the set.
+     * The stream will automatically incorporate any newly added chips.
+     */
+    protected _getChipStream<T, C extends CuteChip = CuteChip>(mappingFunction: (chip: C) => Observable<T>): Observable<T>;
+    /** Checks whether an event comes from inside a chip element. */
+    protected _originatesFromChip(event: Event): boolean;
+    /** Sets up the chip set's focus management logic. */
+    private _setUpFocusManagement;
+    /**
+     * Determines if key manager should avoid putting a given chip action in the tab index. Skip
+     * non-interactive and disabled actions since the user can't do anything with them.
+     */
+    protected _skipPredicate(action: CuteChipAction): boolean;
+    /** Listens to changes in the chip set and syncs up the state of the individual chips. */
+    private _trackChipSetChanges;
+    /** Starts tracking the destroyed chips to capture the focused one. */
+    private _trackDestroyedFocusedChip;
+    /**
+     * Finds the next appropriate chip to move focus to
+     * if the currently focused chip is destroyed.
+     */
+    private _redirectDestroyedChipFocus;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipSet, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteChipSet, "cute-chip-set", never, { "disabled": { "alias": "disabled"; "required": false; }; "role": { "alias": "role"; "required": false; }; "tabIndex": { "alias": "tabIndex"; "required": false; }; }, {}, ["_chips"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_tabIndex: unknown;
+}
+
+/** Change event object that is emitted when the chip grid value has changed. */
+declare class CuteChipGridChange {
+    /** Chip grid that emitted the event. */
+    source: CuteChipGrid;
+    /** Value of the chip grid when the event was emitted. */
+    value: any;
+    constructor(
+    /** Chip grid that emitted the event. */
+    source: CuteChipGrid, 
+    /** Value of the chip grid when the event was emitted. */
+    value: any);
+}
+/**
+ * An extension of the CuteChipSet component used with CuteChipRow chips and
+ * the cuteChipInputFor directive.
+ */
+declare class CuteChipGrid extends CuteChipSet implements AfterContentInit, AfterViewInit, ControlValueAccessor, DoCheck, CuteFormFieldControl<any>, OnDestroy {
+    ngControl: NgControl;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    readonly controlType: string;
+    /** The chip input to add more chips */
+    protected _chipInput: CuteChipTextControl | undefined;
+    protected _defaultRole: string;
+    private _errorStateTracker;
+    /**
+     * List of element ids to propagate to the chipInput's `aria-describedby` attribute.
+     */
+    private _ariaDescribedbyIds;
+    /**
+     * Function when touched. Set as part of ControlValueAccessor implementation.
+     * @docs-private
+     */
+    _onTouched: () => void;
+    /**
+     * Function when changed. Set as part of ControlValueAccessor implementation.
+     * @docs-private
+     */
+    _onChange: (value: any) => void;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get id(): string;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get empty(): boolean;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get placeholder(): string;
+    set placeholder(value: string);
+    protected _placeholder: string | undefined;
+    /** Whether any chips or the `cuteChipInput` inside this <chip-grid> has focus. */
+    get focused(): boolean;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get required(): boolean;
+    set required(value: boolean);
+    protected _required: boolean | undefined;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get shouldLabelFloat(): boolean;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get value(): any;
+    set value(value: any);
+    protected _value: any[];
+    /** An object used to control when error messages are shown. */
+    get errorStateMatcher(): ErrorStateMatcher;
+    set errorStateMatcher(value: ErrorStateMatcher);
+    /** Combined stream of all of the child chips' blur events. */
+    get chipBlurChanges(): Observable<CuteChipEvent>;
+    /** Emits when the user has changed the chip grid value. */
+    readonly change: EventEmitter<CuteChipGridChange>;
+    /**
+     * Emits whenever the raw value of the <chip-grid> changes. This is here primarily
+     * to facilitate the two-way binding for the `value` input.
+     */
+    readonly valueChange: EventEmitter<any>;
+    _chips: QueryList<CuteChipRow>;
+    /**
+     * Emits whenever the component state changes and should cause the parent
+     * form-field to update. Implemented as part of `CuteFormFieldControl`.
+     */
+    readonly stateChanges: Subject<void>;
+    /** Whether the chip grid is in an error state. */
+    get errorState(): boolean;
+    set errorState(value: boolean);
+    get controlElementRef(): ElementRef;
+    constructor(...args: unknown[]);
+    ngAfterContentInit(): void;
+    ngAfterViewInit(): void;
+    ngDoCheck(): void;
+    ngOnDestroy(): void;
+    /** Associates an HTML input element with this chip grid. */
+    registerInput(inputElement: CuteChipTextControl): void;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    onContainerClick(event: MouseEvent): void;
+    _toggleFocusedStyle(force?: boolean): void;
+    /**
+     * Focuses the first chip in this chip grid, or the associated input when there
+     * are no eligible chips.
+     */
+    focus(): void;
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    setDescribedByIds(ids: string[]): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    writeValue(value: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /** Refreshes the error state of the chip grid. */
+    updateErrorState(): void;
+    /** When blurred, mark the field as touched when focus moved outside the chip grid. */
+    _blur(): void;
+    /**
+     * Removes the `tabindex` from the chip grid and resets it back afterward, allowing the
+     * user to tab out of it. This prevents the grid from capturing focus and redirecting
+     * it back to the first chip, creating a focus trap if its user tries to tab away.
+     */
+    protected _allowFocusEscape(): void;
+    /** Handles custom keyboard events. */
+    _handleKeydown(event: KeyboardEvent): void;
+    _focusLastChip(): void;
+    /** Emits change event to set the model value. */
+    private _propagateChanges;
+    /** Mark the field as touched */
+    private _markAsTouched;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipGrid, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteChipGrid, "cute-chip-grid", never, { "disabled": { "alias": "disabled"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "required": { "alias": "required"; "required": false; }; "value": { "alias": "value"; "required": false; }; "errorStateMatcher": { "alias": "errorStateMatcher"; "required": false; }; }, { "change": "change"; "valueChange": "valueChange"; }, ["_chips"], ["*"], true, never>;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_required: unknown;
+}
+
+/** Represents an input event on a `matChipInput`. */
+interface CuteChipInputEvent {
+    /**
+     * The native `<input>` element that the event is being fired for.
+     * @deprecated Use `CuteChipInputEvent#chipInput.inputElement` instead.
+     * @breaking-change 13.0.0 This property will be removed.
+     */
+    input: HTMLInputElement;
+    /** The value of the input. */
+    value: string;
+    /** Reference to the chip input that emitted the event. */
+    chipInput: CuteChipInput;
+}
+/**
+ * Directive that adds chip-specific behaviors to an input element inside `<cute-form-field>`.
+ * May be placed inside or outside a `<cute-chip-grid>`.
+ */
+declare class CuteChipInput implements CuteChipTextControl, OnChanges, OnDestroy {
+    protected _elementRef: ElementRef<HTMLInputElement>;
+    /** Used to prevent focus moving to chips while user is holding backspace */
+    private _focusLastChipOnBackspace;
+    /** Whether the control is focused. */
+    focused: boolean;
+    /** Register input for a chip list */
+    get chipGrid(): CuteChipGrid | undefined;
+    set chipGrid(value: CuteChipGrid);
+    private _chipGrid;
+    /**
+     * Whether the `chipEnd` event will be emitted when the input is blurred.
+     */
+    addOnBlur: boolean;
+    /**
+     * The list of key codes that will trigger a `chipEnd` event.
+     *
+     * Defaults to `[ENTER]`.
+     */
+    separatorKeyCodes: readonly number[] | ReadonlySet<number>;
+    /** Emitted when a chip is to be added. */
+    readonly chipEnd: EventEmitter<CuteChipInputEvent>;
+    /** The input's placeholder text. */
+    placeholder: string;
+    /** Unique id for the input. */
+    id: string;
+    /** Whether the input is disabled. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    private _disabled;
+    /** Whether the input is readonly. */
+    readonly: boolean;
+    /** Whether the input should remain interactive when it is disabled. */
+    disabledInteractive: boolean;
+    /** Whether the input is empty. */
+    get empty(): boolean;
+    /** The native input element to which this directive is attached. */
+    readonly inputElement: HTMLInputElement;
+    constructor(...args: unknown[]);
+    ngOnChanges(): void;
+    ngOnDestroy(): void;
+    /** Utility method to make host definition/tests more clear. */
+    _keydown(event: KeyboardEvent): void;
+    /** Checks to see if the blur should emit the (chipEnd) event. */
+    _blur(): void;
+    _focus(): void;
+    /** Checks to see if the (chipEnd) event needs to be emitted. */
+    _emitChipEnd(event?: KeyboardEvent): void;
+    _onInput(): void;
+    /** Focuses the input. */
+    focus(): void;
+    /** Clears the input */
+    clear(): void;
+    setDescribedByIds(ids: string[]): void;
+    /** Checks whether a keycode is one of the configured separators. */
+    private _isSeparatorKey;
+    /** Gets the value to set on the `readonly` attribute. */
+    protected _getReadonlyAttribute(): string | null;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipInput, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<CuteChipInput, "input[cuteChipInputFor]", ["cuteChipInput", "cuteChipInputFor"], { "chipGrid": { "alias": "cuteChipInputFor"; "required": false; }; "addOnBlur": { "alias": "cuteChipInputAddOnBlur"; "required": false; }; "separatorKeyCodes": { "alias": "cuteChipInputSeparatorKeyCodes"; "required": false; }; "placeholder": { "alias": "placeholder"; "required": false; }; "id": { "alias": "id"; "required": false; }; "disabled": { "alias": "disabled"; "required": false; }; "readonly": { "alias": "readonly"; "required": false; }; "disabledInteractive": { "alias": "cuteChipInputDisabledInteractive"; "required": false; }; }, { "chipEnd": "cuteChipInputTokenEnd"; }, never, never, true, never>;
+    static ngAcceptInputType_addOnBlur: unknown;
+    static ngAcceptInputType_disabled: unknown;
+    static ngAcceptInputType_readonly: unknown;
+    static ngAcceptInputType_disabledInteractive: unknown;
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+
+/** Event object emitted by CuteChipOption when selected or deselected. */
+declare class CuteChipSelectionChange {
+    /** Reference to the chip that emitted the event. */
+    source: CuteChipOption;
+    /** Whether the chip that emitted the event is selected. */
+    selected: boolean;
+    /** Whether the selection change was a result of a user interaction. */
+    isUserInput: boolean;
+    constructor(
+    /** Reference to the chip that emitted the event. */
+    source: CuteChipOption, 
+    /** Whether the chip that emitted the event is selected. */
+    selected: boolean, 
+    /** Whether the selection change was a result of a user interaction. */
+    isUserInput?: boolean);
+}
+/**
+ * An extension of the CuteChip component that supports chip selection. Used with CuteChipListbox.
+ *
+ * Unlike other chips, the user can focus on disabled chip options inside a CuteChipListbox. The
+ * user cannot click disabled chips.
+ */
+declare class CuteChipOption extends CuteChip implements OnInit {
+    /** Default chip options. */
+    private _defaultOptions;
+    /** Whether the chip list is selectable. */
+    chipListSelectable: boolean;
+    /** Whether the chip list is in multi-selection mode. */
+    _chipListMultiple: boolean;
+    /** Whether the chip list hides single-selection indicator. */
+    _chipListHideSingleSelectionIndicator: boolean;
+    /**
+     * Whether the chip is selectable.
+     *
+     * When a chip is not selectable, changes to its selected state are always
+     * ignored. By default, an option chip is selectable, and it becomes
+     * non-selectable if its parent chip list is not selectable.
+     */
+    get selectable(): boolean;
+    set selectable(value: boolean);
+    protected _selectable: boolean;
+    /** Whether the chip is selected. */
+    get selected(): boolean;
+    set selected(value: boolean);
+    private _selected;
+    /**
+     * The ARIA selected applied to the chip. Conforms to WAI ARIA best practices for listbox
+     * interaction patterns.
+     *
+     * From [WAI ARIA Listbox authoring practices guide](
+     * https://www.w3.org/WAI/ARIA/apg/patterns/listbox/):
+     *  "If any options are selected, each selected option has either aria-selected or aria-checked
+     *  set to true. All options that are selectable but not selected have either aria-selected or
+     *  aria-checked set to false."
+     *
+     * Set `aria-selected="false"` on not-selected listbox options that are selectable to fix
+     * VoiceOver reading every option as "selected" (#25736).
+     */
+    get ariaSelected(): string | null;
+    /** The unstyled chip selector for this component. */
+    protected basicChipAttrName: string;
+    /** Emitted when the chip is selected or deselected. */
+    readonly selectionChange: EventEmitter<CuteChipSelectionChange>;
+    ngOnInit(): void;
+    /** Selects the chip. */
+    select(): void;
+    /** Deselects the chip. */
+    deselect(): void;
+    /** Selects this chip and emits userInputSelection event */
+    selectViaInteraction(): void;
+    /** Toggles the current selected state of this chip. */
+    toggleSelected(isUserInput?: boolean): boolean;
+    _handlePrimaryActionInteraction(): void;
+    protected _hasLeadingGraphic(): boolean;
+    _setSelectedState(isSelected: boolean, isUserInput: boolean, emitEvent: boolean): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipOption, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteChipOption, "cute-basic-chip-option, [cute-basic-chip-option], cute-chip-option, [cute-chip-option]", never, { "selectable": { "alias": "selectable"; "required": false; }; "selected": { "alias": "selected"; "required": false; }; }, { "selectionChange": "selectionChange"; }, never, ["cute-avatar, cute-chip-avatar, [cuteChipAvatar]", "*", "cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]"], true, never>;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_selected: unknown;
+}
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+
+/** Change event object that is emitted when the chip listbox value has changed. */
+declare class CuteChipListboxChange {
+    /** Chip listbox that emitted the event. */
+    source: CuteChipListbox;
+    /** Value of the chip listbox when the event was emitted. */
+    value: any;
+    constructor(
+    /** Chip listbox that emitted the event. */
+    source: CuteChipListbox, 
+    /** Value of the chip listbox when the event was emitted. */
+    value: any);
+}
+/**
+ * Provider Expression that allows cute-chip-listbox to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+declare const CUTE_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any;
+/**
+ * An extension of the CuteChipSet component that supports chip selection.
+ * Used with CuteChipOption chips.
+ */
+declare class CuteChipListbox extends CuteChipSet implements AfterContentInit, OnDestroy, ControlValueAccessor {
+    /**
+     * Function when touched. Set as part of ControlValueAccessor implementation.
+     * @docs-private
+     */
+    _onTouched: () => void;
+    /**
+     * Function when changed. Set as part of ControlValueAccessor implementation.
+     * @docs-private
+     */
+    _onChange: (value: any) => void;
+    protected _defaultRole: string;
+    /** Value that was assigned before the listbox was initialized. */
+    private _pendingInitialValue;
+    /** Default chip options. */
+    private _defaultOptions;
+    /** Whether the user should be allowed to select multiple chips. */
+    get multiple(): boolean;
+    set multiple(value: boolean);
+    private _multiple;
+    /** The array of selected chips inside the chip listbox. */
+    get selected(): CuteChipOption[] | CuteChipOption;
+    /** Orientation of the chip list. */
+    ariaOrientation: 'horizontal' | 'vertical';
+    /**
+     * Whether this chip listbox is selectable.
+     *
+     * When a chip listbox is not selectable, the selected states for all
+     * the chips inside the chip listbox are always ignored.
+     */
+    get selectable(): boolean;
+    set selectable(value: boolean);
+    protected _selectable: boolean;
+    /**
+     * A function to compare the option values with the selected values. The first argument
+     * is a value from an option. The second is a value from the selection. A boolean
+     * should be returned.
+     */
+    compareWith: (o1: any, o2: any) => boolean;
+    /** Whether this chip listbox is required. */
+    required: boolean;
+    /** Whether the checkmark indicator for single-selection options is hidden. */
+    get hideSingleSelectionIndicator(): boolean;
+    set hideSingleSelectionIndicator(value: boolean);
+    private _hideSingleSelectionIndicator;
+    /** The combined stream of all of the child chips' selection change events. */
+    get chipSelectionChanges(): Observable<CuteChipSelectionChange>;
+    /** Combined stream of all of the child chips' blur events. */
+    get chipBlurChanges(): Observable<CuteChipEvent>;
+    /** The value of the listbox, which is the combined value of the selected chips. */
+    get value(): any;
+    set value(value: any);
+    protected _value: any;
+    /** Event emitted when the user has changed the selected chip listbox value. */
+    readonly change: EventEmitter<CuteChipListboxChange>;
+    _chips: QueryList<CuteChipOption>;
+    ngAfterContentInit(): void;
+    /**
+     * Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
+     * are no selected chips.
+     */
+    focus(): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    writeValue(value: any): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    registerOnChange(fn: (value: any) => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    registerOnTouched(fn: () => void): void;
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    setDisabledState(isDisabled: boolean): void;
+    /** Selects all chips with value. */
+    _setSelectionByValue(value: any, isUserInput?: boolean): void;
+    /** When blurred, marks the field as touched when focus moved outside the chip listbox. */
+    _blur(): void;
+    _keydown(event: KeyboardEvent): void;
+    /** Marks the field as touched */
+    private _markAsTouched;
+    /** Emits change event to set the model value. */
+    private _propagateChanges;
+    /**
+     * Deselects every chip in the listbox.
+     * @param skip Chip that should not be deselected.
+     */
+    private _clearSelection;
+    /**
+     * Finds and selects the chip based on its value.
+     * @returns Chip that has the corresponding value.
+     */
+    private _selectValue;
+    /** Syncs the chip-listbox selection state with the individual chips. */
+    private _syncListboxProperties;
+    /** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
+    private _getFirstSelectedChip;
+    /**
+     * Determines if key manager should avoid putting a given chip action in the tab index. Skip
+     * non-interactive actions since the user can't do anything with them.
+     */
+    protected _skipPredicate(action: CuteChipAction): boolean;
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipListbox, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<CuteChipListbox, "cute-chip-listbox", never, { "multiple": { "alias": "multiple"; "required": false; }; "ariaOrientation": { "alias": "aria-orientation"; "required": false; }; "selectable": { "alias": "selectable"; "required": false; }; "compareWith": { "alias": "compareWith"; "required": false; }; "required": { "alias": "required"; "required": false; }; "hideSingleSelectionIndicator": { "alias": "hideSingleSelectionIndicator"; "required": false; }; "value": { "alias": "value"; "required": false; }; }, { "change": "change"; }, ["_chips"], ["*"], true, never>;
+    static ngAcceptInputType_multiple: unknown;
+    static ngAcceptInputType_selectable: unknown;
+    static ngAcceptInputType_required: unknown;
+    static ngAcceptInputType_hideSingleSelectionIndicator: unknown;
+}
+
+declare class CuteChipsModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<CuteChipsModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<CuteChipsModule, never, [typeof i1.CommonModule, typeof CuteChip, typeof CuteChipAvatar, typeof CuteChipEditInput, typeof CuteChipGrid, typeof CuteChipInput, typeof CuteChipListbox, typeof CuteChipOption, typeof CuteChipRemove, typeof CuteChipRow, typeof CuteChipSet, typeof CuteChipTrailingIcon], [typeof CuteChip, typeof CuteChipAvatar, typeof CuteChipEditInput, typeof CuteChipGrid, typeof CuteChipInput, typeof CuteChipListbox, typeof CuteChipOption, typeof CuteChipRemove, typeof CuteChipRow, typeof CuteChipSet, typeof CuteChipTrailingIcon]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<CuteChipsModule>;
+}
+
+export { CUTE_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, CuteChip, CuteChipAvatar, CuteChipEdit, CuteChipEditInput, CuteChipGrid, CuteChipGridChange, CuteChipInput, CuteChipListbox, CuteChipListboxChange, CuteChipOption, CuteChipRemove, CuteChipRow, CuteChipSelectionChange, CuteChipSet, CuteChipTrailingIcon, CuteChipsModule };
+export type { CuteChipEditedEvent, CuteChipEvent, CuteChipInputEvent, CuteChipTextControl };