@cute-widgets/base 20.0.1

package/fesm2022/cute-widgets-base-form-field.mjs

@@ -0,0 +1,969 @@
+import * as i0 from '@angular/core';
+import { Directive, InjectionToken, Input, inject, Attribute, ElementRef, NgZone, contentChild, Injector, computed, isDevMode, afterEveryRender, ContentChildren, ContentChild, ViewChild, ChangeDetectionStrategy, ViewEncapsulation, Component, NgModule } from '@angular/core';
+import { NgTemplateOutlet, CommonModule } from '@angular/common';
+import { Directionality } from '@angular/cdk/bidi';
+import { Platform } from '@angular/cdk/platform';
+import { Subject, pairwise, merge, EMPTY } from 'rxjs';
+import { startWith, map, filter, takeUntil } from 'rxjs/operators';
+import { _IdGenerator } from '@angular/cdk/a11y';
+import { CuteBaseControl } from '@cute-widgets/base/abstract';
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { _animationsDisabled } from '@cute-widgets/base/core/animation';
+
+/** An interface which allows a control to work inside a `CuteFormField`. */
+class CuteFormFieldControl {
+    constructor() {
+        /** The value of the control. */
+        this.value = null;
+        /** Gets the `AbstractControlDirective` for this control. */
+        this.ngControl = null;
+        /** Whether the control is focused. */
+        this.focused = false;
+        /** Whether the control is empty. */
+        this.empty = false;
+        /** Whether the `CuteFormField` label should try to float. */
+        this.shouldLabelFloat = false;
+        /** Whether the control is required. */
+        this.required = false;
+        /** Whether the control is disabled. */
+        this.disabled = false;
+        /** Whether the control is in an error state. */
+        this.errorState = false;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteFormFieldControl, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteFormFieldControl, isStandalone: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteFormFieldControl, decorators: [{
+            type: Directive
+        }] });
+
+/**
+ * @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
+ */
+/**
+ * Injection token that can be used to reference instances of `CutePrefix`. It serves as
+ * an alternative token to the actual `CutePrefix` class, which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_PREFIX = new InjectionToken('CutePrefix');
+/** Prefix to be placed in front of the form field. */
+class CutePrefix {
+    constructor() {
+        this._isText = false;
+    }
+    set _isTextSelector(value) {
+        this._isText = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CutePrefix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CutePrefix, isStandalone: true, selector: "[cutePrefix], [cuteIconPrefix], [cuteTextPrefix]", inputs: { _isTextSelector: ["cuteTextPrefix", "_isTextSelector"] }, host: { classAttribute: "input-group-text" }, providers: [{ provide: CUTE_PREFIX, useExisting: CutePrefix }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CutePrefix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cutePrefix], [cuteIconPrefix], [cuteTextPrefix]',
+                    providers: [{ provide: CUTE_PREFIX, useExisting: CutePrefix }],
+                    host: {
+                        'class': 'input-group-text'
+                    },
+                }]
+        }], propDecorators: { _isTextSelector: [{
+                type: Input,
+                args: ['cuteTextPrefix']
+            }] } });
+
+/**
+ * @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
+ */
+/**
+ * Injection token that can be used to reference instances of `CuteSuffix`. It serves as
+ * an alternative token to the actual `CuteSuffix` class which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_SUFFIX = new InjectionToken('CuteSuffix');
+/** Suffix to be placed at the end of the form field. */
+class CuteSuffix {
+    constructor() {
+        this._isText = false;
+    }
+    set _isTextSelector(value) {
+        this._isText = true;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSuffix, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteSuffix, isStandalone: true, selector: "[cuteSuffix], [cuteIconSuffix], [cuteTextSuffix]", inputs: { _isTextSelector: ["cuteTextSuffix", "_isTextSelector"] }, host: { classAttribute: "input-group-text" }, providers: [{ provide: CUTE_SUFFIX, useExisting: CuteSuffix }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteSuffix, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: '[cuteSuffix], [cuteIconSuffix], [cuteTextSuffix]',
+                    providers: [{ provide: CUTE_SUFFIX, useExisting: CuteSuffix }],
+                    host: {
+                        'class': 'input-group-text'
+                    },
+                }]
+        }], propDecorators: { _isTextSelector: [{
+                type: Input,
+                args: ['cuteTextSuffix']
+            }] } });
+
+/**
+ * @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 that can be used to reference instances of `CuteError`. It serves as
+ * an alternative token to the actual `CuteError` class, which could cause unnecessary
+ * retention of the class and its directive metadata.
+ */
+const CUTE_ERROR = new InjectionToken('CuteError');
+/** Single error message to be shown underneath the form-field. */
+class CuteError {
+    constructor(ariaLive, elementRef) {
+        this.id = inject(_IdGenerator).getId('cute-error-');
+        // If no aria-live value is set, add 'polite' as a default. This is preferred over setting
+        // role='alert' so that screen readers do not interrupt the current task to read this aloud.
+        if (!ariaLive) {
+            elementRef.nativeElement.setAttribute('aria-live', 'polite');
+        }
+    }
+    ngOnInit() {
+        console.log("cute-error init.");
+    }
+    ngOnDestroy() {
+        console.log("cute-error destroy.");
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteError, deps: [{ token: 'aria-live', attribute: true }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteError, isStandalone: true, selector: "cute-error, [cuteError]", inputs: { id: "id" }, host: { attributes: { "aria-atomic": "true" }, properties: { "id": "id", "attr.cuteErrorAttr": "true" }, classAttribute: "cute-form-field-error cute-form-field-bottom-align invalid-feedback" }, providers: [{ provide: CUTE_ERROR, useExisting: CuteError }], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteError, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-error, [cuteError]',
+                    host: {
+                        'class': 'cute-form-field-error cute-form-field-bottom-align invalid-feedback',
+                        'aria-atomic': 'true',
+                        '[id]': 'id',
+                        '[attr.cuteErrorAttr]': 'true',
+                    },
+                    providers: [{ provide: CUTE_ERROR, useExisting: CuteError }],
+                }]
+        }], ctorParameters: () => [{ type: undefined, decorators: [{
+                    type: Attribute,
+                    args: ['aria-live']
+                }] }, { type: i0.ElementRef }], propDecorators: { id: [{
+                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).
+ */
+/** Hint text to be shown underneath the form field control. */
+class CuteHint {
+    constructor() {
+        /** Whether to align the hint label at the start or end of the line. */
+        this.align = 'start';
+        /** Unique ID for the hint. Used for the `aria-describedby` on the form field control. */
+        this.id = inject(_IdGenerator).getId('cute-hint-');
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteHint, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteHint, isStandalone: true, selector: "cute-hint", inputs: { align: "align", id: "id" }, host: { properties: { "class.cute-form-field-hint-end": "align === \"end\"", "id": "id", "attr.align": "null" }, classAttribute: "form-text cute-form-field-hint cute-form-field-bottom-align" }, exportAs: ["cuteHint"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteHint, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-hint',
+                    exportAs: 'cuteHint',
+                    host: {
+                        'class': 'form-text cute-form-field-hint cute-form-field-bottom-align',
+                        '[class.cute-form-field-hint-end]': 'align === "end"',
+                        '[id]': 'id',
+                        // Remove align attribute to prevent it from interfering with layout.
+                        '[attr.align]': 'null',
+                    },
+                }]
+        }], propDecorators: { align: [{
+                type: Input
+            }], id: [{
+                type: Input
+            }] } });
+
+/** @docs-private */
+function getCuteFormFieldPlaceholderConflictError() {
+    return Error('Placeholder attribute and child element were both specified.');
+}
+/** @docs-private */
+function getCuteFormFieldDuplicatedHintError(align) {
+    return Error(`A hint was already declared for 'align="${align}"'.`);
+}
+/** @docs-private */
+function getCuteFormFieldMissingControlError() {
+    return Error('cute-form-field must contain a CuteFormFieldControl.');
+}
+
+/**
+ * @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 floating label for a `cute-form-field`. */
+class CuteLabel /* extends ... */ {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+    }
+    /** Returns the label's current text. */
+    getText() {
+        return this._elementRef.nativeElement.innerText;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteLabel /* extends ... */, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteLabel /* extends ... */, isStandalone: true, selector: "cute-label", inputs: { magnitude: "magnitude" }, host: { properties: { "style.font-size": "magnitude==\"small\" ? \"0.875rem\" : (magnitude==\"large\"? \"1.25rem\" : \"\")" } }, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteLabel /* extends ... */, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-label',
+                    host: {
+                        '[style.font-size]': 'magnitude=="small" ? "0.875rem" : (magnitude=="large"? "1.25rem" : "")'
+                    }
+                }]
+        }], propDecorators: { magnitude: [{
+                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).
+ */
+/**
+ * Injection token that can be used to inject an instances of `CuteFormField`. It serves
+ * as an alternative token to the actual `CuteFormField` class which would cause unnecessary
+ * retention of the `CuteFormField` class and its component metadata.
+ */
+const CUTE_FORM_FIELD = new InjectionToken('CuteFormField');
+/**
+ * Injection token that can be used to configure the
+ * default options for all form fields within an app.
+ */
+const CUTE_FORM_FIELD_DEFAULT_OPTIONS = new InjectionToken('CUTE_FORM_FIELD_DEFAULT_OPTIONS');
+/**
+ * Whether the label for form fields should by default float `always`,
+ * `never`, or `auto`.
+ */
+const DEFAULT_FLOAT_LABEL = 'never';
+/** Default way that the subscript element height is set. */
+const DEFAULT_SUBSCRIPT_SIZING = 'fixed';
+let nextUniqueId = 0;
+class CuteFormField extends CuteBaseControl {
+    /** Whether to display the CSS styles for a _valid_ control status after it has been checked. */
+    get hideValidStyle() { return this._hideValidStyle; }
+    set hideValidStyle(hideValid) {
+        this._hideValidStyle = coerceBooleanProperty(hideValid);
+        this.displayValidity(!this._hideValidStyle);
+    }
+    /** Whether the required marker should be hidden. */
+    get hideRequiredMarker() { return this._hideRequiredMarker; }
+    set hideRequiredMarker(value) {
+        this._hideRequiredMarker = coerceBooleanProperty(value);
+    }
+    /** Whether the label should always float or float as the user types. */
+    get floatLabel() {
+        return this._floatLabel || this._defaults?.floatLabel || DEFAULT_FLOAT_LABEL;
+    }
+    set floatLabel(value) {
+        if (value !== this._floatLabel) {
+            this._floatLabel = value;
+            // For backwards compatibility. Custom form field controls or directives might set
+            // the "floatLabel" input and expect the form field view to be updated automatically.
+            // e.g. autocomplete trigger. Ideally we'd get rid of this and the consumers would just
+            // emit the "stateChanges" observable. TODO(devversion): consider removing.
+            this.markForCheck();
+        }
+    }
+    /**
+     * Whether the form field should reserve space for one line of hint/error text (default)
+     * or to have the spacing grow from 0px as needed based on the size of the hint/error content.
+     * Note that when using dynamic sizing, layout shifts will occur when hint/error text changes.
+     */
+    get subscriptSizing() {
+        return this._subscriptSizing || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
+    }
+    set subscriptSizing(value) {
+        this._subscriptSizing = value || this._defaults?.subscriptSizing || DEFAULT_SUBSCRIPT_SIZING;
+    }
+    /** Text for the form field hint. */
+    get hintLabel() { return this._hintLabel; }
+    set hintLabel(value) {
+        this._hintLabel = value;
+        this._processHints();
+    }
+    /** Gets the current form field control */
+    get _control() {
+        return this._explicitFormFieldControl || this._formFieldControl;
+    }
+    set _control(value) {
+        this._explicitFormFieldControl = value;
+    }
+    /** Returns bootstrap's size suffix for CSS classes */
+    get magnitudeSuffix() {
+        if (this.magnitude == "small") {
+            return "-sm";
+        }
+        else if (this.magnitude == "large") {
+            return "-lg";
+        }
+        return "";
+    }
+    get _isFloatLabel() {
+        return this.floatLabel == "auto" || this.floatLabel == "always";
+    }
+    generateId() {
+        return "";
+    }
+    constructor() {
+        super();
+        this._elementRef = inject(ElementRef);
+        this._dir = inject(Directionality);
+        this._platform = inject(Platform);
+        this._ngZone = inject(NgZone);
+        this._defaults = inject(CUTE_FORM_FIELD_DEFAULT_OPTIONS, {
+            optional: true,
+        });
+        this._labelChild = contentChild(CuteLabel, ...(ngDevMode ? [{ debugName: "_labelChild" }] : []));
+        this._hideValidStyle = false;
+        this._hideRequiredMarker = false;
+        this._floatLabel = "never";
+        this._subscriptSizing = null;
+        this._hintLabel = '';
+        this._hasIconPrefix = false;
+        this._hasTextPrefix = false;
+        this._hasIconSuffix = false;
+        this._hasTextSuffix = false;
+        // Unique id for the internal form field label.
+        this._labelId = `cute-form-field-label-${nextUniqueId++}`;
+        // Unique id for the hint label.
+        this._hintLabelId = `cute-hint-${nextUniqueId++}`;
+        /** Subject that emits when the component has been destroyed. */
+        this._destroyed = new Subject();
+        this._isFocused = null;
+        this._needsOutlineLabelOffsetUpdate = false;
+        this._previousControl = undefined;
+        this._previousControlValidatorFn = null;
+        this._animationsDisabled = _animationsDisabled();
+        this._injector = inject(Injector);
+        /**
+         * Gets the id of the label element. If no label is present, returns `null`.
+         */
+        this.getLabelId = computed(() => (this._hasFloatingLabel() ? this._labelId : null), ...(ngDevMode ? [{ debugName: "getLabelId" }] : []));
+        /** Is there any `<cute-label>` in the form field? */
+        this._hasFloatingLabel = computed(() => !!this._labelChild(), ...(ngDevMode ? [{ debugName: "_hasFloatingLabel" }] : []));
+        const defaults = this._defaults;
+        if (defaults) {
+            //if (_defaults.appearance) {
+            //  this.appearance = _defaults.appearance;
+            //}
+            this.hideRequiredMarker = Boolean(defaults?.hideRequiredMarker);
+            if (defaults.color) {
+                this.color = defaults.color;
+            }
+        }
+    }
+    setDisabledState(newState, emitEvent) {
+        this._control?.setDisabledState(coerceBooleanProperty(newState));
+        return super.setDisabledState(newState, emitEvent);
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        // Initial focus state sync. This happens rarely, but we want to account for
+        // it in case the form field control has "focused" set to true on init.
+        this._updateFocusState();
+        if (!this._animationsDisabled) {
+            this._ngZone.runOutsideAngular(() => {
+                // Enable animations after a certain amount of time so that they don't run on init.
+                setTimeout(() => {
+                    this._elementRef.nativeElement.classList.add('cute-form-field-animations-enabled');
+                }, 300);
+            });
+        }
+        // Because the above changes a value used in the template after it was checked, we need
+        // to trigger CD or the change might not be reflected if there is no other CD scheduled.
+        this._changeDetectorRef.detectChanges();
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+        this._assertFormFieldControl();
+        this._initializeSubscript();
+        this._initializePrefixAndSuffix();
+        this._initializeOutlineLabelOffsetSubscriptions();
+        // CWT: Set `magnitude` value of the component to the child's `label` control as a default value
+        const childLabel = this._labelChildNonStatic || this._labelChildStatic;
+        if (childLabel && !childLabel.magnitude) {
+            childLabel.magnitude = this.magnitude;
+        }
+    }
+    ngAfterContentChecked() {
+        this._assertFormFieldControl();
+        if (this._control !== this._previousControl) {
+            this._initializeControl(this._previousControl);
+            // keep a reference for last validator we had.
+            if (this._control?.ngControl && this._control.ngControl.control) {
+                this._previousControlValidatorFn = this._control.ngControl.control.validator;
+            }
+            this._previousControl = this._control;
+        }
+        // make sure the control has been initialized.
+        if (this._control?.ngControl && this._control.ngControl.control) {
+            // get the validators for current control.
+            const validatorFn = this._control.ngControl.control.validator;
+            // if our current validatorFn isn't equal to it might be we are CD behind, marking the
+            // component will allow us to catch up.
+            if (validatorFn !== this._previousControlValidatorFn) {
+                this._changeDetectorRef.markForCheck();
+            }
+        }
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        this._stateChanges?.unsubscribe();
+        this._valueChanges?.unsubscribe();
+        this._destroyed.next();
+        this._destroyed.complete();
+    }
+    /**
+     * Gets an ElementRef for the element that an overlay attached to the form field
+     * should be positioned relative to.
+     */
+    getConnectedOverlayOrigin() {
+        //return this._control?.controlElementRef || this._textField || this._elementRef;
+        return this._textField || this._elementRef;
+    }
+    /** Animates the placeholder up and locks it in position. */
+    _animateAndLockLabel() {
+        // This is for backwards compatibility only. Consumers of the form field might use
+        // this method. e.g. the autocomplete trigger. This method has been added to the non-MDC
+        // form field because setting "floatLabel" to "always" caused the label to float without
+        // animation. This is different in MDC where the label always animates, so this method
+        // is no longer necessary. There doesn't seem any benefit in adding logic to allow changing
+        // the floating label state without animations. The non-MDC implementation was inconsistent
+        // because it always animates if "floatLabel" is set away from "always".
+        // TODO(devversion): consider removing this method when releasing the MDC form field.
+        if (this._hasFloatingLabel()) {
+            this.floatLabel = 'always';
+        }
+    }
+    /**
+     * Toggles Bootstrap's validation classes `is-valid` & `is-invalid`.
+     * @param hideValid Whether to remove Bootstrap's `is-valid` class.
+     */
+    displayValidity(hideValid) {
+        const elem = this._control?.controlElementRef?.nativeElement;
+        const classList = elem?.classList;
+        if (classList) {
+            const touched = classList.contains("ng-touched");
+            const dirty = classList.contains("ng-dirty");
+            if (hideValid) {
+                classList.toggle("is-valid", false);
+            }
+            else {
+                classList.toggle("is-valid", classList.contains("ng-valid") && (touched));
+            }
+            if (this._control?.errorState) {
+                classList.toggle("is-invalid", classList.contains("ng-invalid") && (touched || dirty));
+            }
+            else {
+                classList.toggle("is-invalid", false);
+            }
+            this.markForCheck();
+        }
+    }
+    /** Initializes the registered form field control. */
+    _initializeControl(previousControl) {
+        const control = this._control;
+        const classPrefix = 'cute-form-field-type-';
+        if (previousControl) {
+            this._elementRef.nativeElement.classList.remove(classPrefix + previousControl.controlType);
+        }
+        this._stateChanges?.unsubscribe();
+        this._valueChanges?.unsubscribe();
+        this._describedByChanges?.unsubscribe();
+        if (control) {
+            if (control.controlType) {
+                this._elementRef.nativeElement.classList.add(classPrefix + control.controlType);
+            }
+            // Subscribe to changes in the child control state to update the form field UI.
+            this._stateChanges = control.stateChanges?.subscribe(() => {
+                this._updateFocusState();
+                this.markForCheck();
+                // CWT: Run CSS-classes validity after the change detection
+                setTimeout(() => {
+                    this.displayValidity(this.hideValidStyle);
+                });
+            });
+            // Updating the `aria-describedby` touches the DOM. Only do it if it actually needs to change.
+            this._describedByChanges = control.stateChanges?.pipe(startWith([undefined, undefined]), map(() => [control.errorState, control.userAriaDescribedBy]), pairwise(), filter(([[prevErrorState, prevDescribedBy], [currentErrorState, currentDescribedBy]]) => {
+                return prevErrorState !== currentErrorState || prevDescribedBy !== currentDescribedBy;
+            }))
+                .subscribe(() => this._syncDescribedByIds());
+            // Run change detection if the value changes.
+            if (control.ngControl && control.ngControl.valueChanges) {
+                this._valueChanges = control.ngControl.valueChanges
+                    .pipe(takeUntil(this._destroyed))
+                    .subscribe(() => this.markForCheck());
+            }
+        }
+    }
+    _checkPrefixAndSuffixTypes() {
+        this._hasIconPrefix = !!this._prefixChildren?.find(p => !p._isText);
+        this._hasTextPrefix = !!this._prefixChildren?.find(p => p._isText);
+        this._hasIconSuffix = !!this._suffixChildren?.find(s => !s._isText);
+        this._hasTextSuffix = !!this._suffixChildren?.find(s => s._isText);
+    }
+    /** Initializes the prefix and suffix containers. */
+    _initializePrefixAndSuffix() {
+        this._checkPrefixAndSuffixTypes();
+        // Mark the form field as dirty whenever the prefix or suffix children change. This
+        // is necessary because we conditionally display the prefix/suffix containers based
+        // on whether there is projected content.
+        merge(this._prefixChildren?.changes || EMPTY, this._suffixChildren?.changes || EMPTY).subscribe(() => {
+            this._checkPrefixAndSuffixTypes();
+            this.markForCheck();
+        });
+    }
+    /**
+     * Initializes the subscript by validating hints and synchronizing "aria-describedby" ids
+     * with the custom form field control. Also subscribe to hint and error changes
+     * to be able to validate and synchronize ids on change.
+     */
+    _initializeSubscript() {
+        // Re-validate when the number of hints changes.
+        this._hintChildren?.changes.subscribe(() => {
+            this._processHints();
+            this.markForCheck();
+        });
+        // Update the aria-described by when the number of errors changes.
+        this._errorChildren?.changes.subscribe(() => {
+            this._syncDescribedByIds();
+            this.markForCheck();
+        });
+        // Initial mat-hint validation and subscript describedByIds sync.
+        this._validateHints();
+        this._syncDescribedByIds();
+    }
+    /** Throws an error if the form field's control is missing. */
+    _assertFormFieldControl() {
+        if (!this._control && isDevMode()) {
+            throw getCuteFormFieldMissingControlError();
+        }
+    }
+    _updateFocusState() {
+        const controlFocused = this._control?.focused;
+        // Usually, the MDC foundation would call "activateFocus" and "deactivateFocus" whenever
+        // certain DOM events are emitted. This is not possible in our implementation of the
+        // form field because we support abstract form field controls which are not necessarily
+        // of type input, nor do we have a reference to a native form field control element. Instead,
+        // we handle the focus by checking if the abstract form field control focused state changes.
+        if (controlFocused && !this._isFocused) {
+            this._isFocused = true;
+            //this._lineRipple?.activate();
+        }
+        else if (!controlFocused && (this._isFocused || this._isFocused === null)) {
+            this._isFocused = false;
+            //this._lineRipple?.deactivate();
+        }
+        this._elementRef.nativeElement.classList.toggle('cute-focused', controlFocused);
+        this._textField?.nativeElement.classList.toggle('cute-text-field--focused', controlFocused);
+    }
+    /**
+     * The floating label in the docked state needs to account for prefixes. The horizontal offset
+     * is calculated whenever the appearance changes to `outline`, the prefixes change, or when the
+     * form field is added to the DOM. This method sets up all subscriptions that are needed to
+     * trigger the label offset update. In general, we want to avoid performing measurements often,
+     * so we rely on the `NgZone` as indicator when the offset should be recalculated, instead of
+     * checking every change detection cycle.
+     * @deprecated
+     */
+    _initializeOutlineLabelOffsetSubscriptions() {
+        // Whenever the prefix changes, schedule an update of the label offset.
+        this._prefixChildren?.changes.subscribe(() => (this._needsOutlineLabelOffsetUpdate = true));
+        // TODO(mmalerba): Split this into separate `afterEveryRender` calls using the `EarlyRead` and
+        //  `Write` phases.
+        afterEveryRender(() => {
+            if (this._needsOutlineLabelOffsetUpdate) {
+                this._needsOutlineLabelOffsetUpdate = false;
+                this._getOutlinedLabelOffset();
+            }
+        }, {
+            injector: this._injector,
+        });
+        this._dir.change
+            .pipe(takeUntil(this._destroyed))
+            .subscribe(() => (this._needsOutlineLabelOffsetUpdate = true));
+    }
+    /** Whether the floating label should always float or not. */
+    _shouldAlwaysFloat() {
+        return this.floatLabel === 'always';
+    }
+    /** <cute-datepicker> uses this method */
+    _shouldLabelFloat() {
+        //return false;
+        if (!this._hasFloatingLabel()) {
+            return false;
+        }
+        return this._control?.shouldLabelFloat || this._shouldAlwaysFloat();
+    }
+    /**
+     * Determines whether a class from the AbstractControlDirective
+     * should be forwarded to the host element.
+     */
+    _shouldForward(prop) {
+        const control = this._control ? this._control.ngControl : null;
+        return control && control[prop];
+    }
+    /**
+     *  Determines whether to display hints or errors.
+     *  @author A.Strelkov:
+     *  + Add _undefined_ to return value when no hints and errors exist.
+     *  + Change to `protected`.
+     */
+    _getSubscriptMessageType() {
+        return this._errorChildren && this._errorChildren.length > 0 && this._control?.errorState
+            ? 'error'
+            : this._hintChildren && this._hintChildren.length > 0
+                ? 'hint'
+                : undefined;
+    }
+    /** Does any extra processing required when handling the hints. */
+    _processHints() {
+        this._validateHints();
+        this._syncDescribedByIds();
+    }
+    /**
+     * Ensure that there is a maximum of one of each "cute-hint" alignment specified. The hint
+     * label specified set through the input is being considered as "start" aligned.
+     *
+     * This method is a noop if Angular runs in production mode.
+     */
+    _validateHints() {
+        if (this._hintChildren && isDevMode()) {
+            let startHint;
+            let endHint;
+            this._hintChildren.forEach((hint) => {
+                if (hint.align === 'start') {
+                    if (startHint || this.hintLabel) {
+                        throw getCuteFormFieldDuplicatedHintError('start');
+                    }
+                    startHint = hint;
+                }
+                else if (hint.align === 'end') {
+                    if (endHint) {
+                        throw getCuteFormFieldDuplicatedHintError('end');
+                    }
+                    endHint = hint;
+                }
+            });
+        }
+    }
+    /**
+     * Sets the list of element IDs that describe the child control. This allows the control to update
+     * its `aria-describedby` attribute accordingly.
+     */
+    _syncDescribedByIds() {
+        if (this._control) {
+            let ids = [];
+            // TODO(wagnermaciel): Remove the type check when we find the root cause of this bug.
+            if (this._control.userAriaDescribedBy &&
+                typeof this._control.userAriaDescribedBy === 'string') {
+                ids.push(...this._control.userAriaDescribedBy.split(' '));
+            }
+            if (this._getSubscriptMessageType() === 'hint') {
+                const startHint = this._hintChildren
+                    ? this._hintChildren.find(hint => hint.align === 'start')
+                    : null;
+                const endHint = this._hintChildren
+                    ? this._hintChildren.find(hint => hint.align === 'end')
+                    : null;
+                if (startHint) {
+                    ids.push(startHint.id);
+                }
+                else if (this._hintLabel) {
+                    ids.push(this._hintLabelId);
+                }
+                if (endHint) {
+                    ids.push(endHint.id);
+                }
+            }
+            else if (this._errorChildren) {
+                ids.push(...this._errorChildren.map(error => error.id));
+            }
+            const existingDescribedBy = this._control.describedByIds;
+            let toAssign;
+            // In some cases there might be some `aria-describedby` IDs that were assigned directly,
+            // like by the `AriaDescriber` (see #30011). Attempt to preserve them by taking the previous
+            // attribute value and filtering out the IDs that came from the previous `setDescribedByIds`
+            // call. Note the `|| ids` here allows us to avoid duplicating IDs on the first render.
+            if (existingDescribedBy) {
+                const exclude = this._describedByIds || ids;
+                toAssign = ids.concat(existingDescribedBy.filter(id => id && !exclude.includes(id)));
+            }
+            else {
+                toAssign = ids;
+            }
+            this._control.setDescribedByIds(toAssign);
+            this._describedByIds = ids;
+        }
+    }
+    /**
+     * Calculates the horizontal offset of the label in the outline appearance. In the outline
+     * appearance, the notched-outline and label are not relative to the infix container because
+     * the outline intends to surround prefixes, suffixes and the infix. This means that the
+     * floating label by default overlaps prefixes in the docked state. To avoid this, we need to
+     * horizontally offset the label by the width of the prefix container. The MDC text-field does
+     * not need to do this because they use a fixed width for prefixes. Hence, they can simply
+     * incorporate the horizontal offset into their default text-field styles.
+     */
+    _getOutlinedLabelOffset() {
+        return null;
+        /*
+        if (!this._hasOutline() || !this._floatingLabel) {
+          return;
+        }
+        const floatingLabel = this._floatingLabel.element;
+        // If no prefix is displayed, reset the outline label offset from potential
+        // previous label offset updates.
+        if (!(this._iconPrefixContainer || this._textPrefixContainer)) {
+          floatingLabel.style.transform = '';
+          return;
+        }
+        // If the form field is not attached to the DOM yet (e.g. in a tab), we defer
+        // the label offset update until the zone stabilizes.
+        if (!this._isAttachedToDom()) {
+          this._needsOutlineLabelOffsetUpdate = true;
+          return;
+        }
+        const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;
+        const textPrefixContainer = this._textPrefixContainer?.nativeElement;
+        const iconSuffixContainer = this._iconSuffixContainer?.nativeElement;
+        const textSuffixContainer = this._textSuffixContainer?.nativeElement;
+        const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;
+        const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;
+        const iconSuffixContainerWidth = iconSuffixContainer?.getBoundingClientRect().width ?? 0;
+        const textSuffixContainerWidth = textSuffixContainer?.getBoundingClientRect().width ?? 0;
+        // If the directionality is RTL, the x-axis transform needs to be inverted. This
+        // is because `transformX` does not change based on the page directionality.
+        const negate = this._dir.value === 'rtl' ? '-1' : '1';
+        const prefixWidth = `${iconPrefixContainerWidth + textPrefixContainerWidth}px`;
+        const labelOffset = `var(--mat-mdc-form-field-label-offset-x, 0px)`;
+        const labelHorizontalOffset = `calc(${negate} * (${prefixWidth} + ${labelOffset}))`;
+    
+        // Update the translateX of the floating label to account for the prefix container,
+        // but allow the CSS to override this setting via a CSS variable when the label is
+        // floating.
+        floatingLabel.style.transform = `var(
+            --mat-mdc-form-field-label-transform,
+            ${FLOATING_LABEL_DEFAULT_DOCKED_TRANSFORM} translateX(${labelHorizontalOffset})
+        )`;
+    
+        // Prevent the label from overlapping the suffix when in resting position.
+        const prefixAndSuffixWidth =
+          iconPrefixContainerWidth +
+          textPrefixContainerWidth +
+          iconSuffixContainerWidth +
+          textSuffixContainerWidth;
+        this._elementRef.nativeElement.style.setProperty(
+          '--mat-form-field-notch-max-width',
+          `calc(100% - ${prefixAndSuffixWidth}px)`,
+        );
+        */
+    }
+    /** Checks whether the form field is attached to the DOM. */
+    _isAttachedToDom() {
+        const element = this._elementRef.nativeElement;
+        if (element.getRootNode) {
+            const rootNode = element.getRootNode();
+            // If the element is inside the DOM, the root node will be either the document
+            // or the closest shadow root, otherwise it'll be the element itself.
+            return rootNode && rootNode !== element;
+        }
+        // Otherwise, fall back to checking if it's in the document. This doesn't account for
+        // shadow DOM, however, browser that supports shadow DOM should support `getRootNode` as well.
+        return document.documentElement.contains(element);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteFormField, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.15", type: CuteFormField, isStandalone: true, selector: "cute-form-field", inputs: { hideValidStyle: "hideValidStyle", hideRequiredMarker: "hideRequiredMarker", magnitude: "magnitude", floatLabel: "floatLabel", subscriptSizing: "subscriptSizing", hintLabel: "hintLabel" }, host: { properties: { "class.cute-form-field-label-always-float": "_shouldAlwaysFloat()", "class.cute-form-field-invalid": "_control?.errorState", "class.cute-form-field-disabled": "_control?.disabled", "class.cute-form-field-autofilled": "_control?.autofilled", "class.ng-untouched": "_shouldForward(\"untouched\")", "class.ng-touched": "_shouldForward(\"touched\")", "class.ng-pristine": "_shouldForward(\"pristine\")", "class.ng-dirty": "_shouldForward(\"dirty\")", "class.ng-valid": "_shouldForward(\"valid\")", "class.ng-invalid": "_shouldForward(\"invalid\")", "class.ng-pending": "_shouldForward(\"pending\")" }, classAttribute: "cute-form-field" }, providers: [
+            { provide: CUTE_FORM_FIELD, useExisting: CuteFormField },
+        ], queries: [{ propertyName: "_labelChild", first: true, predicate: CuteLabel, descendants: true, isSignal: true }, { propertyName: "_labelChildNonStatic", first: true, predicate: CuteLabel, descendants: true }, { propertyName: "_labelChildStatic", first: true, predicate: CuteLabel, descendants: true, static: true }, { propertyName: "_formFieldControl", first: true, predicate: CuteFormFieldControl, descendants: true }, { propertyName: "_prefixChildren", predicate: CUTE_PREFIX, descendants: true }, { propertyName: "_suffixChildren", predicate: CUTE_SUFFIX, descendants: true }, { propertyName: "_errorChildren", predicate: CUTE_ERROR, descendants: true }, { propertyName: "_hintChildren", predicate: CuteHint, descendants: true }], viewQueries: [{ propertyName: "_textField", first: true, predicate: ["textField"], descendants: true }], exportAs: ["cuteFormField"], usesInheritance: true, ngImport: i0, template: "<ng-template #labelTemplate>\r\n  @if (_hasFloatingLabel()) {\r\n    <label class=\"form-label cute-form-control-placeholder\"\r\n           [id]=\"_labelId\"\r\n           [attr.for]=\"(_control && !_control.disableAutomaticLabeling) ? _control.id : null\"\r\n           tabindex=\"-1\">\r\n      <ng-content select=\"cute-label\"></ng-content>\r\n      <!--\r\n        We set the required marker as a separate element, in order to make it easier to target if\r\n        apps want to override it and to be able to set `aria-hidden` so that screen readers don't\r\n        pick it up.\r\n      -->\r\n      @if (!hideRequiredMarker && _control?.required) {\r\n        <span aria-hidden=\"true\"\r\n              class=\"cute-form-field-required-marker cute-floating-label--required\">\r\n        </span>\r\n      }\r\n    </label>\r\n  }\r\n</ng-template>\r\n\r\n<div class=\"cute-text-field\" #textField (click)=\"_control?.onContainerClick($event)\">\r\n\r\n  <!-- label -->\r\n  @if (!_isFloatLabel) {\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n  }\r\n\r\n  <!-- brief instruction -->\r\n  <!--  <ng-content select=\"cute-intro\"></ng-content>-->\r\n\r\n  <!-- input -->\r\n  <div class=\"flex-nowrap cute-text-field__input\"\r\n       [class]=\"!_isFloatLabel?'input-group '+(magnitudeSuffix?' input-group'+magnitudeSuffix :''):''\"\r\n       [class.form-floating]=\"_isFloatLabel\">\r\n\r\n    @if (_hasIconPrefix) {\r\n      <ng-content select=\"[cutePrefix], [cuteIconPrefix]\"></ng-content>\r\n    }\r\n    @if (_hasTextPrefix) {\r\n      <ng-content select=\"[cuteTextPrefix]\"></ng-content>\r\n    }\r\n\r\n<!--    <div #infixField class=\"cute-form-field-control input-group-text\">-->\r\n      <ng-content></ng-content>\r\n      @if (_isFloatLabel) {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n      }\r\n<!--    </div>-->\r\n\r\n    @if (_hasTextSuffix) {\r\n      <ng-content select=\"[cuteTextSuffix]\"></ng-content>\r\n    }\r\n    @if (_hasIconSuffix) {\r\n      <ng-content select=\"[cuteSuffix], [cuteIconSuffix]\"></ng-content>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n\r\n<!--<ng-content select=\"cute-error, [cuteError]\"></ng-content>-->\r\n\r\n<!-- messages -->\r\n\r\n<div [class.cute-form-field-bottom-align]=\"subscriptSizing=='fixed'\">\r\n\r\n  @let subscriptMessageType = _getSubscriptMessageType();\r\n\r\n  @switch (subscriptMessageType) {\r\n    @case ('error') {\r\n      <div class=\"cute-form-field-error-wrapper\">\r\n        <ng-content select=\"cute-error, [cuteError]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    @case ('hint') {\r\n      <div class=\"cute-form-field-hint-wrapper\">\r\n        @if (hintLabel) {\r\n          <cute-hint [id]=\"_hintLabelId\">{{hintLabel}}</cute-hint>\r\n        }\r\n        <ng-content select=\"cute-hint:not([align='end'])\"></ng-content>\r\n        <div class=\"cute-form-field-hint-spacer\"></div>\r\n        <ng-content select=\"cute-hint[align='end']\"></ng-content>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".cute-form-field{display:inline-flex;flex-direction:column;min-width:0;max-width:100%;text-align:start}.cute-form-field .cute-text-field{display:inline-flex;flex-direction:column;width:100%;justify-content:start}.cute-form-field .form-label{margin-bottom:.25rem}.cute-form-field .form-floating>.form-control:focus~label:after,.cute-form-field .form-floating>.form-control:not(:placeholder-shown)~label:after,.cute-form-field .form-floating>.form-control-plaintext~label:after,.cute-form-field .form-floating>.form-select~label:after{background-color:transparent}.cute-form-field .cute-form-field-hint-wrapper,.cute-form-field .cute-form-field-error-wrapper{display:flex;animation:_cute-form-field-subscript-animation 0ms cubic-bezier(.55,0,.55,.2)}.cute-form-field.cute-form-field-animations-enabled .cute-form-field-hint-wrapper,.cute-form-field.cute-form-field-animations-enabled .cute-form-field-error-wrapper{animation-duration:.3s}.cute-form-field.cute-form-field-disabled input:not([readonly]){opacity:.85;pointer-events:none}.cute-form-field.cute-form-field-disabled.cute-input-disabled-interactive{pointer-events:auto}.cute-form-field .cute-form-field-hint-spacer{flex:1 0 1em}.cute-form-field .cute-form-field-bottom-align:empty:before{display:block;content:\"-\";margin-top:.125rem;font-size:.875em;color:transparent;pointer-events:none}.cute-form-field .cute-form-field-required-marker:after,.cute-form-field .cute-floating-label--required:after{content:\"*\";margin-inline-start:3px;margin-inline-end:0;vertical-align:top;color:var(--bs-danger)}.cute-form-field input.ng-dirty:not(:placeholder-shown){background-color:var(--bs-warning-bg-subtle)}.cute-form-field input:placeholder-shown{text-overflow:ellipsis}[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:0;margin-right:calc(var(--bs-border-width) * -1);border-radius:var(--bs-border-radius) 0 0 var(--bs-border-radius)}[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(:last-child){border-radius:0}[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-radius:0 var(--bs-border-radius) var(--bs-border-radius) 0}:not([dir=rtl]) .input-group .cute-widget:not(:first-child) .form-select,:not([dir=rtl]) .input-group .cute-widget:not(:first-child) .dropdown-toggle{margin-left:calc(var(--bs-border-width) * -1);border-top-left-radius:0;border-bottom-left-radius:0}[dir=rtl] .input-group .cute-widget:not(:first-child) .form-select,[dir=rtl] .input-group .cute-widget:not(:first-child) .dropdown-toggle{margin-right:calc(var(--bs-border-width) * 1);border-top-right-radius:0;border-bottom-right-radius:0}:not([dir=rtl]) .input-group .cute-widget:not(:last-child) .form-select,:not([dir=rtl]) .input-group .cute-widget:not(:last-child) .dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .input-group .cute-widget:not(:last-child) .form-select,[dir=rtl] .input-group .cute-widget:not(:last-child) .dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}[dir=rtl] .input-group .cute-widget:not(:last-child) .form-select:first-child,[dir=rtl] .input-group .cute-widget:not(:last-child) .dropdown-toggle:first-child{border-top-right-radius:var(--bs-border-radius);border-bottom-right-radius:var(--bs-border-radius)}.input-group .cute-form-field-control{display:contents;border:2px gray solid;border-radius:inherit}.input-group .cute-form-field-control .form-control,.input-group .cute-form-field-control .form-select{border:1px gray solid;border-radius:inherit;position:relative;box-sizing:border-box}.input-group [cutePrefix],[cuteIconPrefix],[cuteSuffix],[cuteIconSuffix]{display:inline-flex!important;justify-content:center}.cute-form-field-prefix .cute-icon,.cute-form-field-suffix .cute-icon{display:block}.cute-form-field-prefix .cute-icon-button .cute-icon,.cute-form-field-suffix .cute-icon-button .cute-icon{margin:auto}.cute-form-field-hint,.cute-form-field-error{display:block;text-align:start;font-size:.75rem;-webkit-font-smoothing:antialiased}.cute-form-field-hint-end{order:1}.form-floating>.form-control:focus::placeholder{color:var(--bs-body-color);opacity:.75}.form-floating>.form-control-plaintext~.form-label,.form-floating>.form-control:focus~.form-label,.form-floating>.form-control:not(:placeholder-shown)~.form-label,.form-floating>.form-select~.form-label{color:rgba(var(--bs-body-color-rgb),.9);transform:scale(.85) translateY(-.625rem) translate(.15rem)}.cute-form-field-label-always-float .form-label{transform:scale(.85) translateY(-.625rem) translate(.15rem)}.cute-form-field-label-always-float .form-floating>.form-control:not(:focus):placeholder-shown{padding-top:2rem}.cute-form-field-label-always-float .form-floating>.form-control:not(:focus)::placeholder{color:var(--bs-body-color);opacity:.75}@keyframes _cute-form-field-subscript-animation{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"], dependencies: [{ kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: CuteHint, selector: "cute-hint", inputs: ["align", "id"], exportAs: ["cuteHint"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteFormField, decorators: [{
+            type: Component,
+            args: [{ selector: 'cute-form-field', exportAs: 'cuteFormField', host: {
+                        'class': 'cute-form-field',
+                        '[class.cute-form-field-label-always-float]': '_shouldAlwaysFloat()',
+                        '[class.cute-form-field-invalid]': '_control?.errorState',
+                        '[class.cute-form-field-disabled]': '_control?.disabled',
+                        '[class.cute-form-field-autofilled]': '_control?.autofilled',
+                        '[class.ng-untouched]': '_shouldForward("untouched")',
+                        '[class.ng-touched]': '_shouldForward("touched")',
+                        '[class.ng-pristine]': '_shouldForward("pristine")',
+                        '[class.ng-dirty]': '_shouldForward("dirty")',
+                        '[class.ng-valid]': '_shouldForward("valid")',
+                        '[class.ng-invalid]': '_shouldForward("invalid")',
+                        '[class.ng-pending]': '_shouldForward("pending")',
+                    }, encapsulation: ViewEncapsulation.None, changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        { provide: CUTE_FORM_FIELD, useExisting: CuteFormField },
+                    ], imports: [
+                        NgTemplateOutlet,
+                        CuteHint
+                    ], template: "<ng-template #labelTemplate>\r\n  @if (_hasFloatingLabel()) {\r\n    <label class=\"form-label cute-form-control-placeholder\"\r\n           [id]=\"_labelId\"\r\n           [attr.for]=\"(_control && !_control.disableAutomaticLabeling) ? _control.id : null\"\r\n           tabindex=\"-1\">\r\n      <ng-content select=\"cute-label\"></ng-content>\r\n      <!--\r\n        We set the required marker as a separate element, in order to make it easier to target if\r\n        apps want to override it and to be able to set `aria-hidden` so that screen readers don't\r\n        pick it up.\r\n      -->\r\n      @if (!hideRequiredMarker && _control?.required) {\r\n        <span aria-hidden=\"true\"\r\n              class=\"cute-form-field-required-marker cute-floating-label--required\">\r\n        </span>\r\n      }\r\n    </label>\r\n  }\r\n</ng-template>\r\n\r\n<div class=\"cute-text-field\" #textField (click)=\"_control?.onContainerClick($event)\">\r\n\r\n  <!-- label -->\r\n  @if (!_isFloatLabel) {\r\n    <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n  }\r\n\r\n  <!-- brief instruction -->\r\n  <!--  <ng-content select=\"cute-intro\"></ng-content>-->\r\n\r\n  <!-- input -->\r\n  <div class=\"flex-nowrap cute-text-field__input\"\r\n       [class]=\"!_isFloatLabel?'input-group '+(magnitudeSuffix?' input-group'+magnitudeSuffix :''):''\"\r\n       [class.form-floating]=\"_isFloatLabel\">\r\n\r\n    @if (_hasIconPrefix) {\r\n      <ng-content select=\"[cutePrefix], [cuteIconPrefix]\"></ng-content>\r\n    }\r\n    @if (_hasTextPrefix) {\r\n      <ng-content select=\"[cuteTextPrefix]\"></ng-content>\r\n    }\r\n\r\n<!--    <div #infixField class=\"cute-form-field-control input-group-text\">-->\r\n      <ng-content></ng-content>\r\n      @if (_isFloatLabel) {\r\n        <ng-container [ngTemplateOutlet]=\"labelTemplate\"></ng-container>\r\n      }\r\n<!--    </div>-->\r\n\r\n    @if (_hasTextSuffix) {\r\n      <ng-content select=\"[cuteTextSuffix]\"></ng-content>\r\n    }\r\n    @if (_hasIconSuffix) {\r\n      <ng-content select=\"[cuteSuffix], [cuteIconSuffix]\"></ng-content>\r\n    }\r\n  </div>\r\n\r\n</div>\r\n\r\n<!--<ng-content select=\"cute-error, [cuteError]\"></ng-content>-->\r\n\r\n<!-- messages -->\r\n\r\n<div [class.cute-form-field-bottom-align]=\"subscriptSizing=='fixed'\">\r\n\r\n  @let subscriptMessageType = _getSubscriptMessageType();\r\n\r\n  @switch (subscriptMessageType) {\r\n    @case ('error') {\r\n      <div class=\"cute-form-field-error-wrapper\">\r\n        <ng-content select=\"cute-error, [cuteError]\"></ng-content>\r\n      </div>\r\n    }\r\n\r\n    @case ('hint') {\r\n      <div class=\"cute-form-field-hint-wrapper\">\r\n        @if (hintLabel) {\r\n          <cute-hint [id]=\"_hintLabelId\">{{hintLabel}}</cute-hint>\r\n        }\r\n        <ng-content select=\"cute-hint:not([align='end'])\"></ng-content>\r\n        <div class=\"cute-form-field-hint-spacer\"></div>\r\n        <ng-content select=\"cute-hint[align='end']\"></ng-content>\r\n      </div>\r\n    }\r\n  }\r\n</div>\r\n\r\n", styles: [".cute-form-field{display:inline-flex;flex-direction:column;min-width:0;max-width:100%;text-align:start}.cute-form-field .cute-text-field{display:inline-flex;flex-direction:column;width:100%;justify-content:start}.cute-form-field .form-label{margin-bottom:.25rem}.cute-form-field .form-floating>.form-control:focus~label:after,.cute-form-field .form-floating>.form-control:not(:placeholder-shown)~label:after,.cute-form-field .form-floating>.form-control-plaintext~label:after,.cute-form-field .form-floating>.form-select~label:after{background-color:transparent}.cute-form-field .cute-form-field-hint-wrapper,.cute-form-field .cute-form-field-error-wrapper{display:flex;animation:_cute-form-field-subscript-animation 0ms cubic-bezier(.55,0,.55,.2)}.cute-form-field.cute-form-field-animations-enabled .cute-form-field-hint-wrapper,.cute-form-field.cute-form-field-animations-enabled .cute-form-field-error-wrapper{animation-duration:.3s}.cute-form-field.cute-form-field-disabled input:not([readonly]){opacity:.85;pointer-events:none}.cute-form-field.cute-form-field-disabled.cute-input-disabled-interactive{pointer-events:auto}.cute-form-field .cute-form-field-hint-spacer{flex:1 0 1em}.cute-form-field .cute-form-field-bottom-align:empty:before{display:block;content:\"-\";margin-top:.125rem;font-size:.875em;color:transparent;pointer-events:none}.cute-form-field .cute-form-field-required-marker:after,.cute-form-field .cute-floating-label--required:after{content:\"*\";margin-inline-start:3px;margin-inline-end:0;vertical-align:top;color:var(--bs-danger)}.cute-form-field input.ng-dirty:not(:placeholder-shown){background-color:var(--bs-warning-bg-subtle)}.cute-form-field input:placeholder-shown{text-overflow:ellipsis}[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback){margin-left:0;margin-right:calc(var(--bs-border-width) * -1);border-radius:var(--bs-border-radius) 0 0 var(--bs-border-radius)}[dir=rtl] .input-group>:not(:first-child):not(.dropdown-menu):not(.valid-tooltip):not(.valid-feedback):not(.invalid-tooltip):not(.invalid-feedback):not(:last-child){border-radius:0}[dir=rtl] .input-group:not(.has-validation)>:not(:last-child):not(.dropdown-toggle):not(.dropdown-menu):not(.form-floating),[dir=rtl] .input-group:not(.has-validation)>.dropdown-toggle:nth-last-child(n+3),[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-control,[dir=rtl] .input-group:not(.has-validation)>.form-floating:not(:last-child)>.form-select{border-radius:0 var(--bs-border-radius) var(--bs-border-radius) 0}:not([dir=rtl]) .input-group .cute-widget:not(:first-child) .form-select,:not([dir=rtl]) .input-group .cute-widget:not(:first-child) .dropdown-toggle{margin-left:calc(var(--bs-border-width) * -1);border-top-left-radius:0;border-bottom-left-radius:0}[dir=rtl] .input-group .cute-widget:not(:first-child) .form-select,[dir=rtl] .input-group .cute-widget:not(:first-child) .dropdown-toggle{margin-right:calc(var(--bs-border-width) * 1);border-top-right-radius:0;border-bottom-right-radius:0}:not([dir=rtl]) .input-group .cute-widget:not(:last-child) .form-select,:not([dir=rtl]) .input-group .cute-widget:not(:last-child) .dropdown-toggle{border-top-right-radius:0;border-bottom-right-radius:0}[dir=rtl] .input-group .cute-widget:not(:last-child) .form-select,[dir=rtl] .input-group .cute-widget:not(:last-child) .dropdown-toggle{border-top-left-radius:0;border-bottom-left-radius:0}[dir=rtl] .input-group .cute-widget:not(:last-child) .form-select:first-child,[dir=rtl] .input-group .cute-widget:not(:last-child) .dropdown-toggle:first-child{border-top-right-radius:var(--bs-border-radius);border-bottom-right-radius:var(--bs-border-radius)}.input-group .cute-form-field-control{display:contents;border:2px gray solid;border-radius:inherit}.input-group .cute-form-field-control .form-control,.input-group .cute-form-field-control .form-select{border:1px gray solid;border-radius:inherit;position:relative;box-sizing:border-box}.input-group [cutePrefix],[cuteIconPrefix],[cuteSuffix],[cuteIconSuffix]{display:inline-flex!important;justify-content:center}.cute-form-field-prefix .cute-icon,.cute-form-field-suffix .cute-icon{display:block}.cute-form-field-prefix .cute-icon-button .cute-icon,.cute-form-field-suffix .cute-icon-button .cute-icon{margin:auto}.cute-form-field-hint,.cute-form-field-error{display:block;text-align:start;font-size:.75rem;-webkit-font-smoothing:antialiased}.cute-form-field-hint-end{order:1}.form-floating>.form-control:focus::placeholder{color:var(--bs-body-color);opacity:.75}.form-floating>.form-control-plaintext~.form-label,.form-floating>.form-control:focus~.form-label,.form-floating>.form-control:not(:placeholder-shown)~.form-label,.form-floating>.form-select~.form-label{color:rgba(var(--bs-body-color-rgb),.9);transform:scale(.85) translateY(-.625rem) translate(.15rem)}.cute-form-field-label-always-float .form-label{transform:scale(.85) translateY(-.625rem) translate(.15rem)}.cute-form-field-label-always-float .form-floating>.form-control:not(:focus):placeholder-shown{padding-top:2rem}.cute-form-field-label-always-float .form-floating>.form-control:not(:focus)::placeholder{color:var(--bs-body-color);opacity:.75}@keyframes _cute-form-field-subscript-animation{0%{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { _textField: [{
+                type: ViewChild,
+                args: ['textField']
+            }], _labelChildNonStatic: [{
+                type: ContentChild,
+                args: [CuteLabel]
+            }], _labelChildStatic: [{
+                type: ContentChild,
+                args: [CuteLabel, { static: true }]
+            }], _formFieldControl: [{
+                type: ContentChild,
+                args: [CuteFormFieldControl]
+            }], _prefixChildren: [{
+                type: ContentChildren,
+                args: [CUTE_PREFIX, { descendants: true }]
+            }], _suffixChildren: [{
+                type: ContentChildren,
+                args: [CUTE_SUFFIX, { descendants: true }]
+            }], _errorChildren: [{
+                type: ContentChildren,
+                args: [CUTE_ERROR, { descendants: true }]
+            }], _hintChildren: [{
+                type: ContentChildren,
+                args: [CuteHint, { descendants: true }]
+            }], _labelChild: [{ type: i0.ContentChild, args: [i0.forwardRef(() => CuteLabel), { isSignal: true }] }], hideValidStyle: [{
+                type: Input
+            }], hideRequiredMarker: [{
+                type: Input
+            }], magnitude: [{
+                type: Input
+            }], floatLabel: [{
+                type: Input
+            }], subscriptSizing: [{
+                type: Input
+            }], hintLabel: [{
+                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
+ */
+/** Intro text to be shown underneath the label of the form field control. */
+class CuteIntro /* extends ... */ {
+    constructor() {
+        this._elementRef = inject(ElementRef);
+    }
+    /** Returns the intro's current text. */
+    getText() {
+        return this._elementRef.nativeElement.innerText;
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteIntro /* extends ... */, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.15", type: CuteIntro /* extends ... */, isStandalone: true, selector: "cute-intro", inputs: { magnitude: "magnitude" }, host: { properties: { "style.font-size": "magnitude==\"small\" ? \"0.875rem\" : (magnitude==\"large\"? \"1.25rem\" : \"\")" } }, exportAs: ["cuteIntro"], ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteIntro /* extends ... */, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: 'cute-intro',
+                    exportAs: 'cuteIntro',
+                    host: {
+                        '[style.font-size]': 'magnitude=="small" ? "0.875rem" : (magnitude=="large"? "1.25rem" : "")'
+                    },
+                    standalone: true,
+                }]
+        }], propDecorators: { magnitude: [{
+                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
+ */
+const TYPES = [
+    CuteFormField,
+    CuteLabel,
+    CuteIntro,
+    CuteHint,
+    CutePrefix,
+    CuteSuffix,
+    CuteError,
+];
+class CuteFormFieldModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteFormFieldModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteFormFieldModule, imports: [CommonModule, CuteFormField,
+            CuteLabel,
+            CuteIntro,
+            CuteHint,
+            CutePrefix,
+            CuteSuffix,
+            CuteError], exports: [CuteFormField,
+            CuteLabel,
+            CuteIntro,
+            CuteHint,
+            CutePrefix,
+            CuteSuffix,
+            CuteError] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteFormFieldModule, imports: [CommonModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteFormFieldModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    declarations: [],
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_ERROR, CUTE_FORM_FIELD, CUTE_FORM_FIELD_DEFAULT_OPTIONS, CUTE_PREFIX, CUTE_SUFFIX, CuteError, CuteFormField, CuteFormFieldControl, CuteFormFieldModule, CuteHint, CuteIntro, CuteLabel, CutePrefix, CuteSuffix };
+//# sourceMappingURL=cute-widgets-base-form-field.mjs.map