@cute-widgets/base 20.0.1

package/fesm2022/cute-widgets-base-chips.mjs

@@ -0,0 +1,2360 @@
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, numberAttribute, booleanAttribute, Input, Directive, ChangeDetectorRef, NgZone, HOST_TAG_NAME, DOCUMENT, EventEmitter, Injector, ANIMATION_MODULE_TYPE, ViewChild, ContentChild, Output, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, QueryList, isDevMode, forwardRef, NgModule } from '@angular/core';
+import { ENTER, SPACE, BACKSPACE, DELETE, TAB, hasModifierKey } from '@angular/cdk/keycodes';
+import { Subject, merge, EMPTY } from 'rxjs';
+import { CuteFocusableControl } from '@cute-widgets/base/abstract';
+import { Validators, NgControl, NgForm, FormGroupDirective, NG_VALUE_ACCESSOR } from '@angular/forms';
+import { ErrorStateMatcher, _ErrorStateTracker } from '@cute-widgets/base/core/error';
+import { CuteFormFieldControl, CUTE_FORM_FIELD } from '@cute-widgets/base/form-field';
+import { takeUntil, startWith, switchMap } from 'rxjs/operators';
+import { FocusKeyManager } from '@angular/cdk/a11y';
+import { Directionality } from '@angular/cdk/bidi';
+import { CuteButton } from '@cute-widgets/base/button';
+import { CommonModule } 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).
+ */
+/** Injection token to be used to override the default options for the chips module. */
+const CUTE_CHIPS_DEFAULT_OPTIONS = new InjectionToken('cute-chips-default-options', {
+    providedIn: 'root',
+    factory: () => ({
+        separatorKeyCodes: [ENTER],
+    }),
+});
+/**
+ * Injection token that can be used to reference instances of `CuteChipAvatar`. It serves as
+ * an alternative token to the actual `CuteChipAvatar` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_CHIP_AVATAR = new InjectionToken('CuteChipAvatar');
+/**
+ * Injection token that can be used to reference instances of `CuteChipTrailingIcon`. It serves as
+ * an alternative token to the actual `CuteChipTrailingIcon` class, which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_CHIP_TRAILING_ICON = new InjectionToken('CuteChipTrailingIcon');
+/**
+ * Injection token that can be used to reference instances of `CuteChipEdit`. It serves as
+ * alternative token to the actual `CuteChipEdit` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_CHIP_EDIT = new InjectionToken('CuteChipEdit');
+/**
+ * Injection token that can be used to reference instances of `CuteChipRemove`. It serves as
+ * an alternative token to the actual `CuteChipRemove` class, which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_CHIP_REMOVE = new InjectionToken('CuteChipRemove');
+/**
+ * Injection token used to avoid a circular dependency between the `CuteChip` and `CuteChipAction`.
+ */
+const CUTE_CHIP = new InjectionToken('CuteChip');
+
+/**
+ * @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
+ */
+class CuteChipAction {
+    /** Whether the action is disabled. */
+    get disabled() { return this._disabled || this._parentChip.disabled; }
+    set disabled(value) { this._disabled = value; }
+    /**
+     * Determine the value of the disabled attribute for this chip action.
+     */
+    _getDisabledAttribute() {
+        // When this chip action is disabled and focusing disabled chips is not permitted, return empty
+        // string to indicate that disabled attribute should be included.
+        return this.disabled && !this._allowFocusWhenDisabled ? '' : null;
+    }
+    /**
+     * Determine the value of the tabindex attribute for this chip action.
+     */
+    _getTabindex() {
+        return (this.disabled && !this._allowFocusWhenDisabled) || !this.isInteractive
+            ? null
+            : this.tabIndex.toString();
+    }
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._parentChip = inject(CUTE_CHIP);
+        /** Whether the action is interactive. */
+        this.isInteractive = true;
+        /** Whether this is the primary action in the chip. */
+        this._isPrimary = true;
+        /** Whether this is the leading action in the chip. */
+        this._isLeading = false; // TODO(adolgachev): consolidate usage to secondary css class
+        this._disabled = false;
+        /** Tab index of the action. */
+        this.tabIndex = -1;
+        /**
+         * Private API to allow focusing this chip when it is disabled.
+         */
+        this._allowFocusWhenDisabled = false;
+        if (this._elementRef.nativeElement.nodeName === 'BUTTON') {
+            this._elementRef.nativeElement.setAttribute('type', 'button');
+        }
+    }
+    focus() {
+        this._elementRef.nativeElement.focus();
+    }
+    _handleClick(event) {
+        if (!this.disabled && this.isInteractive && this._isPrimary) {
+            event.preventDefault();
+            this._parentChip._handlePrimaryActionInteraction();
+        }
+    }
+    _handleKeydown(event) {
+        if ((event.keyCode === ENTER || event.keyCode === SPACE) &&
+            !this.disabled &&
+            this.isInteractive &&
+            this._isPrimary &&
+            !this._parentChip._isEditing) {
+            event.preventDefault();
+            this._parentChip._handlePrimaryActionInteraction();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipAction, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteChipAction, isStandalone: true, selector: "[cuteChipAction]", inputs: { isInteractive: "isInteractive", disabled: ["disabled", "disabled", booleanAttribute], tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? -1 : numberAttribute(value))], _allowFocusWhenDisabled: "_allowFocusWhenDisabled" }, host: { listeners: { "click": "_handleClick($event)", "keydown": "_handleKeydown($event)" }, properties: { "class.cute-chip__action--primary": "_isPrimary", "class.cute-chip__action--presentational": "!isInteractive", "class.cute-chip__action--secondary": "!_isPrimary", "class.cute-chip__action--trailing": "!_isPrimary && !_isLeading", "attr.tabindex": "_getTabindex()", "attr.disabled": "_getDisabledAttribute()", "attr.aria-disabled": "disabled" }, classAttribute: "cute-chip__action cute-chip-action" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipAction, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteChipAction]',
+                    host: {
+                        'class': 'cute-chip__action cute-chip-action',
+                        '[class.cute-chip__action--primary]': '_isPrimary',
+                        '[class.cute-chip__action--presentational]': '!isInteractive',
+                        '[class.cute-chip__action--secondary]': '!_isPrimary',
+                        '[class.cute-chip__action--trailing]': '!_isPrimary && !_isLeading',
+                        '[attr.tabindex]': '_getTabindex()',
+                        '[attr.disabled]': '_getDisabledAttribute()',
+                        '[attr.aria-disabled]': 'disabled',
+                        '(click)': '_handleClick($event)',
+                        '(keydown)': '_handleKeydown($event)',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { isInteractive: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], tabIndex: [{
+                type: Input,
+                args: [{
+                        transform: (value) => (value == null ? -1 : numberAttribute(value)),
+                    }]
+            }], _allowFocusWhenDisabled: [{
+                type: Input
+            }] } });
+
+/**
+ * @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).
+ */
+let uid = 0;
+/**
+ * A Chip base component used inside the `CuteChipSet` component.
+ * Extended by `CuteChipOption` and `CuteChipRow` for different interaction patterns.
+ */
+class CuteChip extends CuteFocusableControl {
+    _hasFocus() {
+        return this._hasFocusInternal;
+    }
+    /** A unique id for the chip. If none is supplied, it will be auto-generated. */
+    generateId() {
+        return `cute-chip-${uid++}`;
+    }
+    /**
+     * The value of the chip. Defaults to the content inside
+     * the `cute-chip-action-label` element.
+     */
+    get value() {
+        return this._value !== undefined ? this._value : this._textElement?.textContent.trim();
+    }
+    set value(value) {
+        this._value = value;
+    }
+    /**
+     * Handles the lazy creation of the CuteChip ripple.
+     * Used to improve initial load time of large applications.
+     */
+    //_rippleLoader: MatRippleLoader = inject(MatRippleLoader);
+    getDisabledState() {
+        return super.getDisabledState() || this._chipListDisabled;
+    }
+    constructor() {
+        super();
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._ngZone = inject(NgZone);
+        this._tagName = inject(HOST_TAG_NAME);
+        //private _globalRippleOptions = inject<RippleGlobalOptions>(MAT_RIPPLE_GLOBAL_OPTIONS, {
+        //  optional: true,
+        //});
+        this._document = inject(DOCUMENT);
+        /** Emits when the chip is focused. */
+        this._onFocus = new Subject();
+        /** Emits when the chip is blurred. */
+        this._onBlur = new Subject();
+        /** Whether the chip has focus. */
+        this._hasFocusInternal = false;
+        /** The `id` of a span that contains this chip's aria description. */
+        this._ariaDescriptionId = `${this.id}-aria-description`;
+        /** Whether the chip list is disabled. */
+        this._chipListDisabled = false;
+        /** Whether the chip was focused when it was removed. */
+        this._hadFocusOnRemove = false;
+        /**
+         * Determines whether the chip displays the remove styling and emits (removed) events.
+         */
+        this.removable = true;
+        /**
+         * Colors the chip for emphasis as if it were selected.
+         */
+        this.highlighted = false;
+        /** Whether the ripple effect is disabled or not. */
+        this.disableRipple = false;
+        /** Emitted when a chip is to be removed. */
+        this.removed = new EventEmitter();
+        /** Emitted when the chip is destroyed. */
+        this.destroyed = new EventEmitter();
+        /** The unstyled chip selector for this component. */
+        this.basicChipAttrName = 'cute-basic-chip';
+        this._injector = inject(Injector);
+        const animationMode = inject(ANIMATION_MODULE_TYPE, { optional: true });
+        this._animationsDisabled = animationMode === 'NoopAnimations';
+        const tabIndex = this.getAttribute("tabindex");
+        if (tabIndex) {
+            this.tabIndex = parseInt(tabIndex) ?? -1;
+        }
+        else {
+            this.tabIndex = undefined;
+        }
+        this._monitorFocus();
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        // This check needs to happen in `ngOnInit` so the overridden value of
+        // `basicChipAttrName` coming from base classes can be picked up.
+        const element = this._elementRef.nativeElement;
+        this._isBasicChip =
+            element.hasAttribute(this.basicChipAttrName) ||
+                element.tagName.toLowerCase() === this.basicChipAttrName;
+        this._isStandardStaticChip = !this._isBasicChip &&
+            (element.tagName.toLowerCase() === "cute-chip" ||
+                element.tagName.toLowerCase() === "cute-chip-row");
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        this._textElement = this._elementRef.nativeElement.querySelector('.cute-chip-action-label');
+        if (this._pendingFocus) {
+            this._pendingFocus = false;
+            this.focus();
+        }
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        // Since the styling depends on the presence of some
+        // actions, we have to mark for check on changes.
+        this._actionChanges = merge(this._allLeadingIcons?.changes, this._allTrailingIcons?.changes, this._allEditIcons?.changes, this._allRemoveIcons?.changes).subscribe(() => this._changeDetectorRef.markForCheck());
+    }
+    ngDoCheck() {
+        //this._rippleLoader.setDisabled(this._elementRef.nativeElement, this._isRippleDisabled());
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._actionChanges?.unsubscribe();
+        this.destroyed.emit({ chip: this });
+        this.destroyed.complete();
+    }
+    /**
+     * Allows for programmatic removal of the chip.
+     *
+     * Informs any listeners of the removal request. Does not remove the chip from the DOM.
+     */
+    remove() {
+        if (this.removable) {
+            this._hadFocusOnRemove = this._hasFocus();
+            this.removed.emit({ chip: this });
+        }
+    }
+    /** Whether the ripple should be disabled. */
+    /*
+    _isRippleDisabled(): boolean {
+      return (
+        this.disabled ||
+        this.disableRipple ||
+        this._animationsDisabled ||
+        this._isBasicChip ||
+        !!this._globalRippleOptions?.disabled
+      );
+    }
+    */
+    /** Returns whether the chip has a trailing icon. */
+    _hasTrailingIcon() {
+        return !!(this.trailingIcon || this.removeIcon);
+    }
+    /** Handles keyboard events on the chip. */
+    _handleKeydown(event) {
+        // Ignore backspace events where the user is holding down the key
+        // so that we don't accidentally remove too many chips.
+        if ((event.keyCode === BACKSPACE && !event.repeat) || event.keyCode === DELETE) {
+            event.preventDefault();
+            this.remove();
+        }
+    }
+    /** Allows for programmatic focusing of the chip. */
+    focus() {
+        super.focus();
+        if (!this.disabled) {
+            // If `focus` is called before `ngAfterViewInit`, we won't have access to the primary action.
+            // This can happen if the consumer tries to focus a chip immediately after it is added.
+            // Queue the method to be called again on init.
+            if (this.primaryAction) {
+                this.primaryAction.focus();
+            }
+            else {
+                this._pendingFocus = true;
+            }
+        }
+    }
+    /** Gets the action that contains a specific target node. */
+    _getSourceAction(target) {
+        return this._getActions().find(action => {
+            const element = action._elementRef.nativeElement;
+            return element === target || element.contains(target);
+        });
+    }
+    /** Gets all the actions within the chip. */
+    _getActions() {
+        const result = [];
+        if (this.editIcon) {
+            result.push(this.editIcon);
+        }
+        if (this.primaryAction) {
+            result.push(this.primaryAction);
+        }
+        if (this.removeIcon) {
+            result.push(this.removeIcon);
+        }
+        if (this.trailingIcon) {
+            result.push(this.trailingIcon);
+        }
+        return result;
+    }
+    /** Handles interactions with the primary action of the chip. */
+    _handlePrimaryActionInteraction() {
+        // Empty here, but is overwritten in child classes.
+    }
+    /** Handles interactions with the edit action of the chip. */
+    _edit(event) {
+        // Empty here, but is overwritten in child classes.
+    }
+    /** Gets the tabindex of the chip. */
+    _getTabIndex() {
+        if (!this.role) {
+            return null;
+        }
+        return this.disabled ? -1 : this.tabIndex;
+    }
+    /** Starts the focus monitoring process on the chip. */
+    _monitorFocus() {
+        this._focusMonitor.monitor(this._elementRef, true).subscribe(origin => {
+            const hasFocus = origin !== null;
+            if (hasFocus !== this._hasFocusInternal) {
+                this._hasFocusInternal = hasFocus;
+                if (hasFocus) {
+                    this._onFocus.next({ chip: this });
+                }
+                else {
+                    // When animations are enabled, Angular may end up removing the chip from the DOM a little
+                    // earlier than usual, causing it to be blurred and throwing off the logic in the chip list
+                    // that moves focus not the next item. To work around the issue, we defer marking the chip
+                    // as not focused until after the next render.
+                    this.markForCheck();
+                    setTimeout(() => this._ngZone.run(() => this._onBlur.next({ chip: this })));
+                }
+            }
+        });
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChip, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteChip, isStandalone: true, selector: "cute-basic-chip, [cute-basic-chip], cute-chip, [cute-chip]", inputs: { value: "value", removable: ["removable", "removable", booleanAttribute], highlighted: ["highlighted", "highlighted", booleanAttribute], disableRipple: ["disableRipple", "disableRipple", booleanAttribute] }, outputs: { removed: "removed", destroyed: "destroyed" }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "class.btn": "_isStandardStaticChip", "class.btn-sm": "_isStandardStaticChip", "class.border": "_isStandardStaticChip", "class.rounded-pill": "_isStandardStaticChip", "class.cute-static-chip": "_isStandardStaticChip", "class.cute-chip-with-avatar": "leadingIcon", "class.cute-chip-highlighted": "highlighted", "class.disabled": "_isStandardStaticChip && disabled", "class.cute-basic-chip": "_isBasicChip", "class.cute-standard-chip": "!_isBasicChip", "class.cute-chip-with-trailing-icon": "_hasTrailingIcon()", "class._cute-animation-noopable": "_animationsDisabled", "id": "id", "attr.role": "role", "attr.tabindex": "_getTabIndex()", "attr.aria-label": "ariaLabel" }, classAttribute: "cute-chip" }, providers: [{ provide: CUTE_CHIP, useExisting: CuteChip }], queries: [{ propertyName: "leadingIcon", first: true, predicate: CUTE_CHIP_AVATAR, descendants: true }, { propertyName: "editIcon", first: true, predicate: CUTE_CHIP_EDIT, descendants: true }, { propertyName: "trailingIcon", first: true, predicate: CUTE_CHIP_TRAILING_ICON, descendants: true }, { propertyName: "removeIcon", first: true, predicate: CUTE_CHIP_REMOVE, descendants: true }, { propertyName: "_allLeadingIcons", predicate: CUTE_CHIP_AVATAR, descendants: true }, { propertyName: "_allTrailingIcons", predicate: CUTE_CHIP_TRAILING_ICON, descendants: true }, { propertyName: "_allEditIcons", predicate: CUTE_CHIP_EDIT, descendants: true }, { propertyName: "_allRemoveIcons", predicate: CUTE_CHIP_REMOVE, descendants: true }], viewQueries: [{ propertyName: "primaryAction", first: true, predicate: CuteChipAction, descendants: true }], exportAs: ["cuteChip"], usesInheritance: true, ngImport: i0, template: "<span class=\"cute-chip-focus-overlay\"></span>\r\n\r\n<span class=\"cute-chip__cell cute-chip__cell--primary\">\r\n  <span cuteChipAction [isInteractive]=\"false\">\r\n    @if (leadingIcon) {\r\n      <span class=\"cute-chip__graphic cute-chip-graphic\">\r\n        <ng-content select=\"cute-avatar, cute-chip-avatar, [cuteChipAvatar]\"></ng-content>\r\n      </span>\r\n    }\r\n    <span class=\"cute-chip__text-label cute-chip-action-label\">\r\n      <ng-content></ng-content>\r\n      <span class=\"cute-chip-primary-focus-indicator cute-focus-indicator\"></span>\r\n    </span>\r\n  </span>\r\n</span>\r\n\r\n@if (_hasTrailingIcon()) {\r\n  <span class=\"cute-chip__cell cute-chip__cell--trailing\">\r\n    <ng-content select=\"cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]\"></ng-content>\r\n  </span>\r\n}\r\n", styles: [".cute-chip,.cute-chip-option,cute-chip-row{position:relative;display:inline-flex;align-items:center}.cute-chip.cute-static-chip,.cute-chip-option.cute-static-chip,cute-chip-row.cute-static-chip{--bs-btn-bg: rgba(var(--bs-body-color-rgb), .06);cursor:auto}.cute-chip:hover,.cute-chip-option:hover,cute-chip-row:hover{--bs-btn-hover-bg: rgba(var(--bs-body-color-rgb), .1)}.cute-chip:active,.cute-chip-option:active,cute-chip-row:active{--bs-btn-active-bg: rgba(var(--bs-body-color-rgb), .14)}.cute-chip__cell [cuteChipAction],.cute-chip__cell .cute-chip-action{display:inline-flex;align-items:center;cursor:pointer;outline:none}.cute-chip__cell [cuteChipAction].cute-chip__action--presentational,.cute-chip__cell .cute-chip-action.cute-chip__action--presentational{cursor:auto}.cute-chip__cell [cuteChipAction]:not(button),.cute-chip__cell .cute-chip-action:not(button){gap:.5rem}.cute-chip__cell [cuteChipAction] .cute-chip__graphic,.cute-chip__cell .cute-chip-action .cute-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark{padding-left:2px;padding-right:4px}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{width:1.2rem}[dir=rtl] .cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,[dir=rtl] .cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{transform:rotateY(180deg)}.cute-chip__cell [cuteChipAction].disabled,.cute-chip__cell .cute-chip-action.disabled{cursor:auto}.cute-chip__cell [cuteChipAction].cute-chip__icon--trailing,.cute-chip__cell .cute-chip-action.cute-chip__icon--trailing{padding-left:4px;padding-right:4px;border:none;background:none}.cute-standard-chip{-webkit-tap-highlight-color:transparent}@media (forced-colors: active){.cute-standard-chip{outline:solid 1px}.cute-standard-chip .cute-chip__checkmark-path{stroke:CanvasText!important}}.cute-standard-chip .cute-chip__icon--primary{--size: 18px;height:var(--size);width:var(--size);font-size:var(--size);border-radius:calc(var(--size) * 1.3);min-height:fit-content;background:none}.cute-standard-chip .cute-chip__cell--primary{display:flex}.cute-standard-chip .cute-chip__cell--trailing{display:inline-flex;background-color:transparent;padding-left:.5rem;padding-right:0}[dir=rtl] .cute-standard-chip .cute-chip__cell--trailing{padding-left:0;padding-right:.5rem}.cute-standard-chip._cute-animation-noopable,.cute-standard-chip._cute-animation-noopable .cute-chip__graphic,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.cute-chip-focus-overlay{inset:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .15s linear}._cute-animation-noopable .cute-chip-focus-overlay{transition:none}.cute-basic-chip .cute-chip-focus-overlay{display:none}.cute-chip-action-label{text-align:left;white-space:nowrap}[dir=rtl] .cute-chip-action-label{text-align:right}.cute-chip-primary-focus-indicator{position:absolute;inset:0;pointer-events:none}.cute-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}@media (forced-colors: active){.cute-chip-selected:not(.cute-chip-multiple){outline-width:3px}}\n"], dependencies: [{ kind: "directive", type: CuteChipAction, selector: "[cuteChipAction]", inputs: ["isInteractive", "disabled", "tabIndex", "_allowFocusWhenDisabled"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChip, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-basic-chip, [cute-basic-chip], cute-chip, [cute-chip]', exportAs: 'cuteChip', host: {
+                        'class': 'cute-chip',
+                        '[class.btn]': '_isStandardStaticChip',
+                        '[class.btn-sm]': '_isStandardStaticChip',
+                        '[class.border]': '_isStandardStaticChip',
+                        '[class.rounded-pill]': '_isStandardStaticChip',
+                        '[class.cute-static-chip]': '_isStandardStaticChip',
+                        /*
+                        '[class]': '"text-bg-"+color||"tertiary"',
+                        '[class.mdc-evolution-chip]': '!_isBasicChip',
+                        '[class.mdc-evolution-chip--disabled]': 'disabled',
+                        '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
+                        '[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
+                        '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
+                        '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
+                        */
+                        '[class.cute-chip-with-avatar]': 'leadingIcon',
+                        '[class.cute-chip-highlighted]': 'highlighted',
+                        '[class.disabled]': '_isStandardStaticChip && disabled',
+                        '[class.cute-basic-chip]': '_isBasicChip',
+                        '[class.cute-standard-chip]': '!_isBasicChip',
+                        '[class.cute-chip-with-trailing-icon]': '_hasTrailingIcon()',
+                        '[class._cute-animation-noopable]': '_animationsDisabled',
+                        '[id]': 'id',
+                        '[attr.role]': 'role',
+                        '[attr.tabindex]': '_getTabIndex()',
+                        '[attr.aria-label]': 'ariaLabel',
+                        '(keydown)': '_handleKeydown($event)',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [{ provide: CUTE_CHIP, useExisting: CuteChip }], imports: [CuteChipAction], template: "<span class=\"cute-chip-focus-overlay\"></span>\r\n\r\n<span class=\"cute-chip__cell cute-chip__cell--primary\">\r\n  <span cuteChipAction [isInteractive]=\"false\">\r\n    @if (leadingIcon) {\r\n      <span class=\"cute-chip__graphic cute-chip-graphic\">\r\n        <ng-content select=\"cute-avatar, cute-chip-avatar, [cuteChipAvatar]\"></ng-content>\r\n      </span>\r\n    }\r\n    <span class=\"cute-chip__text-label cute-chip-action-label\">\r\n      <ng-content></ng-content>\r\n      <span class=\"cute-chip-primary-focus-indicator cute-focus-indicator\"></span>\r\n    </span>\r\n  </span>\r\n</span>\r\n\r\n@if (_hasTrailingIcon()) {\r\n  <span class=\"cute-chip__cell cute-chip__cell--trailing\">\r\n    <ng-content select=\"cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]\"></ng-content>\r\n  </span>\r\n}\r\n", styles: [".cute-chip,.cute-chip-option,cute-chip-row{position:relative;display:inline-flex;align-items:center}.cute-chip.cute-static-chip,.cute-chip-option.cute-static-chip,cute-chip-row.cute-static-chip{--bs-btn-bg: rgba(var(--bs-body-color-rgb), .06);cursor:auto}.cute-chip:hover,.cute-chip-option:hover,cute-chip-row:hover{--bs-btn-hover-bg: rgba(var(--bs-body-color-rgb), .1)}.cute-chip:active,.cute-chip-option:active,cute-chip-row:active{--bs-btn-active-bg: rgba(var(--bs-body-color-rgb), .14)}.cute-chip__cell [cuteChipAction],.cute-chip__cell .cute-chip-action{display:inline-flex;align-items:center;cursor:pointer;outline:none}.cute-chip__cell [cuteChipAction].cute-chip__action--presentational,.cute-chip__cell .cute-chip-action.cute-chip__action--presentational{cursor:auto}.cute-chip__cell [cuteChipAction]:not(button),.cute-chip__cell .cute-chip-action:not(button){gap:.5rem}.cute-chip__cell [cuteChipAction] .cute-chip__graphic,.cute-chip__cell .cute-chip-action .cute-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark{padding-left:2px;padding-right:4px}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{width:1.2rem}[dir=rtl] .cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,[dir=rtl] .cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{transform:rotateY(180deg)}.cute-chip__cell [cuteChipAction].disabled,.cute-chip__cell .cute-chip-action.disabled{cursor:auto}.cute-chip__cell [cuteChipAction].cute-chip__icon--trailing,.cute-chip__cell .cute-chip-action.cute-chip__icon--trailing{padding-left:4px;padding-right:4px;border:none;background:none}.cute-standard-chip{-webkit-tap-highlight-color:transparent}@media (forced-colors: active){.cute-standard-chip{outline:solid 1px}.cute-standard-chip .cute-chip__checkmark-path{stroke:CanvasText!important}}.cute-standard-chip .cute-chip__icon--primary{--size: 18px;height:var(--size);width:var(--size);font-size:var(--size);border-radius:calc(var(--size) * 1.3);min-height:fit-content;background:none}.cute-standard-chip .cute-chip__cell--primary{display:flex}.cute-standard-chip .cute-chip__cell--trailing{display:inline-flex;background-color:transparent;padding-left:.5rem;padding-right:0}[dir=rtl] .cute-standard-chip .cute-chip__cell--trailing{padding-left:0;padding-right:.5rem}.cute-standard-chip._cute-animation-noopable,.cute-standard-chip._cute-animation-noopable .cute-chip__graphic,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.cute-chip-focus-overlay{inset:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .15s linear}._cute-animation-noopable .cute-chip-focus-overlay{transition:none}.cute-basic-chip .cute-chip-focus-overlay{display:none}.cute-chip-action-label{text-align:left;white-space:nowrap}[dir=rtl] .cute-chip-action-label{text-align:right}.cute-chip-primary-focus-indicator{position:absolute;inset:0;pointer-events:none}.cute-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}@media (forced-colors: active){.cute-chip-selected:not(.cute-chip-multiple){outline-width:3px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _allLeadingIcons: [{
+                type: ContentChildren,
+                args: [CUTE_CHIP_AVATAR, { descendants: true }]
+            }], _allTrailingIcons: [{
+                type: ContentChildren,
+                args: [CUTE_CHIP_TRAILING_ICON, { descendants: true }]
+            }], _allEditIcons: [{
+                type: ContentChildren,
+                args: [CUTE_CHIP_EDIT, { descendants: true }]
+            }], _allRemoveIcons: [{
+                type: ContentChildren,
+                args: [CUTE_CHIP_REMOVE, { descendants: true }]
+            }], value: [{
+                type: Input
+            }], removable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], highlighted: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disableRipple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], removed: [{
+                type: Output
+            }], destroyed: [{
+                type: Output
+            }], leadingIcon: [{
+                type: ContentChild,
+                args: [CUTE_CHIP_AVATAR]
+            }], editIcon: [{
+                type: ContentChild,
+                args: [CUTE_CHIP_EDIT]
+            }], trailingIcon: [{
+                type: ContentChild,
+                args: [CUTE_CHIP_TRAILING_ICON]
+            }], removeIcon: [{
+                type: ContentChild,
+                args: [CUTE_CHIP_REMOVE]
+            }], primaryAction: [{
+                type: ViewChild,
+                args: [CuteChipAction]
+            }] } });
+
+/**
+ * @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).
+ */
+/**
+ * A directive that makes a <span> editable and exposes functions to modify and retrieve the
+ * element's contents.
+ */
+class CuteChipEditInput {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._document = inject(DOCUMENT);
+    }
+    initialize(initialValue) {
+        this.getNativeElement().focus();
+        this.setValue(initialValue);
+    }
+    getNativeElement() {
+        return this._elementRef.nativeElement;
+    }
+    setValue(value) {
+        this.getNativeElement().textContent = value;
+        this._moveCursorToEndOfInput();
+    }
+    getValue() {
+        return this.getNativeElement().textContent || '';
+    }
+    _moveCursorToEndOfInput() {
+        const range = this._document.createRange();
+        range.selectNodeContents(this.getNativeElement());
+        range.collapse(false);
+        const sel = window.getSelection();
+        sel.removeAllRanges();
+        sel.addRange(range);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipEditInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteChipEditInput, isStandalone: true, selector: "span[cuteChipEditInput]", host: { attributes: { "role": "textbox", "tabindex": "-1", "contenteditable": "true" }, classAttribute: "cute-chip-edit-input" }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipEditInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'span[cuteChipEditInput]',
+                    host: {
+                        'class': 'cute-chip-edit-input',
+                        'role': 'textbox',
+                        'tabindex': '-1',
+                        'contenteditable': 'true',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [] });
+
+/**
+ * @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).
+ */
+/**
+ * An extension of the CuteChip component used with CuteChipGrid and
+ * the cuteChipInputFor directive.
+ */
+class CuteChipRow extends CuteChip {
+    constructor() {
+        super();
+        this.basicChipAttrName = 'cute-basic-chip-row';
+        /**
+         * 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.
+         */
+        this._editStartPending = false;
+        this.editable = false;
+        /** Emitted when the chip is edited. */
+        this.edited = new EventEmitter();
+        this._isEditing = false;
+        this.role = 'row';
+        this._onBlur.pipe(takeUntil(this.destroyed)).subscribe(() => {
+            if (this._isEditing && !this._editStartPending) {
+                this._onEditFinish();
+            }
+        });
+    }
+    _hasTrailingIcon() {
+        // The trailing icon is hidden while editing.
+        return !this._isEditing && super._hasTrailingIcon();
+    }
+    /** Sends focus to the first gridcell when the user clicks anywhere inside the chip. */
+    _handleFocus() {
+        if (!this._isEditing && !this.disabled) {
+            this.focus();
+        }
+    }
+    _handleKeydown(event) {
+        if (event.keyCode === ENTER && !this.disabled) {
+            if (this._isEditing) {
+                event.preventDefault();
+                this._onEditFinish();
+            }
+            else if (this.editable) {
+                this._startEditing(event);
+            }
+        }
+        else if (this._isEditing) {
+            // Stop the event from reaching the chip set in order to avoid navigating.
+            event.stopPropagation();
+        }
+        else {
+            super._handleKeydown(event);
+        }
+    }
+    _handleDoubleclick(event) {
+        if (!this.disabled && this.editable) {
+            this._startEditing(event);
+        }
+    }
+    _startEditing(event) {
+        if (!this.primaryAction ||
+            (this.removeIcon && this._getSourceAction(event.target) === this.removeIcon)) {
+            return;
+        }
+        // The value depends on the DOM so we need to extract it before we flip the flag.
+        const value = this.value;
+        this._isEditing = this._editStartPending = true;
+        // Starting the editing sequence below depends on the edit input
+        // query resolving on time. Trigger a synchronous change detection to
+        // ensure that it happens by the time we hit the timeout below.
+        this._changeDetectorRef.detectChanges();
+        // TODO(crisbeto): this timeout shouldn't be necessary given the `detectChange` call above.
+        // Defer initializing the input so it has time to be added to the DOM.
+        setTimeout(() => {
+            this._getEditInput().initialize(value);
+            this._editStartPending = false;
+        });
+    }
+    _onEditFinish() {
+        this._isEditing = this._editStartPending = false;
+        this.edited.emit({ chip: this, value: this._getEditInput().getValue() });
+        // If the edit input is still focused or focus was returned to the body after it was destroyed,
+        // return focus to the chip contents.
+        if (this._document.activeElement === this._getEditInput().getNativeElement() ||
+            this._document.activeElement === this._document.body) {
+            this.primaryAction?.focus();
+        }
+    }
+    /*
+    override _isRippleDisabled(): boolean {
+      return super._isRippleDisabled() || this._isEditing;
+    }
+    */
+    /**
+     * 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.
+     */
+    _getEditInput() {
+        return this.contentEditInput || this.defaultEditInput;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipRow, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteChipRow, isStandalone: true, selector: "cute-chip-row, [cute-chip-row], cute-basic-chip-row, [cute-basic-chip-row]", inputs: { editable: "editable" }, outputs: { edited: "edited" }, host: { listeners: { "focus": "_handleFocus($event)", "dblclick": "_handleDoubleclick($event)" }, properties: { "class.cute-chip-with-avatar": "leadingIcon", "class.cute-chip-disabled": "disabled", "class.cute-chip-editing": "_isEditing", "class.cute-chip-editable": "editable", "class.cute-chip-highlighted": "highlighted", "class.cute-chip-with-trailing-icon": "_hasTrailingIcon()", "id": "id", "attr.tabindex": "disabled ? null : -1", "attr.aria-label": "null", "attr.aria-description": "null", "attr.role": "role" }, classAttribute: "cute-chip-row" }, providers: [
+            { provide: CuteChip, useExisting: CuteChipRow },
+            { provide: CUTE_CHIP, useExisting: CuteChipRow },
+        ], queries: [{ propertyName: "contentEditInput", first: true, predicate: CuteChipEditInput, descendants: true }], viewQueries: [{ propertyName: "defaultEditInput", first: true, predicate: CuteChipEditInput, descendants: true }], usesInheritance: true, ngImport: i0, template: "@if (!_isEditing) {\r\n  <span class=\"cute-chip-focus-overlay\"></span>\r\n}\r\n\r\n<span class=\"cute-chip__cell cute-chip__cell--primary\">\r\n  <span class=\"cute-chip-action\" role=\"gridcell\"\r\n        cuteChipAction\r\n        [tabIndex]=\"tabIndex\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-describedby]=\"_ariaDescriptionId\">\r\n    @if (leadingIcon) {\r\n      <span class=\"cute-chip-graphic\">\r\n        <ng-content select=\"cute-avatar, cute-chip-avatar, [cuteChipAvatar]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <span class=\"cute-chip__text-label cute-chip-action-label\">\r\n      @if (_isEditing) {\r\n        @if (contentEditInput) {\r\n          <ng-content select=\"[cuteChipEditInput]\"></ng-content>\r\n        } @else {\r\n          <span cuteChipEditInput></span>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n\r\n      <span class=\"cute-chip-primary-focus-indicator cute-focus-indicator\" aria-hidden=\"true\"></span>\r\n    </span>\r\n  </span>\r\n</span>\r\n\r\n@if (_hasTrailingIcon()) {\r\n  <span\r\n    class=\"cute-chip__cell cute-chip__cell--trailing\"\r\n    role=\"gridcell\">\r\n    <ng-content select=\"cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]\"></ng-content>\r\n  </span>\r\n}\r\n\r\n<span class=\"visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\r\n", styles: [".cute-chip,.cute-chip-option,cute-chip-row{position:relative;display:inline-flex;align-items:center}.cute-chip.cute-static-chip,.cute-chip-option.cute-static-chip,cute-chip-row.cute-static-chip{--bs-btn-bg: rgba(var(--bs-body-color-rgb), .06);cursor:auto}.cute-chip:hover,.cute-chip-option:hover,cute-chip-row:hover{--bs-btn-hover-bg: rgba(var(--bs-body-color-rgb), .1)}.cute-chip:active,.cute-chip-option:active,cute-chip-row:active{--bs-btn-active-bg: rgba(var(--bs-body-color-rgb), .14)}.cute-chip__cell [cuteChipAction],.cute-chip__cell .cute-chip-action{display:inline-flex;align-items:center;cursor:pointer;outline:none}.cute-chip__cell [cuteChipAction].cute-chip__action--presentational,.cute-chip__cell .cute-chip-action.cute-chip__action--presentational{cursor:auto}.cute-chip__cell [cuteChipAction]:not(button),.cute-chip__cell .cute-chip-action:not(button){gap:.5rem}.cute-chip__cell [cuteChipAction] .cute-chip__graphic,.cute-chip__cell .cute-chip-action .cute-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark{padding-left:2px;padding-right:4px}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{width:1.2rem}[dir=rtl] .cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,[dir=rtl] .cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{transform:rotateY(180deg)}.cute-chip__cell [cuteChipAction].disabled,.cute-chip__cell .cute-chip-action.disabled{cursor:auto}.cute-chip__cell [cuteChipAction].cute-chip__icon--trailing,.cute-chip__cell .cute-chip-action.cute-chip__icon--trailing{padding-left:4px;padding-right:4px;border:none;background:none}.cute-standard-chip{-webkit-tap-highlight-color:transparent}@media (forced-colors: active){.cute-standard-chip{outline:solid 1px}.cute-standard-chip .cute-chip__checkmark-path{stroke:CanvasText!important}}.cute-standard-chip .cute-chip__icon--primary{--size: 18px;height:var(--size);width:var(--size);font-size:var(--size);border-radius:calc(var(--size) * 1.3);min-height:fit-content;background:none}.cute-standard-chip .cute-chip__cell--primary{display:flex}.cute-standard-chip .cute-chip__cell--trailing{display:inline-flex;background-color:transparent;padding-left:.5rem;padding-right:0}[dir=rtl] .cute-standard-chip .cute-chip__cell--trailing{padding-left:0;padding-right:.5rem}.cute-standard-chip._cute-animation-noopable,.cute-standard-chip._cute-animation-noopable .cute-chip__graphic,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.cute-chip-focus-overlay{inset:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .15s linear}._cute-animation-noopable .cute-chip-focus-overlay{transition:none}.cute-basic-chip .cute-chip-focus-overlay{display:none}.cute-chip-action-label{text-align:left;white-space:nowrap}[dir=rtl] .cute-chip-action-label{text-align:right}.cute-chip-primary-focus-indicator{position:absolute;inset:0;pointer-events:none}.cute-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}@media (forced-colors: active){.cute-chip-selected:not(.cute-chip-multiple){outline-width:3px}}\n"], dependencies: [{ kind: "directive", type: CuteChipAction, selector: "[cuteChipAction]", inputs: ["isInteractive", "disabled", "tabIndex", "_allowFocusWhenDisabled"] }, { kind: "directive", type: CuteChipEditInput, selector: "span[cuteChipEditInput]" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipRow, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-chip-row, [cute-chip-row], cute-basic-chip-row, [cute-basic-chip-row]', host: {
+                        'class': 'cute-chip-row',
+                        '[class.cute-chip-with-avatar]': 'leadingIcon',
+                        '[class.cute-chip-disabled]': 'disabled',
+                        '[class.cute-chip-editing]': '_isEditing',
+                        '[class.cute-chip-editable]': 'editable',
+                        '[class.cute-chip-highlighted]': 'highlighted',
+                        '[class.cute-chip-with-trailing-icon]': '_hasTrailingIcon()',
+                        /*
+                        '[class.mdc-evolution-chip--disabled]': 'disabled',
+                        '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
+                        '[class.mdc-evolution-chip--with-primary-graphic]': 'leadingIcon',
+                        '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
+                        '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
+                        */
+                        '[id]': 'id',
+                        // Has to have a negative tabindex to capture
+                        // focus and redirect it to the primary action.
+                        '[attr.tabindex]': 'disabled ? null : -1',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-description]': 'null',
+                        '[attr.role]': 'role',
+                        '(focus)': '_handleFocus($event)',
+                        '(dblclick)': '_handleDoubleclick($event)',
+                    }, providers: [
+                        { provide: CuteChip, useExisting: CuteChipRow },
+                        { provide: CUTE_CHIP, useExisting: CuteChipRow },
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CuteChipAction, CuteChipEditInput], template: "@if (!_isEditing) {\r\n  <span class=\"cute-chip-focus-overlay\"></span>\r\n}\r\n\r\n<span class=\"cute-chip__cell cute-chip__cell--primary\">\r\n  <span class=\"cute-chip-action\" role=\"gridcell\"\r\n        cuteChipAction\r\n        [tabIndex]=\"tabIndex\"\r\n        [disabled]=\"disabled\"\r\n        [attr.aria-label]=\"ariaLabel\"\r\n        [attr.aria-describedby]=\"_ariaDescriptionId\">\r\n    @if (leadingIcon) {\r\n      <span class=\"cute-chip-graphic\">\r\n        <ng-content select=\"cute-avatar, cute-chip-avatar, [cuteChipAvatar]\"></ng-content>\r\n      </span>\r\n    }\r\n\r\n    <span class=\"cute-chip__text-label cute-chip-action-label\">\r\n      @if (_isEditing) {\r\n        @if (contentEditInput) {\r\n          <ng-content select=\"[cuteChipEditInput]\"></ng-content>\r\n        } @else {\r\n          <span cuteChipEditInput></span>\r\n        }\r\n      } @else {\r\n        <ng-content></ng-content>\r\n      }\r\n\r\n      <span class=\"cute-chip-primary-focus-indicator cute-focus-indicator\" aria-hidden=\"true\"></span>\r\n    </span>\r\n  </span>\r\n</span>\r\n\r\n@if (_hasTrailingIcon()) {\r\n  <span\r\n    class=\"cute-chip__cell cute-chip__cell--trailing\"\r\n    role=\"gridcell\">\r\n    <ng-content select=\"cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]\"></ng-content>\r\n  </span>\r\n}\r\n\r\n<span class=\"visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\r\n", styles: [".cute-chip,.cute-chip-option,cute-chip-row{position:relative;display:inline-flex;align-items:center}.cute-chip.cute-static-chip,.cute-chip-option.cute-static-chip,cute-chip-row.cute-static-chip{--bs-btn-bg: rgba(var(--bs-body-color-rgb), .06);cursor:auto}.cute-chip:hover,.cute-chip-option:hover,cute-chip-row:hover{--bs-btn-hover-bg: rgba(var(--bs-body-color-rgb), .1)}.cute-chip:active,.cute-chip-option:active,cute-chip-row:active{--bs-btn-active-bg: rgba(var(--bs-body-color-rgb), .14)}.cute-chip__cell [cuteChipAction],.cute-chip__cell .cute-chip-action{display:inline-flex;align-items:center;cursor:pointer;outline:none}.cute-chip__cell [cuteChipAction].cute-chip__action--presentational,.cute-chip__cell .cute-chip-action.cute-chip__action--presentational{cursor:auto}.cute-chip__cell [cuteChipAction]:not(button),.cute-chip__cell .cute-chip-action:not(button){gap:.5rem}.cute-chip__cell [cuteChipAction] .cute-chip__graphic,.cute-chip__cell .cute-chip-action .cute-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark{padding-left:2px;padding-right:4px}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{width:1.2rem}[dir=rtl] .cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,[dir=rtl] .cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{transform:rotateY(180deg)}.cute-chip__cell [cuteChipAction].disabled,.cute-chip__cell .cute-chip-action.disabled{cursor:auto}.cute-chip__cell [cuteChipAction].cute-chip__icon--trailing,.cute-chip__cell .cute-chip-action.cute-chip__icon--trailing{padding-left:4px;padding-right:4px;border:none;background:none}.cute-standard-chip{-webkit-tap-highlight-color:transparent}@media (forced-colors: active){.cute-standard-chip{outline:solid 1px}.cute-standard-chip .cute-chip__checkmark-path{stroke:CanvasText!important}}.cute-standard-chip .cute-chip__icon--primary{--size: 18px;height:var(--size);width:var(--size);font-size:var(--size);border-radius:calc(var(--size) * 1.3);min-height:fit-content;background:none}.cute-standard-chip .cute-chip__cell--primary{display:flex}.cute-standard-chip .cute-chip__cell--trailing{display:inline-flex;background-color:transparent;padding-left:.5rem;padding-right:0}[dir=rtl] .cute-standard-chip .cute-chip__cell--trailing{padding-left:0;padding-right:.5rem}.cute-standard-chip._cute-animation-noopable,.cute-standard-chip._cute-animation-noopable .cute-chip__graphic,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.cute-chip-focus-overlay{inset:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .15s linear}._cute-animation-noopable .cute-chip-focus-overlay{transition:none}.cute-basic-chip .cute-chip-focus-overlay{display:none}.cute-chip-action-label{text-align:left;white-space:nowrap}[dir=rtl] .cute-chip-action-label{text-align:right}.cute-chip-primary-focus-indicator{position:absolute;inset:0;pointer-events:none}.cute-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}@media (forced-colors: active){.cute-chip-selected:not(.cute-chip-multiple){outline-width:3px}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { editable: [{
+                type: Input
+            }], edited: [{
+                type: Output
+            }], defaultEditInput: [{
+                type: ViewChild,
+                args: [CuteChipEditInput]
+            }], contentEditInput: [{
+                type: ContentChild,
+                args: [CuteChipEditInput]
+            }] } });
+
+/**
+ * @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.
+ */
+class CuteChipSet {
+    /** Combined stream of all the child chips' focus events. */
+    get chipFocusChanges() {
+        return this._getChipStream(chip => chip._onFocus);
+    }
+    /** Combined stream of all the child chips' destroy events. */
+    get chipDestroyedChanges() {
+        return this._getChipStream(chip => chip.destroyed);
+    }
+    /** Combined stream of all the child chips' remove events. */
+    get chipRemovedChanges() {
+        return this._getChipStream(chip => chip.removed);
+    }
+    /** Whether the chip set is disabled. */
+    get disabled() { return this._disabled; }
+    set disabled(value) {
+        this._disabled = value;
+        this._syncChipsState();
+    }
+    /** Whether the chip list contains chips or not. */
+    get empty() {
+        return !this._chips || this._chips.length === 0;
+    }
+    /** The ARIA role applied to the chip set. */
+    get role() {
+        if (this._explicitRole) {
+            return this._explicitRole;
+        }
+        return this.empty ? null : this._defaultRole;
+    }
+    set role(value) {
+        this._explicitRole = value;
+    }
+    /** Whether any of the chips inside this chip-set has focus. */
+    get focused() {
+        return this._hasFocusedChip();
+    }
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        this._changeDetectorRef = inject(ChangeDetectorRef);
+        this._dir = inject(Directionality, { optional: true });
+        /** Index of the last destroyed chip that had focus. */
+        this._lastDestroyedFocusedChipIndex = null;
+        /** Subject that emits when the component has been destroyed. */
+        this._destroyed = new Subject();
+        /** Role to use if it hasn't been overwritten by the user. */
+        this._defaultRole = 'presentation';
+        this._disabled = false;
+        this._explicitRole = null;
+        /** Tabindex of the chip set. */
+        this.tabIndex = 0;
+        /** Flat list of all the actions contained within the chips. */
+        this._chipActions = new QueryList();
+    }
+    ngAfterViewInit() {
+        this._setUpFocusManagement();
+        this._trackChipSetChanges();
+        this._trackDestroyedFocusedChip();
+    }
+    ngOnDestroy() {
+        this._keyManager?.destroy();
+        this._chipActions.destroy();
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /** Checks whether any of the chips is focused. */
+    _hasFocusedChip() {
+        return (this._chips && this._chips.some(chip => chip._hasFocus())) || false;
+    }
+    /** Syncs the chip-set's state with the individual chips. */
+    _syncChipsState() {
+        if (this._chips) {
+            this._chips.forEach(chip => {
+                chip._chipListDisabled = this._disabled;
+                chip._changeDetectorRef.markForCheck();
+            });
+        }
+    }
+    /** The dummy method for subclasses to override. Base chip set cannot be focused. */
+    focus() { }
+    /** Handles keyboard events on the chip set. */
+    _handleKeydown(event) {
+        if (this._originatesFromChip(event)) {
+            this._keyManager?.onKeydown(event);
+        }
+    }
+    /**
+     * 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.
+     */
+    _isValidIndex(index) {
+        if (this._chips) {
+            return index >= 0 && index < this._chips.length;
+        }
+        return false;
+    }
+    /**
+     * 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.
+     */
+    _allowFocusEscape() {
+        const previous = this._elementRef.nativeElement.tabIndex;
+        if (previous !== -1) {
+            // Set the tabindex directly on the element, instead of going through
+            // the data binding, because we aren't guaranteed that change detection
+            // will run quickly enough to allow focus to escape.
+            this._elementRef.nativeElement.tabIndex = -1;
+            // Note that this needs to be a `setTimeout`, because a `Promise.resolve`
+            // doesn't allow enough time for the focus to escape.
+            setTimeout(() => (this._elementRef.nativeElement.tabIndex = previous));
+        }
+    }
+    /**
+     * Gets a stream of events from all the chips within the set.
+     * The stream will automatically incorporate any newly added chips.
+     */
+    _getChipStream(mappingFunction) {
+        if (this._chips) {
+            return this._chips.changes.pipe(startWith(null), switchMap(() => merge(...this._chips.map(mappingFunction))));
+        }
+        return EMPTY;
+    }
+    /** Checks whether an event comes from inside a chip element. */
+    _originatesFromChip(event) {
+        let currentElement = event.target;
+        while (currentElement && currentElement !== this._elementRef.nativeElement) {
+            if (currentElement.classList.contains('cute-chip')) {
+                return true;
+            }
+            currentElement = currentElement.parentElement;
+        }
+        return false;
+    }
+    /** Sets up the chip set's focus management logic. */
+    _setUpFocusManagement() {
+        // Create a flat `QueryList` containing the actions of all the chips.
+        // This allows us to navigate both within the chip and move to the next/previous
+        // one using the existing `ListKeyManager`.
+        this._chips?.changes.pipe(startWith(this._chips)).subscribe((chips) => {
+            const actions = [];
+            chips.forEach(chip => chip._getActions().forEach(action => actions.push(action)));
+            this._chipActions.reset(actions);
+            this._chipActions.notifyOnChanges();
+        });
+        this._keyManager = new FocusKeyManager(this._chipActions)
+            .withVerticalOrientation()
+            .withHorizontalOrientation(this._dir ? this._dir.value : 'ltr')
+            .withHomeAndEnd()
+            .skipPredicate(action => this._skipPredicate(action));
+        // Keep the manager active index in sync so that navigation picks
+        // up from the current chip if the user clicks into the list directly.
+        this.chipFocusChanges.pipe(takeUntil(this._destroyed)).subscribe(({ chip }) => {
+            const action = chip._getSourceAction(document.activeElement);
+            if (action) {
+                this._keyManager?.updateActiveItem(action);
+            }
+        });
+        this._dir?.change
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(direction => this._keyManager?.withHorizontalOrientation(direction));
+    }
+    /**
+     * 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.
+     */
+    _skipPredicate(action) {
+        // Skip chips that the user cannot interact with.
+        // The `cute-chip-set` does not permit focusing on disabled chips.
+        return !action.isInteractive || action.disabled;
+    }
+    /** Listens to changes in the chip set and syncs up the state of the individual chips. */
+    _trackChipSetChanges() {
+        this._chips?.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+            if (this.disabled) {
+                // Since this happens after the content has been
+                // checked, we need to defer it to the next tick.
+                Promise.resolve().then(() => this._syncChipsState());
+            }
+            this._redirectDestroyedChipFocus();
+        });
+    }
+    /** Starts tracking the destroyed chips to capture the focused one. */
+    _trackDestroyedFocusedChip() {
+        this.chipDestroyedChanges.pipe(takeUntil(this._destroyed)).subscribe((event) => {
+            // If the focused chip is destroyed, save its index so that we can move focus to the next
+            // chip. We only save the index here, rather than move the focus immediately, because we want
+            // to wait until the chip is removed from the chip list before focusing the next one. This
+            // allows us to keep focus on the same index if the chip gets swapped out.
+            const chipArray = this._chips?.toArray() || [];
+            const chipIndex = chipArray.indexOf(event.chip);
+            const hasFocus = event.chip._hasFocus();
+            const wasLastFocused = event.chip._hadFocusOnRemove &&
+                this._keyManager?.activeItem &&
+                event.chip._getActions().includes(this._keyManager.activeItem);
+            // Note that depending on the timing, the chip might've already lost focus by the
+            // time we check this. We need the `wasLastFocused` as a fallback to detect such cases.
+            // In `wasLastFocused` we also need to ensure that the chip actually had focus when it was
+            // deleted so that we don't steal away the user's focus after they've moved on from the chip.
+            const shouldMoveFocus = hasFocus || wasLastFocused;
+            if (this._isValidIndex(chipIndex) && shouldMoveFocus) {
+                this._lastDestroyedFocusedChipIndex = chipIndex;
+            }
+        });
+    }
+    /**
+     * Finds the next appropriate chip to move focus to
+     * if the currently focused chip is destroyed.
+     */
+    _redirectDestroyedChipFocus() {
+        if (this._lastDestroyedFocusedChipIndex == null) {
+            return;
+        }
+        if (this._chips && this._chips.length) {
+            const newIndex = Math.min(this._lastDestroyedFocusedChipIndex, this._chips.length - 1);
+            const chipToFocus = this._chips.toArray()[newIndex];
+            if (chipToFocus.disabled) {
+                // If we're down to one disabled chip, move focus back to the set.
+                if (this._chips.length === 1) {
+                    this.focus();
+                }
+                else {
+                    this._keyManager?.setPreviousItemActive();
+                }
+            }
+            else {
+                chipToFocus.focus();
+            }
+        }
+        else {
+            this.focus();
+        }
+        this._lastDestroyedFocusedChipIndex = null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipSet, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: CuteChipSet, isStandalone: true, selector: "cute-chip-set", inputs: { disabled: ["disabled", "disabled", booleanAttribute], role: "role", tabIndex: ["tabIndex", "tabIndex", (value) => (value == null ? 0 : numberAttribute(value))] }, host: { listeners: { "keydown": "_handleKeydown($event)" }, properties: { "attr.role": "role" }, classAttribute: "cute-chip-set" }, queries: [{ propertyName: "_chips", predicate: CuteChip, descendants: true }], ngImport: i0, template: `
+    <div class="cute-chip-set__chips" role="presentation">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [".cute-chip-listbox,.cute-chip-grid,.cute-chip-set{display:flex;width:100%;background-color:var(--bs-body-bg)}.cute-chip-listbox .cute-chip-set__chips,.cute-chip-grid .cute-chip-set__chips,.cute-chip-set .cute-chip-set__chips{display:flex;flex-flow:wrap;gap:.375rem;min-width:100%}.cute-form-field .cute-chip-listbox,.cute-form-field .cute-chip-grid,.cute-form-field .cute-chip-set{min-height:58px}.cute-chip-grid-focused{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cute-chip-set-stacked .cute-chip-set__chips{flex-direction:column;align-items:flex-start}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip{display:block;width:100%}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__graphic{flex-grow:0}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip-action,.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__action--primary{flex-basis:100%;justify-content:start;width:100%}input.cute-chip-input{flex:1 0 150px;margin-left:.25rem;border:none;outline:none;background:none;transition:opacity .15s 0ms cubic-bezier(.4,0,.2,1)}input.cute-chip-input:not(:focus){opacity:.75}[dir=rtl] input.cute-chip-input{margin-left:0;margin-right:.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipSet, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-chip-set', template: `
+    <div class="cute-chip-set__chips" role="presentation">
+      <ng-content></ng-content>
+    </div>
+  `, host: {
+                        'class': 'cute-chip-set',
+                        '(keydown)': '_handleKeydown($event)',
+                        '[attr.role]': 'role',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".cute-chip-listbox,.cute-chip-grid,.cute-chip-set{display:flex;width:100%;background-color:var(--bs-body-bg)}.cute-chip-listbox .cute-chip-set__chips,.cute-chip-grid .cute-chip-set__chips,.cute-chip-set .cute-chip-set__chips{display:flex;flex-flow:wrap;gap:.375rem;min-width:100%}.cute-form-field .cute-chip-listbox,.cute-form-field .cute-chip-grid,.cute-form-field .cute-chip-set{min-height:58px}.cute-chip-grid-focused{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cute-chip-set-stacked .cute-chip-set__chips{flex-direction:column;align-items:flex-start}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip{display:block;width:100%}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__graphic{flex-grow:0}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip-action,.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__action--primary{flex-basis:100%;justify-content:start;width:100%}input.cute-chip-input{flex:1 0 150px;margin-left:.25rem;border:none;outline:none;background:none;transition:opacity .15s 0ms cubic-bezier(.4,0,.2,1)}input.cute-chip-input:not(:focus){opacity:.75}[dir=rtl] input.cute-chip-input{margin-left:0;margin-right:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], role: [{
+                type: Input
+            }], tabIndex: [{
+                type: Input,
+                args: [{
+                        transform: (value) => (value == null ? 0 : numberAttribute(value)),
+                    }]
+            }], _chips: [{
+                type: ContentChildren,
+                args: [CuteChip, {
+                        // We need to use `descendants: true`, because Ivy will no longer match
+                        // indirect descendants if it's left as false.
+                        descendants: true,
+                    }]
+            }] } });
+
+/**
+ * @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 grid value has changed. */
+class CuteChipGridChange {
+    constructor(
+    /** Chip grid that emitted the event. */
+    source, 
+    /** Value of the chip grid when the event was emitted. */
+    value) {
+        this.source = source;
+        this.value = value;
+    }
+}
+/**
+ * An extension of the CuteChipSet component used with CuteChipRow chips and
+ * the cuteChipInputFor directive.
+ */
+class CuteChipGrid extends CuteChipSet {
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get disabled() {
+        return this.ngControl ? !!this.ngControl.disabled : this._disabled;
+    }
+    set disabled(value) {
+        this._disabled = value;
+        this._syncChipsState();
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get id() {
+        return this._chipInput?.id || "";
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get empty() {
+        return ((!this._chipInput || this._chipInput.empty) && (!this._chips || this._chips.length === 0));
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get placeholder() {
+        return (this._chipInput ? this._chipInput.placeholder : this._placeholder) || "";
+    }
+    set placeholder(value) {
+        this._placeholder = value;
+        this.stateChanges.next();
+    }
+    /** Whether any chips or the `cuteChipInput` inside this <chip-grid> has focus. */
+    get focused() {
+        return this._chipInput?.focused || this._hasFocusedChip();
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get required() {
+        return this._required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    set required(value) {
+        this._required = value;
+        this.stateChanges.next();
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get shouldLabelFloat() {
+        return !this.empty || this.focused;
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get value() { return this._value; }
+    set value(value) { this._value = value; }
+    /** An object used to control when error messages are shown. */
+    get errorStateMatcher() { return this._errorStateTracker.matcher; }
+    set errorStateMatcher(value) {
+        this._errorStateTracker.matcher = value;
+    }
+    /** Combined stream of all of the child chips' blur events. */
+    get chipBlurChanges() {
+        return this._getChipStream(chip => chip._onBlur);
+    }
+    /** Whether the chip grid is in an error state. */
+    get errorState() { return this._errorStateTracker.errorState; }
+    set errorState(value) {
+        this._errorStateTracker.errorState = value;
+    }
+    get controlElementRef() {
+        return this._elementRef;
+    }
+    constructor() {
+        super();
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        /**
+         * Implemented as part of CuteFormFieldControl.
+         * @docs-private
+         */
+        this.controlType = 'cute-chip-grid';
+        this._defaultRole = 'grid';
+        /**
+         * List of element ids to propagate to the chipInput's `aria-describedby` attribute.
+         */
+        this._ariaDescribedbyIds = [];
+        /**
+         * Function when touched. Set as part of ControlValueAccessor implementation.
+         * @docs-private
+         */
+        this._onTouched = () => { };
+        /**
+         * Function when changed. Set as part of ControlValueAccessor implementation.
+         * @docs-private
+         */
+        this._onChange = () => { };
+        this._value = [];
+        /** Emits when the user has changed the chip grid value. */
+        this.change = new EventEmitter();
+        /**
+         * Emits whenever the raw value of the <chip-grid> changes. This is here primarily
+         * to facilitate the two-way binding for the `value` input.
+         */
+        this.valueChange = new EventEmitter();
+        this._chips = undefined;
+        /**
+         * Emits whenever the component state changes and should cause the parent
+         * form-field to update. Implemented as part of `CuteFormFieldControl`.
+         */
+        this.stateChanges = new Subject();
+        const parentForm = inject(NgForm, { optional: true });
+        const parentFormGroup = inject(FormGroupDirective, { optional: true });
+        const defaultErrorStateMatcher = inject(ErrorStateMatcher);
+        if (this.ngControl) {
+            this.ngControl.valueAccessor = this;
+        }
+        this._errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, this.ngControl, parentFormGroup, parentForm, this.stateChanges);
+    }
+    ngAfterContentInit() {
+        this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => {
+            this._blur();
+            this.stateChanges.next();
+        });
+        merge(this.chipFocusChanges, this._chips.changes)
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => this.stateChanges.next());
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (!this._chipInput && isDevMode()) {
+            throw Error('cute-chip-grid must be used in combination with cuteChipInputFor.');
+        }
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean, or we risk destroying the performance.
+            this.updateErrorState();
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this.stateChanges.complete();
+    }
+    /** Associates an HTML input element with this chip grid. */
+    registerInput(inputElement) {
+        this._chipInput = inputElement;
+        this._chipInput.setDescribedByIds(this._ariaDescribedbyIds);
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    onContainerClick(event) {
+        if (!this.disabled && !this._originatesFromChip(event)) {
+            this.focus();
+        }
+    }
+    _toggleFocusedStyle(force) {
+        if (this._elementRef.nativeElement.classList.contains("input-group-text")) {
+            this._elementRef.nativeElement.classList.toggle("cute-chip-grid-focused", force);
+        }
+    }
+    /**
+     * Focuses the first chip in this chip grid, or the associated input when there
+     * are no eligible chips.
+     */
+    focus() {
+        if (this.disabled || this._chipInput?.focused) {
+            return;
+        }
+        if (!this._chips.length || this._chips.first.disabled) {
+            // Delay until the next tick, because this can cause a "changed after checked"
+            // error if the input does something on focus (e.g., opens an autocomplete).
+            Promise.resolve().then(() => this._chipInput?.focus());
+        }
+        else {
+            const activeItem = this._keyManager?.activeItem;
+            if (activeItem) {
+                activeItem.focus();
+            }
+            else {
+                this._keyManager?.setFirstItemActive();
+            }
+        }
+        this.stateChanges.next();
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    setDescribedByIds(ids) {
+        // We must keep this up to date to handle the case where ids are set
+        // before the chip input is registered.
+        this._ariaDescribedbyIds = ids;
+        this._chipInput?.setDescribedByIds(ids);
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    writeValue(value) {
+        // The user is responsible for creating the child chips, so we just store the value.
+        this._value = value;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.stateChanges.next();
+    }
+    /** Refreshes the error state of the chip grid. */
+    updateErrorState() {
+        this._errorStateTracker.updateErrorState();
+    }
+    /** When blurred, mark the field as touched when focus moved outside the chip grid. */
+    _blur() {
+        if (!this.disabled) {
+            this._toggleFocusedStyle(false);
+            // Check whether the focus moved to chip input.
+            // If the focus is not moved to chip input, mark the field as touched. If the focus moved
+            // to chip input, do nothing.
+            // Timeout is needed to wait for the focus() event trigger on chip input.
+            setTimeout(() => {
+                if (!this.focused) {
+                    this._propagateChanges();
+                    this._markAsTouched();
+                }
+            });
+        }
+    }
+    /**
+     * 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.
+     */
+    _allowFocusEscape() {
+        if (!this._chipInput?.focused) {
+            super._allowFocusEscape();
+        }
+    }
+    /** Handles custom keyboard events. */
+    _handleKeydown(event) {
+        if (event.keyCode === TAB) {
+            if (this._chipInput?.focused &&
+                hasModifierKey(event, 'shiftKey') &&
+                this._chips.length &&
+                !this._chips.last.disabled) {
+                event.preventDefault();
+                if (this._keyManager?.activeItem) {
+                    this._keyManager?.setActiveItem(this._keyManager.activeItem);
+                }
+                else {
+                    this._focusLastChip();
+                }
+            }
+            else {
+                // Use the super method here since it doesn't check for the input
+                // focused state. This allows focus to escape if there's only one
+                // disabled chip left in the list.
+                super._allowFocusEscape();
+            }
+        }
+        else if (!this._chipInput?.focused) {
+            super._handleKeydown(event);
+        }
+        this.stateChanges.next();
+    }
+    _focusLastChip() {
+        if (this._chips.length) {
+            this._chips.last.focus();
+        }
+    }
+    /** Emits change event to set the model value. */
+    _propagateChanges() {
+        const valueToEmit = this._chips.length ? this._chips.toArray().map(chip => chip.value) : [];
+        this._value = valueToEmit;
+        this.change.emit(new CuteChipGridChange(this, valueToEmit));
+        this.valueChange.emit(valueToEmit);
+        this._onChange(valueToEmit);
+        this._changeDetectorRef.markForCheck();
+    }
+    /** Mark the field as touched */
+    _markAsTouched() {
+        this._onTouched();
+        this._changeDetectorRef.markForCheck();
+        this.stateChanges.next();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipGrid, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: CuteChipGrid, isStandalone: true, selector: "cute-chip-grid", inputs: { disabled: ["disabled", "disabled", booleanAttribute], placeholder: "placeholder", required: ["required", "required", booleanAttribute], value: "value", errorStateMatcher: "errorStateMatcher" }, outputs: { change: "change", valueChange: "valueChange" }, host: { listeners: { "focus": "focus()", "blur": "_blur()" }, properties: { "attr.role": "role", "attr.tabindex": "(disabled || (_chips && _chips.length === 0)) ? -1 : tabIndex", "attr.aria-disabled": "disabled", "attr.aria-invalid": "errorState", "class.cute-chip-list-disabled": "disabled", "class.cute-chip-list-invalid": "errorState", "class.cute-chip-list-required": "required" }, classAttribute: "cute-chip-grid input-group-text" }, providers: [{ provide: CuteFormFieldControl, useExisting: CuteChipGrid }], queries: [{ propertyName: "_chips", predicate: CuteChipRow, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="cute-chip-set__chips" role="presentation">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [".cute-chip-listbox,.cute-chip-grid,.cute-chip-set{display:flex;width:100%;background-color:var(--bs-body-bg)}.cute-chip-listbox .cute-chip-set__chips,.cute-chip-grid .cute-chip-set__chips,.cute-chip-set .cute-chip-set__chips{display:flex;flex-flow:wrap;gap:.375rem;min-width:100%}.cute-form-field .cute-chip-listbox,.cute-form-field .cute-chip-grid,.cute-form-field .cute-chip-set{min-height:58px}.cute-chip-grid-focused{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cute-chip-set-stacked .cute-chip-set__chips{flex-direction:column;align-items:flex-start}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip{display:block;width:100%}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__graphic{flex-grow:0}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip-action,.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__action--primary{flex-basis:100%;justify-content:start;width:100%}input.cute-chip-input{flex:1 0 150px;margin-left:.25rem;border:none;outline:none;background:none;transition:opacity .15s 0ms cubic-bezier(.4,0,.2,1)}input.cute-chip-input:not(:focus){opacity:.75}[dir=rtl] input.cute-chip-input{margin-left:0;margin-right:.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipGrid, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-chip-grid', template: `
+    <div class="cute-chip-set__chips" role="presentation">
+      <ng-content></ng-content>
+    </div>
+  `, host: {
+                        'class': 'cute-chip-grid input-group-text',
+                        '[attr.role]': 'role',
+                        '[attr.tabindex]': '(disabled || (_chips && _chips.length === 0)) ? -1 : tabIndex',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.aria-invalid]': 'errorState',
+                        '[class.cute-chip-list-disabled]': 'disabled',
+                        '[class.cute-chip-list-invalid]': 'errorState',
+                        '[class.cute-chip-list-required]': 'required',
+                        '(focus)': 'focus()',
+                        '(blur)': '_blur()',
+                    }, providers: [{ provide: CuteFormFieldControl, useExisting: CuteChipGrid }], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".cute-chip-listbox,.cute-chip-grid,.cute-chip-set{display:flex;width:100%;background-color:var(--bs-body-bg)}.cute-chip-listbox .cute-chip-set__chips,.cute-chip-grid .cute-chip-set__chips,.cute-chip-set .cute-chip-set__chips{display:flex;flex-flow:wrap;gap:.375rem;min-width:100%}.cute-form-field .cute-chip-listbox,.cute-form-field .cute-chip-grid,.cute-form-field .cute-chip-set{min-height:58px}.cute-chip-grid-focused{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cute-chip-set-stacked .cute-chip-set__chips{flex-direction:column;align-items:flex-start}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip{display:block;width:100%}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__graphic{flex-grow:0}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip-action,.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__action--primary{flex-basis:100%;justify-content:start;width:100%}input.cute-chip-input{flex:1 0 150px;margin-left:.25rem;border:none;outline:none;background:none;transition:opacity .15s 0ms cubic-bezier(.4,0,.2,1)}input.cute-chip-input:not(:focus){opacity:.75}[dir=rtl] input.cute-chip-input{margin-left:0;margin-right:.25rem}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], placeholder: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], errorStateMatcher: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], valueChange: [{
+                type: Output
+            }], _chips: [{
+                type: ContentChildren,
+                args: [CuteChipRow, {
+                        // We need to use `descendants: true`, because Ivy will no longer match
+                        // indirect descendants if it's left as false.
+                        descendants: true,
+                    }]
+            }] } });
+
+/**
+ * @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).
+ */
+/** Avatar image within a chip. */
+class CuteChipAvatar {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipAvatar, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteChipAvatar, isStandalone: true, selector: "cute-chip-avatar, [cuteChipAvatar]", host: { attributes: { "role": "img" }, classAttribute: "cute-chip-avatar cute-chip__icon cute-chip__icon--primary" }, providers: [{ provide: CUTE_CHIP_AVATAR, useExisting: CuteChipAvatar }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipAvatar, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-chip-avatar, [cuteChipAvatar]',
+                    host: {
+                        'class': 'cute-chip-avatar cute-chip__icon cute-chip__icon--primary',
+                        'role': 'img',
+                    },
+                    providers: [{ provide: CUTE_CHIP_AVATAR, useExisting: CuteChipAvatar }],
+                    standalone: true,
+                }]
+        }] });
+/** Non-interactive trailing icon in a chip. */
+class CuteChipTrailingIcon extends CuteChipAction {
+    constructor() {
+        super(...arguments);
+        /**
+         * MDC considers all trailing actions as a remove icon,
+         * but we support non-interactive trailing icons.
+         */
+        this.isInteractive = false;
+        this._isPrimary = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipTrailingIcon, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteChipTrailingIcon, isStandalone: true, selector: "cute-chip-trailing-icon, [cuteChipTrailingIcon]", host: { attributes: { "aria-hidden": "true" }, classAttribute: "cute-chip-trailing-icon cute-chip__icon cute-chip__icon--trailing" }, providers: [{ provide: CUTE_CHIP_TRAILING_ICON, useExisting: CuteChipTrailingIcon }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipTrailingIcon, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-chip-trailing-icon, [cuteChipTrailingIcon]',
+                    host: {
+                        'class': 'cute-chip-trailing-icon cute-chip__icon cute-chip__icon--trailing',
+                        'aria-hidden': 'true',
+                    },
+                    providers: [{ provide: CUTE_CHIP_TRAILING_ICON, useExisting: CuteChipTrailingIcon }],
+                    standalone: true,
+                }]
+        }] });
+/**
+ * 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>
+ * ```
+ */
+class CuteChipEdit extends CuteChipAction {
+    constructor() {
+        super(...arguments);
+        this._isPrimary = false;
+        this._isLeading = true;
+    }
+    _handleClick(event) {
+        if (!this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            this._parentChip._edit();
+        }
+    }
+    _handleKeydown(event) {
+        if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            this._parentChip._edit();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipEdit, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteChipEdit, isStandalone: true, selector: "[cuteChipEdit]", host: { attributes: { "role": "button" }, properties: { "attr.aria-hidden": "null" }, classAttribute: "cute-chip-edit cute-chip-avatar cute-focus-indicator cute-chip__icon cute-chip__icon--primary" }, providers: [{ provide: CUTE_CHIP_EDIT, useExisting: CuteChipEdit }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipEdit, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteChipEdit]',
+                    host: {
+                        'class': 'cute-chip-edit cute-chip-avatar cute-focus-indicator ' +
+                            'cute-chip__icon cute-chip__icon--primary',
+                        'role': 'button',
+                        '[attr.aria-hidden]': 'null',
+                    },
+                    providers: [{ provide: CUTE_CHIP_EDIT, useExisting: CuteChipEdit }],
+                }]
+        }] });
+/**
+ * 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>
+ * ```
+ */
+class CuteChipRemove extends CuteChipAction {
+    constructor() {
+        super(...arguments);
+        this._isPrimary = false;
+    }
+    _handleClick(event) {
+        if (!this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            this._parentChip.remove();
+        }
+    }
+    _handleKeydown(event) {
+        if ((event.keyCode === ENTER || event.keyCode === SPACE) && !this.disabled) {
+            event.stopPropagation();
+            event.preventDefault();
+            this._parentChip.remove();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipRemove, deps: null, target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteChipRemove, isStandalone: true, selector: "[cuteChipRemove]", host: { attributes: { "role": "button" }, properties: { "attr.aria-hidden": "null" }, classAttribute: "cute-chip-remove cute-chip-trailing-icon cute-focus-indicator cute-chip__icon cute-chip__icon--trailing cute-chip__action" }, providers: [{ provide: CUTE_CHIP_REMOVE, useExisting: CuteChipRemove }], usesInheritance: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipRemove, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteChipRemove]',
+                    host: {
+                        'class': 'cute-chip-remove cute-chip-trailing-icon cute-focus-indicator ' +
+                            'cute-chip__icon cute-chip__icon--trailing cute-chip__action',
+                        'role': 'button',
+                        '[attr.aria-hidden]': 'null',
+                    },
+                    providers: [{ provide: CUTE_CHIP_REMOVE, useExisting: CuteChipRemove }],
+                    standalone: true,
+                }]
+        }] });
+
+/**
+ * @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).
+ */
+// Increasing integer for generating unique ids.
+let nextUniqueId = 0;
+/**
+ * Directive that adds chip-specific behaviors to an input element inside `<cute-form-field>`.
+ * May be placed inside or outside a `<cute-chip-grid>`.
+ */
+class CuteChipInput {
+    /** Register input for a chip list */
+    get chipGrid() { return this._chipGrid; }
+    set chipGrid(value) {
+        if (value) {
+            this._chipGrid = value;
+            this._chipGrid.registerInput(this);
+        }
+    }
+    /** Whether the input is disabled. */
+    get disabled() {
+        return (this._disabled || (this._chipGrid && this._chipGrid.disabled)) ?? false;
+    }
+    set disabled(value) {
+        this._disabled = value;
+    }
+    /** Whether the input is empty. */
+    get empty() {
+        return !this.inputElement.value;
+    }
+    constructor() {
+        this._elementRef = inject(ElementRef);
+        /** Used to prevent focus moving to chips while user is holding backspace */
+        this._focusLastChipOnBackspace = false;
+        /** Whether the control is focused. */
+        this.focused = false;
+        /**
+         * Whether the `chipEnd` event will be emitted when the input is blurred.
+         */
+        this.addOnBlur = false;
+        /** Emitted when a chip is to be added. */
+        this.chipEnd = new EventEmitter();
+        /** The input's placeholder text. */
+        this.placeholder = '';
+        /** Unique id for the input. */
+        this.id = `cute-chip-list-input-${nextUniqueId++}`;
+        this._disabled = false;
+        /** Whether the input is readonly. */
+        this.readonly = false;
+        /** Whether the input should remain interactive when it is disabled. */
+        this.disabledInteractive = false;
+        const defaultOptions = inject(CUTE_CHIPS_DEFAULT_OPTIONS);
+        const formField = inject(CUTE_FORM_FIELD, { optional: true });
+        this.inputElement = this._elementRef.nativeElement;
+        this.separatorKeyCodes = defaultOptions.separatorKeyCodes;
+        this.disabledInteractive = defaultOptions.inputDisabledInteractive ?? false;
+        if (formField) {
+            this.inputElement.classList.add('cute-form-field-input-control');
+        }
+    }
+    ngOnChanges() {
+        this._chipGrid?.stateChanges.next();
+    }
+    ngOnDestroy() {
+        this.chipEnd.complete();
+    }
+    /** Utility method to make host definition/tests more clear. */
+    _keydown(event) {
+        if (this.empty && event.keyCode === BACKSPACE) {
+            // Ignore events where the user is holding down backspace
+            // so that we don't accidentally remove too many chips.
+            if (!event.repeat) {
+                this._chipGrid?._focusLastChip();
+            }
+            event.preventDefault();
+        }
+        else {
+            this._emitChipEnd(event);
+        }
+    }
+    /** Checks to see if the blur should emit the (chipEnd) event. */
+    _blur() {
+        if (this.addOnBlur) {
+            this._emitChipEnd();
+        }
+        this.focused = false;
+        // Blur the chip list if it is not focused
+        if (this._chipGrid) {
+            if (!this._chipGrid.focused) {
+                this._chipGrid._blur();
+            }
+            this._chipGrid.stateChanges.next();
+        }
+    }
+    _focus() {
+        this.focused = true;
+        this._focusLastChipOnBackspace = this.empty;
+        this._chipGrid?._toggleFocusedStyle(true);
+        this._chipGrid?.stateChanges.next();
+    }
+    /** Checks to see if the (chipEnd) event needs to be emitted. */
+    _emitChipEnd(event) {
+        if (!event || this._isSeparatorKey(event)) {
+            this.chipEnd.emit({
+                input: this.inputElement,
+                value: this.inputElement.value,
+                chipInput: this,
+            });
+            event?.preventDefault();
+        }
+    }
+    _onInput() {
+        // Let the chip list know whenever the value changes.
+        this._chipGrid?.stateChanges.next();
+    }
+    /** Focuses the input. */
+    focus() {
+        this.inputElement.focus();
+    }
+    /** Clears the input */
+    clear() {
+        this.inputElement.value = '';
+        this._focusLastChipOnBackspace = true;
+    }
+    setDescribedByIds(ids) {
+        const element = this._elementRef.nativeElement;
+        // Set the value directly in the DOM since this binding
+        // is prone to "changed after checked" errors.
+        if (ids.length) {
+            element.setAttribute('aria-describedby', ids.join(' '));
+        }
+        else {
+            element.removeAttribute('aria-describedby');
+        }
+    }
+    /** Checks whether a keycode is one of the configured separators. */
+    _isSeparatorKey(event) {
+        return !hasModifierKey(event) && new Set(this.separatorKeyCodes).has(event.keyCode);
+    }
+    /** Gets the value to set on the `readonly` attribute. */
+    _getReadonlyAttribute() {
+        return this.readonly || (this.disabled && this.disabledInteractive) ? 'true' : null;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteChipInput, isStandalone: true, selector: "input[cuteChipInputFor]", inputs: { chipGrid: ["cuteChipInputFor", "chipGrid"], addOnBlur: ["cuteChipInputAddOnBlur", "addOnBlur", booleanAttribute], separatorKeyCodes: ["cuteChipInputSeparatorKeyCodes", "separatorKeyCodes"], placeholder: "placeholder", id: "id", disabled: ["disabled", "disabled", booleanAttribute], readonly: ["readonly", "readonly", booleanAttribute], disabledInteractive: ["cuteChipInputDisabledInteractive", "disabledInteractive", booleanAttribute] }, outputs: { chipEnd: "cuteChipInputTokenEnd" }, host: { listeners: { "keydown": "_keydown($event)", "blur": "_blur()", "focus": "_focus()", "input": "_onInput()" }, properties: { "id": "id", "attr.disabled": "disabled && !disabledInteractive ? \"\" : null", "attr.placeholder": "placeholder || null", "attr.aria-invalid": "chipGrid && chipGrid.ngControl ? chipGrid.ngControl.invalid : null", "attr.aria-required": "(chipGrid && chipGrid.required) || null", "attr.aria-disabled": "disabled && disabledInteractive ? \"true\" : null", "attr.readonly": "_getReadonlyAttribute()", "attr.required": "(chipGrid && chipGrid.required) || null" }, classAttribute: "cute-chip-input" }, exportAs: ["cuteChipInput", "cuteChipInputFor"], usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'input[cuteChipInputFor]',
+                    exportAs: 'cuteChipInput, cuteChipInputFor',
+                    host: {
+                        'class': 'cute-chip-input',
+                        '(keydown)': '_keydown($event)',
+                        '(blur)': '_blur()',
+                        '(focus)': '_focus()',
+                        '(input)': '_onInput()',
+                        '[id]': 'id',
+                        '[attr.disabled]': 'disabled && !disabledInteractive ? "" : null',
+                        '[attr.placeholder]': 'placeholder || null',
+                        '[attr.aria-invalid]': 'chipGrid && chipGrid.ngControl ? chipGrid.ngControl.invalid : null',
+                        '[attr.aria-required]': '(chipGrid && chipGrid.required) || null',
+                        '[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
+                        '[attr.readonly]': '_getReadonlyAttribute()',
+                        '[attr.required]': '(chipGrid && chipGrid.required) || null',
+                    },
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { chipGrid: [{
+                type: Input,
+                args: ['cuteChipInputFor']
+            }], addOnBlur: [{
+                type: Input,
+                args: [{ alias: 'cuteChipInputAddOnBlur', transform: booleanAttribute }]
+            }], separatorKeyCodes: [{
+                type: Input,
+                args: ['cuteChipInputSeparatorKeyCodes']
+            }], chipEnd: [{
+                type: Output,
+                args: ['cuteChipInputTokenEnd']
+            }], placeholder: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }], disabled: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], readonly: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], disabledInteractive: [{
+                type: Input,
+                args: [{ alias: 'cuteChipInputDisabledInteractive', transform: booleanAttribute }]
+            }] } });
+
+/**
+ * @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. */
+class CuteChipSelectionChange {
+    constructor(
+    /** Reference to the chip that emitted the event. */
+    source, 
+    /** Whether the chip that emitted the event is selected. */
+    selected, 
+    /** Whether the selection change was a result of a user interaction. */
+    isUserInput = false) {
+        this.source = source;
+        this.selected = selected;
+        this.isUserInput = isUserInput;
+    }
+}
+/**
+ * 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.
+ */
+class CuteChipOption extends CuteChip {
+    constructor() {
+        super(...arguments);
+        /** Default chip options. */
+        this._defaultOptions = inject(CUTE_CHIPS_DEFAULT_OPTIONS, { optional: true });
+        /** Whether the chip list is selectable. */
+        this.chipListSelectable = true;
+        /** Whether the chip list is in multi-selection mode. */
+        this._chipListMultiple = false;
+        /** Whether the chip list hides single-selection indicator. */
+        this._chipListHideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
+        this._selectable = true;
+        this._selected = false;
+        /** The unstyled chip selector for this component. */
+        this.basicChipAttrName = 'cute-basic-chip-option';
+        /** Emitted when the chip is selected or deselected. */
+        this.selectionChange = new EventEmitter();
+    }
+    /**
+     * 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() { return this._selectable && this.chipListSelectable; }
+    set selectable(value) {
+        this._selectable = value;
+        this.markForCheck();
+    }
+    /** Whether the chip is selected. */
+    get selected() { return this._selected; }
+    set selected(value) { this._setSelectedState(value, false, true); }
+    /**
+     * 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() {
+        return this.selectable ? this.selected.toString() : null;
+    }
+    ngOnInit() {
+        super.ngOnInit();
+        this.role = 'presentation';
+    }
+    /** Selects the chip. */
+    select() { this._setSelectedState(true, false, true); }
+    /** Deselects the chip. */
+    deselect() { this._setSelectedState(false, false, true); }
+    /** Selects this chip and emits userInputSelection event */
+    selectViaInteraction() { this._setSelectedState(true, true, true); }
+    /** Toggles the current selected state of this chip. */
+    toggleSelected(isUserInput = false) {
+        this._setSelectedState(!this.selected, isUserInput, true);
+        return this.selected;
+    }
+    _handlePrimaryActionInteraction() {
+        if (!this.disabled) {
+            // Interacting with the primary action implies that the chip already has focus, however,
+            // there's a bug in Safari where focus ends up lingering on the previous chip (see #27544).
+            // We work around it by explicitly focusing the primary action of the current chip.
+            this.focus();
+            if (this.selectable) {
+                this.toggleSelected(true);
+            }
+        }
+    }
+    _hasLeadingGraphic() {
+        if (this.leadingIcon) {
+            return true;
+        }
+        // The checkmark graphic communicates selected state for both single-select and multi-select.
+        // Include checkmark in single-select to fix a11y issue where the selected state is communicated
+        // visually only using color (#25886).
+        return !this._chipListHideSingleSelectionIndicator || this._chipListMultiple;
+    }
+    _setSelectedState(isSelected, isUserInput, emitEvent) {
+        if (isSelected !== this.selected) {
+            this._selected = isSelected;
+            if (emitEvent) {
+                this.selectionChange.emit({
+                    source: this,
+                    isUserInput,
+                    selected: this.selected,
+                });
+            }
+            this.markForCheck();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipOption, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteChipOption, isStandalone: true, selector: "cute-basic-chip-option, [cute-basic-chip-option], cute-chip-option, [cute-chip-option]", inputs: { selectable: ["selectable", "selectable", booleanAttribute], selected: ["selected", "selected", booleanAttribute] }, outputs: { selectionChange: "selectionChange" }, host: { properties: { "class.cute-chip-disabled": "disabled", "class.cute-chip-highlighted": "highlighted", "class.cute-chip-with-trailing-icon": "_hasTrailingIcon()", "class.cute-chip-selected": "selected", "class.cute-chip-multiple": "_chipListMultiple", "class.cute-chip-with-avatar": "leadingIcon", "attr.tabindex": "null", "attr.aria-label": "null", "attr.aria-description": "null", "attr.role": "role", "id": "id" }, classAttribute: "cute-chip-option" }, providers: [
+            { provide: CuteChip, useExisting: CuteChipOption },
+            { provide: CUTE_CHIP, useExisting: CuteChipOption },
+        ], usesInheritance: true, ngImport: i0, template: "<span class=\"cute-chip-focus-overlay\"></span>\r\n\r\n<span class=\"cute-chip__cell cute-chip__cell--primary\">\r\n  <button\r\n      cuteButton=\"outline-button\"\r\n      class=\"cute-chip-action rounded-pill text-nowrap\"\r\n      [class.active]=\"selected\"\r\n      magnitude=\"small\"\r\n      [color]=\"color\"\r\n      [tabIndex]=\"tabIndex\"\r\n      [disabled]=\"disabled\"\r\n      [attr.aria-selected]=\"ariaSelected\"\r\n      [attr.aria-label]=\"ariaLabel\"\r\n      [attr.aria-describedby]=\"_ariaDescriptionId\"\r\n      data-bs-toggle=\"button\"\r\n      role=\"option\"\r\n      (click)=\"_handlePrimaryActionInteraction()\">\r\n  @if (_hasLeadingGraphic()) {\r\n    <span cuteButtonIcon class=\"cute-chip-graphic cute-chip__graphic\">\r\n        <ng-content select=\"cute-avatar, cute-chip-avatar, [cuteChipAvatar]\"></ng-content>\r\n        @if (selected && !leadingIcon ) {\r\n          <span class=\"cute-chip__checkmark\">\r\n          <svg\r\n            class=\"cute-chip__checkmark-svg\"\r\n            viewBox=\"-2 2 24 24\"\r\n            focusable=\"false\"\r\n            aria-hidden=\"true\">\r\n            <path class=\"cute-chip__checkmark-path\"\r\n                  fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\r\n          </svg>\r\n        </span>\r\n        }\r\n    </span>\r\n  }\r\n    <span class=\"cute-chip__text-label cute-chip-action-label\">\r\n      <ng-content></ng-content>\r\n      <span class=\"cute-chip-primary-focus-indicator\"></span>\r\n    </span>\r\n  </button>\r\n</span>\r\n\r\n@if (_hasTrailingIcon()) {\r\n  <span class=\"cute-chip__cell cute-chip__cell--trailing\">\r\n    <ng-content select=\"cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]\"></ng-content>\r\n  </span>\r\n}\r\n\r\n<span class=\"visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\r\n", styles: [".cute-chip,.cute-chip-option,cute-chip-row{position:relative;display:inline-flex;align-items:center}.cute-chip.cute-static-chip,.cute-chip-option.cute-static-chip,cute-chip-row.cute-static-chip{--bs-btn-bg: rgba(var(--bs-body-color-rgb), .06);cursor:auto}.cute-chip:hover,.cute-chip-option:hover,cute-chip-row:hover{--bs-btn-hover-bg: rgba(var(--bs-body-color-rgb), .1)}.cute-chip:active,.cute-chip-option:active,cute-chip-row:active{--bs-btn-active-bg: rgba(var(--bs-body-color-rgb), .14)}.cute-chip__cell [cuteChipAction],.cute-chip__cell .cute-chip-action{display:inline-flex;align-items:center;cursor:pointer;outline:none}.cute-chip__cell [cuteChipAction].cute-chip__action--presentational,.cute-chip__cell .cute-chip-action.cute-chip__action--presentational{cursor:auto}.cute-chip__cell [cuteChipAction]:not(button),.cute-chip__cell .cute-chip-action:not(button){gap:.5rem}.cute-chip__cell [cuteChipAction] .cute-chip__graphic,.cute-chip__cell .cute-chip-action .cute-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark{padding-left:2px;padding-right:4px}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{width:1.2rem}[dir=rtl] .cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,[dir=rtl] .cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{transform:rotateY(180deg)}.cute-chip__cell [cuteChipAction].disabled,.cute-chip__cell .cute-chip-action.disabled{cursor:auto}.cute-chip__cell [cuteChipAction].cute-chip__icon--trailing,.cute-chip__cell .cute-chip-action.cute-chip__icon--trailing{padding-left:4px;padding-right:4px;border:none;background:none}.cute-standard-chip{-webkit-tap-highlight-color:transparent}@media (forced-colors: active){.cute-standard-chip{outline:solid 1px}.cute-standard-chip .cute-chip__checkmark-path{stroke:CanvasText!important}}.cute-standard-chip .cute-chip__icon--primary{--size: 18px;height:var(--size);width:var(--size);font-size:var(--size);border-radius:calc(var(--size) * 1.3);min-height:fit-content;background:none}.cute-standard-chip .cute-chip__cell--primary{display:flex}.cute-standard-chip .cute-chip__cell--trailing{display:inline-flex;background-color:transparent;padding-left:.5rem;padding-right:0}[dir=rtl] .cute-standard-chip .cute-chip__cell--trailing{padding-left:0;padding-right:.5rem}.cute-standard-chip._cute-animation-noopable,.cute-standard-chip._cute-animation-noopable .cute-chip__graphic,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.cute-chip-focus-overlay{inset:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .15s linear}._cute-animation-noopable .cute-chip-focus-overlay{transition:none}.cute-basic-chip .cute-chip-focus-overlay{display:none}.cute-chip-action-label{text-align:left;white-space:nowrap}[dir=rtl] .cute-chip-action-label{text-align:right}.cute-chip-primary-focus-indicator{position:absolute;inset:0;pointer-events:none}.cute-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}@media (forced-colors: active){.cute-chip-selected:not(.cute-chip-multiple){outline-width:3px}}\n"], dependencies: [{ kind: "component", type: CuteButton, selector: "button[cuteButton],             button[cute-button],             a[cuteButton],             a[cute-button],  ", exportAs: ["cuteButton"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipOption, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-basic-chip-option, [cute-basic-chip-option], cute-chip-option, [cute-chip-option]', host: {
+                        'class': 'cute-chip-option',
+                        '[class.cute-chip-disabled]': 'disabled',
+                        '[class.cute-chip-highlighted]': 'highlighted',
+                        '[class.cute-chip-with-trailing-icon]': '_hasTrailingIcon()',
+                        '[class.cute-chip-selected]': 'selected',
+                        '[class.cute-chip-multiple]': '_chipListMultiple',
+                        '[class.cute-chip-with-avatar]': 'leadingIcon',
+                        /*
+                        '[class.mdc-evolution-chip]': '!_isBasicChip',
+                        '[class.mdc-evolution-chip--filter]': '!_isBasicChip',
+                        '[class.mdc-evolution-chip--selectable]': '!_isBasicChip',
+                        '[class.mdc-evolution-chip--disabled]': 'disabled',
+                        '[class.mdc-evolution-chip--selected]': 'selected',
+                        // This class enables the transition on the checkmark. Usually MDC adds it when selection
+                        // starts and removes it once the animation is finished. We don't need to go through all
+                        // the trouble, because we only care about the selection animation. MDC needs to do it,
+                        // because they also have an exit animation that we don't care about.
+                        '[class.mdc-evolution-chip--selecting]': '!_animationsDisabled',
+                        '[class.mdc-evolution-chip--with-trailing-action]': '_hasTrailingIcon()',
+                        '[class.mdc-evolution-chip--with-primary-icon]': 'leadingIcon',
+                        '[class.mdc-evolution-chip--with-primary-graphic]': '_hasLeadingGraphic()',
+                        '[class.mdc-evolution-chip--with-avatar]': 'leadingIcon',
+                        */
+                        '[attr.tabindex]': 'null',
+                        '[attr.aria-label]': 'null',
+                        '[attr.aria-description]': 'null',
+                        '[attr.role]': 'role',
+                        '[id]': 'id',
+                    }, providers: [
+                        { provide: CuteChip, useExisting: CuteChipOption },
+                        { provide: CUTE_CHIP, useExisting: CuteChipOption },
+                    ], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, imports: [CuteChipAction, CuteButton], template: "<span class=\"cute-chip-focus-overlay\"></span>\r\n\r\n<span class=\"cute-chip__cell cute-chip__cell--primary\">\r\n  <button\r\n      cuteButton=\"outline-button\"\r\n      class=\"cute-chip-action rounded-pill text-nowrap\"\r\n      [class.active]=\"selected\"\r\n      magnitude=\"small\"\r\n      [color]=\"color\"\r\n      [tabIndex]=\"tabIndex\"\r\n      [disabled]=\"disabled\"\r\n      [attr.aria-selected]=\"ariaSelected\"\r\n      [attr.aria-label]=\"ariaLabel\"\r\n      [attr.aria-describedby]=\"_ariaDescriptionId\"\r\n      data-bs-toggle=\"button\"\r\n      role=\"option\"\r\n      (click)=\"_handlePrimaryActionInteraction()\">\r\n  @if (_hasLeadingGraphic()) {\r\n    <span cuteButtonIcon class=\"cute-chip-graphic cute-chip__graphic\">\r\n        <ng-content select=\"cute-avatar, cute-chip-avatar, [cuteChipAvatar]\"></ng-content>\r\n        @if (selected && !leadingIcon ) {\r\n          <span class=\"cute-chip__checkmark\">\r\n          <svg\r\n            class=\"cute-chip__checkmark-svg\"\r\n            viewBox=\"-2 2 24 24\"\r\n            focusable=\"false\"\r\n            aria-hidden=\"true\">\r\n            <path class=\"cute-chip__checkmark-path\"\r\n                  fill=\"none\" stroke=\"currentColor\" d=\"M1.73,12.91 8.1,19.28 22.79,4.59\" />\r\n          </svg>\r\n        </span>\r\n        }\r\n    </span>\r\n  }\r\n    <span class=\"cute-chip__text-label cute-chip-action-label\">\r\n      <ng-content></ng-content>\r\n      <span class=\"cute-chip-primary-focus-indicator\"></span>\r\n    </span>\r\n  </button>\r\n</span>\r\n\r\n@if (_hasTrailingIcon()) {\r\n  <span class=\"cute-chip__cell cute-chip__cell--trailing\">\r\n    <ng-content select=\"cute-chip-trailing-icon,[cuteChipRemove],[cuteChipTrailingIcon]\"></ng-content>\r\n  </span>\r\n}\r\n\r\n<span class=\"visually-hidden\" [id]=\"_ariaDescriptionId\">{{ariaDescription}}</span>\r\n", styles: [".cute-chip,.cute-chip-option,cute-chip-row{position:relative;display:inline-flex;align-items:center}.cute-chip.cute-static-chip,.cute-chip-option.cute-static-chip,cute-chip-row.cute-static-chip{--bs-btn-bg: rgba(var(--bs-body-color-rgb), .06);cursor:auto}.cute-chip:hover,.cute-chip-option:hover,cute-chip-row:hover{--bs-btn-hover-bg: rgba(var(--bs-body-color-rgb), .1)}.cute-chip:active,.cute-chip-option:active,cute-chip-row:active{--bs-btn-active-bg: rgba(var(--bs-body-color-rgb), .14)}.cute-chip__cell [cuteChipAction],.cute-chip__cell .cute-chip-action{display:inline-flex;align-items:center;cursor:pointer;outline:none}.cute-chip__cell [cuteChipAction].cute-chip__action--presentational,.cute-chip__cell .cute-chip-action.cute-chip__action--presentational{cursor:auto}.cute-chip__cell [cuteChipAction]:not(button),.cute-chip__cell .cute-chip-action:not(button){gap:.5rem}.cute-chip__cell [cuteChipAction] .cute-chip__graphic,.cute-chip__cell .cute-chip-action .cute-chip__graphic{align-items:center;display:inline-flex;justify-content:center;overflow:hidden;pointer-events:none;position:relative}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark{padding-left:2px;padding-right:4px}.cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,.cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{width:1.2rem}[dir=rtl] .cute-chip__cell [cuteChipAction] .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg,[dir=rtl] .cute-chip__cell .cute-chip-action .cute-chip__graphic .cute-chip__checkmark .cute-chip__checkmark-svg{transform:rotateY(180deg)}.cute-chip__cell [cuteChipAction].disabled,.cute-chip__cell .cute-chip-action.disabled{cursor:auto}.cute-chip__cell [cuteChipAction].cute-chip__icon--trailing,.cute-chip__cell .cute-chip-action.cute-chip__icon--trailing{padding-left:4px;padding-right:4px;border:none;background:none}.cute-standard-chip{-webkit-tap-highlight-color:transparent}@media (forced-colors: active){.cute-standard-chip{outline:solid 1px}.cute-standard-chip .cute-chip__checkmark-path{stroke:CanvasText!important}}.cute-standard-chip .cute-chip__icon--primary{--size: 18px;height:var(--size);width:var(--size);font-size:var(--size);border-radius:calc(var(--size) * 1.3);min-height:fit-content;background:none}.cute-standard-chip .cute-chip__cell--primary{display:flex}.cute-standard-chip .cute-chip__cell--trailing{display:inline-flex;background-color:transparent;padding-left:.5rem;padding-right:0}[dir=rtl] .cute-standard-chip .cute-chip__cell--trailing{padding-left:0;padding-right:.5rem}.cute-standard-chip._cute-animation-noopable,.cute-standard-chip._cute-animation-noopable .cute-chip__graphic,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark,.cute-standard-chip._cute-animation-noopable .cute-chip__checkmark-path{transition-duration:1ms;animation-duration:1ms}.cute-chip-focus-overlay{inset:0;position:absolute;pointer-events:none;opacity:0;border-radius:inherit;transition:opacity .15s linear}._cute-animation-noopable .cute-chip-focus-overlay{transition:none}.cute-basic-chip .cute-chip-focus-overlay{display:none}.cute-chip-action-label{text-align:left;white-space:nowrap}[dir=rtl] .cute-chip-action-label{text-align:right}.cute-chip-primary-focus-indicator{position:absolute;inset:0;pointer-events:none}.cute-chip-edit-input{cursor:text;display:inline-block;color:inherit;outline:0}@media (forced-colors: active){.cute-chip-selected:not(.cute-chip-multiple){outline-width:3px}}\n"] }]
+        }], propDecorators: { selectable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selected: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], selectionChange: [{
+                type: Output
+            }] } });
+
+/**
+ * @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. */
+class CuteChipListboxChange {
+    constructor(
+    /** Chip listbox that emitted the event. */
+    source, 
+    /** Value of the chip listbox when the event was emitted. */
+    value) {
+        this.source = source;
+        this.value = value;
+    }
+}
+/**
+ * Provider Expression that allows cute-chip-listbox to register as a ControlValueAccessor.
+ * This allows it to support [(ngModel)].
+ * @docs-private
+ */
+const CUTE_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR = {
+    provide: NG_VALUE_ACCESSOR,
+    useExisting: forwardRef(() => CuteChipListbox),
+    multi: true,
+};
+/**
+ * An extension of the CuteChipSet component that supports chip selection.
+ * Used with CuteChipOption chips.
+ */
+class CuteChipListbox extends CuteChipSet {
+    constructor() {
+        super(...arguments);
+        /**
+         * Function when touched. Set as part of ControlValueAccessor implementation.
+         * @docs-private
+         */
+        this._onTouched = () => { };
+        /**
+         * Function when changed. Set as part of ControlValueAccessor implementation.
+         * @docs-private
+         */
+        this._onChange = () => { };
+        // TODO: MDC uses `grid` here
+        this._defaultRole = 'listbox';
+        /** Default chip options. */
+        this._defaultOptions = inject(CUTE_CHIPS_DEFAULT_OPTIONS, { optional: true });
+        this._multiple = false;
+        /** Orientation of the chip list. */
+        this.ariaOrientation = 'horizontal';
+        this._selectable = true;
+        /**
+         * 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.
+         */
+        this.compareWith = (o1, o2) => o1 === o2;
+        /** Whether this chip listbox is required. */
+        this.required = false;
+        this._hideSingleSelectionIndicator = this._defaultOptions?.hideSingleSelectionIndicator ?? false;
+        /** Event emitted when the user has changed the selected chip listbox value. */
+        this.change = new EventEmitter();
+        this._chips = undefined;
+    }
+    /** Whether the user should be allowed to select multiple chips. */
+    get multiple() { return this._multiple; }
+    set multiple(value) {
+        this._multiple = value;
+        this._syncListboxProperties();
+    }
+    /** The array of selected chips inside the chip listbox. */
+    get selected() {
+        const selectedChips = this._chips.toArray().filter(chip => chip.selected);
+        return this.multiple ? selectedChips : selectedChips[0];
+    }
+    /**
+     * 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() { return this._selectable; }
+    set selectable(value) {
+        this._selectable = value;
+        this._syncListboxProperties();
+    }
+    /** Whether the checkmark indicator for single-selection options is hidden. */
+    get hideSingleSelectionIndicator() { return this._hideSingleSelectionIndicator; }
+    set hideSingleSelectionIndicator(value) {
+        this._hideSingleSelectionIndicator = value;
+        this._syncListboxProperties();
+    }
+    /** The combined stream of all of the child chips' selection change events. */
+    get chipSelectionChanges() {
+        return this._getChipStream(chip => chip.selectionChange);
+    }
+    /** Combined stream of all of the child chips' blur events. */
+    get chipBlurChanges() {
+        return this._getChipStream(chip => chip._onBlur);
+    }
+    /** The value of the listbox, which is the combined value of the selected chips. */
+    get value() { return this._value; }
+    set value(value) {
+        this.writeValue(value);
+        this._value = value;
+    }
+    ngAfterContentInit() {
+        if (this._pendingInitialValue !== undefined) {
+            Promise.resolve().then(() => {
+                this._setSelectionByValue(this._pendingInitialValue, false);
+                this._pendingInitialValue = undefined;
+            });
+        }
+        this._chips.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
+            // Update listbox selectable/multiple properties on chips
+            this._syncListboxProperties();
+        });
+        this.chipBlurChanges.pipe(takeUntil(this._destroyed)).subscribe(() => this._blur());
+        this.chipSelectionChanges.pipe(takeUntil(this._destroyed)).subscribe(event => {
+            if (!this.multiple) {
+                this._chips.forEach(chip => {
+                    if (chip !== event.source) {
+                        chip._setSelectedState(false, false, false);
+                    }
+                });
+            }
+            if (event.isUserInput) {
+                this._propagateChanges();
+            }
+        });
+    }
+    /**
+     * Focuses the first selected chip in this chip listbox, or the first non-disabled chip when there
+     * are no selected chips.
+     */
+    focus() {
+        if (this.disabled) {
+            return;
+        }
+        const firstSelectedChip = this._getFirstSelectedChip();
+        if (firstSelectedChip && !firstSelectedChip.disabled) {
+            firstSelectedChip.focus();
+        }
+        else if (this._chips.length > 0) {
+            this._keyManager?.setFirstItemActive();
+        }
+        else {
+            this._elementRef.nativeElement.focus();
+        }
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    writeValue(value) {
+        if (this._chips) {
+            this._setSelectionByValue(value, false);
+        }
+        else if (value != null) {
+            this._pendingInitialValue = value;
+        }
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    registerOnChange(fn) {
+        this._onChange = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    registerOnTouched(fn) {
+        this._onTouched = fn;
+    }
+    /**
+     * Implemented as part of ControlValueAccessor.
+     * @docs-private
+     */
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+    }
+    /** Selects all chips with value. */
+    _setSelectionByValue(value, isUserInput = true) {
+        this._clearSelection();
+        if (Array.isArray(value)) {
+            value.forEach(currentValue => this._selectValue(currentValue, isUserInput));
+        }
+        else {
+            this._selectValue(value, isUserInput);
+        }
+    }
+    /** When blurred, marks the field as touched when focus moved outside the chip listbox. */
+    _blur() {
+        if (!this.disabled) {
+            // Wait to see if focus moves to an individual chip.
+            setTimeout(() => {
+                if (!this.focused) {
+                    this._markAsTouched();
+                }
+            });
+        }
+    }
+    _keydown(event) {
+        if (event.keyCode === TAB) {
+            super._allowFocusEscape();
+        }
+    }
+    /** Marks the field as touched */
+    _markAsTouched() {
+        this._onTouched();
+        this._changeDetectorRef.markForCheck();
+    }
+    /** Emits change event to set the model value. */
+    _propagateChanges() {
+        let valueToEmit = null;
+        if (Array.isArray(this.selected)) {
+            valueToEmit = this.selected.map(chip => chip.value);
+        }
+        else {
+            valueToEmit = this.selected ? this.selected.value : undefined;
+        }
+        this._value = valueToEmit;
+        this.change.emit(new CuteChipListboxChange(this, valueToEmit));
+        this._onChange(valueToEmit);
+        this._changeDetectorRef.markForCheck();
+    }
+    /**
+     * Deselects every chip in the listbox.
+     * @param skip Chip that should not be deselected.
+     */
+    _clearSelection(skip) {
+        this._chips.forEach(chip => {
+            if (chip !== skip) {
+                chip.deselect();
+            }
+        });
+    }
+    /**
+     * Finds and selects the chip based on its value.
+     * @returns Chip that has the corresponding value.
+     */
+    _selectValue(value, isUserInput) {
+        const correspondingChip = this._chips.find(chip => {
+            return chip.value != null && this.compareWith(chip.value, value);
+        });
+        if (correspondingChip) {
+            isUserInput ? correspondingChip.selectViaInteraction() : correspondingChip.select();
+        }
+        return correspondingChip;
+    }
+    /** Syncs the chip-listbox selection state with the individual chips. */
+    _syncListboxProperties() {
+        if (this._chips) {
+            // Defers setting the value to avoid the "Expression
+            // has changed after it was checked" errors from Angular.
+            Promise.resolve().then(() => {
+                this._chips.forEach(chip => {
+                    chip._chipListMultiple = this.multiple;
+                    chip.chipListSelectable = this._selectable;
+                    chip._chipListHideSingleSelectionIndicator = this.hideSingleSelectionIndicator;
+                    chip._changeDetectorRef.markForCheck();
+                });
+            });
+        }
+    }
+    /** Returns the first selected chip in this listbox, or undefined if no chips are selected. */
+    _getFirstSelectedChip() {
+        if (Array.isArray(this.selected)) {
+            return this.selected.length ? this.selected[0] : undefined;
+        }
+        else {
+            return this.selected;
+        }
+    }
+    /**
+     * 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.
+     */
+    _skipPredicate(action) {
+        // Override the skip predicate in the base class to avoid skipping disabled chips. Allow
+        // disabled chip options to receive focus to align with WAI ARIA recommendation. Normally WAI
+        // ARIA's instructions are to exclude disabled items from the tab order, but it makes a few
+        // exceptions for compound widgets.
+        //
+        // From [Developing a Keyboard Interface](
+        // https://www.w3.org/WAI/ARIA/apg/practices/keyboard-interface/):
+        //   "For the following composite widget elements, keep them focusable when disabled: Options in a
+        //   Listbox..."
+        return !action.isInteractive;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipListbox, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "16.1.0", version: "20.3.15", type: CuteChipListbox, isStandalone: true, selector: "cute-chip-listbox", inputs: { multiple: ["multiple", "multiple", booleanAttribute], ariaOrientation: ["aria-orientation", "ariaOrientation"], selectable: ["selectable", "selectable", booleanAttribute], compareWith: "compareWith", required: ["required", "required", booleanAttribute], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute], value: "value" }, outputs: { change: "change" }, host: { listeners: { "focus": "focus()", "blur": "_blur()", "keydown": "_keydown($event)" }, properties: { "attr.role": "role", "tabIndex": "(disabled || empty) ? -1 : tabIndex", "attr.aria-required": "role ? required : null", "attr.aria-disabled": "disabled", "attr.aria-multiselectable": "multiple", "attr.aria-orientation": "ariaOrientation", "class.cute-chip-list-disabled": "disabled", "class.cute-chip-list-required": "required" }, classAttribute: "cute-chip-listbox" }, providers: [CUTE_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], queries: [{ propertyName: "_chips", predicate: CuteChipOption, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <div class="cute-chip-set__chips" role="presentation">
+      <ng-content></ng-content>
+    </div>
+  `, isInline: true, styles: [".cute-chip-listbox,.cute-chip-grid,.cute-chip-set{display:flex;width:100%;background-color:var(--bs-body-bg)}.cute-chip-listbox .cute-chip-set__chips,.cute-chip-grid .cute-chip-set__chips,.cute-chip-set .cute-chip-set__chips{display:flex;flex-flow:wrap;gap:.375rem;min-width:100%}.cute-form-field .cute-chip-listbox,.cute-form-field .cute-chip-grid,.cute-form-field .cute-chip-set{min-height:58px}.cute-chip-grid-focused{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cute-chip-set-stacked .cute-chip-set__chips{flex-direction:column;align-items:flex-start}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip{display:block;width:100%}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__graphic{flex-grow:0}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip-action,.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__action--primary{flex-basis:100%;justify-content:start;width:100%}input.cute-chip-input{flex:1 0 150px;margin-left:.25rem;border:none;outline:none;background:none;transition:opacity .15s 0ms cubic-bezier(.4,0,.2,1)}input.cute-chip-input:not(:focus){opacity:.75}[dir=rtl] input.cute-chip-input{margin-left:0;margin-right:.25rem}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipListbox, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-chip-listbox', template: `
+    <div class="cute-chip-set__chips" role="presentation">
+      <ng-content></ng-content>
+    </div>
+  `, host: {
+                        'class': 'cute-chip-listbox',
+                        '[attr.role]': 'role',
+                        '[tabIndex]': '(disabled || empty) ? -1 : tabIndex',
+                        // TODO: replace this binding with use of AriaDescriber
+                        //'[attr.aria-describedby]': '_ariaDescribedby || null',
+                        '[attr.aria-required]': 'role ? required : null',
+                        '[attr.aria-disabled]': 'disabled',
+                        '[attr.aria-multiselectable]': 'multiple',
+                        '[attr.aria-orientation]': 'ariaOrientation',
+                        '[class.cute-chip-list-disabled]': 'disabled',
+                        '[class.cute-chip-list-required]': 'required',
+                        '(focus)': 'focus()',
+                        '(blur)': '_blur()',
+                        '(keydown)': '_keydown($event)',
+                    }, providers: [CUTE_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR], encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, standalone: true, styles: [".cute-chip-listbox,.cute-chip-grid,.cute-chip-set{display:flex;width:100%;background-color:var(--bs-body-bg)}.cute-chip-listbox .cute-chip-set__chips,.cute-chip-grid .cute-chip-set__chips,.cute-chip-set .cute-chip-set__chips{display:flex;flex-flow:wrap;gap:.375rem;min-width:100%}.cute-form-field .cute-chip-listbox,.cute-form-field .cute-chip-grid,.cute-form-field .cute-chip-set{min-height:58px}.cute-chip-grid-focused{color:var(--bs-body-color);background-color:var(--bs-body-bg);border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem #0d6efd40}.cute-chip-set-stacked .cute-chip-set__chips{flex-direction:column;align-items:flex-start}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip{display:block;width:100%}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__graphic{flex-grow:0}.cute-chip-set-stacked .cute-chip-set__chips .cute-chip-action,.cute-chip-set-stacked .cute-chip-set__chips .cute-chip__action--primary{flex-basis:100%;justify-content:start;width:100%}input.cute-chip-input{flex:1 0 150px;margin-left:.25rem;border:none;outline:none;background:none;transition:opacity .15s 0ms cubic-bezier(.4,0,.2,1)}input.cute-chip-input:not(:focus){opacity:.75}[dir=rtl] input.cute-chip-input{margin-left:0;margin-right:.25rem}\n"] }]
+        }], propDecorators: { multiple: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], ariaOrientation: [{
+                type: Input,
+                args: ['aria-orientation']
+            }], selectable: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], compareWith: [{
+                type: Input
+            }], required: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], hideSingleSelectionIndicator: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], value: [{
+                type: Input
+            }], change: [{
+                type: Output
+            }], _chips: [{
+                type: ContentChildren,
+                args: [CuteChipOption, {
+                        // We need to use `descendants: true`, because Ivy will no longer match
+                        // indirect descendants if it's left as false.
+                        descendants: true,
+                    }]
+            }] } });
+
+/**
+ * @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).
+ */
+
+/**
+ * @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
+ */
+const TYPES = [
+    CuteChip,
+    CuteChipAvatar,
+    CuteChipEditInput,
+    CuteChipGrid,
+    CuteChipInput,
+    CuteChipListbox,
+    CuteChipOption,
+    CuteChipRemove,
+    CuteChipRow,
+    CuteChipSet,
+    CuteChipTrailingIcon,
+];
+class CuteChipsModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteChipsModule, imports: [CommonModule, CuteChip,
+            CuteChipAvatar,
+            CuteChipEditInput,
+            CuteChipGrid,
+            CuteChipInput,
+            CuteChipListbox,
+            CuteChipOption,
+            CuteChipRemove,
+            CuteChipRow,
+            CuteChipSet,
+            CuteChipTrailingIcon], exports: [CuteChip,
+            CuteChipAvatar,
+            CuteChipEditInput,
+            CuteChipGrid,
+            CuteChipInput,
+            CuteChipListbox,
+            CuteChipOption,
+            CuteChipRemove,
+            CuteChipRow,
+            CuteChipSet,
+            CuteChipTrailingIcon] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipsModule, providers: [
+            ErrorStateMatcher,
+            {
+                provide: CUTE_CHIPS_DEFAULT_OPTIONS,
+                useValue: {
+                    separatorKeyCodes: [ENTER],
+                },
+            },
+        ], imports: [CommonModule, CuteChipOption] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteChipsModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                    declarations: [],
+                    providers: [
+                        ErrorStateMatcher,
+                        {
+                            provide: CUTE_CHIPS_DEFAULT_OPTIONS,
+                            useValue: {
+                                separatorKeyCodes: [ENTER],
+                            },
+                        },
+                    ],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR, CuteChip, CuteChipAvatar, CuteChipEdit, CuteChipEditInput, CuteChipGrid, CuteChipGridChange, CuteChipInput, CuteChipListbox, CuteChipListboxChange, CuteChipOption, CuteChipRemove, CuteChipRow, CuteChipSelectionChange, CuteChipSet, CuteChipTrailingIcon, CuteChipsModule };
+//# sourceMappingURL=cute-widgets-base-chips.mjs.map