@cute-widgets/base 20.0.1

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

@@ -0,0 +1,726 @@
+import { coerceBooleanProperty } from '@angular/cdk/coercion';
+import { getSupportedInputTypes, Platform } from '@angular/cdk/platform';
+import { AutofillMonitor } from '@angular/cdk/text-field';
+import * as i0 from '@angular/core';
+import { InjectionToken, inject, ElementRef, NgZone, isSignal, effect, isDevMode, booleanAttribute, Input, HostBinding, Directive, NgModule } from '@angular/core';
+import { Validators, NgControl, NgForm, FormGroupDirective } from '@angular/forms';
+import { ErrorStateMatcher, _ErrorStateTracker } from '@cute-widgets/base/core/error';
+import { CUTE_FORM_FIELD, CuteFormFieldControl, CuteFormFieldModule } from '@cute-widgets/base/form-field';
+import { CuteInputControl } from '@cute-widgets/base/abstract';
+import { Subject } from 'rxjs';
+import { CommonModule } from '@angular/common';
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+function getCuteInputUnsupportedTypeError(type) {
+    return Error(`Input type "${type}" isn't supported by 'cuteInput' 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
+ *
+ * This code is a modification of the `@angular/material` original
+ * code licensed under MIT-style License (https://angular.dev/license).
+ */
+/**
+ * This token is used to inject the object whose value should be set into `CuteInput`. If none is
+ * provided, the native `HTMLInputElement` is used. Directives like `CuteDatepickerInput` can provide
+ * themselves for this token, in order to make `CuteInput` delegate the getting and setting of the
+ * value to them.
+ */
+const CUTE_INPUT_VALUE_ACCESSOR = new InjectionToken('CUTE_INPUT_VALUE_ACCESSOR');
+
+/**
+ * @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 token is used to inject an object that will be applied to format a raw input value */
+const CUTE_INPUT_VALUE_FORMATTER = new InjectionToken('CUTE_INPUT_VALUE_FORMATTER');
+
+/**
+ * @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 token is used to inject an object with special methods that will be invoked before _ControlValueAccessor_'s methods do.
+ * The typical example of such object is a _CuteEditMask_, that needs to get masked value before assign it to the view and
+ * get cleaned value before send it to the model (form control).
+ */
+const CUTE_INPUT_VALUE_PREDECESSOR = new InjectionToken('CUTE_INPUT_VALUE_PREDECESSOR');
+
+/**
+ * @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).
+ */
+// Invalid input type. Using one of these will throw an CuteInputUnsupportedTypeError.
+const CUTE_INPUT_INVALID_TYPES = [
+    'button',
+    'checkbox',
+    //'file',
+    'hidden',
+    'image',
+    'radio',
+    //'range',
+    'reset',
+    'submit',
+];
+/** Injection token that can be used to provide the default options for the input. */
+const CUTE_INPUT_CONFIG = new InjectionToken('CUTE_INPUT_CONFIG');
+let nextUniqueId = 0;
+/**
+ * We must check whether the agent is Android because composition events
+ * behave differently between iOS and Android.
+ */
+// function _isAndroid(): boolean {
+//   const userAgent = getDOM() ? getDOM().getUserAgent() : '';
+//   return /android (\d+)/.test(userAgent.toLowerCase());
+// }
+class CuteInput extends CuteInputControl {
+    /** Implemented as part of CuteFormFieldControl. */
+    get controlElementRef() { return this._elementRef; }
+    generateId() {
+        return `cute-input-${nextUniqueId++}`;
+    }
+    get classList() {
+        if (["range"].indexOf(this.type) >= 0) {
+            return "";
+        }
+        let classes = (this._isNativeSelect ? "form-select" : "form-control" + (this.plainText ? "-plaintext" : ""));
+        if (this.magnitude && this.magnitude !== "middle") {
+            classes += " " + (this._isNativeSelect ? "form-select" : "form-control") + this.cssClassSizeSuffix;
+        }
+        return classes;
+    }
+    /** Implemented as part of CuteFormFieldControl. */
+    setDisabledState(value) {
+        const changed = super.setDisabledState(value, false);
+        if (changed) {
+            // Browsers may not fire the blur event if the input is disabled too quickly.
+            // Reset from here to ensure that the element doesn't become stuck.
+            if (this.focused) {
+                this.focused = false;
+                this.stateChanges.next();
+            }
+        }
+        return changed;
+    }
+    /** Implemented as part of CuteFormFieldControl. */
+    get required() {
+        return super.required ?? this.ngControl?.control?.hasValidator(Validators.required) ?? false;
+    }
+    set required(value) {
+        super.required = coerceBooleanProperty(value);
+    }
+    /** Input type of the element. */
+    get type() { return this._type; }
+    set type(value) {
+        const prevType = this._type;
+        this._type = value || 'text';
+        this._validateType();
+        // When using Angular inputs, developers are no longer able to set the properties on the native
+        // input element. To ensure that bindings for `type` work, we need to sync the setter
+        // with the native property. Textarea elements don't support the type property or attribute.
+        if (!this._isTextarea && getSupportedInputTypes().has(this._type)) {
+            this._elementRef.nativeElement.type = this._type;
+        }
+        if (this._type !== prevType) {
+            this._ensureWheelDefaultBehavior();
+        }
+    }
+    /** An object used to control when error messages are shown. */
+    get errorStateMatcher() { return this._errorStateTracker.matcher; }
+    set errorStateMatcher(value) {
+        this._errorStateTracker.matcher = value;
+    }
+    /** Implemented as part of CuteFormFieldControl. */
+    get value() {
+        return this._signalBasedValueAccessor
+            ? this._signalBasedValueAccessor.value()
+            : this._inputValueAccessor.value;
+    }
+    set value(value) {
+        if (value !== this.value) {
+            if (this._signalBasedValueAccessor) {
+                this._signalBasedValueAccessor.value.set(value);
+            }
+            else {
+                this._inputValueAccessor.value = value;
+            }
+            this.stateChanges.next();
+        }
+    }
+    /** Whether the element is readonly. */
+    get readonly() { return this._readonly; }
+    set readonly(value) {
+        this._readonly = coerceBooleanProperty(value);
+    }
+    /** Whether the input control is styled as a plain text. Use it with `readonly` property. */
+    get plainText() { return this._plainText; }
+    set plainText(value) {
+        if (!this._isNativeSelect) {
+            this._plainText = value;
+        }
+    }
+    /** Whether the input is in an error state. */
+    get errorState() { return this._errorStateTracker.errorState; }
+    set errorState(value) { this._errorStateTracker.errorState = value; }
+    /** Returns bootstrap's size suffix for CSS classes */
+    get cssClassSizeSuffix() {
+        if (this.magnitude == "small") {
+            return "-sm";
+        }
+        else if (this.magnitude == "large") {
+            return "-lg";
+        }
+        return "";
+    }
+    constructor() {
+        super();
+        this._elementRef = inject(ElementRef);
+        this._platform = inject(Platform);
+        this.ngControl = inject(NgControl, { optional: true, self: true });
+        this._autofillMonitor = inject(AutofillMonitor);
+        this._ngZone = inject(NgZone);
+        this._formField = inject(CUTE_FORM_FIELD, { optional: true });
+        this._valueFormatter = inject(CUTE_INPUT_VALUE_FORMATTER, { optional: true, self: true });
+        this._inputValuePredecessor = inject(CUTE_INPUT_VALUE_PREDECESSOR, { optional: true, self: true });
+        this._inputValueAccessor = { value: undefined };
+        this._previousPlaceholder = null;
+        this._config = inject(CUTE_INPUT_CONFIG, { optional: true });
+        this._destroyed$ = new Subject();
+        this._compositionMode = false;
+        /** Whether the user is creating a composition string (IME events). */
+        this._composing = false;
+        /** Implemented as part of CuteFormFieldControl. */
+        this.focused = false;
+        /** Implemented as part of CuteFormFieldControl. */
+        this.controlType = 'cute-input';
+        /** Implemented as part of CuteFormFieldControl. */
+        this.autofilled = false;
+        this._type = 'text';
+        this._readonly = false;
+        /** Whether the input should remain interactive when it is disabled. */
+        this.disabledInteractive = false;
+        this._plainText = false;
+        this._neverEmptyInputTypes = [
+            'date',
+            'datetime',
+            'datetime-local',
+            'month',
+            'time',
+            'week',
+        ].filter(t => getSupportedInputTypes().has(t));
+        this._iOSKeyupListener = (event) => {
+            const el = event.target;
+            // Note: We specifically check for 0, rather than `!el.selectionStart`, because the two
+            // indicate different things. If the value is 0, it means that the caret is at the start
+            // of the input, whereas a value of `null` means that the input doesn't support
+            // manipulating the selection range. Inputs that don't support setting the selection range
+            // will throw an error, so we want to avoid calling `setSelectionRange` on them. See:
+            // https://html.spec.whatwg.org/multipage/input.html#do-not-apply
+            if (!el.value && el.selectionStart === 0 && el.selectionEnd === 0) {
+                // Note: Just setting `0, 0` doesn't fix the issue. Setting
+                // `1, 1` fixes it for the first time that you type text and
+                // then hold delete. Toggling to `1, 1` and then back to
+                // `0, 0` seems to completely fix it.
+                el.setSelectionRange(1, 1);
+                el.setSelectionRange(0, 0);
+            }
+        };
+        this._webkitBlinkWheelListener = () => {
+            // This is a noop function and is used to enable mouse wheel input
+            // on number inputs
+            // on blink and webkit browsers.
+        };
+        const parentForm = inject(NgForm, { optional: true });
+        const parentFormGroup = inject(FormGroupDirective, { optional: true });
+        const defaultErrorStateMatcher = inject(ErrorStateMatcher);
+        const accessor = inject(CUTE_INPUT_VALUE_ACCESSOR, { optional: true, self: true });
+        const element = this._elementRef.nativeElement;
+        const nodeName = element.nodeName.toLowerCase();
+        if (accessor) {
+            if (isSignal(accessor.value)) {
+                this._signalBasedValueAccessor = accessor;
+            }
+            else {
+                this._inputValueAccessor = accessor;
+            }
+        }
+        else {
+            // If no input value accessor was explicitly specified, use the element as the input value
+            // accessor.
+            this._inputValueAccessor = element;
+        }
+        this._previousNativeValue = this.value;
+        // Force setter to be called in case id was not specified.
+        this.id = this.id;
+        //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+        // We are changing the valueAccessor from the DefaultValueAccessor object to our class!!!
+        //+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
+        // if (this.ngControl) {
+        //   // Note: we provide the value accessor through here, instead of
+        //   // the `providers` to avoid running into a circular import.
+        //   this.ngControl.valueAccessor = this;
+        //
+        //   // This is a snippet code that we need to prevent the loss of functionality implemented in
+        //   // DefaultValueAccessor class.
+        //   this._compositionMode = inject(COMPOSITION_BUFFER_MODE, {optional: true});
+        //   if (this._compositionMode == null) {
+        //     this._compositionMode = !_isAndroid();
+        //   }
+        // }
+        //-------------------------------------------------------------------------------------
+        // On some versions of iOS, the caret gets stuck in the wrong place when holding down the delete
+        // key. In order to get around this, we need to "jiggle" the caret loose. Since this bug only
+        // exists on iOS, we only bother to install the listener on iOS.
+        if (this._platform.IOS) {
+            this._ngZone.runOutsideAngular(() => {
+                this._cleanupIosKeyup = this._renderer.listen(element, 'keyup', this._iOSKeyupListener);
+            });
+        }
+        this._errorStateTracker = new _ErrorStateTracker(defaultErrorStateMatcher, this.ngControl, parentFormGroup, parentForm, this.stateChanges);
+        this._isServer = !this._platform.isBrowser;
+        this._isNativeSelect = nodeName === 'select';
+        this._isTextarea = nodeName === 'textarea';
+        this._isInFormField = !!this._formField;
+        this.disabledInteractive = this._config?.disabledInteractive || false;
+        if (this._isNativeSelect) {
+            this.controlType = element.multiple
+                ? 'cute-native-select-multiple'
+                : 'cute-native-select';
+        }
+        if (this._signalBasedValueAccessor) {
+            effect(() => {
+                // Read the value so the effect can register the dependency.
+                this._signalBasedValueAccessor.value();
+                this.stateChanges.next();
+            });
+        }
+        //++
+        // Promise.resolve().then(()=>{
+        //   this.ngControl?.valueChanges?.pipe(takeUntil(this._destroyed$)).subscribe((v)=> {
+        //     this.writeValue(v);
+        //   });
+        // });
+        //--
+    }
+    registerOnChange(fn) {
+        this._onChange = (value) => {
+            if (this._inputValuePredecessor) {
+                value = this._inputValuePredecessor.beforeOnChange(value);
+            }
+            fn(value);
+        };
+    }
+    writeValue(newValue) {
+        const element = this._nativeElement;
+        element.type = this.type;
+        if (this.focused) {
+            if (this._inputValuePredecessor) {
+                newValue = this._inputValuePredecessor.beforeWriteValue(newValue);
+            }
+        }
+        else {
+            if (this._valueFormatter) {
+                const srcValue = newValue;
+                newValue = this._valueFormatter.format(newValue);
+                if (srcValue !== newValue) {
+                    element.type = "text";
+                }
+            }
+            else if (this._inputValuePredecessor) {
+                newValue = this._inputValuePredecessor.beforeWriteValue(newValue);
+            }
+        }
+        this.value = newValue ?? "";
+    }
+    ngAfterViewInit() {
+        super.ngAfterViewInit();
+        if (this._platform.isBrowser) {
+            this._autofillMonitor.monitor(this._elementRef.nativeElement).subscribe(event => {
+                this.autofilled = event.isAutofilled;
+                this.stateChanges.next();
+            });
+        }
+    }
+    ngOnChanges(changes) {
+        super.ngOnChanges(changes);
+        this.stateChanges.next();
+    }
+    ngOnDestroy() {
+        super.ngOnDestroy();
+        if (this._platform.isBrowser) {
+            this._autofillMonitor.stopMonitoring(this._elementRef.nativeElement);
+        }
+        this._cleanupIosKeyup?.();
+        this._cleanupWebkitWheel?.();
+        this._destroyed$.next();
+        this._destroyed$.complete();
+    }
+    ngDoCheck() {
+        if (this.ngControl) {
+            // We need to re-evaluate this on every change detection cycle, because there are some
+            // error triggers that we can't subscribe to (e.g. parent form submissions). This means
+            // that whatever logic is in here has to be super lean, or we risk destroying the performance.
+            this.updateErrorState();
+            // Since the input isn't a `ControlValueAccessor`, we don't have a good way of knowing when
+            // the disabled state has changed. We can't use the `ngControl.statusChanges`, because it
+            // won't fire if the input is disabled with `emitEvents = false`, despite the input becoming
+            // disabled.
+            if (this.ngControl.disabled !== null && this.ngControl.disabled !== this.disabled) {
+                this.disabled = this.ngControl.disabled;
+                this.stateChanges.next();
+            }
+        }
+        // We need to dirty-check the native element's value, because there are some cases where
+        // we won't be notified when it changes (e.g., the consumer isn't using forms, or they're
+        // updating the value using `emitEvent: false`).
+        this._dirtyCheckNativeValue();
+        // We need to dirty-check and set the placeholder attribute ourselves, because whether it's
+        // present or not depends on a query which is prone to "changed after checked" errors.
+        this._dirtyCheckPlaceholder();
+    }
+    /** Refreshes the error state of the input. */
+    updateErrorState() {
+        this._errorStateTracker.updateErrorState();
+    }
+    /** Callback for the cases where the focused state of the input changes. */
+    _focusChanged(isFocused) {
+        if (isFocused === this.focused) {
+            return;
+        }
+        const element = this._elementRef.nativeElement;
+        if (!this._isNativeSelect && isFocused && this.disabled && this.disabledInteractive) {
+            // Focusing an input that has text will cause all the text to be selected. Clear it since
+            // the user won't be able to change it. This is based on the internal implementation.
+            if (element.type === 'number') {
+                // setSelectionRange doesn't work on number inputs, so it needs to be set briefly to text.
+                element.type = 'text';
+                element.setSelectionRange(0, 0);
+                element.type = 'number';
+            }
+            else {
+                element.setSelectionRange(0, 0);
+            }
+        }
+        this.focused = isFocused;
+        if (!isFocused) {
+            this._onTouched();
+        }
+        //++
+        // if (this.ngControl) {
+        //   this.writeValue(this.ngControl.value);
+        // }
+        //--
+        this.stateChanges.next();
+    }
+    _onInput(event) {
+        // This is a noop function and is used to let Angular know whenever the value changes.
+        // Angular will run new change detection each time the `input` event has been dispatched.
+        // It's necessary that Angular recognizes the value change, because when floatingLabel
+        // is set to false and Angular forms aren't used, the placeholder won't recognize the
+        // value changes and will not disappear.
+        // Listening to the input event wouldn't be necessary when the input is using the
+        // FormsModule or ReactiveFormsModule, because Angular forms also listen to input events.
+        if (!this._compositionMode || (this._compositionMode && !this._composing)) {
+            const inputElem = event.target;
+            this._onChange(inputElem.value);
+        }
+    }
+    /** Does some manual dirty checking on the native input `value` property. */
+    _dirtyCheckNativeValue() {
+        const newValue = this._elementRef.nativeElement.value;
+        if (this._previousNativeValue !== newValue) {
+            this._previousNativeValue = newValue;
+            //this.writeValue(newValue);  //++ Don't use!!! `Datepicker` broking!
+            this.stateChanges.next();
+        }
+    }
+    /** Does some manual dirty checking on the native input `placeholder` attribute. */
+    _dirtyCheckPlaceholder() {
+        const placeholder = this._getPlaceholder();
+        if (placeholder !== this._previousPlaceholder) {
+            const element = this._elementRef.nativeElement;
+            this._previousPlaceholder = placeholder;
+            placeholder
+                ? element.setAttribute('placeholder', placeholder)
+                : element.removeAttribute('placeholder');
+        }
+    }
+    /** Gets the current placeholder of the form field. */
+    _getPlaceholder() {
+        if (this._formField && this._formField._isFloatLabel) {
+            // Bootstrap floating labels always NEED a `placeholder` attribute
+            return this.placeholder || " ";
+        }
+        return this.placeholder || null;
+    }
+    /** Make sure the input is a supported type. */
+    _validateType() {
+        if (CUTE_INPUT_INVALID_TYPES.indexOf(this._type) > -1 && isDevMode()) {
+            throw getCuteInputUnsupportedTypeError(this._type);
+        }
+    }
+    /** Checks whether the input type is one of the types that are never empty. */
+    _isNeverEmpty() {
+        return this._neverEmptyInputTypes.indexOf(this._type) > -1;
+    }
+    /** Checks whether the input is invalid based on the native validation. */
+    _isBadInput() {
+        // The `validity` property won't be present on platform-server.
+        let validity = this._elementRef.nativeElement.validity;
+        return validity && validity.badInput;
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    get empty() {
+        return (!this._isNeverEmpty() &&
+            !this._elementRef.nativeElement.value &&
+            !this._isBadInput() &&
+            !this.autofilled);
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    get shouldLabelFloat() {
+        if (this._isNativeSelect) {
+            // For a single-selection `<select>`, the label should float when the selected option has
+            // a non-empty display value. For a `<select multiple>`, the label *always* floats to avoid
+            // overlapping the label with the options.
+            const selectElement = this._elementRef.nativeElement;
+            const firstOption = selectElement.options[0];
+            // On most browsers the `selectedIndex` will always be 0, however on IE and Edge it'll be
+            // -1 if the `value` is set to something, that isn't in the list of options, at a later point.
+            return (this.focused ||
+                selectElement.multiple ||
+                !this.empty ||
+                !!(selectElement.selectedIndex > -1 && firstOption && firstOption.label));
+        }
+        else {
+            return (this.focused && !this.disabled) || !this.empty;
+        }
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    setDescribedByIds(ids) {
+        const element = this._elementRef.nativeElement;
+        const existingDescribedBy = element.getAttribute('aria-describedby');
+        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._formFieldDescribedBy || ids;
+            toAssign = ids.concat(existingDescribedBy.split(' ').filter(id => id && !exclude.includes(id)));
+        }
+        else {
+            toAssign = ids;
+        }
+        this._formFieldDescribedBy = ids;
+        if (toAssign.length) {
+            element.setAttribute('aria-describedby', toAssign.join(' '));
+        }
+        else {
+            element.removeAttribute('aria-describedby');
+        }
+    }
+    /**
+     * Implemented as part of CuteFormFieldControl.
+     */
+    onContainerClick() {
+        // Do not re-focus the input element if the element is already focused. Otherwise, it can happen
+        // that someone clicks on a time input and the cursor resets to the "hours" field while the
+        // "minutes" field was actually clicked. See: https://github.com/angular/components/issues/12849
+        if (!this.focused) {
+            this.focus();
+        }
+    }
+    /** Whether the form control is native select that is displayed inline. */
+    _isInlineSelect() {
+        const element = this._elementRef.nativeElement;
+        return this._isNativeSelect && (element.multiple || element.size > 1);
+    }
+    /**
+     * In blink and webkit browsers, a focused number input does not increment or decrement its value
+     * on mouse wheel interaction unless a wheel event listener is attached to it or one of its ancestors or a passive-wheel listener is attached somewhere in the DOM.
+     * For example, Hitting a tooltip once enables the mouse wheel input for all number inputs as long as it exists.
+     * In order to get reliable and intuitive behavior, we apply a wheel event on our own,
+     * thus making sure increment and decrement by mouse wheel works every time.
+     * @docs-private
+     */
+    _ensureWheelDefaultBehavior() {
+        this._cleanupWebkitWheel?.();
+        if (this._type === 'number' && (this._platform.BLINK || this._platform.WEBKIT)) {
+            this._cleanupWebkitWheel = this._renderer.listen(this._elementRef.nativeElement, 'wheel', this._webkitBlinkWheelListener);
+        }
+    }
+    /** Gets the value to set on the `readonly` attribute. */
+    _getReadonlyAttribute() {
+        if (this._isNativeSelect) {
+            return null;
+        }
+        if (this.readonly || (this.disabled && this.disabledInteractive)) {
+            return 'true';
+        }
+        return null;
+    }
+    /**
+     * This handler is only needed if DefaultValueAccessor is not applied.
+     * @internal
+     */
+    _compositionStart() {
+        this._composing = true;
+    }
+    /**
+     * This handler is only needed if DefaultValueAccessor is not applied.
+     * @internal
+     */
+    _compositionEnd(value) {
+        this._composing = false;
+        this._compositionMode && this._onChange(value);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteInput, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
+    static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "16.1.0", version: "20.3.15", type: CuteInput, isStandalone: true, selector: "\n        input[cuteInput],\n        textarea[cuteInput],\n        select[cuteNativeControl],\n        input[cuteNativeControl],\n        textarea[cuteNativeControl],\n    ", inputs: { placeholder: "placeholder", magnitude: "magnitude", type: "type", errorStateMatcher: "errorStateMatcher", userAriaDescribedBy: ["aria-describedby", "userAriaDescribedBy"], value: "value", readonly: "readonly", disabledInteractive: ["disabledInteractive", "disabledInteractive", booleanAttribute], plainText: ["plainText", "plainText", booleanAttribute] }, host: { listeners: { "focus": "_focusChanged(true)", "blur": "_focusChanged(false)", "input": "_onInput($event)", "compositionstart": "_compositionStart()", "compositionend": "_compositionEnd($any($event.target).value)" }, properties: { "class.form-control-plaintext": "plainText && _getReadonlyAttribute()==\"true\"", "class.form-range": "type==\"range\"", "class.form-control-color": "type==\"color\"", "class.cute-input-server": "_isServer", "class.cute-form-field-textarea-control": "_isInFormField && _isTextarea", "class.cute-form-field-input-control": "_isInFormField", "class.cute-input-disabled-interactive": "disabledInteractive", "class.cute-text-field__input": "_isInFormField", "class.cute-native-select-inline": "_isInlineSelect()", "id": "id", "disabled": "disabled && !disabledInteractive", "required": "required", "attr.name": "name || null", "attr.readonly": "_getReadonlyAttribute()", "attr.aria-disabled": "disabled && disabledInteractive ? \"true\" : null", "attr.aria-invalid": "(empty && required) ? null : errorState", "attr.aria-required": "required", "attr.id": "id", "class": "this.classList" }, classAttribute: "cute-input" }, providers: [
+            { provide: CuteFormFieldControl, useExisting: CuteInput },
+        ], exportAs: ["cuteInput"], usesInheritance: true, usesOnChanges: true, ngImport: i0 }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteInput, decorators: [{
+            type: Directive,
+            args: [{
+                    selector: `
+        input[cuteInput],
+        textarea[cuteInput],
+        select[cuteNativeControl],
+        input[cuteNativeControl],
+        textarea[cuteNativeControl],
+    `,
+                    exportAs: 'cuteInput',
+                    host: {
+                        'class': 'cute-input',
+                        '[class.form-control-plaintext]': 'plainText && _getReadonlyAttribute()=="true"',
+                        '[class.form-range]': 'type=="range"',
+                        '[class.form-control-color]': 'type=="color"',
+                        '[class.cute-input-server]': '_isServer',
+                        '[class.cute-form-field-textarea-control]': '_isInFormField && _isTextarea',
+                        '[class.cute-form-field-input-control]': '_isInFormField',
+                        '[class.cute-input-disabled-interactive]': 'disabledInteractive',
+                        '[class.cute-text-field__input]': '_isInFormField',
+                        '[class.cute-native-select-inline]': '_isInlineSelect()',
+                        // Native input properties that are overwritten by Angular inputs need to be synced with
+                        // the native input element. Otherwise, property bindings for those don't work.
+                        '[id]': 'id',
+                        '[disabled]': 'disabled && !disabledInteractive',
+                        '[required]': 'required',
+                        '[attr.name]': 'name || null',
+                        '[attr.readonly]': '_getReadonlyAttribute()',
+                        '[attr.aria-disabled]': 'disabled && disabledInteractive ? "true" : null',
+                        // Only mark the input as invalid for assistive technology if it has a value since the
+                        // state usually overlaps with `aria-required` when the input is empty and can be redundant.
+                        '[attr.aria-invalid]': '(empty && required) ? null : errorState',
+                        '[attr.aria-required]': 'required',
+                        // Native input properties that are overwritten by Angular inputs need to be synced with
+                        // the native input element. Otherwise, property bindings for those don't work.
+                        '[attr.id]': 'id',
+                        '(focus)': '_focusChanged(true)',
+                        '(blur)': '_focusChanged(false)',
+                        '(input)': '_onInput($event)',
+                        '(compositionstart)': '_compositionStart()',
+                        '(compositionend)': '_compositionEnd($any($event.target).value)',
+                    },
+                    providers: [
+                        { provide: CuteFormFieldControl, useExisting: CuteInput },
+                    ],
+                    standalone: true,
+                }]
+        }], ctorParameters: () => [], propDecorators: { classList: [{
+                type: HostBinding,
+                args: ["class"]
+            }], placeholder: [{
+                type: Input
+            }], magnitude: [{
+                type: Input
+            }], type: [{
+                type: Input
+            }], errorStateMatcher: [{
+                type: Input
+            }], userAriaDescribedBy: [{
+                type: Input,
+                args: ['aria-describedby']
+            }], value: [{
+                type: Input
+            }], readonly: [{
+                type: Input
+            }], disabledInteractive: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }], plainText: [{
+                type: Input,
+                args: [{ transform: booleanAttribute }]
+            }] } });
+
+/**
+ * @license Apache-2.0
+ *
+ * Copyright (c) 2025 CuteWidgets Team. All Rights Reserved.
+ *
+ * You may not use this file except in compliance with the License
+ * that can be found at http://www.apache.org/licenses/LICENSE-2.0
+ */
+const TYPES = [
+    CuteInput,
+    CuteFormFieldModule,
+];
+class CuteInputModule {
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteInputModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
+    static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.15", ngImport: i0, type: CuteInputModule, imports: [CommonModule, CuteInput,
+            CuteFormFieldModule], exports: [CuteInput,
+            CuteFormFieldModule] }); }
+    static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteInputModule, imports: [CommonModule, CuteFormFieldModule, CuteFormFieldModule] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImport: i0, type: CuteInputModule, decorators: [{
+            type: NgModule,
+            args: [{
+                    imports: [CommonModule, ...TYPES],
+                    exports: TYPES,
+                    declarations: [],
+                }]
+        }] });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { CUTE_INPUT_CONFIG, CUTE_INPUT_VALUE_ACCESSOR, CUTE_INPUT_VALUE_FORMATTER, CUTE_INPUT_VALUE_PREDECESSOR, CuteInput, CuteInputModule };
+//# sourceMappingURL=cute-widgets-base-input.mjs.map