@3ddv/software-division-components 1.5.0 → 2.0.0

package/dist/fesm2022/3ddv-software-division-components-backoffice-input.mjs

@@ -0,0 +1,411 @@
+import * as i0 from '@angular/core';
+import { input, computed, signal, output, effect, Component } from '@angular/core';
+import { FormSubmittedEvent, ReactiveFormsModule } from '@angular/forms';
+import { Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
+
+/**
+ * A customizable input component built on the native input element.
+ *
+ * This component supports various configurations and exposes all native input functionality.
+ * All HTML input attributes and events are automatically forwarded to the inner input element.
+ *
+ * @since 1.0.0-alpha.1
+ */
+class InputComponent {
+    allowedVariants = [
+        'variant-primary',
+        'variant-secondary',
+        'variant-alternative',
+        'variant-success',
+        'variant-warning',
+        'variant-danger',
+    ];
+    allowedSizes = ['size-sm', 'size-md', 'size-lg', 'size-xl'];
+    allowedRadius = [
+        'radius-default',
+        'radius-sm',
+        'radius-md',
+        'radius-lg',
+        'radius-xl',
+        'radius-2xl',
+        'radius-full',
+    ];
+    /**
+     * The current theme applied to the component.
+     */
+    theme = input('theme-sdc', ...(ngDevMode ? [{ debugName: "theme" }] : []));
+    /**
+     * Predefined styles to apply to the component.
+     * Can be a single class or multiple classes from different categories.
+     */
+    styleClass = input([], ...(ngDevMode ? [{ debugName: "styleClass" }] : []));
+    // Computed signal that validates and filters the styleClass input
+    _validatedStyleClass = computed(() => {
+        const value = this.styleClass();
+        if (!Array.isArray(value)) {
+            return [];
+        }
+        const validValues = value.filter(style => {
+            return (this.allowedVariants.includes(style) ||
+                this.allowedSizes.includes(style) ||
+                this.allowedRadius.includes(style));
+        });
+        const invalidValues = value.filter(style => {
+            return (!this.allowedVariants.includes(style) &&
+                !this.allowedSizes.includes(style) &&
+                !this.allowedRadius.includes(style));
+        });
+        if (invalidValues.length > 0) {
+            throw new Error(`InputComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[
+                ...this.allowedVariants,
+                ...this.allowedSizes,
+                ...this.allowedRadius,
+            ].join(', ')}`);
+        }
+        return validValues;
+    }, ...(ngDevMode ? [{ debugName: "_validatedStyleClass" }] : []));
+    /**
+     * Additional CSS classes to apply to the component.
+     */
+    className = input('', ...(ngDevMode ? [{ debugName: "className" }] : []));
+    /**
+     * The label text to display above or to the left of the input.
+     * Only visible when a value is provided.
+     */
+    label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
+    /**
+     * The position of the label relative to the input.
+     * 'top' places the label above the input, 'left' places it to the left.
+     */
+    labelPosition = input('top', ...(ngDevMode ? [{ debugName: "labelPosition" }] : []));
+    /**
+     * Whether the component is disabled.
+     */
+    disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
+    /**
+     * The type of the input element.
+     */
+    type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
+    /**
+     * The placeholder text for the input.
+     */
+    placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
+    /**
+     * The hint text for the input.
+     */
+    hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
+    /**
+     * The name of the form control.
+     */
+    name = input('', ...(ngDevMode ? [{ debugName: "name" }] : []));
+    /**
+     * Whether the input is a textarea.
+     */
+    isTextarea = input(false, ...(ngDevMode ? [{ debugName: "isTextarea" }] : []));
+    /**
+     * The number of rows for the textarea.
+     */
+    textareaRows = input(1, ...(ngDevMode ? [{ debugName: "textareaRows" }] : []));
+    /**
+     * The number of columns for the textarea.
+     */
+    textareaCols = input(1, ...(ngDevMode ? [{ debugName: "textareaCols" }] : []));
+    /**
+     * Whether the textarea is resizable.
+     */
+    textareaResize = input('vertical', ...(ngDevMode ? [{ debugName: "textareaResize" }] : []));
+    /**
+     * Custom error message to override the validator's error message.
+     */
+    errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
+    /**
+     * Controls when errors are displayed.
+     * - 'after-submit': Show errors only after form submission (default)
+     * - 'always': Show errors immediately when validation fails
+     */
+    errorDisplayMode = input('after-submit', ...(ngDevMode ? [{ debugName: "errorDisplayMode" }] : []));
+    /**
+     * The FormControl instance to bind to this input.
+     * This allows the component to access form state without circular dependencies.
+     */
+    control = input(null, ...(ngDevMode ? [{ debugName: "control" }] : []));
+    /**
+     * The state of the form control.
+     */
+    controlState = signal({ invalid: false, touched: false, dirty: false, errors: null, value: '', isFormSubmitted: false }, ...(ngDevMode ? [{ debugName: "controlState" }] : []));
+    /**
+     * Event emitted when the component receives focus.
+     */
+    onFocus = output();
+    /**
+     * Event emitted when the component loses focus.
+     */
+    onBlur = output();
+    /**
+     * Event emitted when the input value changes.
+     */
+    onInput = output();
+    /**
+     * Computed class string that combines theme and user classes.
+     */
+    computedClass = computed(() => {
+        const themeClass = this.theme();
+        const styleClass = this._validatedStyleClass();
+        const className = this.className();
+        const errorClass = this.showError() ? 'has-error' : '';
+        const textareaResizeClass = this.isTextarea() ? `resize-${this.textareaResize()}` : '';
+        return ['sdc-input', themeClass, ...styleClass, className, errorClass, textareaResizeClass]
+            .filter(Boolean)
+            .join(' ');
+    }, ...(ngDevMode ? [{ debugName: "computedClass" }] : []));
+    /**
+     * Computed class string for the label positioning.
+     */
+    labelClass = computed(() => {
+        const position = this.labelPosition();
+        return position === 'left' ? 'sdc-input-label left' : 'sdc-input-label top';
+    }, ...(ngDevMode ? [{ debugName: "labelClass" }] : []));
+    /**
+     * Debounce time in milliseconds. When 0, no debounce is applied.
+     * Default value is 0 (no debounce).
+     */
+    debounce = input(0, ...(ngDevMode ? [{ debugName: "debounce" }] : []));
+    /**
+     * Event emitted to notify the debounce state.
+     * Returns true while the component is debounced, false when not.
+     */
+    isDebounced = output();
+    /**
+     * Signal to track the current debounce state of the component.
+     */
+    debounceState = signal(false, ...(ngDevMode ? [{ debugName: "debounceState" }] : []));
+    /**
+     * Subject for handling input events with debounce.
+     */
+    inputSubject = new Subject();
+    /**
+     * Subject for cleanup.
+     */
+    destroy$ = new Subject();
+    /**
+     * Current subscription for debounce.
+     */
+    debounceSubscription = null;
+    /**
+     * Current debounce timeout.
+     */
+    debounceTimeout = null;
+    /**
+     * Component subscriptions.
+     */
+    subscriptions = [];
+    /**
+     * Computed signal to determine if the label should be visible.
+     */
+    showLabel = computed(() => {
+        return this.label() && this.label().trim().length > 0;
+    }, ...(ngDevMode ? [{ debugName: "showLabel" }] : []));
+    /**
+     * Computed signal to get the current error message.
+     */
+    currentErrorMessage = computed(() => {
+        const customMessage = this.errorMessage();
+        const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;
+        if (hasErrors && customMessage && customMessage.trim().length > 0) {
+            return customMessage;
+        }
+        // If no custom message, try to get validation error from the form control state
+        if (hasErrors) {
+            const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];
+            const firstErrorValue = this.controlState()?.errors?.[firstErrorKey];
+            return this.getValidatorErrorMessage(firstErrorKey, firstErrorValue);
+        }
+        return '';
+    }, ...(ngDevMode ? [{ debugName: "currentErrorMessage" }] : []));
+    /**
+     * Computed signal to determine if there's an error to display.
+     */
+    showError = computed(() => {
+        const errorMode = this.errorDisplayMode();
+        // For validation errors, respect the error display mode
+        if (this.controlState()?.invalid) {
+            if (errorMode === 'always') {
+                // Show errors when component is touched and invalid
+                return this.controlState()?.touched || this.controlState()?.dirty || this.controlState()?.isFormSubmitted;
+            }
+            else if (errorMode === 'after-submit') {
+                // Show errors when form is submitted, regardless of touch/focus state
+                return this.controlState()?.isFormSubmitted;
+            }
+        }
+        return false;
+    }, ...(ngDevMode ? [{ debugName: "showError" }] : []));
+    /**
+     * References to effects for proper cleanup
+     */
+    effects = [];
+    constructor() {
+        // Set up reactive debounce handling within injection context
+        const debounceEffect = effect(() => {
+            const debounceTime = this.debounce();
+            this.setupDebounce(debounceTime);
+        }, ...(ngDevMode ? [{ debugName: "debounceEffect" }] : []));
+        this.effects.push(debounceEffect);
+    }
+    ngOnInit() {
+        // Validate the name input
+        if ((this.control() || this.showLabel()) && !this.name()) {
+            throw new Error('InputComponent: name is required when control or label inputs are present');
+        }
+        const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {
+            // We do not reset this signal because it is used to show the errors
+            // When a form is submitted at least once, we want to show the errors
+            if (event instanceof FormSubmittedEvent) {
+                this.controlState.set({ ...this.controlState(), isFormSubmitted: true });
+                // We add this because the statusChanges event is not triggered when the form is submitted
+                if (event.source.status === 'INVALID') {
+                    this.controlState.set({ ...this.controlState(), invalid: true });
+                }
+            }
+            this.updateErrors();
+        });
+        const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {
+            if (status === 'INVALID') {
+                this.controlState.set({ ...this.controlState(), invalid: true });
+            }
+            this.updateErrors();
+        });
+        this.subscriptions.push(formEventsSubscription, statusChangesSubscription);
+    }
+    ngOnDestroy() {
+        this.destroy$.next();
+        this.destroy$.complete();
+        this.inputSubject.complete();
+        if (this.debounceSubscription) {
+            this.debounceSubscription.unsubscribe();
+        }
+        if (this.debounceTimeout) {
+            clearTimeout(this.debounceTimeout);
+        }
+        this.effects.forEach(effect => effect.destroy());
+        this.subscriptions.forEach(subscription => subscription?.unsubscribe());
+    }
+    updateErrors() {
+        // We override the errors except the internal_* errors
+        const currentInternalErrors = Object.entries(this.controlState()?.errors || {})?.filter(([key]) => key.startsWith('internal_'));
+        const controlStateHasInternalErrors = currentInternalErrors.length > 0;
+        const newErrors = this.control()?.errors || controlStateHasInternalErrors
+            ? Object.assign(Object.fromEntries(currentInternalErrors), this.control()?.errors ?? {})
+            : null;
+        this.controlState.set({ ...this.controlState(), errors: newErrors });
+    }
+    /**
+     * Sets up the debounce functionality for input events.
+     */
+    setupDebounce(debounceTime) {
+        // Clear existing subscription
+        if (this.debounceSubscription) {
+            this.debounceSubscription.unsubscribe();
+        }
+        // Clear existing timeout
+        if (this.debounceTimeout) {
+            clearTimeout(this.debounceTimeout);
+            this.debounceTimeout = null;
+        }
+        // Set up new subscription
+        this.debounceSubscription = this.inputSubject.pipe(takeUntil(this.destroy$)).subscribe((event) => {
+            // Clear existing timeout
+            if (this.debounceTimeout) {
+                clearTimeout(this.debounceTimeout);
+            }
+            // Set new timeout
+            this.debounceTimeout = setTimeout(() => {
+                this.debounceState.set(false);
+                this.isDebounced.emit(false);
+                this.onInput.emit(event);
+                this.debounceTimeout = null;
+            }, debounceTime);
+        });
+    }
+    /**
+     * Handles input events with debounce functionality.
+     */
+    handleInput(event) {
+        const target = event.target;
+        const newValue = target.value;
+        // Only allow numbers for input with type number
+        if (this.type() === 'number') {
+            const isValidNumber = /^[0-9]+$/.test(newValue);
+            this.controlState.set({ ...this.controlState(), errors: isValidNumber ? null : { internal_number: true } });
+        }
+        // Update the form control value
+        this.controlState.set({ ...this.controlState(), value: newValue, dirty: true });
+        this.control()?.setValue(newValue);
+        const debounceTime = this.debounce();
+        if (debounceTime > 0) {
+            // Apply debounce
+            this.debounceState.set(true);
+            this.isDebounced.emit(true);
+            this.inputSubject.next({ ...event, target: { ...event.target, value: newValue } });
+        }
+        else {
+            // No debounce, emit immediately
+            this.onInput.emit({ ...event, target: { ...event.target, value: newValue } });
+        }
+    }
+    /**
+     * Handles focus events and emits the onFocus output.
+     */
+    handleFocus(event) {
+        this.controlState.set({ ...this.controlState(), touched: true });
+        this.onFocus.emit(event);
+    }
+    /**
+     * Handles blur events and emits the onBlur output.
+     */
+    handleBlur(event) {
+        this.controlState.set({ ...this.controlState(), touched: true });
+        this.onBlur.emit(event);
+    }
+    /**
+     * Gets the error message for a specific validator error.
+     */
+    getValidatorErrorMessage(errorKey, errorValue) {
+        switch (errorKey) {
+            case 'required':
+                return 'This field is required.';
+            case 'internal_number':
+                return 'Please enter a valid number.';
+            case 'email':
+                return 'Please enter a valid email address.';
+            case 'minlength':
+                return `Minimum length is ${errorValue.requiredLength} characters.`;
+            case 'maxlength':
+                return `Maximum length is ${errorValue.requiredLength} characters.`;
+            case 'min':
+                return `Minimum value is ${errorValue.min}.`;
+            case 'max':
+                return `Maximum value is ${errorValue.max}.`;
+            case 'pattern':
+                return 'Please enter a valid value.';
+            default:
+                return 'Please enter a valid value.';
+        }
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.4", type: InputComponent, isStandalone: true, selector: "sdc-input", inputs: { theme: { classPropertyName: "theme", publicName: "theme", isSignal: true, isRequired: false, transformFunction: null }, styleClass: { classPropertyName: "styleClass", publicName: "styleClass", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, labelPosition: { classPropertyName: "labelPosition", publicName: "labelPosition", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", 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 }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, name: { classPropertyName: "name", publicName: "name", isSignal: true, isRequired: false, transformFunction: null }, isTextarea: { classPropertyName: "isTextarea", publicName: "isTextarea", isSignal: true, isRequired: false, transformFunction: null }, textareaRows: { classPropertyName: "textareaRows", publicName: "textareaRows", isSignal: true, isRequired: false, transformFunction: null }, textareaCols: { classPropertyName: "textareaCols", publicName: "textareaCols", isSignal: true, isRequired: false, transformFunction: null }, textareaResize: { classPropertyName: "textareaResize", publicName: "textareaResize", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, errorDisplayMode: { classPropertyName: "errorDisplayMode", publicName: "errorDisplayMode", isSignal: true, isRequired: false, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: false, transformFunction: null }, debounce: { classPropertyName: "debounce", publicName: "debounce", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { onFocus: "onFocus", onBlur: "onBlur", onInput: "onInput", isDebounced: "isDebounced" }, ngImport: i0, template: "<div [class]=\"computedClass()\">\n  <div class=\"component-container\">\n    <!-- Label positioned above or to the left -->\n    @if (showLabel()) {\n      <label [class]=\"labelClass()\" [for]=\"name()\">\n        {{ label() }}\n      </label>\n    }\n\n    <div class=\"input-container\">\n      @if (isTextarea()) {\n        <textarea\n          [rows]=\"textareaRows()\"\n          [cols]=\"textareaCols()\"\n          [id]=\"name()\"\n          [name]=\"name()\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"handleInput($event)\"\n          class=\"sdc-input-field\"></textarea>\n      } @else {\n        <input\n          [id]=\"name()\"\n          [name]=\"name()\"\n          [type]=\"type()\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"handleInput($event)\"\n          class=\"sdc-input-field\" />\n      }\n    </div>\n  </div>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-input-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n\n  <!-- Hint message -->\n  @if (hint() && hint().trim().length > 0 && !showError()) {\n    <div class=\"sdc-input-hint\">\n      {{ hint() }}\n    </div>\n  }\n</div>\n", styles: [".sdc-input{--sdc-input-label-color: var(--color-neutral-700);--sdc-input-label-size: var(--text-base);--sdc-input-label-weight: var(--font-semibold);--sdc-input-label-gap: var(--space-6);--sdc-input-field-background: var(--color-pure-white);--sdc-input-field-border-color: var(--color-neutral-300);--sdc-input-field-border-width: var(--border-default);--sdc-input-field-border-radius: var(--radius-full);--sdc-input-field-text-color: var(--color-neutral-900);--sdc-input-field-text-size: var(--text-base);--sdc-input-field-placeholder-size: var(--text-sm);--sdc-input-field-placeholder-color: var(--color-neutral-300);--sdc-input-field-placeholder-weight: var(--font-medium);--sdc-input-field-vertical-padding: var(--space-2);--sdc-input-field-horizontal-padding: var(--space-3);--sdc-input-field-height: auto;--sdc-input-field-width: 100%;--sdc-input-focus-ring-width: var(--border-2);--sdc-input-focus-ring-color: var(--color-primary);--sdc-input-focus-ring-offset: var(--border-2);--sdc-input-error-color: var(--color-danger);--sdc-input-error-text-size: var(--text-xs);--sdc-input-hint-color: var(--color-neutral-500);--sdc-input-hint-size: var(--text-xs)}.sdc-input-label{font-weight:var(--sdc-input-label-weight);color:hsl(var(--sdc-input-label-color));font-size:var(--sdc-input-label-size);padding-left:var(--sdc-input-field-horizontal-padding);line-height:1.25rem;display:block}.component-container{display:flex;flex-direction:column;gap:var(--sdc-input-label-gap);width:var(--sdc-input-field-width)}.component-container:has(.sdc-input-label.left){padding-left:0;flex-direction:row;align-items:center}.sdc-input-field{width:var(--sdc-input-field-width);height:var(--sdc-input-field-height);padding:var(--sdc-input-field-vertical-padding) var(--sdc-input-field-horizontal-padding);background:hsl(var(--sdc-input-field-background));border:var(--sdc-input-field-border-width) solid hsl(var(--sdc-input-field-border-color));border-radius:var(--sdc-input-field-border-radius);color:hsl(var(--sdc-input-field-text-color));font-size:var(--sdc-input-field-text-size);transition:all .2s ease-in-out;outline:none}textarea.sdc-input-field{--sdc-input-field-border-radius: var(--radius-xl)}.resize-none textarea.sdc-input-field{resize:none}.resize-both textarea.sdc-input-field{resize:both}.resize-horizontal textarea.sdc-input-field{resize:horizontal}.resize-vertical textarea.sdc-input-field{resize:vertical}.sdc-input-field:focus{border-color:hsl(var(--sdc-input-field-border-color));box-shadow:0 0 0 3px hsl(var(--color-primary) / .1)}.sdc-input-field:disabled{opacity:.6;cursor:not-allowed;background:hsl(var(--color-neutral-100))}.sdc-input-error{color:hsl(var(--sdc-input-error-color));font-size:var(--sdc-input-error-text-size);line-height:1rem;padding:var(--sdc-input-field-vertical-padding) var(--sdc-input-field-horizontal-padding)}.has-error .sdc-input-field{border-color:hsl(var(--sdc-input-error-color))}.size-sm .sdc-input-field{--sdc-input-field-height: var(--space-8);--sdc-input-field-vertical-padding: var(--space-2);--sdc-input-field-horizontal-padding: var(--space-3);--sdc-input-field-text-size: var(--text-sm);--sdc-input-field-placeholder-size: var(--text-xs)}.size-md .sdc-input-field{--sdc-input-field-height: var(--space-10);--sdc-input-field-vertical-padding: var(--space-3);--sdc-input-field-horizontal-padding: var(--space-4);--sdc-input-field-text-size: var(--text-base);--sdc-input-field-placeholder-size: var(--text-sm)}.size-lg .sdc-input-field{--sdc-input-field-height: var(--space-11);--sdc-input-field-vertical-padding: var(--space-4);--sdc-input-field-horizontal-padding: var(--space-5);--sdc-input-field-text-size: var(--text-lg);--sdc-input-field-placeholder-size: var(--text-base)}.size-xl .sdc-input-field{--sdc-input-field-height: var(--space-12);--sdc-input-field-vertical-padding: var(--space-5);--sdc-input-field-horizontal-padding: var(--space-6);--sdc-input-field-text-size: var(--text-xl);--sdc-input-field-placeholder-size: var(--text-lg)}.radius-sm .sdc-input-field{--sdc-input-field-border-radius: var(--radius-sm)}.radius-default .sdc-input-field{--sdc-input-field-border-radius: var(--radius-default)}.radius-md .sdc-input-field{--sdc-input-field-border-radius: var(--radius-md)}.radius-lg .sdc-input-field{--sdc-input-field-border-radius: var(--radius-lg)}.radius-xl .sdc-input-field{--sdc-input-field-border-radius: var(--radius-xl)}.radius-2xl .sdc-input-field{--sdc-input-field-border-radius: var(--radius-2xl)}.radius-full .sdc-input-field{--sdc-input-field-border-radius: var(--radius-full)}.border-0 .sdc-input-field{--sdc-input-field-border-width: var(--border-0)}.border-default .sdc-input-field{--sdc-input-field-border-width: var(--border-default)}.border-2 .sdc-input-field{--sdc-input-field-border-width: var(--border-2)}.border-4 .sdc-input-field{--sdc-input-field-border-width: var(--border-4)}.border-8 .sdc-input-field{--sdc-input-field-border-width: var(--border-8)}.variant-primary .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-primary) / .1)}.variant-secondary .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-secondary) / .1)}.variant-alternative .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-alternative) / .1)}.variant-success .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-success) / .1)}.variant-warning .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-warning) / .1)}.variant-danger .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-danger) / .1)}.sdc-input-field:focus-visible{outline:var(--sdc-input-focus-ring-width) solid hsl(var(--sdc-input-focus-ring-color));outline-offset:var(--sdc-input-focus-ring-offset)}.variant-primary .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-primary)}.variant-secondary .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-secondary)}.variant-alternative .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-alternative)}.variant-success .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-success)}.variant-warning .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-warning)}.variant-danger .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-danger)}.sdc-input-field:hover:not(:disabled){border-color:hsl(var(--color-neutral-400))}.sdc-input-field::placeholder{color:hsl(var(--sdc-input-field-placeholder-color));font-size:var(--sdc-input-field-placeholder-size);font-weight:var(--sdc-input-field-placeholder-weight);opacity:1}.input-container{position:relative;width:100%;flex:1}.sdc-input-hint{color:hsl(var(--sdc-input-hint-color));font-size:var(--sdc-input-hint-size);line-height:1rem;padding-left:var(--sdc-input-field-horizontal-padding)}.info-icon{height:calc(var(--sdc-input-field-height) - (var(--sdc-input-field-height) * .25));position:absolute;top:50%;right:var(--space-3);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:hsl(var(--sdc-input-hint-color));pointer-events:none;z-index:1}.size-sm .info-icon{right:var(--space-3)}.size-md .info-icon{right:var(--space-4)}.size-lg .info-icon{right:var(--space-5)}.size-xl .info-icon{right:var(--space-6)}.info-icon-symbol{font-size:16px;font-weight:700;line-height:1}.info-icon-svg{width:16px;height:16px}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }] });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.4", ngImport: i0, type: InputComponent, decorators: [{
+            type: Component,
+            args: [{ standalone: true, selector: 'sdc-input', imports: [ReactiveFormsModule], template: "<div [class]=\"computedClass()\">\n  <div class=\"component-container\">\n    <!-- Label positioned above or to the left -->\n    @if (showLabel()) {\n      <label [class]=\"labelClass()\" [for]=\"name()\">\n        {{ label() }}\n      </label>\n    }\n\n    <div class=\"input-container\">\n      @if (isTextarea()) {\n        <textarea\n          [rows]=\"textareaRows()\"\n          [cols]=\"textareaCols()\"\n          [id]=\"name()\"\n          [name]=\"name()\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"handleInput($event)\"\n          class=\"sdc-input-field\"></textarea>\n      } @else {\n        <input\n          [id]=\"name()\"\n          [name]=\"name()\"\n          [type]=\"type()\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"handleInput($event)\"\n          class=\"sdc-input-field\" />\n      }\n    </div>\n  </div>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-input-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n\n  <!-- Hint message -->\n  @if (hint() && hint().trim().length > 0 && !showError()) {\n    <div class=\"sdc-input-hint\">\n      {{ hint() }}\n    </div>\n  }\n</div>\n", styles: [".sdc-input{--sdc-input-label-color: var(--color-neutral-700);--sdc-input-label-size: var(--text-base);--sdc-input-label-weight: var(--font-semibold);--sdc-input-label-gap: var(--space-6);--sdc-input-field-background: var(--color-pure-white);--sdc-input-field-border-color: var(--color-neutral-300);--sdc-input-field-border-width: var(--border-default);--sdc-input-field-border-radius: var(--radius-full);--sdc-input-field-text-color: var(--color-neutral-900);--sdc-input-field-text-size: var(--text-base);--sdc-input-field-placeholder-size: var(--text-sm);--sdc-input-field-placeholder-color: var(--color-neutral-300);--sdc-input-field-placeholder-weight: var(--font-medium);--sdc-input-field-vertical-padding: var(--space-2);--sdc-input-field-horizontal-padding: var(--space-3);--sdc-input-field-height: auto;--sdc-input-field-width: 100%;--sdc-input-focus-ring-width: var(--border-2);--sdc-input-focus-ring-color: var(--color-primary);--sdc-input-focus-ring-offset: var(--border-2);--sdc-input-error-color: var(--color-danger);--sdc-input-error-text-size: var(--text-xs);--sdc-input-hint-color: var(--color-neutral-500);--sdc-input-hint-size: var(--text-xs)}.sdc-input-label{font-weight:var(--sdc-input-label-weight);color:hsl(var(--sdc-input-label-color));font-size:var(--sdc-input-label-size);padding-left:var(--sdc-input-field-horizontal-padding);line-height:1.25rem;display:block}.component-container{display:flex;flex-direction:column;gap:var(--sdc-input-label-gap);width:var(--sdc-input-field-width)}.component-container:has(.sdc-input-label.left){padding-left:0;flex-direction:row;align-items:center}.sdc-input-field{width:var(--sdc-input-field-width);height:var(--sdc-input-field-height);padding:var(--sdc-input-field-vertical-padding) var(--sdc-input-field-horizontal-padding);background:hsl(var(--sdc-input-field-background));border:var(--sdc-input-field-border-width) solid hsl(var(--sdc-input-field-border-color));border-radius:var(--sdc-input-field-border-radius);color:hsl(var(--sdc-input-field-text-color));font-size:var(--sdc-input-field-text-size);transition:all .2s ease-in-out;outline:none}textarea.sdc-input-field{--sdc-input-field-border-radius: var(--radius-xl)}.resize-none textarea.sdc-input-field{resize:none}.resize-both textarea.sdc-input-field{resize:both}.resize-horizontal textarea.sdc-input-field{resize:horizontal}.resize-vertical textarea.sdc-input-field{resize:vertical}.sdc-input-field:focus{border-color:hsl(var(--sdc-input-field-border-color));box-shadow:0 0 0 3px hsl(var(--color-primary) / .1)}.sdc-input-field:disabled{opacity:.6;cursor:not-allowed;background:hsl(var(--color-neutral-100))}.sdc-input-error{color:hsl(var(--sdc-input-error-color));font-size:var(--sdc-input-error-text-size);line-height:1rem;padding:var(--sdc-input-field-vertical-padding) var(--sdc-input-field-horizontal-padding)}.has-error .sdc-input-field{border-color:hsl(var(--sdc-input-error-color))}.size-sm .sdc-input-field{--sdc-input-field-height: var(--space-8);--sdc-input-field-vertical-padding: var(--space-2);--sdc-input-field-horizontal-padding: var(--space-3);--sdc-input-field-text-size: var(--text-sm);--sdc-input-field-placeholder-size: var(--text-xs)}.size-md .sdc-input-field{--sdc-input-field-height: var(--space-10);--sdc-input-field-vertical-padding: var(--space-3);--sdc-input-field-horizontal-padding: var(--space-4);--sdc-input-field-text-size: var(--text-base);--sdc-input-field-placeholder-size: var(--text-sm)}.size-lg .sdc-input-field{--sdc-input-field-height: var(--space-11);--sdc-input-field-vertical-padding: var(--space-4);--sdc-input-field-horizontal-padding: var(--space-5);--sdc-input-field-text-size: var(--text-lg);--sdc-input-field-placeholder-size: var(--text-base)}.size-xl .sdc-input-field{--sdc-input-field-height: var(--space-12);--sdc-input-field-vertical-padding: var(--space-5);--sdc-input-field-horizontal-padding: var(--space-6);--sdc-input-field-text-size: var(--text-xl);--sdc-input-field-placeholder-size: var(--text-lg)}.radius-sm .sdc-input-field{--sdc-input-field-border-radius: var(--radius-sm)}.radius-default .sdc-input-field{--sdc-input-field-border-radius: var(--radius-default)}.radius-md .sdc-input-field{--sdc-input-field-border-radius: var(--radius-md)}.radius-lg .sdc-input-field{--sdc-input-field-border-radius: var(--radius-lg)}.radius-xl .sdc-input-field{--sdc-input-field-border-radius: var(--radius-xl)}.radius-2xl .sdc-input-field{--sdc-input-field-border-radius: var(--radius-2xl)}.radius-full .sdc-input-field{--sdc-input-field-border-radius: var(--radius-full)}.border-0 .sdc-input-field{--sdc-input-field-border-width: var(--border-0)}.border-default .sdc-input-field{--sdc-input-field-border-width: var(--border-default)}.border-2 .sdc-input-field{--sdc-input-field-border-width: var(--border-2)}.border-4 .sdc-input-field{--sdc-input-field-border-width: var(--border-4)}.border-8 .sdc-input-field{--sdc-input-field-border-width: var(--border-8)}.variant-primary .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-primary) / .1)}.variant-secondary .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-secondary) / .1)}.variant-alternative .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-alternative) / .1)}.variant-success .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-success) / .1)}.variant-warning .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-warning) / .1)}.variant-danger .sdc-input-field:focus{box-shadow:0 0 0 var(--sdc-input-focus-ring-width) hsl(var(--color-danger) / .1)}.sdc-input-field:focus-visible{outline:var(--sdc-input-focus-ring-width) solid hsl(var(--sdc-input-focus-ring-color));outline-offset:var(--sdc-input-focus-ring-offset)}.variant-primary .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-primary)}.variant-secondary .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-secondary)}.variant-alternative .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-alternative)}.variant-success .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-success)}.variant-warning .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-warning)}.variant-danger .sdc-input-field:focus-visible{--sdc-input-focus-ring-color: var(--color-danger)}.sdc-input-field:hover:not(:disabled){border-color:hsl(var(--color-neutral-400))}.sdc-input-field::placeholder{color:hsl(var(--sdc-input-field-placeholder-color));font-size:var(--sdc-input-field-placeholder-size);font-weight:var(--sdc-input-field-placeholder-weight);opacity:1}.input-container{position:relative;width:100%;flex:1}.sdc-input-hint{color:hsl(var(--sdc-input-hint-color));font-size:var(--sdc-input-hint-size);line-height:1rem;padding-left:var(--sdc-input-field-horizontal-padding)}.info-icon{height:calc(var(--sdc-input-field-height) - (var(--sdc-input-field-height) * .25));position:absolute;top:50%;right:var(--space-3);transform:translateY(-50%);display:flex;align-items:center;justify-content:center;color:hsl(var(--sdc-input-hint-color));pointer-events:none;z-index:1}.size-sm .info-icon{right:var(--space-3)}.size-md .info-icon{right:var(--space-4)}.size-lg .info-icon{right:var(--space-5)}.size-xl .info-icon{right:var(--space-6)}.info-icon-symbol{font-size:16px;font-weight:700;line-height:1}.info-icon-svg{width:16px;height:16px}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { theme: [{ type: i0.Input, args: [{ isSignal: true, alias: "theme", required: false }] }], styleClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "styleClass", required: false }] }], className: [{ type: i0.Input, args: [{ isSignal: true, alias: "className", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], labelPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "labelPosition", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], name: [{ type: i0.Input, args: [{ isSignal: true, alias: "name", required: false }] }], isTextarea: [{ type: i0.Input, args: [{ isSignal: true, alias: "isTextarea", required: false }] }], textareaRows: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaRows", required: false }] }], textareaCols: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaCols", required: false }] }], textareaResize: [{ type: i0.Input, args: [{ isSignal: true, alias: "textareaResize", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], errorDisplayMode: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorDisplayMode", required: false }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: false }] }], onFocus: [{ type: i0.Output, args: ["onFocus"] }], onBlur: [{ type: i0.Output, args: ["onBlur"] }], onInput: [{ type: i0.Output, args: ["onInput"] }], debounce: [{ type: i0.Input, args: [{ isSignal: true, alias: "debounce", required: false }] }], isDebounced: [{ type: i0.Output, args: ["isDebounced"] }] } });
+
+// Export the main form component
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { InputComponent };
+//# sourceMappingURL=3ddv-software-division-components-backoffice-input.mjs.map

