@cute-widgets/base 20.0.1 → 20.0.3

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

@@ -1,58 +1,21 @@
 import { LiveAnnouncer, removeAriaReferencedId, addAriaReferencedId, ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { Directionality } from '@angular/cdk/bidi';
 import { SelectionModel } from '@angular/cdk/collections';
-import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey, A } from '@angular/cdk/keycodes';
-import { Overlay, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
+import { DOWN_ARROW, UP_ARROW, LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE, hasModifierKey, A, ESCAPE } from '@angular/cdk/keycodes';
+import { createRepositionScrollStrategy, CdkOverlayOrigin, CdkConnectedOverlay } from '@angular/cdk/overlay';
 import { ViewportRuler } from '@angular/cdk/scrolling';
 import * as i0 from '@angular/core';
-import { InjectionToken, inject, isDevMode, NgZone, EventEmitter, HostAttributeToken, booleanAttribute, numberAttribute, Output, Input, ViewChild, ContentChild, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, NgModule } from '@angular/core';
+import { InjectionToken, inject, Injector, isDevMode, NgZone, EventEmitter, HostAttributeToken, booleanAttribute, numberAttribute, Output, Input, ViewChild, ContentChild, ContentChildren, ChangeDetectionStrategy, ViewEncapsulation, Component, Directive, NgModule } from '@angular/core';
 import { Validators, NgControl, NgForm, FormGroupDirective } from '@angular/forms';
 import { NgClass, CommonModule } from '@angular/common';
 import { Subject, defer, merge } from 'rxjs';
-import { startWith, switchMap, take, filter, map, distinctUntilChanged, takeUntil } from 'rxjs/operators';
-import { trigger, state, transition, style, animate, query, animateChild } from '@angular/animations';
+import { startWith, switchMap, take, filter, map, takeUntil } from 'rxjs/operators';
 import { _countGroupLabelsBeforeOption, _getOptionScrollPosition, CuteOption, CUTE_OPTGROUP, CUTE_OPTION_PARENT_COMPONENT, CuteOptgroup } from '@cute-widgets/base/core/option';
 import { CUTE_FORM_FIELD, CuteFormFieldControl } from '@cute-widgets/base/form-field';
 import { ErrorStateMatcher, _ErrorStateTracker } from '@cute-widgets/base/core/error';
 import { CuteInputDropdownControl } from '@cute-widgets/base/abstract';
-
-/**
- * @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
- */
-/**
- * The following are all the animations for the mat-select component, with each
- * const containing the metadata for one animation.
- *
- * The values below match the implementation of the AngularJS Material mat-select animation.
- * @docs-private
- */
-const cuteSelectAnimations = {
-    /**
-     * This animation ensures the select's overlay panel animation (transformPanel) is called when
-     * closing the select.
-     * This is needed due to https://github.com/angular/angular/issues/23302
-     */
-    transformPanelWrap: trigger('transformPanelWrap', [
-        transition('* => void', query('@transformPanel', [animateChild()], { optional: true })),
-    ]),
-    /** This animation transforms the select's overlay panel on and off the page. */
-    transformPanel: trigger('transformPanel', [
-        state('void', style({
-            opacity: 0,
-            transform: 'scale(1, 0.8)',
-        })),
-        transition('void => showing', animate('120ms cubic-bezier(0, 0, 0.2, 1)', style({
-            opacity: 1,
-            transform: 'scale(1, 1)',
-        }))),
-        transition('* => void', animate('100ms linear', style({ opacity: 0 }))),
-    ]),
-};
+import { _animationsDisabled } from '@cute-widgets/base/core';
+import { _getEventTarget } from '@angular/cdk/platform';
 
 /**
  * @license Apache-2.0
@@ -105,22 +68,12 @@ let nextUniqueId = 0;
 const CUTE_SELECT_SCROLL_STRATEGY = new InjectionToken('cute-select-scroll-strategy', {
     providedIn: 'root',
     factory: () => {
-        const overlay = inject(Overlay);
-        return () => overlay.scrollStrategies.reposition();
+        const injector = inject(Injector);
+        return () => createRepositionScrollStrategy(injector);
     },
 });
-/** @docs-private */
-function CUTE_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay) {
-    return () => overlay.scrollStrategies.reposition();
-}
 /** Injection token that can be used to provide the default options the select module. */
 const CUTE_SELECT_CONFIG = new InjectionToken('CUTE_SELECT_CONFIG');
