@fuse_ui/input 0.0.1

package/README.md

@@ -0,0 +1,7 @@
+# input
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test input` to execute the unit tests.

package/fesm2022/fuse_ui-input.mjs

@@ -0,0 +1,140 @@
+import * as i0 from '@angular/core';
+import { input, model, signal, computed, forwardRef, ChangeDetectionStrategy, Component } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
+
+class FuseInputComponent {
+    // ─── Public @Input() API ────────────────────────────────────────────────────
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : /* istanbul ignore next */ []));
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    size = input('md', ...(ngDevMode ? [{ debugName: "size" }] : /* istanbul ignore next */ []));
+    readonly = input(false, ...(ngDevMode ? [{ debugName: "readonly" }] : /* istanbul ignore next */ []));
+    // ─── Internal signal state ──────────────────────────────────────────────────
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    isFocused = signal(false, ...(ngDevMode ? [{ debugName: "isFocused" }] : /* istanbul ignore next */ []));
+    // ─── CVA callbacks ──────────────────────────────────────────────────────────
+    onChange = () => { };
+    onTouched = () => { };
+    // ─── Derived ────────────────────────────────────────────────────────────────
+    showError = computed(() => this.hasError() || !!this.errorMessage(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    // ─── ControlValueAccessor ────────────────────────────────────────────────────
+    writeValue(v) {
+        this.value.set(v ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    // ─── Event handlers ─────────────────────────────────────────────────────────
+    handleInput(event) {
+        const v = event.target.value;
+        this.value.set(v);
+        this.onChange(v);
+    }
+    handleFocus() {
+        this.isFocused.set(true);
+    }
+    handleBlur() {
+        this.isFocused.set(false);
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseInputComponent, isStandalone: true, selector: "fuse-input", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, readonly: { classPropertyName: "readonly", publicName: "readonly", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FuseInputComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"fuse-input\"\n  [class.fuse-input--sm]=\"size() === 'sm'\"\n  [class.fuse-input--md]=\"size() === 'md'\"\n  [class.fuse-input--lg]=\"size() === 'lg'\"\n  [class.fuse-input--error]=\"showError()\"\n  [class.fuse-input--focused]=\"isFocused()\"\n  [class.fuse-input--disabled]=\"isDisabled()\"\n  [class.fuse-input--readonly]=\"readonly()\">\n\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n    <label class=\"fuse-input__label\" [class.fuse-input__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"fuse-input__wrapper\">\n    <span class=\"fuse-input__prefix\">\n      <ng-content select=\"[fusePrefix]\"></ng-content>\n    </span>\n\n    <input\n      class=\"fuse-input__field\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\" />\n\n    <span class=\"fuse-input__suffix\">\n      <ng-content select=\"[fuseSuffix]\"></ng-content>\n    </span>\n  </div>\n\n  @if (showError() && errorMessage()) {\n    <span class=\"fuse-input__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n\n  @if (helperText() && !showError()) {\n    <span class=\"fuse-input__helper\">\n      {{ helperText() }}\n    </span>\n  }\n</div>\n", styles: [":host{--fuse-input-bg: var(--fuse-color-bg-surface);--fuse-input-border: var(--fuse-color-border-default);--fuse-input-border-focus: var(--fuse-color-border-focus);--fuse-input-border-error: var(--fuse-color-border-error);--fuse-input-radius: var(--fuse-radius-md);--fuse-input-color: var(--fuse-color-text-primary);--fuse-input-placeholder: var(--fuse-color-text-disabled);--fuse-input-font-size: var(--fuse-font-size-md);--fuse-input-py: var(--fuse-spacing-2);--fuse-input-px: var(--fuse-spacing-3);display:block}:host-context(.ios){--fuse-input-radius: var(--fuse-radius-lg)}:host-context(.md){--fuse-input-radius: var(--fuse-radius-sm)}.fuse-input{display:flex;flex-direction:column;gap:var(--fuse-spacing-1)}.fuse-input__label{font-size:var(--fuse-font-size-sm);font-weight:var(--fuse-font-weight-medium);color:var(--fuse-input-color);line-height:1.25}.fuse-input__label--required:after{content:\" *\";color:var(--fuse-color-danger)}.fuse-input__wrapper{display:flex;align-items:center;background:var(--fuse-input-bg);border:1.5px solid var(--fuse-input-border);border-radius:var(--fuse-input-radius);transition:border-color .15s,box-shadow .15s;overflow:hidden}.fuse-input--focused .fuse-input__wrapper{border-color:var(--fuse-input-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-primary) 25%,transparent)}.fuse-input--error .fuse-input__wrapper{border-color:var(--fuse-input-border-error);box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-danger) 25%,transparent)}.fuse-input--disabled .fuse-input__wrapper{opacity:.5;cursor:not-allowed}.fuse-input--readonly .fuse-input__wrapper{background:var(--fuse-color-bg-muted, var(--fuse-color-bg-surface))}.fuse-input__field{flex:1;min-width:0;padding:var(--fuse-input-py) var(--fuse-input-px);font-size:var(--fuse-input-font-size);color:var(--fuse-input-color);background:transparent;border:none;outline:none;font-family:inherit;line-height:1.5}.fuse-input__field::placeholder{color:var(--fuse-input-placeholder)}.fuse-input__field:disabled{cursor:not-allowed}.fuse-input__field[readonly]{cursor:default}.fuse-input__prefix,.fuse-input__suffix{display:contents}.fuse-input__prefix:not(:empty),.fuse-input__suffix:not(:empty){display:flex;align-items:center;flex-shrink:0;padding:0 var(--fuse-spacing-2);color:var(--fuse-color-text-secondary, var(--fuse-input-color))}.fuse-input--sm{--fuse-input-py: var(--fuse-spacing-1);--fuse-input-px: var(--fuse-spacing-2);--fuse-input-font-size: var(--fuse-font-size-sm)}.fuse-input--lg{--fuse-input-py: var(--fuse-spacing-3);--fuse-input-px: var(--fuse-spacing-4);--fuse-input-font-size: var(--fuse-font-size-lg)}.fuse-input__error{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-danger);line-height:1.25}.fuse-input__helper{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-text-secondary, var(--fuse-input-placeholder));line-height:1.25}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseInputComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-input', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FuseInputComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"fuse-input\"\n  [class.fuse-input--sm]=\"size() === 'sm'\"\n  [class.fuse-input--md]=\"size() === 'md'\"\n  [class.fuse-input--lg]=\"size() === 'lg'\"\n  [class.fuse-input--error]=\"showError()\"\n  [class.fuse-input--focused]=\"isFocused()\"\n  [class.fuse-input--disabled]=\"isDisabled()\"\n  [class.fuse-input--readonly]=\"readonly()\">\n\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n    <label class=\"fuse-input__label\" [class.fuse-input__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"fuse-input__wrapper\">\n    <span class=\"fuse-input__prefix\">\n      <ng-content select=\"[fusePrefix]\"></ng-content>\n    </span>\n\n    <input\n      class=\"fuse-input__field\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\" />\n\n    <span class=\"fuse-input__suffix\">\n      <ng-content select=\"[fuseSuffix]\"></ng-content>\n    </span>\n  </div>\n\n  @if (showError() && errorMessage()) {\n    <span class=\"fuse-input__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n\n  @if (helperText() && !showError()) {\n    <span class=\"fuse-input__helper\">\n      {{ helperText() }}\n    </span>\n  }\n</div>\n", styles: [":host{--fuse-input-bg: var(--fuse-color-bg-surface);--fuse-input-border: var(--fuse-color-border-default);--fuse-input-border-focus: var(--fuse-color-border-focus);--fuse-input-border-error: var(--fuse-color-border-error);--fuse-input-radius: var(--fuse-radius-md);--fuse-input-color: var(--fuse-color-text-primary);--fuse-input-placeholder: var(--fuse-color-text-disabled);--fuse-input-font-size: var(--fuse-font-size-md);--fuse-input-py: var(--fuse-spacing-2);--fuse-input-px: var(--fuse-spacing-3);display:block}:host-context(.ios){--fuse-input-radius: var(--fuse-radius-lg)}:host-context(.md){--fuse-input-radius: var(--fuse-radius-sm)}.fuse-input{display:flex;flex-direction:column;gap:var(--fuse-spacing-1)}.fuse-input__label{font-size:var(--fuse-font-size-sm);font-weight:var(--fuse-font-weight-medium);color:var(--fuse-input-color);line-height:1.25}.fuse-input__label--required:after{content:\" *\";color:var(--fuse-color-danger)}.fuse-input__wrapper{display:flex;align-items:center;background:var(--fuse-input-bg);border:1.5px solid var(--fuse-input-border);border-radius:var(--fuse-input-radius);transition:border-color .15s,box-shadow .15s;overflow:hidden}.fuse-input--focused .fuse-input__wrapper{border-color:var(--fuse-input-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-primary) 25%,transparent)}.fuse-input--error .fuse-input__wrapper{border-color:var(--fuse-input-border-error);box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-danger) 25%,transparent)}.fuse-input--disabled .fuse-input__wrapper{opacity:.5;cursor:not-allowed}.fuse-input--readonly .fuse-input__wrapper{background:var(--fuse-color-bg-muted, var(--fuse-color-bg-surface))}.fuse-input__field{flex:1;min-width:0;padding:var(--fuse-input-py) var(--fuse-input-px);font-size:var(--fuse-input-font-size);color:var(--fuse-input-color);background:transparent;border:none;outline:none;font-family:inherit;line-height:1.5}.fuse-input__field::placeholder{color:var(--fuse-input-placeholder)}.fuse-input__field:disabled{cursor:not-allowed}.fuse-input__field[readonly]{cursor:default}.fuse-input__prefix,.fuse-input__suffix{display:contents}.fuse-input__prefix:not(:empty),.fuse-input__suffix:not(:empty){display:flex;align-items:center;flex-shrink:0;padding:0 var(--fuse-spacing-2);color:var(--fuse-color-text-secondary, var(--fuse-input-color))}.fuse-input--sm{--fuse-input-py: var(--fuse-spacing-1);--fuse-input-px: var(--fuse-spacing-2);--fuse-input-font-size: var(--fuse-font-size-sm)}.fuse-input--lg{--fuse-input-py: var(--fuse-spacing-3);--fuse-input-px: var(--fuse-spacing-4);--fuse-input-font-size: var(--fuse-font-size-lg)}.fuse-input__error{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-danger);line-height:1.25}.fuse-input__helper{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-text-secondary, var(--fuse-input-placeholder));line-height:1.25}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], readonly: [{ type: i0.Input, args: [{ isSignal: true, alias: "readonly", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+class FuseTextareaComponent {
+    // ─── Public @Input() API ────────────────────────────────────────────────────
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []));
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : /* istanbul ignore next */ []));
+    helperText = input('', ...(ngDevMode ? [{ debugName: "helperText" }] : /* istanbul ignore next */ []));
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : /* istanbul ignore next */ []));
+    hasError = input(false, ...(ngDevMode ? [{ debugName: "hasError" }] : /* istanbul ignore next */ []));
+    rows = input(3, ...(ngDevMode ? [{ debugName: "rows" }] : /* istanbul ignore next */ []));
+    maxLength = input(null, ...(ngDevMode ? [{ debugName: "maxLength" }] : /* istanbul ignore next */ []));
+    autoResize = input(false, ...(ngDevMode ? [{ debugName: "autoResize" }] : /* istanbul ignore next */ []));
+    // ─── Internal signal state ──────────────────────────────────────────────────
+    value = model('', ...(ngDevMode ? [{ debugName: "value" }] : /* istanbul ignore next */ []));
+    isDisabled = signal(false, ...(ngDevMode ? [{ debugName: "isDisabled" }] : /* istanbul ignore next */ []));
+    // ─── CVA callbacks ──────────────────────────────────────────────────────────
+    onChange = () => { };
+    onTouched = () => { };
+    // ─── Derived ────────────────────────────────────────────────────────────────
+    showError = computed(() => this.hasError() || !!this.errorMessage(), ...(ngDevMode ? [{ debugName: "showError" }] : /* istanbul ignore next */ []));
+    // ─── ControlValueAccessor ────────────────────────────────────────────────────
+    writeValue(v) {
+        this.value.set(v ?? '');
+    }
+    registerOnChange(fn) {
+        this.onChange = fn;
+    }
+    registerOnTouched(fn) {
+        this.onTouched = fn;
+    }
+    setDisabledState(disabled) {
+        this.isDisabled.set(disabled);
+    }
+    // ─── Event handlers ─────────────────────────────────────────────────────────
+    onInput(event) {
+        const el = event.target;
+        this.value.set(el.value);
+        this.onChange(el.value);
+        if (this.autoResize()) {
+            el.style.height = 'auto';
+            el.style.height = el.scrollHeight + 'px';
+        }
+    }
+    onBlur() {
+        this.onTouched();
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.6", type: FuseTextareaComponent, isStandalone: true, selector: "fuse-textarea", inputs: { label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, helperText: { classPropertyName: "helperText", publicName: "helperText", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, hasError: { classPropertyName: "hasError", publicName: "hasError", isSignal: true, isRequired: false, transformFunction: null }, rows: { classPropertyName: "rows", publicName: "rows", isSignal: true, isRequired: false, transformFunction: null }, maxLength: { classPropertyName: "maxLength", publicName: "maxLength", isSignal: true, isRequired: false, transformFunction: null }, autoResize: { classPropertyName: "autoResize", publicName: "autoResize", isSignal: true, isRequired: false, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange" }, providers: [
+            {
+                provide: NG_VALUE_ACCESSOR,
+                useExisting: forwardRef(() => FuseTextareaComponent),
+                multi: true,
+            },
+        ], ngImport: i0, template: "<div\n  class=\"fuse-textarea\"\n  [class.fuse-textarea--error]=\"showError()\"\n  [class.fuse-textarea--disabled]=\"isDisabled()\"\n  [class.fuse-textarea--auto-resize]=\"autoResize()\">\n\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n    <label class=\"fuse-textarea__label\">{{ label() }}</label>\n  }\n\n  <textarea\n    class=\"fuse-textarea__field\"\n    [rows]=\"rows()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.maxlength]=\"maxLength()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\">\n  </textarea>\n\n  @if (maxLength()) {\n    <div class=\"fuse-textarea__count\">\n      <span [class.fuse-textarea__count--over]=\"value().length > maxLength()!\">\n        {{ value().length }}\n      </span>\n      / {{ maxLength() }}\n    </div>\n  }\n\n  @if (showError() && errorMessage()) {\n    <span class=\"fuse-textarea__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n\n  @if (helperText() && !showError()) {\n    <span class=\"fuse-textarea__helper\">\n      {{ helperText() }}\n    </span>\n  }\n</div>\n", styles: [":host{--fuse-textarea-bg: var(--fuse-color-bg-surface);--fuse-textarea-border: var(--fuse-color-border-default);--fuse-textarea-border-focus: var(--fuse-color-border-focus);--fuse-textarea-border-error: var(--fuse-color-border-error);--fuse-textarea-radius: var(--fuse-radius-md);--fuse-textarea-color: var(--fuse-color-text-primary);--fuse-textarea-placeholder: var(--fuse-color-text-disabled);--fuse-textarea-font-size: var(--fuse-font-size-md);--fuse-textarea-py: var(--fuse-spacing-2);--fuse-textarea-px: var(--fuse-spacing-3);display:block}:host-context(.ios){--fuse-textarea-radius: var(--fuse-radius-lg)}:host-context(.md){--fuse-textarea-radius: var(--fuse-radius-sm)}.fuse-textarea{display:flex;flex-direction:column;gap:var(--fuse-spacing-1)}.fuse-textarea__label{font-size:var(--fuse-font-size-sm);font-weight:var(--fuse-font-weight-medium);color:var(--fuse-textarea-color);line-height:1.25}.fuse-textarea__field{width:100%;padding:var(--fuse-textarea-py) var(--fuse-textarea-px);font-size:var(--fuse-textarea-font-size);font-family:inherit;color:var(--fuse-textarea-color);background:var(--fuse-textarea-bg);border:1.5px solid var(--fuse-textarea-border);border-radius:var(--fuse-textarea-radius);resize:vertical;outline:none;line-height:1.5;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.fuse-textarea__field::placeholder{color:var(--fuse-textarea-placeholder)}.fuse-textarea__field:focus{border-color:var(--fuse-textarea-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-primary) 25%,transparent)}.fuse-textarea__field:disabled{opacity:.5;cursor:not-allowed;resize:none}.fuse-textarea--error .fuse-textarea__field{border-color:var(--fuse-textarea-border-error)}.fuse-textarea--error .fuse-textarea__field:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-danger) 25%,transparent)}.fuse-textarea--auto-resize .fuse-textarea__field{resize:none;overflow-y:hidden}.fuse-textarea__count{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-text-secondary, var(--fuse-textarea-placeholder));text-align:right;line-height:1.25}.fuse-textarea__count--over{color:var(--fuse-color-danger);font-weight:var(--fuse-font-weight-medium)}.fuse-textarea__error{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-danger);line-height:1.25}.fuse-textarea__helper{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-text-secondary, var(--fuse-textarea-placeholder));line-height:1.25}\n"], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.6", ngImport: i0, type: FuseTextareaComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'fuse-textarea', standalone: true, imports: [], changeDetection: ChangeDetectionStrategy.OnPush, providers: [
+                        {
+                            provide: NG_VALUE_ACCESSOR,
+                            useExisting: forwardRef(() => FuseTextareaComponent),
+                            multi: true,
+                        },
+                    ], template: "<div\n  class=\"fuse-textarea\"\n  [class.fuse-textarea--error]=\"showError()\"\n  [class.fuse-textarea--disabled]=\"isDisabled()\"\n  [class.fuse-textarea--auto-resize]=\"autoResize()\">\n\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n    <label class=\"fuse-textarea__label\">{{ label() }}</label>\n  }\n\n  <textarea\n    class=\"fuse-textarea__field\"\n    [rows]=\"rows()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.maxlength]=\"maxLength()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\">\n  </textarea>\n\n  @if (maxLength()) {\n    <div class=\"fuse-textarea__count\">\n      <span [class.fuse-textarea__count--over]=\"value().length > maxLength()!\">\n        {{ value().length }}\n      </span>\n      / {{ maxLength() }}\n    </div>\n  }\n\n  @if (showError() && errorMessage()) {\n    <span class=\"fuse-textarea__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n\n  @if (helperText() && !showError()) {\n    <span class=\"fuse-textarea__helper\">\n      {{ helperText() }}\n    </span>\n  }\n</div>\n", styles: [":host{--fuse-textarea-bg: var(--fuse-color-bg-surface);--fuse-textarea-border: var(--fuse-color-border-default);--fuse-textarea-border-focus: var(--fuse-color-border-focus);--fuse-textarea-border-error: var(--fuse-color-border-error);--fuse-textarea-radius: var(--fuse-radius-md);--fuse-textarea-color: var(--fuse-color-text-primary);--fuse-textarea-placeholder: var(--fuse-color-text-disabled);--fuse-textarea-font-size: var(--fuse-font-size-md);--fuse-textarea-py: var(--fuse-spacing-2);--fuse-textarea-px: var(--fuse-spacing-3);display:block}:host-context(.ios){--fuse-textarea-radius: var(--fuse-radius-lg)}:host-context(.md){--fuse-textarea-radius: var(--fuse-radius-sm)}.fuse-textarea{display:flex;flex-direction:column;gap:var(--fuse-spacing-1)}.fuse-textarea__label{font-size:var(--fuse-font-size-sm);font-weight:var(--fuse-font-weight-medium);color:var(--fuse-textarea-color);line-height:1.25}.fuse-textarea__field{width:100%;padding:var(--fuse-textarea-py) var(--fuse-textarea-px);font-size:var(--fuse-textarea-font-size);font-family:inherit;color:var(--fuse-textarea-color);background:var(--fuse-textarea-bg);border:1.5px solid var(--fuse-textarea-border);border-radius:var(--fuse-textarea-radius);resize:vertical;outline:none;line-height:1.5;box-sizing:border-box;transition:border-color .15s,box-shadow .15s}.fuse-textarea__field::placeholder{color:var(--fuse-textarea-placeholder)}.fuse-textarea__field:focus{border-color:var(--fuse-textarea-border-focus);box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-primary) 25%,transparent)}.fuse-textarea__field:disabled{opacity:.5;cursor:not-allowed;resize:none}.fuse-textarea--error .fuse-textarea__field{border-color:var(--fuse-textarea-border-error)}.fuse-textarea--error .fuse-textarea__field:focus{box-shadow:0 0 0 3px color-mix(in srgb,var(--fuse-color-danger) 25%,transparent)}.fuse-textarea--auto-resize .fuse-textarea__field{resize:none;overflow-y:hidden}.fuse-textarea__count{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-text-secondary, var(--fuse-textarea-placeholder));text-align:right;line-height:1.25}.fuse-textarea__count--over{color:var(--fuse-color-danger);font-weight:var(--fuse-font-weight-medium)}.fuse-textarea__error{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-danger);line-height:1.25}.fuse-textarea__helper{font-size:var(--fuse-font-size-sm);color:var(--fuse-color-text-secondary, var(--fuse-textarea-placeholder));line-height:1.25}\n"] }]
+        }], propDecorators: { label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], helperText: [{ type: i0.Input, args: [{ isSignal: true, alias: "helperText", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], hasError: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasError", required: false }] }], rows: [{ type: i0.Input, args: [{ isSignal: true, alias: "rows", required: false }] }], maxLength: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxLength", required: false }] }], autoResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoResize", required: false }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { FuseInputComponent, FuseTextareaComponent };
+//# sourceMappingURL=fuse_ui-input.mjs.map

package/fesm2022/fuse_ui-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"fuse_ui-input.mjs","sources":["../../../../packages/input/src/lib/input/fuse-input.component.ts","../../../../packages/input/src/lib/input/fuse-input.component.html","../../../../packages/input/src/lib/textarea/fuse-textarea.component.ts","../../../../packages/input/src/lib/textarea/fuse-textarea.component.html","../../../../packages/input/src/fuse_ui-input.ts"],"sourcesContent":["import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n} from '@angular/forms';\n\n@Component({\n  selector: 'fuse-input',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-input.component.html',\n  styleUrl: './fuse-input.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => FuseInputComponent),\n      multi: true,\n    },\n  ],\n})\nexport class FuseInputComponent implements ControlValueAccessor {\n  // ─── Public @Input() API ────────────────────────────────────────────────────\n\n  readonly label = input('');\n  readonly type = input('text');\n  readonly placeholder = input('');\n  readonly required = input(false);\n  readonly helperText = input('');\n  readonly errorMessage = input('');\n  readonly hasError = input(false);\n  readonly size = input<'sm' | 'md' | 'lg'>('md');\n  readonly readonly = input(false);\n\n  // ─── Internal signal state ──────────────────────────────────────────────────\n\n  readonly value = model<string>('');\n  protected readonly isDisabled = signal(false);\n  protected readonly isFocused = signal(false);\n\n  // ─── CVA callbacks ──────────────────────────────────────────────────────────\n\n  private onChange: (v: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  // ─── Derived ────────────────────────────────────────────────────────────────\n\n  protected readonly showError = computed(() =>\n    this.hasError() || !!this.errorMessage()\n  );\n\n  // ─── ControlValueAccessor ────────────────────────────────────────────────────\n\n  writeValue(v: string): void {\n    this.value.set(v ?? '');\n  }\n\n  registerOnChange(fn: (v: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(disabled: boolean): void {\n    this.isDisabled.set(disabled);\n  }\n\n  // ─── Event handlers ─────────────────────────────────────────────────────────\n\n  handleInput(event: Event): void {\n    const v = (event.target as HTMLInputElement).value;\n    this.value.set(v);\n    this.onChange(v);\n  }\n\n  handleFocus(): void {\n    this.isFocused.set(true);\n  }\n\n  handleBlur(): void {\n    this.isFocused.set(false);\n    this.onTouched();\n  }\n}\n","<div\n  class=\"fuse-input\"\n  [class.fuse-input--sm]=\"size() === 'sm'\"\n  [class.fuse-input--md]=\"size() === 'md'\"\n  [class.fuse-input--lg]=\"size() === 'lg'\"\n  [class.fuse-input--error]=\"showError()\"\n  [class.fuse-input--focused]=\"isFocused()\"\n  [class.fuse-input--disabled]=\"isDisabled()\"\n  [class.fuse-input--readonly]=\"readonly()\">\n\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n    <label class=\"fuse-input__label\" [class.fuse-input__label--required]=\"required()\">\n      {{ label() }}\n    </label>\n  }\n\n  <div class=\"fuse-input__wrapper\">\n    <span class=\"fuse-input__prefix\">\n      <ng-content select=\"[fusePrefix]\"></ng-content>\n    </span>\n\n    <input\n      class=\"fuse-input__field\"\n      [type]=\"type()\"\n      [placeholder]=\"placeholder()\"\n      [required]=\"required()\"\n      [readonly]=\"readonly()\"\n      [disabled]=\"isDisabled()\"\n      [value]=\"value()\"\n      (input)=\"handleInput($event)\"\n      (focus)=\"handleFocus()\"\n      (blur)=\"handleBlur()\" />\n\n    <span class=\"fuse-input__suffix\">\n      <ng-content select=\"[fuseSuffix]\"></ng-content>\n    </span>\n  </div>\n\n  @if (showError() && errorMessage()) {\n    <span class=\"fuse-input__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n\n  @if (helperText() && !showError()) {\n    <span class=\"fuse-input__helper\">\n      {{ helperText() }}\n    </span>\n  }\n</div>\n","import {\n  ChangeDetectionStrategy,\n  Component,\n  computed,\n  forwardRef,\n  input,\n  model,\n  signal,\n} from '@angular/core';\nimport {\n  ControlValueAccessor,\n  NG_VALUE_ACCESSOR,\n} from '@angular/forms';\n\n@Component({\n  selector: 'fuse-textarea',\n  standalone: true,\n  imports: [],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  templateUrl: './fuse-textarea.component.html',\n  styleUrl: './fuse-textarea.component.scss',\n  providers: [\n    {\n      provide: NG_VALUE_ACCESSOR,\n      useExisting: forwardRef(() => FuseTextareaComponent),\n      multi: true,\n    },\n  ],\n})\nexport class FuseTextareaComponent implements ControlValueAccessor {\n  // ─── Public @Input() API ────────────────────────────────────────────────────\n\n  readonly label = input('');\n  readonly placeholder = input('');\n  readonly helperText = input('');\n  readonly errorMessage = input('');\n  readonly hasError = input(false);\n  readonly rows = input(3);\n  readonly maxLength = input<number | null>(null);\n  readonly autoResize = input(false);\n\n  // ─── Internal signal state ──────────────────────────────────────────────────\n\n  readonly value = model<string>('');\n  protected readonly isDisabled = signal(false);\n\n  // ─── CVA callbacks ──────────────────────────────────────────────────────────\n\n  private onChange: (v: string) => void = () => {};\n  private onTouched: () => void = () => {};\n\n  // ─── Derived ────────────────────────────────────────────────────────────────\n\n  protected readonly showError = computed(() =>\n    this.hasError() || !!this.errorMessage()\n  );\n\n  // ─── ControlValueAccessor ────────────────────────────────────────────────────\n\n  writeValue(v: string): void {\n    this.value.set(v ?? '');\n  }\n\n  registerOnChange(fn: (v: string) => void): void {\n    this.onChange = fn;\n  }\n\n  registerOnTouched(fn: () => void): void {\n    this.onTouched = fn;\n  }\n\n  setDisabledState(disabled: boolean): void {\n    this.isDisabled.set(disabled);\n  }\n\n  // ─── Event handlers ─────────────────────────────────────────────────────────\n\n  protected onInput(event: Event): void {\n    const el = event.target as HTMLTextAreaElement;\n    this.value.set(el.value);\n    this.onChange(el.value);\n    if (this.autoResize()) {\n      el.style.height = 'auto';\n      el.style.height = el.scrollHeight + 'px';\n    }\n  }\n\n  protected onBlur(): void {\n    this.onTouched();\n  }\n}\n","<div\n  class=\"fuse-textarea\"\n  [class.fuse-textarea--error]=\"showError()\"\n  [class.fuse-textarea--disabled]=\"isDisabled()\"\n  [class.fuse-textarea--auto-resize]=\"autoResize()\">\n\n  @if (label()) {\n    <!-- eslint-disable-next-line @angular-eslint/template/label-has-associated-control -->\n    <label class=\"fuse-textarea__label\">{{ label() }}</label>\n  }\n\n  <textarea\n    class=\"fuse-textarea__field\"\n    [rows]=\"rows()\"\n    [placeholder]=\"placeholder()\"\n    [disabled]=\"isDisabled()\"\n    [attr.maxlength]=\"maxLength()\"\n    [value]=\"value()\"\n    (input)=\"onInput($event)\"\n    (blur)=\"onBlur()\">\n  </textarea>\n\n  @if (maxLength()) {\n    <div class=\"fuse-textarea__count\">\n      <span [class.fuse-textarea__count--over]=\"value().length > maxLength()!\">\n        {{ value().length }}\n      </span>\n      / {{ maxLength() }}\n    </div>\n  }\n\n  @if (showError() && errorMessage()) {\n    <span class=\"fuse-textarea__error\" role=\"alert\">\n      {{ errorMessage() }}\n    </span>\n  }\n\n  @if (helperText() && !showError()) {\n    <span class=\"fuse-textarea__helper\">\n      {{ helperText() }}\n    </span>\n  }\n</div>\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './index';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "@fuse_ui/input",
+  "version": "0.0.1",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "fuse-ui",
+    "angular",
+    "ionic",
+    "ionic8",
+    "angular18",
+    "angular19",
+    "angular20",
+    "angular21",
+    "ui-components",
+    "design-system",
+    "css-variables",
+    "signals",
+    "standalone",
+    "multi-theme",
+    "dark-mode",
+    "fluid-typography",
+    "animated"
+  ],
+  "peerDependencies": {
+    "@angular/core": ">=18.0.0",
+    "@angular/common": ">=18.0.0",
+    "rxjs": ">=7.4.0",
+    "@angular/forms": "21.1.1"
+  },
+  "peerDependenciesMeta": {
+    "@ionic/angular": {
+      "optional": true
+    }
+  },
+  "sideEffects": [
+    "*.css",
+    "**/*.scss"
+  ],
+  "engines": {
+    "node": ">=20.0.0"
+  },
+  "module": "fesm2022/fuse_ui-input.mjs",
+  "typings": "types/fuse_ui-input.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/fuse_ui-input.d.ts",
+      "default": "./fesm2022/fuse_ui-input.mjs"
+    }
+  },
+  "type": "module",
+  "dependencies": {
+    "tslib": "^2.3.0"
+  }
+}

package/types/fuse_ui-input.d.ts

@@ -0,0 +1,55 @@
+import * as _angular_core from '@angular/core';
+import { ControlValueAccessor } from '@angular/forms';
+
+declare class FuseInputComponent implements ControlValueAccessor {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly type: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly required: _angular_core.InputSignal<boolean>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly size: _angular_core.InputSignal<"sm" | "md" | "lg">;
+    readonly readonly: _angular_core.InputSignal<boolean>;
+    readonly value: _angular_core.ModelSignal<string>;
+    protected readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    protected readonly isFocused: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    protected readonly showError: _angular_core.Signal<boolean>;
+    writeValue(v: string): void;
+    registerOnChange(fn: (v: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    handleInput(event: Event): void;
+    handleFocus(): void;
+    handleBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseInputComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseInputComponent, "fuse-input", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "type": { "alias": "type"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "required": { "alias": "required"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "size": { "alias": "size"; "required": false; "isSignal": true; }; "readonly": { "alias": "readonly"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, ["[fusePrefix]", "[fuseSuffix]"], true, never>;
+}
+
+declare class FuseTextareaComponent implements ControlValueAccessor {
+    readonly label: _angular_core.InputSignal<string>;
+    readonly placeholder: _angular_core.InputSignal<string>;
+    readonly helperText: _angular_core.InputSignal<string>;
+    readonly errorMessage: _angular_core.InputSignal<string>;
+    readonly hasError: _angular_core.InputSignal<boolean>;
+    readonly rows: _angular_core.InputSignal<number>;
+    readonly maxLength: _angular_core.InputSignal<number | null>;
+    readonly autoResize: _angular_core.InputSignal<boolean>;
+    readonly value: _angular_core.ModelSignal<string>;
+    protected readonly isDisabled: _angular_core.WritableSignal<boolean>;
+    private onChange;
+    private onTouched;
+    protected readonly showError: _angular_core.Signal<boolean>;
+    writeValue(v: string): void;
+    registerOnChange(fn: (v: string) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(disabled: boolean): void;
+    protected onInput(event: Event): void;
+    protected onBlur(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<FuseTextareaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<FuseTextareaComponent, "fuse-textarea", never, { "label": { "alias": "label"; "required": false; "isSignal": true; }; "placeholder": { "alias": "placeholder"; "required": false; "isSignal": true; }; "helperText": { "alias": "helperText"; "required": false; "isSignal": true; }; "errorMessage": { "alias": "errorMessage"; "required": false; "isSignal": true; }; "hasError": { "alias": "hasError"; "required": false; "isSignal": true; }; "rows": { "alias": "rows"; "required": false; "isSignal": true; }; "maxLength": { "alias": "maxLength"; "required": false; "isSignal": true; }; "autoResize": { "alias": "autoResize"; "required": false; "isSignal": true; }; "value": { "alias": "value"; "required": false; "isSignal": true; }; }, { "value": "valueChange"; }, never, never, true, never>;
+}
+
+export { FuseInputComponent, FuseTextareaComponent };