package/dist/fesm2022/3ddv-software-division-components-backoffice-input.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"3ddv-software-division-components-backoffice-input.mjs","sources":["../../backoffice/input/input.component.ts","../../backoffice/input/input.component.html","../../backoffice/input/public-api.ts","../../backoffice/input/3ddv-software-division-components-backoffice-input.ts"],"sourcesContent":["import { ThemeClass } from '@3ddv/software-division-components/shared';\nimport { Component, computed, effect, EffectRef, input, OnDestroy, OnInit, output, signal } from '@angular/core';\nimport {\n  AbstractControl,\n  FormControl,\n  FormSubmittedEvent,\n  ReactiveFormsModule,\n  ValidationErrors,\n} from '@angular/forms';\nimport { Subject, Subscription } from 'rxjs';\nimport { takeUntil } from 'rxjs/operators';\n\nexport type InputStyleClasses = ReturnType<(typeof InputComponent.prototype)['styleClass']>;\n\n/**\n * A customizable input component built on the native input element.\n *\n * This component supports various configurations and exposes all native input functionality.\n * All HTML input attributes and events are automatically forwarded to the inner input element.\n *\n * @since 1.0.0-alpha.1\n */\n@Component({\n  standalone: true,\n  selector: 'sdc-input',\n  styleUrls: ['./input.component.css'],\n  templateUrl: './input.component.html',\n  imports: [ReactiveFormsModule],\n})\nexport class InputComponent implements OnInit, OnDestroy {\n  private readonly allowedVariants = [\n    'variant-primary',\n    'variant-secondary',\n    'variant-alternative',\n    'variant-success',\n    'variant-warning',\n    'variant-danger',\n  ] as const;\n  private readonly allowedSizes = ['size-sm', 'size-md', 'size-lg', 'size-xl'] as const;\n  private readonly allowedRadius = [\n    'radius-default',\n    'radius-sm',\n    'radius-md',\n    'radius-lg',\n    'radius-xl',\n    'radius-2xl',\n    'radius-full',\n  ] as const;\n\n  /**\n   * The current theme applied to the component.\n   */\n  public readonly theme = input<ThemeClass>('theme-sdc');\n\n  /**\n   * Predefined styles to apply to the component.\n   * Can be a single class or multiple classes from different categories.\n   */\n  public readonly styleClass = input<\n    ((typeof this.allowedVariants)[number] | (typeof this.allowedSizes)[number] | (typeof this.allowedRadius)[number])[]\n  >([]);\n\n  // Computed signal that validates and filters the styleClass input\n  private readonly _validatedStyleClass = computed(() => {\n    const value = this.styleClass();\n\n    if (!Array.isArray(value)) {\n      return [];\n    }\n\n    const validValues = value.filter(style => {\n      return (\n        (this.allowedVariants as readonly string[]).includes(style) ||\n        (this.allowedSizes as readonly string[]).includes(style) ||\n        (this.allowedRadius as readonly string[]).includes(style)\n      );\n    });\n\n    const invalidValues = value.filter(style => {\n      return (\n        !(this.allowedVariants as readonly string[]).includes(style) &&\n        !(this.allowedSizes as readonly string[]).includes(style) &&\n        !(this.allowedRadius as readonly string[]).includes(style)\n      );\n    });\n\n    if (invalidValues.length > 0) {\n      throw new Error(\n        `InputComponent: Invalid styleClass values ignored: ${invalidValues.join(', ')}. Allowed values: ${[\n          ...this.allowedVariants,\n          ...this.allowedSizes,\n          ...this.allowedRadius,\n        ].join(', ')}`\n      );\n    }\n\n    return validValues;\n  });\n\n  /**\n   * Additional CSS classes to apply to the component.\n   */\n  public readonly className = input<string>('');\n\n  /**\n   * The label text to display above or to the left of the input.\n   * Only visible when a value is provided.\n   */\n  public readonly label = input<string>('');\n\n  /**\n   * The position of the label relative to the input.\n   * 'top' places the label above the input, 'left' places it to the left.\n   */\n  public readonly labelPosition = input<'top' | 'left'>('top');\n\n  /**\n   * Whether the component is disabled.\n   */\n  public readonly disabled = input<boolean>(false);\n\n  /**\n   * The type of the input element.\n   */\n  public readonly type = input<string>('text');\n\n  /**\n   * The placeholder text for the input.\n   */\n  public readonly placeholder = input<string>('');\n\n  /**\n   * The hint text for the input.\n   */\n  public readonly hint = input<string>('');\n\n  /**\n   * The name of the form control.\n   */\n  public readonly name = input<string>('');\n\n  /**\n   * Whether the input is a textarea.\n   */\n  public readonly isTextarea = input<boolean>(false);\n\n  /**\n   * The number of rows for the textarea.\n   */\n  public readonly textareaRows = input<number>(1);\n\n  /**\n   * The number of columns for the textarea.\n   */\n  public readonly textareaCols = input<number>(1);\n\n  /**\n   * Whether the textarea is resizable.\n   */\n  public readonly textareaResize = input<'none' | 'both' | 'horizontal' | 'vertical'>('vertical');\n\n  /**\n   * Custom error message to override the validator's error message.\n   */\n  public readonly errorMessage = input<string>('');\n\n  /**\n   * Controls when errors are displayed.\n   * - 'after-submit': Show errors only after form submission (default)\n   * - 'always': Show errors immediately when validation fails\n   */\n  public readonly errorDisplayMode = input<'always' | 'after-submit'>('after-submit');\n\n  /**\n   * The FormControl instance to bind to this input.\n   * This allows the component to access form state without circular dependencies.\n   */\n  public readonly control = input<AbstractControl<string | null> | FormControl | null>(null);\n\n  /**\n   * The state of the form control.\n   */\n  public readonly controlState = signal<{\n    invalid: boolean;\n    touched: boolean;\n    dirty: boolean;\n    errors: ValidationErrors | null;\n    value: string;\n    isFormSubmitted: boolean;\n  }>({ invalid: false, touched: false, dirty: false, errors: null, value: '', isFormSubmitted: false });\n\n  /**\n   * Event emitted when the component receives focus.\n   */\n  public readonly onFocus = output<FocusEvent>();\n\n  /**\n   * Event emitted when the component loses focus.\n   */\n  public readonly onBlur = output<FocusEvent>();\n\n  /**\n   * Event emitted when the input value changes.\n   */\n  public readonly onInput = output<InputEvent>();\n\n  /**\n   * Computed class string that combines theme and user classes.\n   */\n  protected readonly computedClass = computed(() => {\n    const themeClass = this.theme();\n    const styleClass = this._validatedStyleClass();\n    const className = this.className();\n    const errorClass = this.showError() ? 'has-error' : '';\n    const textareaResizeClass = this.isTextarea() ? `resize-${this.textareaResize()}` : '';\n    return ['sdc-input', themeClass, ...styleClass, className, errorClass, textareaResizeClass]\n      .filter(Boolean)\n      .join(' ');\n  });\n\n  /**\n   * Computed class string for the label positioning.\n   */\n  protected readonly labelClass = computed(() => {\n    const position = this.labelPosition();\n    return position === 'left' ? 'sdc-input-label left' : 'sdc-input-label top';\n  });\n\n  /**\n   * Debounce time in milliseconds. When 0, no debounce is applied.\n   * Default value is 0 (no debounce).\n   */\n  public readonly debounce = input<number>(0);\n\n  /**\n   * Event emitted to notify the debounce state.\n   * Returns true while the component is debounced, false when not.\n   */\n  public readonly isDebounced = output<boolean>();\n\n  /**\n   * Signal to track the current debounce state of the component.\n   */\n  protected readonly debounceState = signal<boolean>(false);\n\n  /**\n   * Subject for handling input events with debounce.\n   */\n  private readonly inputSubject = new Subject<Event>();\n\n  /**\n   * Subject for cleanup.\n   */\n  private readonly destroy$ = new Subject<void>();\n\n  /**\n   * Current subscription for debounce.\n   */\n  private debounceSubscription: Subscription | null = null;\n\n  /**\n   * Current debounce timeout.\n   */\n  private debounceTimeout: ReturnType<typeof setTimeout> | null = null;\n\n  /**\n   * Component subscriptions.\n   */\n  private subscriptions: (Subscription | undefined)[] = [];\n\n  /**\n   * Computed signal to determine if the label should be visible.\n   */\n  protected readonly showLabel = computed(() => {\n    return this.label() && this.label().trim().length > 0;\n  });\n\n  /**\n   * Computed signal to get the current error message.\n   */\n  protected readonly currentErrorMessage = computed(() => {\n    const customMessage = this.errorMessage();\n    const hasErrors = Object.keys(this.controlState()?.errors ?? {}).length > 0;\n\n    if (hasErrors && customMessage && customMessage.trim().length > 0) {\n      return customMessage;\n    }\n\n    // If no custom message, try to get validation error from the form control state\n    if (hasErrors) {\n      const firstErrorKey = Object.keys(this.controlState()?.errors ?? {})[0];\n      const firstErrorValue = this.controlState()?.errors?.[firstErrorKey];\n      return this.getValidatorErrorMessage(firstErrorKey, firstErrorValue);\n    }\n\n    return '';\n  });\n\n  /**\n   * Computed signal to determine if there's an error to display.\n   */\n  protected readonly showError = computed(() => {\n    const errorMode = this.errorDisplayMode();\n\n    // For validation errors, respect the error display mode\n    if (this.controlState()?.invalid) {\n      if (errorMode === 'always') {\n        // Show errors when component is touched and invalid\n        return this.controlState()?.touched || this.controlState()?.dirty || this.controlState()?.isFormSubmitted;\n      } else if (errorMode === 'after-submit') {\n        // Show errors when form is submitted, regardless of touch/focus state\n        return this.controlState()?.isFormSubmitted;\n      }\n    }\n\n    return false;\n  });\n\n  /**\n   * References to effects for proper cleanup\n   */\n  private readonly effects: EffectRef[] = [];\n\n  constructor() {\n    // Set up reactive debounce handling within injection context\n    const debounceEffect = effect(() => {\n      const debounceTime = this.debounce();\n      this.setupDebounce(debounceTime);\n    });\n    this.effects.push(debounceEffect);\n  }\n\n  ngOnInit(): void {\n    // Validate the name input\n    if ((this.control() || this.showLabel()) && !this.name()) {\n      throw new Error('InputComponent: name is required when control or label inputs are present');\n    }\n\n    const formEventsSubscription = this.control()?.parent?.events.subscribe(event => {\n      // We do not reset this signal because it is used to show the errors\n      // When a form is submitted at least once, we want to show the errors\n      if (event instanceof FormSubmittedEvent) {\n        this.controlState.set({ ...this.controlState(), isFormSubmitted: true });\n\n        // We add this because the statusChanges event is not triggered when the form is submitted\n        if (event.source.status === 'INVALID') {\n          this.controlState.set({ ...this.controlState(), invalid: true });\n        }\n      }\n\n      this.updateErrors();\n    });\n\n    const statusChangesSubscription = this.control()?.statusChanges.subscribe(status => {\n      if (status === 'INVALID') {\n        this.controlState.set({ ...this.controlState(), invalid: true });\n      }\n\n      this.updateErrors();\n    });\n\n    this.subscriptions.push(formEventsSubscription, statusChangesSubscription);\n  }\n\n  ngOnDestroy(): void {\n    this.destroy$.next();\n    this.destroy$.complete();\n    this.inputSubject.complete();\n    if (this.debounceSubscription) {\n      this.debounceSubscription.unsubscribe();\n    }\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n    }\n    this.effects.forEach(effect => effect.destroy());\n    this.subscriptions.forEach(subscription => subscription?.unsubscribe());\n  }\n\n  private updateErrors() {\n    // We override the errors except the internal_* errors\n    const currentInternalErrors = Object.entries(this.controlState()?.errors || {})?.filter(([key]) =>\n      key.startsWith('internal_')\n    );\n    const controlStateHasInternalErrors = currentInternalErrors.length > 0;\n\n    const newErrors =\n      this.control()?.errors || controlStateHasInternalErrors\n        ? Object.assign(Object.fromEntries(currentInternalErrors), this.control()?.errors ?? {})\n        : null;\n\n    this.controlState.set({ ...this.controlState(), errors: newErrors });\n  }\n\n  /**\n   * Sets up the debounce functionality for input events.\n   */\n  private setupDebounce(debounceTime: number): void {\n    // Clear existing subscription\n    if (this.debounceSubscription) {\n      this.debounceSubscription.unsubscribe();\n    }\n\n    // Clear existing timeout\n    if (this.debounceTimeout) {\n      clearTimeout(this.debounceTimeout);\n      this.debounceTimeout = null;\n    }\n\n    // Set up new subscription\n    this.debounceSubscription = this.inputSubject.pipe(takeUntil(this.destroy$)).subscribe((event: Event) => {\n      // Clear existing timeout\n      if (this.debounceTimeout) {\n        clearTimeout(this.debounceTimeout);\n      }\n\n      // Set new timeout\n      this.debounceTimeout = setTimeout(() => {\n        this.debounceState.set(false);\n        this.isDebounced.emit(false);\n        this.onInput.emit(event as InputEvent);\n        this.debounceTimeout = null;\n      }, debounceTime);\n    });\n  }\n\n  /**\n   * Handles input events with debounce functionality.\n   */\n  protected handleInput(event: Event): void {\n    const target = event.target as HTMLInputElement;\n    const newValue = target.value;\n\n    // Only allow numbers for input with type number\n    if (this.type() === 'number') {\n      const isValidNumber = /^[0-9]+$/.test(newValue);\n      this.controlState.set({ ...this.controlState(), errors: isValidNumber ? null : { internal_number: true } });\n    }\n\n    // Update the form control value\n    this.controlState.set({ ...this.controlState(), value: newValue, dirty: true });\n    this.control()?.setValue(newValue);\n\n    const debounceTime = this.debounce();\n\n    if (debounceTime > 0) {\n      // Apply debounce\n      this.debounceState.set(true);\n      this.isDebounced.emit(true);\n      this.inputSubject.next({ ...event, target: { ...event.target, value: newValue } } as unknown as InputEvent);\n    } else {\n      // No debounce, emit immediately\n      this.onInput.emit({ ...event, target: { ...event.target, value: newValue } } as unknown as InputEvent);\n    }\n  }\n\n  /**\n   * Handles focus events and emits the onFocus output.\n   */\n  protected handleFocus(event: FocusEvent): void {\n    this.controlState.set({ ...this.controlState(), touched: true });\n    this.onFocus.emit(event);\n  }\n\n  /**\n   * Handles blur events and emits the onBlur output.\n   */\n  protected handleBlur(event: FocusEvent): void {\n    this.controlState.set({ ...this.controlState(), touched: true });\n    this.onBlur.emit(event);\n  }\n\n  /**\n   * Gets the error message for a specific validator error.\n   */\n  private getValidatorErrorMessage(errorKey: string, errorValue: any): string {\n    switch (errorKey) {\n      case 'required':\n        return 'This field is required.';\n      case 'internal_number':\n        return 'Please enter a valid number.';\n      case 'email':\n        return 'Please enter a valid email address.';\n      case 'minlength':\n        return `Minimum length is ${errorValue.requiredLength} characters.`;\n      case 'maxlength':\n        return `Maximum length is ${errorValue.requiredLength} characters.`;\n      case 'min':\n        return `Minimum value is ${errorValue.min}.`;\n      case 'max':\n        return `Maximum value is ${errorValue.max}.`;\n      case 'pattern':\n        return 'Please enter a valid value.';\n      default:\n        return 'Please enter a valid value.';\n    }\n  }\n}\n","<div [class]=\"computedClass()\">\n  <div class=\"component-container\">\n    <!-- Label positioned above or to the left -->\n    @if (showLabel()) {\n      <label [class]=\"labelClass()\" [for]=\"name()\">\n        {{ label() }}\n      </label>\n    }\n\n    <div class=\"input-container\">\n      @if (isTextarea()) {\n        <textarea\n          [rows]=\"textareaRows()\"\n          [cols]=\"textareaCols()\"\n          [id]=\"name()\"\n          [name]=\"name()\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"handleInput($event)\"\n          class=\"sdc-input-field\"></textarea>\n      } @else {\n        <input\n          [id]=\"name()\"\n          [name]=\"name()\"\n          [type]=\"type()\"\n          [placeholder]=\"placeholder()\"\n          [disabled]=\"disabled()\"\n          (focus)=\"handleFocus($event)\"\n          (blur)=\"handleBlur($event)\"\n          (input)=\"handleInput($event)\"\n          class=\"sdc-input-field\" />\n      }\n    </div>\n  </div>\n\n  <!-- Error message  -->\n  @if (showError()) {\n    <div class=\"sdc-input-error\">\n      {{ currentErrorMessage() }}\n    </div>\n  }\n\n  <!-- Hint message -->\n  @if (hint() && hint().trim().length > 0 && !showError()) {\n    <div class=\"sdc-input-hint\">\n      {{ hint() }}\n    </div>\n  }\n</div>\n","// Export the main form component\nexport * from './input.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}