-/** @docs-private */
-const CUTE_SELECT_SCROLL_STRATEGY_PROVIDER = {
-    provide: CUTE_SELECT_SCROLL_STRATEGY,
-    deps: [Overlay],
-    useFactory: CUTE_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY,
-};
 /**
  * Injection token that can be used to reference instances of `CuteSelectTrigger`. It serves as
  * an alternative token to the actual `CuteSelectTrigger` class which could cause unnecessary
@@ -139,6 +92,15 @@ class CuteSelectChange {
     }
 }
 class CuteSelect extends CuteInputDropdownControl {
+    get bsColorVarName() {
+        if (this.color) {
+            if (this.color == "link") {
+                return `--bs-${this.color}-color-rgb`;
+            }
+            return `--bs-${this.color}-rgb`;
+        }
+        return "";
+    }
     /** Scrolls a particular option into the view. */
     _scrollOptionIntoView(index) {
         const option = this.options?.toArray()[index];
@@ -259,6 +221,8 @@ class CuteSelect extends CuteInputDropdownControl {
         this.ngControl = inject(NgControl, { self: true, optional: true });
         this._liveAnnouncer = inject(LiveAnnouncer);
         this._defaultOptions = inject(CUTE_SELECT_CONFIG, { optional: true });
+        this._animationsDisabled = _animationsDisabled();
+        this._initialized = new Subject();
         /**
          * This position config ensures that the top "start" corner of the overlay
          * is aligned with the top "start" of the origin by default (overlapping
@@ -344,7 +308,7 @@ class CuteSelect extends CuteInputDropdownControl {
          * By default, selecting an option with a `null` or `undefined` value will reset the select's
          * value. Enable this option if the reset behavior doesn't match your requirements and instead,
          * the nullable options should become selected. The value of this input can be controlled app-wide
-         * using the `MAT_SELECT_CONFIG` injection token.
+         * using the `CUTE_SELECT_CONFIG` injection token.
          */
         this.canSelectNullableOptions = this._defaultOptions?.canSelectNullableOptions ?? false;
         /** Combined stream of all of the child options' change events. */
@@ -422,12 +386,6 @@ class CuteSelect extends CuteInputDropdownControl {
         super.ngOnInit();
         this._selectionModel = new SelectionModel(this.multiple);
         this.stateChanges.next();
-        // We need `distinctUntilChanged` here, because some browsers will
-        // fire the animation end event twice for the same animation. See:
-        // https://github.com/angular/angular/issues/24084
-        this._panelDoneAnimatingStream
-            .pipe(distinctUntilChanged(), takeUntil(this._destroy))
-            .subscribe(() => this._panelDoneAnimating(this.panelOpen));
         this._viewportRuler
             .change()
             .pipe(takeUntil(this._destroy))
@@ -440,6 +398,8 @@ class CuteSelect extends CuteInputDropdownControl {
     }
     ngAfterContentInit() {
         super.ngAfterContentInit();
+        this._initialized.next();
+        this._initialized.complete();
         this._initKeyManager();
         this._selectionModel?.changed.pipe(takeUntil(this._destroy)).subscribe(event => {
             event.added.forEach(option => option.select());
@@ -492,6 +452,7 @@ class CuteSelect extends CuteInputDropdownControl {
     }
     ngOnDestroy() {
         super.ngOnDestroy();
+        this._cleanupDetach?.();
         this._keyManager?.destroy();
         this._destroy.next();
         this._destroy.complete();
@@ -504,22 +465,31 @@ class CuteSelect extends CuteInputDropdownControl {
     }
     /** Opens the overlay panel. */
     open() {
+        if (!this._canOpen()) {
+            return;
+        }
         // It's important that we read this as late as possible, because doing so earlier will
         // return a different element since it's based on queries in the form field which may
         // not have run yet. Also, this needs to be assigned before we measure the overlay width.
         if (this._parentFormField) {
             this._preferredOverlayOrigin = this._parentFormField.getConnectedOverlayOrigin();
         }
+        this._cleanupDetach?.();
         this._overlayWidth = this._getOverlayWidth(this._preferredOverlayOrigin);
-        if (this._canOpen()) {
-            this._applyModalPanelOwnership();
-            this._panelOpen = true;
-            this._keyManager?.withHorizontalOrientation(null);
-            this._highlightCorrectOption();
-            this.markForCheck();
-        }
+        this._applyModalPanelOwnership();
+        this._panelOpen = true;
+        this._overlayDir?.positionChange.pipe(take(1)).subscribe(() => {
+            this._changeDetectorRef.detectChanges();
+            this._positioningSettled();
+        });
+        this._overlayDir?.attachOverlay();
+        this._keyManager?.withHorizontalOrientation(null);
+        this._highlightCorrectOption();
+        this.markForCheck();
         // Required for the MDC form field to pick up when the overlay has been opened.
         this.stateChanges.next();
+        // Simulate the animation event before we moved away from `@angular/animations`.
+        Promise.resolve().then(() => this.openedChange.emit(true));
     }
     /**
      * If the autocomplete trigger is inside of an `aria-modal` element, connect
@@ -573,14 +543,53 @@ class CuteSelect extends CuteInputDropdownControl {
     close() {
         if (this._panelOpen) {
             this._panelOpen = false;
+            this._exitAndDetach();
             this._keyManager?.withHorizontalOrientation(this._isRtl() ? 'rtl' : 'ltr');
             this.markForCheck();
             this._onTouched();
+            // Required for the MDC form field to pick up when the overlay has been closed.
+            this.stateChanges.next();
+            // Simulate the animation event before we moved away from `@angular/animations`.
+            Promise.resolve().then(() => this.openedChange.emit(false));
         }
         this.focus();
         // Required for the MDC form field to pick up when the overlay has been closed.
         this.stateChanges.next();
     }
+    /** Triggers the exit animation and detaches the overlay at the end. */
+    _exitAndDetach() {
+        if (this._animationsDisabled || !this.panel) {
+            this._detachOverlay();
+            return;
+        }
+        this._cleanupDetach?.();
+        this._cleanupDetach = () => {
+            cleanupEvent();
+            clearTimeout(exitFallbackTimer);
+            this._cleanupDetach = undefined;
+        };
+        const panel = this.panel.nativeElement;
+        const cleanupEvent = this._renderer.listen(panel, 'animationend', (event) => {
+            if (event.animationName === '_cute-select-exit') {
+                this._cleanupDetach?.();
+                this._detachOverlay();
+            }
+        });
+        // Since closing the overlay depends on the animation, we have a fallback in case the panel
+        // doesn't animate. This can happen in some internal tests that do `* {animation: none}`.
+        const exitFallbackTimer = setTimeout(() => {
+            this._cleanupDetach?.();
+            this._detachOverlay();
+        }, 200);
+        panel.classList.add('cute-select-panel-exit');
+    }
+    /** Detaches the current overlay directive. */
+    _detachOverlay() {
+        this._overlayDir?.detachOverlay();
+        // Some of the overlay detachment logic depends on change detection.
+        // Mark for check to ensure that things get picked up in a timely manner.
+        this.markForCheck();
+    }
     /**
      * Sets the select' value. Part of the ControlValueAccessor interface
      * required to integrate with Angular core forms API.
@@ -695,6 +704,17 @@ class CuteSelect extends CuteInputDropdownControl {
             }
         }
     }
+    /** Handles keyboard events coming from the overlay. */
+    _handleOverlayKeydown(event) {
+        // TODO(crisbeto): prior to #30363 this was being handled inside the overlay directive, but we
+        // need control over the animation timing so we do it manually. We should remove the `keydown`
+        // listener from `.cute-select-panel` and handle all the events here. That may cause
+        // further test breakages so it's left for a follow-up.
+        if (event.keyCode === ESCAPE && !hasModifierKey(event)) {
+            event.preventDefault();
+            this.close();
+        }
+    }
     _onFocus() {
         if (!this.disabled) {
             this._focused = true;
@@ -714,15 +734,6 @@ class CuteSelect extends CuteInputDropdownControl {
             this.stateChanges.next();
         }
     }
-    /**
-     * Callback that is invoked when the overlay panel has been attached.
-     */
-    _onAttached() {
-        this._overlayDir?.positionChange.pipe(take(1)).subscribe(() => {
-            this._changeDetectorRef.detectChanges();
-            this._positioningSettled();
-        });
-    }
     /** Returns the theme to be used on the panel. */
     _getPanelTheme() {
         return this._parentFormField ? `cute-${this._parentFormField.color}` : '';
@@ -1006,11 +1017,26 @@ class CuteSelect extends CuteInputDropdownControl {
         if (this.ariaLabelledby) {
             value += ' ' + this.ariaLabelledby;
         }
+        // The value should not be used for the trigger's aria-labelledby,
+        // but this currently "breaks" accessibility tests since they complain
+        // there is no aria-labelledby. This is because they are not setting an
+        // appropriate label on the form field or select.
+        // TODO: remove this conditional after fixing clients by ensuring their
+        // selects have a label applied.
+        if (!value) {
+            //value = this._valueId;
+            value = this.inputId;
+        }
         return value;
     }
-    /** Called when the overlay panel is done animating. */
-    _panelDoneAnimating(isOpen) {
-        this.openedChange.emit(isOpen);
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     * @docs-private
+     */
+    get describedByIds() {
+        const element = this._elementRef.nativeElement;
+        const existingDescribedBy = element.getAttribute('aria-describedby');
+        return existingDescribedBy?.split(' ') || [];
     }
     /**
      * Implemented as part of CuteFormFieldControl.
@@ -1026,7 +1052,18 @@ class CuteSelect extends CuteInputDropdownControl {
     /**
      * Implemented as part of CuteFormFieldControl.
      */
-    onContainerClick() {
+    onContainerClick(event) {
+        const target = _getEventTarget(event);
+        // Since the overlay is inside the form field, this handler can fire for interactions
+        // with the container. Note that while it's redundant to select both for the popover
+        // and select panel, we need to do it because it tests the clicks can occur after
+        // the panel was detached from the popover.
+        if (target &&
+            (target.tagName === 'CUTE-OPTION' ||
+                target.classList.contains('cdk-overlay-backdrop') ||
+                target.closest('.cute-select-panel'))) {
+            return;
+        }
         this.focus();
         this.open();
     }
@@ -1038,11 +1075,17 @@ class CuteSelect extends CuteInputDropdownControl {
         // want the label to only float when there's a value.
         return this.panelOpen || !this.empty || (this.focused && !!this.placeholder);
     }
+    /** `input` element gets focus. */
+    onInputFocus(event) {
+        const elem = event.target;
+        // CWT: disable auto select input text
+        elem.selectionStart = elem.selectionEnd;
+    }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSelect, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteSelect, isStandalone: true, selector: "cute-select", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], panelClass: "panelClass", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute], placeholder: "placeholder", multiple: ["multiple", "multiple", booleanAttribute], disableOptionCentering: ["disableOptionCentering", "disableOptionCentering", booleanAttribute], compareWith: "compareWith", value: "value", errorStateMatcher: "errorStateMatcher", magnitude: "magnitude", typeaheadDebounceInterval: ["typeaheadDebounceInterval", "typeaheadDebounceInterval", numberAttribute], sortComparator: "sortComparator", panelWidth: "panelWidth", panelHeight: "panelHeight", canSelectNullableOptions: ["canSelectNullableOptions", "canSelectNullableOptions", booleanAttribute] }, outputs: { openedChange: "openedChange", _openedStream: "opened", _closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox", "ngSkipHydration": "" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.active": "focused", "class.cute-select-disabled": "disabled", "class.cute-select-invalid": "errorState", "class.cute-select-required": "required", "class.cute-select-empty": "empty", "class.cute-select-multiple": "multiple", "attr.id": "id", "attr.tabindex": "-1", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-label": "ariaLabel || null", "attr.aria-required": "required", "attr.aria-disabled": "disabled", "attr.aria-invalid": "errorState", "attr.aria-activedescendant": "_getAriaActiveDescendant()" }, classAttribute: "cute-select" }, providers: [
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteSelect, isStandalone: true, selector: "cute-select", inputs: { userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], panelClass: "panelClass", disableRipple: ["disableRipple", "disableRipple", booleanAttribute], hideSingleSelectionIndicator: ["hideSingleSelectionIndicator", "hideSingleSelectionIndicator", booleanAttribute], placeholder: "placeholder", multiple: ["multiple", "multiple", booleanAttribute], disableOptionCentering: ["disableOptionCentering", "disableOptionCentering", booleanAttribute], compareWith: "compareWith", value: "value", errorStateMatcher: "errorStateMatcher", magnitude: "magnitude", typeaheadDebounceInterval: ["typeaheadDebounceInterval", "typeaheadDebounceInterval", numberAttribute], sortComparator: "sortComparator", panelWidth: "panelWidth", panelHeight: "panelHeight", canSelectNullableOptions: ["canSelectNullableOptions", "canSelectNullableOptions", booleanAttribute] }, outputs: { openedChange: "openedChange", _openedStream: "opened", _closedStream: "closed", selectionChange: "selectionChange", valueChange: "valueChange" }, host: { attributes: { "role": "combobox", "aria-autocomplete": "none", "aria-haspopup": "listbox" }, listeners: { "keydown": "_handleKeydown($event)", "focus": "_onFocus()", "blur": "_onBlur()" }, properties: { "class.active": "focused", "class.cute-select-disabled": "disabled", "class.cute-select-invalid": "errorState", "class.cute-select-required": "required", "class.cute-select-empty": "empty", "class.cute-select-multiple": "multiple", "attr.id": "id", "attr.tabindex": "-1", "attr.aria-controls": "panelOpen ? id + \"-panel\" : null", "attr.aria-expanded": "panelOpen", "attr.aria-label": "ariaLabel || null", "attr.aria-required": "required", "attr.aria-disabled": "disabled", "attr.aria-invalid": "errorState", "attr.aria-activedescendant": "_getAriaActiveDescendant()" }, classAttribute: "cute-select" }, providers: [
             { provide: CuteFormFieldControl, useExisting: CuteSelect },
             { provide: CUTE_OPTION_PARENT_COMPONENT, useExisting: CuteSelect },
-        ], queries: [{ propertyName: "customTrigger", first: true, predicate: CUTE_SELECT_TRIGGER, descendants: true }, { propertyName: "options", predicate: CuteOption, descendants: true }, { propertyName: "optionGroups", predicate: CUTE_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }], exportAs: ["cuteSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div cdk-overlay-origin\r\n     class=\"cute-select-trigger-wrapper\"\r\n     [class.required]=\"required\"\r\n     #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\r\n>\r\n\r\n  @if (!customTrigger) {\r\n    <input #trigger\r\n           class=\"form-select cute-select-trigger__input\"\r\n           [class.form-select-sm]=\"magnitude=='small'\"\r\n           [class.form-select-lg]=\"magnitude=='large'\"\r\n           [attr.id]=\"inputId\"\r\n           [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           readonly\r\n           [value]=\"triggerValue\"\r\n           (click)=\"toggle()\"\r\n           autocomplete=\"off\">\r\n  } @else {\r\n    <div #trigger\r\n         class=\"form-select cute-select-trigger__custom\"\r\n         [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n         [attr.id]=\"inputId\">\r\n      <ng-content select=\"cute-select-trigger\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<ng-template  cdk-connected-overlay\r\n              cdkConnectedOverlayHasBackdrop\r\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n              [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\r\n              [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n              [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\r\n              [cdkConnectedOverlayOpen]=\"panelOpen\"\r\n              [cdkConnectedOverlayPositions]=\"_positions\"\r\n              [cdkConnectedOverlayWidth]=\"_overlayWidth!\"\r\n              (backdropClick)=\"close()\"\r\n              (attach)=\"_onAttached()\"\r\n              (detach)=\"close()\"> <!-- cdkConnectedOverlayLockPosition -->\r\n  <div #panel\r\n       role=\"listbox\"\r\n       tabindex=\"-1\"\r\n       class=\"cute-dropdown-overlay-content bg-body-tertiary shadow\"\r\n       [style.max-height]=\"panelHeight || null\"\r\n       [attr.id]=\"id + '-panel'\"\r\n       [attr.aria-multiselectable]=\"multiple\"\r\n       [attr.aria-label]=\"ariaLabel || null\"\r\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\r\n       [ngClass]=\"panelClass\"\r\n       [@transformPanel]=\"'showing'\"\r\n       (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\r\n       (keydown)=\"_handleKeydown($event)\">\r\n    <div class=\"cute-dropdown-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!--<ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>-->\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".cute-select{display:inline-block;width:100%}.cute-dropdown-overlay-content{display:block;width:100%;max-height:272px;overflow-y:auto;padding:var(--cute-select-padding-y, .5rem) 0;font-size:var(--bs-body-font-size);color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-dropdown-overlay-content .cute-dropdown-content{overflow:auto;height:100%}.cute-dropdown-overlay-content .cute-dropdown-content .cute-option:hover:not(.disabled){background-color:var(--bs-secondary-bg)}.cute-select-trigger__input,.cute-select-trigger__custom{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.cute-select-trigger__input:disabled,.cute-select-trigger__custom:disabled{cursor:auto;opacity:.65}cute-select-trigger{display:inline-block;-webkit-user-select:none;user-select:none}[dir=rtl] .form-select{padding:.375rem .75rem .375rem 2.25rem;background-position:left .75rem center}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], animations: [cuteSelectAnimations.transformPanel], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+        ], queries: [{ propertyName: "customTrigger", first: true, predicate: CUTE_SELECT_TRIGGER, descendants: true }, { propertyName: "options", predicate: CuteOption, descendants: true }, { propertyName: "optionGroups", predicate: CUTE_OPTGROUP, descendants: true }], viewQueries: [{ propertyName: "trigger", first: true, predicate: ["trigger"], descendants: true }, { propertyName: "panel", first: true, predicate: ["panel"], descendants: true }, { propertyName: "_overlayDir", first: true, predicate: CdkConnectedOverlay, descendants: true }], exportAs: ["cuteSelect"], usesInheritance: true, usesOnChanges: true, ngImport: i0, template: "<div cdk-overlay-origin\r\n     class=\"cute-select-trigger-wrapper\"\r\n     [class.required]=\"required\"\r\n     #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\r\n>\r\n\r\n  @if (!customTrigger) {\r\n    <input #trigger\r\n           class=\"form-select cute-select-trigger__input\"\r\n           [class.form-select-sm]=\"magnitude=='small'\"\r\n           [class.form-select-lg]=\"magnitude=='large'\"\r\n           [style.--bs-focus-ring-color]='color? \"rgba(var(\"+bsColorVarName+\"), var(--bs-focus-ring-opacity))\" : null'\r\n           [attr.id]=\"inputId\"\r\n           [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           readonly\r\n           [value]=\"triggerValue\"\r\n           (click)=\"toggle()\"\r\n           (focus)=\"onInputFocus($event)\"\r\n           autocomplete=\"off\"\r\n    >\r\n      <!--    Prevents selection -->\r\n      <!--    (mousedown)=\"$event.preventDefault()\"-->\r\n  } @else {\r\n    <div #trigger\r\n         class=\"form-select cute-select-trigger__custom\"\r\n         [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n         [attr.id]=\"inputId\">\r\n      <ng-content select=\"cute-select-trigger\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<ng-template  cdk-connected-overlay\r\n              cdkConnectedOverlayHasBackdrop\r\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n              [cdkConnectedOverlayDisableClose]=\"true\"\r\n              [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\r\n              [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n              [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\r\n              [cdkConnectedOverlayOpen]=\"panelOpen\"\r\n              [cdkConnectedOverlayPositions]=\"_positions\"\r\n              [cdkConnectedOverlayWidth]=\"_overlayWidth!\"\r\n              [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n              (backdropClick)=\"close()\"\r\n              (overlayKeydown)=\"_handleOverlayKeydown($event)\"\r\n              (detach)=\"close()\"> <!-- cdkConnectedOverlayLockPosition -->\r\n  <div #panel\r\n       role=\"listbox\"\r\n       tabindex=\"-1\"\r\n       class=\"cute-dropdown-overlay-content bg-body-tertiary shadow\"\r\n       [class.cute-select-panel-animations-enabled]=\"!_animationsDisabled\"\r\n       [style.max-height]=\"panelHeight || null\"\r\n       [attr.id]=\"id + '-panel'\"\r\n       [attr.aria-multiselectable]=\"multiple\"\r\n       [attr.aria-label]=\"ariaLabel || null\"\r\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\r\n       [ngClass]=\"panelClass\"\r\n       (keydown)=\"_handleKeydown($event)\">\r\n    <div class=\"cute-dropdown-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!--<ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>-->\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".cute-select{display:inline-block;width:100%;outline:none}.cute-dropdown-overlay-content{display:block;width:100%;max-height:272px;overflow-y:auto;padding:var(--cute-select-padding-y, .5rem) 0;font-size:var(--bs-body-font-size);color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-dropdown-overlay-content .cute-dropdown-content{overflow:auto;height:100%}.cute-dropdown-overlay-content .cute-dropdown-content .cute-option:hover:not(.disabled){background-color:var(--bs-secondary-bg)}.cute-select-trigger__input,.cute-select-trigger__custom{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none}.cute-select-trigger__input:disabled,.cute-select-trigger__custom:disabled{cursor:auto;opacity:.65}[dir=rtl] .cute-select-trigger__input.form-select,[dir=rtl] .cute-select-trigger__custom.form-select{padding:.375rem .75rem .375rem 2.25rem;background-position:left .75rem center}cute-select-trigger{display:inline-block;-webkit-user-select:none;user-select:none}.cute-select-panel-animations-enabled{animation:_cute-select-enter .12s cubic-bezier(0,0,.2,1)}.cute-select-panel-animations-enabled.cute-select-panel-exit{animation:_cute-select-exit .1s linear}@keyframes _cute-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _cute-select-exit{0%{opacity:1}to{opacity:0}}\n"], dependencies: [{ kind: "directive", type: CdkOverlayOrigin, selector: "[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]", exportAs: ["cdkOverlayOrigin"] }, { kind: "directive", type: CdkConnectedOverlay, selector: "[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]", inputs: ["cdkConnectedOverlayOrigin", "cdkConnectedOverlayPositions", "cdkConnectedOverlayPositionStrategy", "cdkConnectedOverlayOffsetX", "cdkConnectedOverlayOffsetY", "cdkConnectedOverlayWidth", "cdkConnectedOverlayHeight", "cdkConnectedOverlayMinWidth", "cdkConnectedOverlayMinHeight", "cdkConnectedOverlayBackdropClass", "cdkConnectedOverlayPanelClass", "cdkConnectedOverlayViewportMargin", "cdkConnectedOverlayScrollStrategy", "cdkConnectedOverlayOpen", "cdkConnectedOverlayDisableClose", "cdkConnectedOverlayTransformOriginOn", "cdkConnectedOverlayHasBackdrop", "cdkConnectedOverlayLockPosition", "cdkConnectedOverlayFlexibleDimensions", "cdkConnectedOverlayGrowAfterOpen", "cdkConnectedOverlayPush", "cdkConnectedOverlayDisposeOnNavigation"], outputs: ["backdropClick", "positionChange", "attach", "detach", "overlayKeydown", "overlayOutsideClick"], exportAs: ["cdkConnectedOverlay"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSelect, decorators: [{
             type: Component,
@@ -1066,14 +1109,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
                         '[attr.aria-disabled]': 'disabled',
                         '[attr.aria-invalid]': 'errorState',
                         '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
-                        'ngSkipHydration': '',
                         '(keydown)': '_handleKeydown($event)',
                         '(focus)': '_onFocus()',
                         '(blur)': '_onBlur()',
-                    }, animations: [cuteSelectAnimations.transformPanel], providers: [
+                        //'ngSkipHydration': '',
+                    }, providers: [
                         { provide: CuteFormFieldControl, useExisting: CuteSelect },
                         { provide: CUTE_OPTION_PARENT_COMPONENT, useExisting: CuteSelect },
-                    ], imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgClass], template: "<div cdk-overlay-origin\r\n     class=\"cute-select-trigger-wrapper\"\r\n     [class.required]=\"required\"\r\n     #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\r\n>\r\n\r\n  @if (!customTrigger) {\r\n    <input #trigger\r\n           class=\"form-select cute-select-trigger__input\"\r\n           [class.form-select-sm]=\"magnitude=='small'\"\r\n           [class.form-select-lg]=\"magnitude=='large'\"\r\n           [attr.id]=\"inputId\"\r\n           [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           readonly\r\n           [value]=\"triggerValue\"\r\n           (click)=\"toggle()\"\r\n           autocomplete=\"off\">\r\n  } @else {\r\n    <div #trigger\r\n         class=\"form-select cute-select-trigger__custom\"\r\n         [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n         [attr.id]=\"inputId\">\r\n      <ng-content select=\"cute-select-trigger\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<ng-template  cdk-connected-overlay\r\n              cdkConnectedOverlayHasBackdrop\r\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n              [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\r\n              [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n              [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\r\n              [cdkConnectedOverlayOpen]=\"panelOpen\"\r\n              [cdkConnectedOverlayPositions]=\"_positions\"\r\n              [cdkConnectedOverlayWidth]=\"_overlayWidth!\"\r\n              (backdropClick)=\"close()\"\r\n              (attach)=\"_onAttached()\"\r\n              (detach)=\"close()\"> <!-- cdkConnectedOverlayLockPosition -->\r\n  <div #panel\r\n       role=\"listbox\"\r\n       tabindex=\"-1\"\r\n       class=\"cute-dropdown-overlay-content bg-body-tertiary shadow\"\r\n       [style.max-height]=\"panelHeight || null\"\r\n       [attr.id]=\"id + '-panel'\"\r\n       [attr.aria-multiselectable]=\"multiple\"\r\n       [attr.aria-label]=\"ariaLabel || null\"\r\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\r\n       [ngClass]=\"panelClass\"\r\n       [@transformPanel]=\"'showing'\"\r\n       (@transformPanel.done)=\"_panelDoneAnimatingStream.next($event.toState)\"\r\n       (keydown)=\"_handleKeydown($event)\">\r\n    <div class=\"cute-dropdown-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!--<ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>-->\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".cute-select{display:inline-block;width:100%}.cute-dropdown-overlay-content{display:block;width:100%;max-height:272px;overflow-y:auto;padding:var(--cute-select-padding-y, .5rem) 0;font-size:var(--bs-body-font-size);color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-dropdown-overlay-content .cute-dropdown-content{overflow:auto;height:100%}.cute-dropdown-overlay-content .cute-dropdown-content .cute-option:hover:not(.disabled){background-color:var(--bs-secondary-bg)}.cute-select-trigger__input,.cute-select-trigger__custom{position:relative;cursor:pointer;-webkit-user-select:none;user-select:none}.cute-select-trigger__input:disabled,.cute-select-trigger__custom:disabled{cursor:auto;opacity:.65}cute-select-trigger{display:inline-block;-webkit-user-select:none;user-select:none}[dir=rtl] .form-select{padding:.375rem .75rem .375rem 2.25rem;background-position:left .75rem center}\n"] }]
+                    ], imports: [CdkOverlayOrigin, CdkConnectedOverlay, NgClass], template: "<div cdk-overlay-origin\r\n     class=\"cute-select-trigger-wrapper\"\r\n     [class.required]=\"required\"\r\n     #fallbackOverlayOrigin=\"cdkOverlayOrigin\"\r\n>\r\n\r\n  @if (!customTrigger) {\r\n    <input #trigger\r\n           class=\"form-select cute-select-trigger__input\"\r\n           [class.form-select-sm]=\"magnitude=='small'\"\r\n           [class.form-select-lg]=\"magnitude=='large'\"\r\n           [style.--bs-focus-ring-color]='color? \"rgba(var(\"+bsColorVarName+\"), var(--bs-focus-ring-opacity))\" : null'\r\n           [attr.id]=\"inputId\"\r\n           [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n           [disabled]=\"disabled\"\r\n           [placeholder]=\"placeholder\"\r\n           readonly\r\n           [value]=\"triggerValue\"\r\n           (click)=\"toggle()\"\r\n           (focus)=\"onInputFocus($event)\"\r\n           autocomplete=\"off\"\r\n    >\r\n      <!--    Prevents selection -->\r\n      <!--    (mousedown)=\"$event.preventDefault()\"-->\r\n  } @else {\r\n    <div #trigger\r\n         class=\"form-select cute-select-trigger__custom\"\r\n         [attr.tabindex]=\"disabled ? -1 : tabIndex\"\r\n         [attr.id]=\"inputId\">\r\n      <ng-content select=\"cute-select-trigger\"></ng-content>\r\n    </div>\r\n  }\r\n\r\n</div>\r\n\r\n<ng-template  cdk-connected-overlay\r\n              cdkConnectedOverlayHasBackdrop\r\n              cdkConnectedOverlayBackdropClass=\"cdk-overlay-transparent-backdrop\"\r\n              [cdkConnectedOverlayDisableClose]=\"true\"\r\n              [cdkConnectedOverlayPanelClass]=\"_overlayPanelClass\"\r\n              [cdkConnectedOverlayScrollStrategy]=\"_scrollStrategy\"\r\n              [cdkConnectedOverlayOrigin]=\"_preferredOverlayOrigin || fallbackOverlayOrigin\"\r\n              [cdkConnectedOverlayOpen]=\"panelOpen\"\r\n              [cdkConnectedOverlayPositions]=\"_positions\"\r\n              [cdkConnectedOverlayWidth]=\"_overlayWidth!\"\r\n              [cdkConnectedOverlayFlexibleDimensions]=\"true\"\r\n              (backdropClick)=\"close()\"\r\n              (overlayKeydown)=\"_handleOverlayKeydown($event)\"\r\n              (detach)=\"close()\"> <!-- cdkConnectedOverlayLockPosition -->\r\n  <div #panel\r\n       role=\"listbox\"\r\n       tabindex=\"-1\"\r\n       class=\"cute-dropdown-overlay-content bg-body-tertiary shadow\"\r\n       [class.cute-select-panel-animations-enabled]=\"!_animationsDisabled\"\r\n       [style.max-height]=\"panelHeight || null\"\r\n       [attr.id]=\"id + '-panel'\"\r\n       [attr.aria-multiselectable]=\"multiple\"\r\n       [attr.aria-label]=\"ariaLabel || null\"\r\n       [attr.aria-labelledby]=\"_getPanelAriaLabelledby()\"\r\n       [ngClass]=\"panelClass\"\r\n       (keydown)=\"_handleKeydown($event)\">\r\n    <div class=\"cute-dropdown-content\">\r\n      <ng-content></ng-content>\r\n    </div>\r\n    <!--<ng-template [cdkPortalOutlet]=\"_portal\"></ng-template>-->\r\n  </div>\r\n</ng-template>\r\n\r\n", styles: [".cute-select{display:inline-block;width:100%;outline:none}.cute-dropdown-overlay-content{display:block;width:100%;max-height:272px;overflow-y:auto;padding:var(--cute-select-padding-y, .5rem) 0;font-size:var(--bs-body-font-size);color:var(--bs-body-color);text-align:start;list-style:none;background-color:var(--bs-body-bg);border:var(--bs-border-width) solid var(--bs-border-color-translucent);border-radius:var(--bs-border-radius)}.cute-dropdown-overlay-content .cute-dropdown-content{overflow:auto;height:100%}.cute-dropdown-overlay-content .cute-dropdown-content .cute-option:hover:not(.disabled){background-color:var(--bs-secondary-bg)}.cute-select-trigger__input,.cute-select-trigger__custom{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none}.cute-select-trigger__input:disabled,.cute-select-trigger__custom:disabled{cursor:auto;opacity:.65}[dir=rtl] .cute-select-trigger__input.form-select,[dir=rtl] .cute-select-trigger__custom.form-select{padding:.375rem .75rem .375rem 2.25rem;background-position:left .75rem center}cute-select-trigger{display:inline-block;-webkit-user-select:none;user-select:none}.cute-select-panel-animations-enabled{animation:_cute-select-enter .12s cubic-bezier(0,0,.2,1)}.cute-select-panel-animations-enabled.cute-select-panel-exit{animation:_cute-select-exit .1s linear}@keyframes _cute-select-enter{0%{opacity:0;transform:scaleY(.8)}to{opacity:1;transform:none}}@keyframes _cute-select-exit{0%{opacity:1}to{opacity:0}}\n"] }]
         }], ctorParameters: () => [], propDecorators: { options: [{
                 type: ContentChildren,
                 args: [CuteOption, { descendants: true }]
@@ -1183,9 +1226,7 @@ class CuteSelectModule {
             CuteSelectTrigger,
             CuteOptgroup,
             CuteOption] }); }
-    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSelectModule, providers: [
-            CUTE_SELECT_SCROLL_STRATEGY_PROVIDER
-        ], imports: [CommonModule, CuteOptgroup,
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSelectModule, imports: [CommonModule, CuteOptgroup,
             CuteOption] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSelectModule, decorators: [{
@@ -1193,9 +1234,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
             args: [{
                     imports: [CommonModule, ...TYPES],
                     exports: TYPES,
-                    providers: [
-                        CUTE_SELECT_SCROLL_STRATEGY_PROVIDER
-                    ],
                     declarations: [],
                 }]
         }] });
@@ -1204,5 +1242,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
  * Generated bundle index. Do not edit.
  */
 
-export { CUTE_SELECT_CONFIG, CUTE_SELECT_SCROLL_STRATEGY, CUTE_SELECT_SCROLL_STRATEGY_PROVIDER, CUTE_SELECT_SCROLL_STRATEGY_PROVIDER_FACTORY, CUTE_SELECT_TRIGGER, CuteSelect, CuteSelectChange, CuteSelectModule, CuteSelectTrigger, cuteSelectAnimations };
+export { CUTE_SELECT_CONFIG, CUTE_SELECT_SCROLL_STRATEGY, CUTE_SELECT_TRIGGER, CuteSelect, CuteSelectChange, CuteSelectModule, CuteSelectTrigger };
 //# sourceMappingURL=cute-widgets-base-select.mjs.map