fn-input 0.0.1

package/fesm2022/fn-input.mjs

@@ -0,0 +1,1106 @@
+import * as i0 from '@angular/core';
+import { EventEmitter, inject, signal, ViewChildren, ViewChild, Output, Input, ChangeDetectionStrategy, Component } from '@angular/core';
+import * as i2 from '@angular/common';
+import { CommonModule } from '@angular/common';
+import { HttpClient } from '@angular/common/http';
+import * as i1 from '@angular/forms';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
+import * as i3 from '@ngx-translate/core';
+import { TranslateService, TranslateModule } from '@ngx-translate/core';
+import { Subscription, merge } from 'rxjs';
+import { startWith } from 'rxjs/operators';
+
+const DEFAULT_CURRENCY_META = [
+    { code: 'USD', locale: 'en-US', symbol: '$', digit: '1.2-2' },
+    { code: 'MYR', locale: 'en-MY', symbol: 'RM', digit: '1.2-2' },
+    { code: 'EUR', locale: 'en-US', symbol: '€', digit: '1.2-2' },
+    { code: 'GBP', locale: 'en-US', symbol: '£', digit: '1.2-2' },
+    { code: 'JPY', locale: 'ja-JP', symbol: '¥', digit: '1.0-0' },
+    { code: 'CNY', locale: 'zh-CN', symbol: '¥', digit: '1.2-2' },
+    { code: 'INR', locale: 'en-IN', symbol: '₹', digit: '1.2-2' },
+];
+
+class FNInput {
+    cdr;
+    field = {};
+    helperHandle;
+    toastService;
+    currencyMeta = DEFAULT_CURRENCY_META;
+    defaultLocale = 'en-US';
+    form;
+    valueChange = new EventEmitter();
+    fieldBlur = new EventEmitter();
+    translate = inject(TranslateService);
+    hasFocus = signal(false, ...(ngDevMode ? [{ debugName: "hasFocus" }] : /* istanbul ignore next */ []));
+    textareaElement;
+    iconContainers;
+    http = inject(HttpClient);
+    subs = new Subscription();
+    sizeMap = {
+        extrasmall: 10,
+        small: 16,
+        medium: 20,
+        large: 24,
+        'x-large': 32,
+        xxlarge: 48,
+    };
+    getIconSizeName(size) {
+        switch (size) {
+            case 16:
+                return 'small';
+            case 20:
+                return 'medium';
+            case 24:
+                return 'large';
+            case 32:
+                return 'x-large';
+            default:
+                return 'medium';
+        }
+    }
+    get isAlphanumeric() {
+        return this.field.isAlphanumeric !== false;
+    }
+    get isEmailField() {
+        return this.field.type === 'email' || this.field.name?.toLowerCase().includes('email');
+    }
+    get alphanumericPattern() {
+        if (this.field.isAddressLine) {
+            return /[^A-Za-z0-9 \-_&(),/]/g;
+        }
+        return /[^A-Za-z0-9 \-_&()]/g;
+    }
+    isDisabled = false;
+    control;
+    isVisible = signal(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ [])); // Track visibility state
+    helperText = '';
+    // Use a counter-based approach for unique IDs (safer than Math.random())
+    static idCounter = 0;
+    uniqueId = `fn-input-${++FNInput.idCounter}`;
+    constructor(cdr) {
+        this.cdr = cdr;
+    }
+    ngOnInit() {
+        if (this.field.hidden)
+            return;
+        this.helperText = this.field.helperText ?? '';
+        this.initFormControl();
+        if (this.field.value)
+            this.control.setValue(this.field.value);
+        this.setupVisibilityCondition();
+        this.setupFieldMessageListener();
+    }
+    ngOnDestroy() {
+        this.subs.unsubscribe();
+    }
+    ngOnChanges(changes) {
+        if (changes['field'] || changes['form']) {
+            this.updateAllIcons();
+        }
+    }
+    setupFieldMessageListener() {
+        if (!this.control)
+            return;
+        const val$ = this.control.valueChanges.pipe(startWith(this.control.value));
+        const status$ = this.control.statusChanges.pipe(startWith(this.control.status));
+        this.subs.add(merge(val$, status$).subscribe(() => {
+            try {
+                this.cdr.detectChanges();
+            }
+            catch (e) {
+                console.warn('CDR detectChanges failed during field message update:', e);
+                this.cdr.markForCheck();
+            }
+        }));
+    }
+    ngAfterViewInit() {
+        // Access the textarea element by ViewChild or native element reference
+        this.autoResizeInitial();
+        if (this.field.type === 'textarea' && this.control?.value) {
+            setTimeout(() => this.autoResizeInitial(), 30);
+        }
+        // Apply initial formatting after view is initialized
+        if (this.field.type === 'number' && this.field.isCurrency && this.control?.value) {
+            this.formatInitialCurrencyValue();
+        }
+    }
+    enforceLowercase(event) {
+        const input = event.target;
+        const start = input.selectionStart;
+        const end = input.selectionEnd;
+        input.value = input.value.toLowerCase();
+        if (this.control) {
+            this.control.setValue(input.value, { emitEvent: false });
+        }
+        this.valueChange.emit({ name: this.field.name, value: input.value });
+        // restore cursor position so typing is smooth
+        input.setSelectionRange(start, end);
+    }
+    /**
+     * Handle email input - allows only valid email characters and enforces lowercase.
+     * Allowed: a-z, 0-9, . _ + - @
+     * Rules:
+     * - Only one @ allowed
+     * - No consecutive dots (..)
+     * - Automatic lowercase
+     */
+    handleEmailInput(event) {
+        const input = event.target;
+        const cursorPosition = input.selectionStart || 0;
+        const originalValue = input.value;
+        // 1. Convert to lowercase
+        const lowerValue = originalValue.toLowerCase();
+        // 2. Split at the first @ to handle local and domain parts separately
+        const parts = lowerValue.split('@');
+        let localPart = parts[0];
+        let domainPart = parts.length > 1 ? parts.slice(1).join('') : null;
+        // 3. Filter local part: a-z, 0-9, ., _, +, -
+        // Rule: Cannot start with a dot (.)
+        localPart = localPart.replaceAll(/[^a-z0-9._+-]/g, '');
+        while (localPart.startsWith('.')) {
+            localPart = localPart.substring(1);
+        }
+        while (localPart.includes('..')) {
+            localPart = localPart.replaceAll('..', '.');
+        }
+        // 4. Filter domain part: a-z, 0-9, ., -
+        // Rule: No underscores (_), no plus signs (+), cannot start with a hyphen (-)
+        let filteredValue = localPart;
+        if (domainPart !== null) {
+            domainPart = domainPart.replaceAll(/[^a-z0-9.-]/g, '');
+            while (domainPart.startsWith('-')) {
+                domainPart = domainPart.substring(1);
+            }
+            while (domainPart.includes('..')) {
+                domainPart = domainPart.replaceAll('..', '.');
+            }
+            filteredValue += '@' + domainPart;
+        }
+        if (originalValue !== filteredValue) {
+            const charsRemovedBeforeCursor = this.countRemovedCharsBeforeCursor(originalValue.toLowerCase(), filteredValue, cursorPosition);
+            input.value = filteredValue;
+            this.control.setValue(filteredValue, { emitEvent: false });
+            const newCursorPos = Math.max(0, cursorPosition - charsRemovedBeforeCursor);
+            input.setSelectionRange(newCursorPos, newCursorPos);
+        }
+        else if (originalValue !== lowerValue) {
+            // If only case changed (e.g., typed Uppercase)
+            input.value = filteredValue;
+            this.control.setValue(filteredValue, { emitEvent: false });
+            input.setSelectionRange(cursorPosition, cursorPosition);
+        }
+        this.valueChange.emit({ name: this.field.name, value: filteredValue });
+        this.control.markAsTouched();
+    }
+    onFocus() {
+        this.hasFocus.set(true);
+    }
+    formatInitialCurrencyValue() {
+        const numericValue = Number(this.control.value);
+        if (!Number.isNaN(numericValue)) {
+            setTimeout(() => {
+                const inputElement = document.getElementById(this.uniqueId);
+                if (inputElement) {
+                    inputElement.value = this.formatCurrencyWithCommas(numericValue);
+                }
+            }, 50);
+        }
+    }
+    initFormControl() {
+        const controller = this.form.controls?.[this.field.name];
+        this.control = controller;
+        if (this.field.value)
+            this.control.setValue(this.field.value);
+        if (this.control) {
+            // Handle disabled state
+            if (this.field.disabled ?? false) {
+                this.control?.disable();
+            }
+            else {
+                this.control?.enable();
+            }
+        }
+    }
+    autoResizeInitial() {
+        const textarea = this.textareaElement?.nativeElement;
+        if (textarea) {
+            // Get the number of rows (default to 2 if not specified)
+            const rows = this.field.rows || 1;
+            // Calculate line height from computed styles
+            const computedStyle = globalThis.getComputedStyle(textarea);
+            const lineHeight = Number.parseFloat(computedStyle.lineHeight) || 32; // Default to 24px if not set
+            // Calculate minimum height based on rows
+            const minHeight = rows * lineHeight;
+            // Reset height to auto to get accurate scrollHeight
+            textarea.style.height = 'auto';
+            // Use the larger of scrollHeight or minHeight
+            const newHeight = Math.max(textarea.scrollHeight, minHeight);
+            textarea.style.height = newHeight + 'px';
+            textarea.style.overflow = 'hidden';
+        }
+    }
+    handleTextArea(event) {
+        const element = event.target;
+        const cursorPosition = element.selectionStart;
+        const originalValue = element.value;
+        // Apply alphanumeric filtering if enabled
+        if (this.field.type === 'textarea' && this.isAlphanumeric) {
+            // Only allow characters based on the selected pattern
+            const alphanumericPattern = this.alphanumericPattern;
+            let filteredValue = originalValue.replaceAll(alphanumericPattern, '');
+            // Prevent leading spaces
+            if (filteredValue.startsWith(' ')) {
+                filteredValue = filteredValue.trimStart();
+            }
+            // Replace multiple consecutive spaces with single space
+            filteredValue = filteredValue.replaceAll(/\s{2,}/g, ' ');
+            if (originalValue !== filteredValue) {
+                // Calculate the number of characters removed before the cursor position
+                const charsRemovedBeforeCursor = originalValue.length - filteredValue.length;
+                element.value = filteredValue;
+                this.control.setValue(filteredValue, { emitEvent: false });
+                // Restore cursor position - account for removed characters
+                const newCursorPos = Math.max(0, (cursorPosition || 0) - charsRemovedBeforeCursor);
+                element.setSelectionRange(newCursorPos, newCursorPos);
+            }
+            // increase height
+            this.autoResizeInitial();
+            this.valueChange.emit({ name: this.field.name, value: filteredValue });
+        }
+        else {
+            let filteredValue = originalValue;
+            // Strict filtering if !isAlphanumeric
+            if (!this.isAlphanumeric) {
+                console.log('isAlphanumeric', this.isAlphanumeric);
+                const allowedPattern = /[^a-zA-Z0-9\s(){}[\];,."='+\-*/<>!&|%_@$?:]/g;
+                filteredValue = filteredValue.replaceAll(allowedPattern, '');
+            }
+            // Prevent leading spaces
+            if (filteredValue.startsWith(' ')) {
+                filteredValue = filteredValue.trimStart();
+            }
+            // Replace multiple consecutive spaces with single space
+            filteredValue = filteredValue.replaceAll(/\s{2,}/g, ' ');
+            if (originalValue !== filteredValue) {
+                // Calculate the number of characters removed before the cursor position
+                const charsRemovedBeforeCursor = originalValue.length - filteredValue.length;
+                element.value = filteredValue;
+                this.control.setValue(filteredValue, { emitEvent: false });
+                // Restore cursor position - account for removed characters
+                const newCursorPos = Math.max(0, (cursorPosition || 0) - charsRemovedBeforeCursor);
+                element.setSelectionRange(newCursorPos, newCursorPos);
+            }
+            // increase height
+            this.autoResizeInitial();
+            this.valueChange.emit({ name: this.field.name, value: filteredValue });
+        }
+        this.control.markAsTouched();
+    }
+    handleInput(event) {
+        const target = event.target;
+        const cursorPosition = target.selectionStart;
+        const originalValue = target.value;
+        let filteredValue = originalValue;
+        // IF NOT alphanumeric, user wants strict filtering:
+        // "only accept tihs.) {} [] ; , . " ' = + - * / < > ! & | % &_( )-/.;@!, $% : dont allow emoji"
+        // Interpretation: Allow alphanumeric + specified special chars. Ban emojis.
+        // Actually, the user said: "if isAlphanumeric false only accept..."
+        // So if isAlphanumeric is TRUE, we use the existing handleAlphanumericInput logic (or similar).
+        // The current logic in handleInput is generic.
+        // The existing code has a separate `handleAlphanumericInput` method but it's not called here?
+        // Wait, the template likely calls `handleAlphanumericInput` if `isAlphanumeric` is true, or `handleInput` otherwise?
+        // Let's check the template.
+        // BUT assuming `handleInput` is the generic handler:
+        if (!this.isAlphanumeric) {
+            // Regex to allow: a-z, A-Z, 0-9, and: ) {} [] ; , . " ' = + - * / < > ! & | % _ ( - @ $ ? :
+            // Note: User list: ) {} [] ; , . " ' = + - * / < > ! & | % &_( )-/.;@!, $%
+            // Combined unique special chars: ) { } [ ] ; , . " ' = + - * / < > ! & | % _ ( @ $ ? :
+            // Also space is implied? usually yes.
+            // And NO EMOJIS.
+            // easier to just replace anything NOT in the allowed set.
+            // Allowed chars regex pattern:
+            // A-Za-z0-9
+            // Space: \s
+            // Special: (){}[\];,."='+\-*/<>!&|%_@$?:
+            // Note: - inside [] needs to be escaped or at end. ] needs escape. \ needs escape? (not in list).
+            // User list has: `.` `"` `'` `?` (wait, ? not in list?)
+            // User list: `) {} [] ; , . " ' = + - * / < > ! & | % &_( )-/.;@!, $%`
+            // Uniques: ) { } [ ] ; , . " ' = + - * / < > ! & | % _ ( @ $
+            // (The `&` is repeated, `.` repeated, `,` repeated etc.)
+            // I will create a regex that matches anything NOT in this list and replace with empty string.
+            // [^a-zA-Z0-9\s(){}[\];,."='+\-*/<>!&|%_@$]
+            // Note: `*`, `+`, `?` etc need escaping in regex if outside [], but inside [] they are literals mostly.
+            // `-` needs to be last or escaped. `]` needs escape. `^` needs escape if first? No, invalid here.
+            // Let's verify valid chars:
+            // a-z A-Z 0-9
+            // space
+            // ) { } [ ] ; , . " ' = + - * / < > ! & | % _ ( @ $ :
+            const allowedPattern = /[^a-zA-Z0-9\s(){}[\];,."='+\-*/<>!&|%_@$?:]/g;
+            filteredValue = filteredValue.replaceAll(allowedPattern, '');
+        }
+        // Prevent leading spaces
+        if (filteredValue.startsWith(' ')) {
+            filteredValue = filteredValue.trimStart();
+        }
+        // replaceAll multiple consecutive spaces with single space
+        filteredValue = filteredValue.replaceAll(/\s{2,}/g, ' ');
+        if (originalValue !== filteredValue) {
+            // Calculate the number of characters removed before the cursor position
+            const charsRemovedBeforeCursor = originalValue.length - filteredValue.length;
+            target.value = filteredValue;
+            this.control.setValue(filteredValue, { emitEvent: false });
+            // Restore cursor position - account for removed characters
+            const newCursorPos = Math.max(0, (cursorPosition || 0) - charsRemovedBeforeCursor);
+            target.setSelectionRange(newCursorPos, newCursorPos);
+        }
+        // Trailing spaces will be trimmed on blur, not during input
+        this.valueChange.emit({ name: this.field.name, value: filteredValue });
+        this.control.markAsTouched();
+    }
+    /**
+     * Handle alphanumeric input - allows only letters, numbers, and specific special characters
+     * Allowed: A-Z, a-z, 0-9, space, hyphen, underscore, ampersand, and parentheses
+     * Also prevents leading spaces and multiple consecutive spaces
+     */
+    handleAlphanumericInput(event) {
+        const target = event.target;
+        const cursorPosition = target.selectionStart;
+        const originalValue = target.value;
+        // Only allow characters based on the selected pattern
+        const alphanumericPattern = this.alphanumericPattern;
+        let filteredValue = originalValue.replaceAll(alphanumericPattern, '');
+        // Prevent leading spaces
+        if (filteredValue.startsWith(' ')) {
+            filteredValue = filteredValue.trimStart();
+        }
+        // Replace multiple consecutive spaces with single space
+        filteredValue = filteredValue.replaceAll(/\s{2,}/g, ' ');
+        if (originalValue !== filteredValue) {
+            // Calculate the number of characters removed before the cursor position
+            const charsRemovedBeforeCursor = originalValue.length - filteredValue.length;
+            target.value = filteredValue;
+            this.control.setValue(filteredValue, { emitEvent: false });
+            // Restore cursor position - account for removed characters
+            const newCursorPos = Math.max(0, (cursorPosition || 0) - charsRemovedBeforeCursor);
+            target.setSelectionRange(newCursorPos, newCursorPos);
+        }
+        this.valueChange.emit({ name: this.field.name, value: filteredValue });
+        this.control.markAsTouched();
+    }
+    handleBlur(e, maxDecimals = 2) {
+        this.hasFocus.set(false);
+        const target = e.target;
+        const cleanValueString = target.value;
+        if (!cleanValueString) {
+            this.fieldBlur.emit({ name: this.field.name, value: '' });
+            this.cdr.detectChanges();
+            return;
+        }
+        // Delegate to type-specific handlers
+        if (this.field.type === 'text' || this.field.type === 'textarea') {
+            this.handleTextFieldBlur(target, cleanValueString);
+        }
+        else if (this.field.type === 'number') {
+            this.handleNumberFieldBlur(target, cleanValueString, maxDecimals);
+        }
+        // Emit final value
+        this.fieldBlur.emit({
+            name: this.field.name,
+            value: target.value,
+        });
+        this.cdr.detectChanges();
+    }
+    /**
+     * Handle blur for text and textarea fields - trim trailing spaces
+     */
+    handleTextFieldBlur(target, cleanValueString) {
+        const trimmed = cleanValueString.trim();
+        if (cleanValueString !== trimmed) {
+            target.value = trimmed;
+            this.control.setValue(trimmed, { emitEvent: false });
+        }
+    }
+    /**
+     * Handle blur for number fields - validate and format
+     */
+    handleNumberFieldBlur(target, cleanValueString, maxDecimals) {
+        // Remove commas for parsing/validation
+        const numString = cleanValueString.replaceAll(',', '');
+        // Check if the string is a valid number format
+        const isValidNumberFormat = /^-?\d+(\.\d+)?$/.test(numString);
+        // If not a valid number format, clear the field
+        if (!isValidNumberFormat) {
+            target.value = '';
+            this.control.setValue('');
+            return;
+        }
+        // Format currency fields or set raw value for non-currency
+        if (this.field.type === 'number' && this.field.isCurrency) {
+            this.processCurrencyValue(target, numString, maxDecimals);
+        }
+        else {
+            // Non-currency: preserve the raw string value
+            target.value = numString;
+        }
+    }
+    /**
+     * Process currency value - handle formatting and decimal places
+     */
+    processCurrencyValue(target, numString, maxDecimals) {
+        // Handle negative values - convert to positive
+        let processedValue = numString.startsWith('-') ? numString.substring(1) : numString;
+        // Handle edge case of "-0" or just "-"
+        if (processedValue === '' || processedValue === '0') {
+            processedValue = '0';
+        }
+        // Format the value with proper decimal places
+        const cleanValueString = this.formatDecimalPlaces(processedValue, maxDecimals);
+        const formattedValue = this.formatCurrencyWithCommas(cleanValueString, maxDecimals);
+        // Update the control value with the numeric string (not formatted)
+        this.control.setValue(cleanValueString, { emitEvent: false });
+        // Trigger validators and mark as touched
+        this.control.updateValueAndValidity();
+        this.control.markAsTouched();
+        // Set display value with commas after Angular's form control update
+        setTimeout(() => {
+            target.value = formattedValue;
+        }, 0);
+    }
+    /**
+     * Format decimal places - pad or truncate to maxDecimals
+     */
+    formatDecimalPlaces(value, maxDecimals) {
+        let [intPart, decPart] = value.includes('.') ? value.split('.') : [value, ''];
+        // Pad or truncate decimal part to maxDecimals
+        if (decPart.length < maxDecimals) {
+            decPart = decPart.padEnd(maxDecimals, '0');
+        }
+        else if (decPart.length > maxDecimals) {
+            decPart = decPart.slice(0, maxDecimals);
+        }
+        // Build the clean value string (without commas)
+        return maxDecimals > 0 ? `${intPart}.${decPart}` : intPart;
+    }
+    handleNumberInput(event, maxDecimals = 2) {
+        const target = event.target;
+        const originalValue = target.value;
+        const cursorPosition = target.selectionStart ?? 0;
+        // Step 1: Filter and format the input value
+        let value = this.filterNumericInput(target.value, maxDecimals);
+        // Step 2: Update cursor position if value changed
+        this.updateCursorPositionAfterFilter(target, originalValue, value, cursorPosition);
+        // Step 3: Update form control and validate
+        this.updateFormControlValue(value, maxDecimals);
+        // Step 4: Emit changes
+        this.valueChange.emit({ name: this.field.name, value: target.value });
+        this.control.markAsTouched();
+    }
+    /**
+     * Filter numeric input to only allow digits and decimal point
+     * Ensures only one decimal point and enforces max decimal places
+     */
+    filterNumericInput(value, maxDecimals) {
+        // Remove ALL non-numeric characters except decimal point
+        let filtered = value.replaceAll(/[^0-9.]/g, '');
+        // Ensure only one decimal point
+        filtered = this.filterDecimalPoints(filtered);
+        // Restrict to maxDecimals decimal places if decimal exists
+        filtered = this.enforceDecimalLimit(filtered, maxDecimals);
+        return filtered;
+    }
+    /**
+     * Ensure only one decimal point exists in the value
+     */
+    filterDecimalPoints(value) {
+        const parts = value.split('.');
+        if (parts.length > 2) {
+            return parts[0] + '.' + parts.slice(1).join('');
+        }
+        return value;
+    }
+    /**
+     * Enforce maximum decimal places limit
+     */
+    enforceDecimalLimit(value, maxDecimals) {
+        if (!value.includes('.')) {
+            return value;
+        }
+        const [integerPart, decimalPart] = value.split('.');
+        if (decimalPart && decimalPart.length > maxDecimals) {
+            return integerPart + '.' + decimalPart.slice(0, maxDecimals);
+        }
+        return value;
+    }
+    /**
+     * Update cursor position after filtering input
+     */
+    updateCursorPositionAfterFilter(target, originalValue, newValue, cursorPosition) {
+        if (target.value === newValue) {
+            return;
+        }
+        const charsRemovedBeforeCursor = this.countRemovedCharsBeforeCursor(originalValue, newValue, cursorPosition);
+        target.value = newValue;
+        const newPosition = Math.max(0, cursorPosition - charsRemovedBeforeCursor);
+        target.setSelectionRange(newPosition, newPosition);
+    }
+    /**
+     * Update form control value and perform validation
+     */
+    updateFormControlValue(value, maxDecimals) {
+        this.control.setValue(value, { emitEvent: false });
+        this.validateIntegerDigits(value, maxDecimals);
+        this.clearNumericError();
+    }
+    /**
+     * Count how many characters were removed before the cursor position
+     * This helps maintain correct cursor position after filtering input
+     */
+    countRemovedCharsBeforeCursor(original, filtered, cursorPos) {
+        let removedCount = 0;
+        let filteredIndex = 0;
+        for (let i = 0; i < cursorPos && i < original.length; i++) {
+            if (filteredIndex < filtered.length && original[i] === filtered[filteredIndex]) {
+                filteredIndex++;
+            }
+            else {
+                removedCount++;
+            }
+        }
+        return removedCount;
+    }
+    /**
+     * Handle paste event for number inputs
+     * Prevents pasting of non-numeric characters and enforces digit limits
+     */
+    handleNumberPaste(event, maxDecimals = 2) {
+        event.preventDefault();
+        const target = event.target;
+        const pastedText = event.clipboardData?.getData('text') || '';
+        const isCurrency = this.field.type === 'number' && !!this.field.isCurrency;
+        const filteredText = isCurrency
+            ? this.getFilteredCurrencyPastedText(pastedText)
+            : this.getFilteredIntegerPastedText(pastedText);
+        const finalValue = this.buildFinalPasteValue(target, filteredText, isCurrency, maxDecimals);
+        // Update the input
+        target.value = finalValue;
+        this.control.setValue(finalValue, { emitEvent: false });
+        this.validateIntegerDigits(finalValue, maxDecimals);
+        this.clearNumericError();
+        this.valueChange.emit({ name: this.field.name, value: finalValue });
+        this.control.markAsTouched();
+        this.setCursorAfterPaste(target, filteredText, finalValue);
+    }
+    /**
+     * Filter pasted text for currency input (allows digits and decimal point)
+     */
+    getFilteredCurrencyPastedText(pastedText) {
+        return pastedText.replaceAll(/[^0-9.]/g, '');
+    }
+    /**
+     * Filter pasted text for integer-only input (allows digits only)
+     */
+    getFilteredIntegerPastedText(pastedText) {
+        return pastedText.replaceAll(/\D/g, '');
+    }
+    /**
+     * Build final value after paste operation
+     */
+    buildFinalPasteValue(target, filteredText, isCurrency, maxDecimals) {
+        const currentValue = target.value;
+        const start = target.selectionStart;
+        const end = target.selectionEnd;
+        let finalValue;
+        // If selection API is not supported or no selection, replace entire content
+        if (start === null || end === null || (start === 0 && end === 0)) {
+            finalValue = filteredText;
+        }
+        else {
+            finalValue = currentValue.substring(0, start) + filteredText + currentValue.substring(end);
+        }
+        return isCurrency ? this.applyDecimalRestrictions(finalValue, maxDecimals) : finalValue;
+    }
+    /**
+     * Apply decimal restrictions for currency fields
+     */
+    applyDecimalRestrictions(value, maxDecimals) {
+        let result = value;
+        // Ensure only one decimal point
+        const parts = result.split('.');
+        if (parts.length > 2) {
+            result = parts[0] + '.' + parts.slice(1).join('');
+        }
+        // Restrict to maxDecimals decimal places
+        if (result.includes('.')) {
+            const [intPart, decPart] = result.split('.');
+            if (decPart.length > maxDecimals) {
+                result = intPart + '.' + decPart.slice(0, maxDecimals);
+            }
+        }
+        return result;
+    }
+    /**
+     * Validate integer digit limit and set/clear errors
+     */
+    validateIntegerDigits(value, maxDecimals) {
+        if (this.field.type !== 'number' || !this.field.maxIntegerDigits) {
+            return;
+        }
+        const maxIntDigits = this.field.maxIntegerDigits ?? 15;
+        const [intPart] = value.includes('.') ? value.split('.') : [value];
+        if (intPart.length > maxIntDigits) {
+            this.setMaxIntegerDigitsError(intPart.length, maxIntDigits, maxDecimals);
+        }
+        else {
+            this.clearMaxIntegerDigitsError();
+        }
+    }
+    /**
+     * Set max integer digits error
+     */
+    setMaxIntegerDigitsError(actual, max, maxDecimals) {
+        const currentErrors = this.control.errors || {};
+        this.control.setErrors({
+            ...currentErrors,
+            maxIntegerDigits: {
+                actual,
+                max,
+                maxDecimals,
+                message: `Please shorten your input to ${max} whole digits and ${maxDecimals} decimal or fewer.`,
+            },
+        });
+    }
+    /**
+     * Clear max integer digits error if present
+     */
+    clearMaxIntegerDigitsError() {
+        if (!this.control.hasError('maxIntegerDigits')) {
+            return;
+        }
+        const errors = { ...this.control.errors };
+        delete errors['maxIntegerDigits'];
+        this.control.setErrors(Object.keys(errors).length ? errors : null);
+    }
+    /**
+     * Clear numeric error if present
+     */
+    clearNumericError() {
+        if (!this.control.hasError('numeric')) {
+            return;
+        }
+        const errors = { ...this.control.errors };
+        delete errors['numeric'];
+        this.control.setErrors(Object.keys(errors).length ? errors : null);
+    }
+    /**
+     * Set cursor position after paste operation
+     */
+    setCursorAfterPaste(target, filteredText, finalValue) {
+        // Input type="number" does not support selection APIs
+        if (target.type === 'number') {
+            return;
+        }
+        const start = target.selectionStart || 0;
+        const newCursorPos = start + filteredText.length;
+        const actualPos = Math.min(newCursorPos, finalValue.length);
+        target.setSelectionRange(actualPos, actualPos);
+    }
+    // Format number with comma separators
+    // Uses string-based formatting for large numbers to preserve precision
+    formatCurrencyWithCommas(value, maxDecimals = 2) {
+        if (this.field.type !== 'number' || !this.field.isCurrency)
+            return value.toString();
+        const strValue = value.toString();
+        // Return original value for empty or invalid inputs
+        if (!strValue || strValue === 'NaN')
+            return '';
+        // Use string-based formatting to preserve precision for large numbers
+        const [integerPart, decimalPart] = strValue.includes('.')
+            ? strValue.split('.')
+            : [strValue, ''];
+        // Format integer part with comma separators (every 3 digits from right)
+        // Using iterative approach instead of regex to avoid ReDoS concerns
+        let formattedInteger = '';
+        const len = integerPart.length;
+        for (let i = 0; i < len; i++) {
+            if (i > 0 && (len - i) % 3 === 0) {
+                formattedInteger += ',';
+            }
+            formattedInteger += integerPart[i];
+        }
+        // Format decimal part (pad or truncate to maxDecimals)
+        let formattedDecimal = decimalPart || '';
+        if (formattedDecimal.length < maxDecimals) {
+            formattedDecimal = formattedDecimal.padEnd(maxDecimals, '0');
+        }
+        else if (formattedDecimal.length > maxDecimals) {
+            formattedDecimal = formattedDecimal.slice(0, maxDecimals);
+        }
+        return maxDecimals > 0 ? `${formattedInteger}.${formattedDecimal}` : formattedInteger;
+    }
+    handleNumberKeydown(event, isCurrency) {
+        if (isCurrency)
+            return;
+        // Allow: Backspace, Delete, Tab, Arrow keys
+        if (['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+            return;
+        }
+        // Allow clipboard operations (Ctrl+V, Ctrl+C, Ctrl+X, Cmd+V, Cmd+C, Cmd+X)
+        // and selection (Ctrl+A, Cmd+A)
+        if (event.ctrlKey || event.metaKey) {
+            return;
+        }
+        // Block everything that is not 0-9
+        if (!/^\d$/.test(event.key)) {
+            event.preventDefault();
+        }
+    }
+    // Get locale from currency code using currencyMeta
+    getLocaleFromCurrency(currencyCode) {
+        const currencyObj = this.currencyMeta.find((c) => c.code === currencyCode);
+        return currencyObj?.locale || this.defaultLocale;
+    }
+    showPassword = false;
+    passwordStrengthLabel = '';
+    strengthClass = '';
+    passwordStrengthPercent = 0;
+    isPasswordFocused = false;
+    onPasswordFocus() {
+        this.hasFocus.set(true);
+        this.isPasswordFocused = true;
+        this.cdr.detectChanges();
+    }
+    onPasswordBlur() {
+        this.isPasswordFocused = false;
+        this.cdr.detectChanges();
+    }
+    handlePasswordBlur(e) {
+        this.handleBlur(e); // Original blur functionality (sets hasFocus to false)
+        this.onPasswordBlur(); // Hide password feedback
+    }
+    checkPasswordStrength(value) {
+        if (!value || this.field.type !== 'password') {
+            this.passwordStrengthLabel = '';
+            this.strengthClass = '';
+            this.passwordStrengthPercent = 0;
+            return;
+        }
+        let score = 0;
+        if (value.length >= 8)
+            score++;
+        if (/[A-Z]/.test(value))
+            score++;
+        if (/\d/.test(value))
+            score++;
+        if (/[\W_]/.test(value))
+            score++;
+        if (score <= 1) {
+            this.passwordStrengthLabel = this.field.weakLabel || 'Weak';
+            this.strengthClass = 'text-[var(--RHB-Red-100)]';
+            this.passwordStrengthPercent = 25;
+        }
+        else if (score === 2 || score === 3) {
+            this.passwordStrengthLabel = this.field.mediumLabel || 'Medium';
+            this.strengthClass = 'text-[var(--Orange-100)]';
+            this.passwordStrengthPercent = score === 2 ? 50 : 75;
+        }
+        else {
+            this.passwordStrengthLabel = this.field.strongLabel || 'Strong';
+            this.strengthClass = 'text-[var(--Green-100)]';
+            this.passwordStrengthPercent = 100;
+        }
+    }
+    increment() {
+        if (this.field.type !== 'number')
+            return;
+        const step = this.field.step || 1;
+        const current = Number(this.control.value) || 0;
+        let nextValue = current + step;
+        if (typeof this.field.max === 'number') {
+            nextValue = Math.min(nextValue, this.field.max);
+        }
+        this.control.setValue(nextValue);
+        this.control.markAsTouched();
+        this.valueChange.emit({ name: this.field.name, value: nextValue });
+        // Update display value for currency inputs
+        if (this.field.isCurrency) {
+            setTimeout(() => {
+                const inputElement = document.getElementById(this.uniqueId);
+                if (inputElement) {
+                    inputElement.value = this.formatCurrencyWithCommas(nextValue);
+                }
+            });
+        }
+    }
+    decrement() {
+        if (this.field.type !== 'number')
+            return;
+        const step = this.field.step || 1;
+        const current = Number(this.control.value) || 0;
+        let nextValue = current - step;
+        // Ensure minimum value is 0 (no negative values)
+        const minValue = Math.max(this.field.min || 0, 0);
+        nextValue = Math.max(nextValue, minValue);
+        this.control.setValue(nextValue);
+        this.control.markAsTouched();
+        this.valueChange.emit({ name: this.field.name, value: nextValue });
+        // Update display value for currency inputs
+        if (this.field.isCurrency) {
+            setTimeout(() => {
+                const inputElement = document.getElementById(this.uniqueId);
+                if (inputElement) {
+                    inputElement.value = this.formatCurrencyWithCommas(nextValue);
+                }
+            });
+        }
+    }
+    copyText(e) {
+        e.stopPropagation();
+        if (!this.control.value)
+            return;
+        navigator.clipboard.writeText(this.control.value).then(() => {
+            if (this.toastService) {
+                this.toastService.success('Copied to clipboard', 'Success', 1000);
+            }
+        });
+    }
+    /**
+     * Set up visibility condition listener
+     * Watches the dependent field and shows/hides this field based on conditions
+     */
+    setupVisibilityCondition() {
+        if (!this.field.visibilityCondition || !this.form)
+            return;
+        const { dependsOn } = this.field.visibilityCondition;
+        const dependentControl = this.form.get(dependsOn);
+        if (!dependentControl) {
+            return;
+        }
+        // Initial visibility check
+        this.updateVisibility(dependentControl.value);
+        // Subscribe to value changes
+        dependentControl.valueChanges.subscribe((value) => {
+            this.updateVisibility(value);
+        });
+    }
+    /**
+     * Update field visibility based on dependent field value
+     */
+    updateVisibility(dependentValue) {
+        if (!this.field.visibilityCondition)
+            return;
+        const { showWhen, hideWhen } = this.field.visibilityCondition;
+        let shouldBeVisible = false;
+        // Check showWhen condition
+        if (showWhen !== undefined) {
+            if (Array.isArray(showWhen)) {
+                shouldBeVisible = showWhen.includes(dependentValue);
+            }
+            else {
+                shouldBeVisible = dependentValue === showWhen;
+            }
+        }
+        // Check hideWhen condition (overrides showWhen)
+        if (hideWhen !== undefined) {
+            const shouldHide = Array.isArray(hideWhen)
+                ? hideWhen.includes(dependentValue)
+                : dependentValue === hideWhen;
+            if (shouldHide) {
+                shouldBeVisible = false;
+            }
+        }
+        // Update visibility
+        this.isVisible.set(shouldBeVisible);
+        // Only clear value when hiding if there's no initial value
+        // This preserves data when editing existing records
+        if (!shouldBeVisible && this.control && !this.control.value) {
+            this.control.setValue(null);
+            this.control.markAsUntouched();
+            this.control.updateValueAndValidity();
+        }
+        this.cdr.detectChanges();
+    }
+    showFormFieldMessage(control, helperText) {
+        if (this.helperHandle) {
+            return this.helperHandle.showFormFieldMessage(control, helperText);
+        }
+        const isError = control?.touched && !!control?.errors;
+        const isHelper = !isError && Boolean(helperText ?? '');
+        return isError || isHelper;
+    }
+    getTranslatedLabel(label) {
+        if (!label)
+            return '';
+        try {
+            const labelStr = label.toString();
+            return (labelStr
+                .split('::')
+                .map((part) => part.trim())
+                .filter((part) => !!part)
+                .map((part) => this.translate.instant(part))
+                .join(' ') + this.getEndSymbol(labelStr));
+        }
+        catch (e) {
+            console.warn('Translation failed in getTranslatedLabel:', label, e);
+            return label;
+        }
+    }
+    getEndSymbol(label) {
+        return label.toString().includes('required') && label.toString().includes('FNFieldMessage')
+            ? '.'
+            : '';
+    }
+    // --- ICON LOGIC ---
+    updateAllIcons() {
+        // We'll call this after ViewInit or when inputs change
+        setTimeout(() => {
+            this.iconContainers?.forEach((container) => {
+                const name = container.nativeElement.getAttribute('data-icon-name');
+                const variant = container.nativeElement.getAttribute('data-icon-variant') || 'Line';
+                const size = (container.nativeElement.getAttribute('data-icon-size') ||
+                    'medium');
+                const color = container.nativeElement.getAttribute('data-icon-color');
+                const disabled = container.nativeElement.getAttribute('data-icon-disabled') === 'true';
+                if (name) {
+                    this.loadIconToContainer(container.nativeElement, name, variant, size, color, disabled);
+                }
+            });
+        }, 0);
+    }
+    loadIconToContainer(container, name, variant, sizeName, color, disabled) {
+        const size = this.sizeMap[sizeName];
+        const iconPath = this.getIconPath(name, variant, size);
+        if (!iconPath) {
+            container.innerHTML = '';
+            return;
+        }
+        this.http.get(iconPath, { responseType: 'text' }).subscribe({
+            next: (raw) => {
+                try {
+                    const parser = new DOMParser();
+                    const doc = parser.parseFromString(raw, 'image/svg+xml');
+                    const svg = doc.querySelector('svg');
+                    if (!svg) {
+                        container.innerHTML = '';
+                        return;
+                    }
+                    // SVG Normalization logic
+                    for (const s of svg.querySelectorAll('style'))
+                        s.remove();
+                    if (color) {
+                        for (const el of svg.querySelectorAll('*')) {
+                            const style = el.getAttribute('style');
+                            if (style) {
+                                const cleaned = style
+                                    .replaceAll(/fill\s*:\s*[^;]+;?/gi, '')
+                                    .replaceAll(/stroke\s*:\s*[^;]+;?/gi, '');
+                                if (cleaned)
+                                    el.setAttribute('style', cleaned);
+                                else
+                                    el.removeAttribute('style');
+                            }
+                            const fill = el.getAttribute('fill');
+                            if (fill && fill !== 'none' && !fill.startsWith('url(')) {
+                                el.setAttribute('fill', 'currentColor');
+                            }
+                            const stroke = el.getAttribute('stroke');
+                            if (stroke && stroke !== 'none' && !stroke.startsWith('url(')) {
+                                el.setAttribute('stroke', 'currentColor');
+                            }
+                        }
+                    }
+                    svg.removeAttribute('width');
+                    svg.removeAttribute('height');
+                    if (!svg.getAttribute('viewBox')) {
+                        svg.setAttribute('viewBox', `0 0 ${size} ${size}`);
+                    }
+                    svg.setAttribute('preserveAspectRatio', 'xMidYMid meet');
+                    svg.setAttribute('focusable', 'false');
+                    svg.setAttribute('aria-hidden', 'true');
+                    svg.setAttribute('width', '100%');
+                    svg.setAttribute('height', '100%');
+                    const style = `;display:block;max-width:100%;max-height:100%;${disabled ? 'opacity:0.5;cursor:not-allowed;' : ''}`;
+                    svg.setAttribute('style', (svg.getAttribute('style') || '') + style);
+                    container.innerHTML = '';
+                    container.appendChild(svg);
+                    this.cdr.detectChanges();
+                }
+                catch (error) {
+                    console.error(`[fn-input] Error parsing SVG for icon "${name}":`, error);
+                    container.innerHTML = '';
+                }
+            },
+            error: () => {
+                container.innerHTML = '';
+                this.cdr.detectChanges();
+            },
+        });
+    }
+    getIconPath(icon, variant, size) {
+        if (!icon)
+            return null;
+        if (size === 16 || size === 10) {
+            return `assets/icons/${variant}/${size}px/${icon}.svg`;
+        }
+        return `assets/icons/${variant}/${size}px/${icon}--${size}.svg`;
+    }
+    // --- MESSAGE LOGIC ---
+    getFieldMessage() {
+        if (!this.control)
+            return this.field?.helperText || '';
+        if (this.control.touched && this.control.errors) {
+            for (const key of Object.keys(this.control.errors)) {
+                const errorValue = this.control.errors[key];
+                if (errorValue && typeof errorValue === 'object' && errorValue.message) {
+                    return errorValue.message;
+                }
+                if (this.field?.errors?.[key]) {
+                    return this.field.errors[key];
+                }
+            }
+            return (this.field?.errors?.['default'] ||
+                'Please enter ' + this.translate.instant(this.field?.label));
+        }
+        return this.field?.helperText || '';
+    }
+    get isError() {
+        return !!(this.control?.touched && this.control?.errors);
+    }
+    get isSuccess() {
+        return !!(this.control?.valid && this.control?.touched);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FNInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.2", type: FNInput, isStandalone: true, selector: "fn-input", inputs: { field: "field", helperHandle: "helperHandle", toastService: "toastService", currencyMeta: "currencyMeta", defaultLocale: "defaultLocale", form: "form" }, outputs: { valueChange: "valueChange", fieldBlur: "fieldBlur" }, viewQueries: [{ propertyName: "textareaElement", first: true, predicate: ["fnTextarea"], descendants: true }, { propertyName: "iconContainers", predicate: ["iconContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "@if (field.name && isVisible() && !field.hidden) {\r\n  <div class=\"flex flex-col gap-2\">\r\n    @if (field.type! !== 'hidden') {\r\n      <label\r\n        [for]=\"uniqueId\"\r\n        class=\"fn-label !whitespace-normal\"\r\n        [ngClass]=\"\r\n          (field.statusLabel ? field.statusLabel : field.labelVariant || 'p4') +\r\n          ' ' +\r\n          (field.className || '')\r\n        \"\r\n        [style.color]=\"field.color || null\"\r\n      >\r\n        {{ getTranslatedLabel(field.label) }}\r\n        @if (!field.required && !field.hideOptional) {\r\n          <span>&nbsp;(Optional)</span>\r\n        }\r\n      </label>\r\n    }\r\n\r\n    <ng-container>\r\n      @switch (field.type) {\r\n        <!-- Textarea Field -->\r\n        @case ('textarea') {\r\n          <textarea\r\n            #fnTextarea\r\n            style=\"resize: none\"\r\n            [name]=\"field.name\"\r\n            [id]=\"uniqueId\"\r\n            [required]=\"field.required || false\"\r\n            [placeholder]=\"field.placeholder || '' | translate\"\r\n            [disabled]=\"field.disabled || false\"\r\n            [rows]=\"field.rows || 1\"\r\n            [readonly]=\"field.readOnly || false\"\r\n            [formControl]=\"control\"\r\n            (input)=\"handleTextArea($event)\"\r\n            (blur)=\"handleBlur($event)\"\r\n            class=\"peer w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)]\"\r\n            [ngClass]=\"{\r\n              'opacity-100': control.disabled || field.readOnly,\r\n              '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n              '!border-[var(--RHB-Blue-100)]': hasFocus(),\r\n              '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n              '!border-[var(--Green-100)]':\r\n                field['hasSuccessBorder'] && control.valid && !control.errors,\r\n            }\"\r\n            (focus)=\"onFocus()\"\r\n          ></textarea>\r\n        }\r\n\r\n        <!-- Password Field -->\r\n\r\n        @case ('password') {\r\n          <div class=\"relative w-full\">\r\n            <input\r\n              [type]=\"showPassword ? 'text' : 'password'\"\r\n              [id]=\"uniqueId\"\r\n              [required]=\"field.required || false\"\r\n              [disabled]=\"field.disabled || false\"\r\n              [formControl]=\"control\"\r\n              [placeholder]=\"field.placeholder || '' | translate\"\r\n              [readonly]=\"field.readOnly || false\"\r\n              (input)=\"isAlphanumeric ? handleAlphanumericInput($event) : handleInput($event)\"\r\n              (focus)=\"onPasswordFocus()\"\r\n              (blur)=\"handlePasswordBlur($event)\"\r\n              class=\"peer h-8 w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)] overflow-hidden text-ellipsis\"\r\n              [ngClass]=\"{\r\n                'opacity-100': control.disabled || field.readOnly,\r\n                '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n                '!border-[var(--RHB-Blue-100)]': hasFocus() && !control.disabled,\r\n                '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n                '!border-[var(--Green-100)]': field['hasSuccessBorder'] && control.valid,\r\n                'pr-12': field.toggleMask && !field.isCopyText,\r\n                'pr-16': field.isCopyText && !field.toggleMask,\r\n                'pr-24': field.toggleMask && field.isCopyText && !field.hasGenerateKey,\r\n                'pr-32': field.toggleMask && field.isCopyText && field.hasGenerateKey,\r\n              }\"\r\n            />\r\n            @if (field.toggleMask && !field.isCopyText) {\r\n              <!-- Only Eye Icon -->\r\n              <span\r\n                class=\"absolute right-0 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"showPassword = !showPassword\"\r\n                (keydown)=\"showPassword = !showPassword\"\r\n              >\r\n                @if (!showPassword) {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-close\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-open\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                }\r\n              </span>\r\n            } @else if (field.isCopyText && !field.toggleMask) {\r\n              <!-- Only Copy Icon -->\r\n              <span\r\n                class=\"absolute right-12 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"copyText($event)\"\r\n                (keydown)=\"copyText($event)\"\r\n              >\r\n                <div #iconContainer class=\"icon-container\" data-icon-name=\"two-square\"></div>\r\n              </span>\r\n              @if (field.hasGenerateKey) {\r\n                <span\r\n                  class=\"absolute right-4 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                  (click)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                  (keydown)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"two-square\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                  ></div>\r\n                </span>\r\n              }\r\n            } @else if (field.toggleMask && field.isCopyText) {\r\n              <!-- Both Eye + Copy Icons -->\r\n              <span\r\n                class=\"absolute right-20 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"showPassword = !showPassword\"\r\n                (keydown)=\"showPassword = !showPassword\"\r\n              >\r\n                @if (!showPassword) {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-close\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-open\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                }\r\n              </span>\r\n\r\n              <span\r\n                class=\"absolute right-12 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"copyText($event)\"\r\n                (keydown)=\"copyText($event)\"\r\n              >\r\n                <div #iconContainer class=\"icon-container\" data-icon-name=\"two-square\"></div>\r\n              </span>\r\n\r\n              @if (field.hasGenerateKey) {\r\n                <span\r\n                  class=\"absolute right-4 top-0 text-[var(--Base-10)]\"\r\n                  [ngClass]=\"{\r\n                    'cursor-pointer hover:text-[var(--RHB-Blue-100)]':\r\n                      control.value && control.value.length > 0,\r\n                    'cursor-not-allowed opacity-50': !control.value || control.value.length === 0,\r\n                  }\"\r\n                  (click)=\"\r\n                    control.value &&\r\n                      control.value.length > 0 &&\r\n                      field.onGenerateKey &&\r\n                      field.onGenerateKey()\r\n                  \"\r\n                  (keydown)=\"\r\n                    control.value &&\r\n                      control.value.length > 0 &&\r\n                      field.onGenerateKey &&\r\n                      field.onGenerateKey()\r\n                  \"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"round-arrow-top-left\"\r\n                  ></div>\r\n                </span>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Number Field -->\r\n        @case ('number') {\r\n          <input\r\n            [type]=\"field.type === 'number' && field.isCurrency ? 'text' : 'number'\"\r\n            [name]=\"field.name\"\r\n            [id]=\"uniqueId\"\r\n            [required]=\"field.required || false\"\r\n            [placeholder]=\"field.placeholder || '' | translate\"\r\n            [disabled]=\"isDisabled || false\"\r\n            [readOnly]=\"field.readOnly || false\"\r\n            [formControl]=\"control\"\r\n            [min]=\"field.type === 'number' && !field.isCurrency ? 0 : null\"\r\n            [max]=\"field.type === 'number' && !field.isCurrency ? field.max : null\"\r\n            [step]=\"field.type === 'number' && !field.isCurrency ? field.step || 1 : null\"\r\n            (input)=\"handleNumberInput($event, field?.minFractionDigits || 2)\"\r\n            (paste)=\"handleNumberPaste($event, field?.minFractionDigits || 2)\"\r\n            (blur)=\"handleBlur($event, field?.minFractionDigits || 2)\"\r\n            (keydown)=\"handleNumberKeydown($event, field?.isCurrency || false)\"\r\n            class=\"peer h-8 w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)]\"\r\n            [ngClass]=\"{\r\n              'opacity-100': control.disabled || field.readOnly,\r\n              '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n              '!border-[var(--RHB-Blue-100)]': hasFocus(),\r\n              '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n              '!border-[var(--Green-100)]':\r\n                field['hasSuccessBorder'] && control.valid && !control.errors,\r\n              'text-[24px] font-bold leading-[32px]': field.isCurrency,\r\n            }\"\r\n            (focus)=\"onFocus()\"\r\n          />\r\n        }\r\n\r\n        <!-- Default Input Field (text, email, etc.) -->\r\n        @default {\r\n          <div class=\"relative z-0\">\r\n            <input\r\n              [type]=\"field.type\"\r\n              [name]=\"field.name\"\r\n              [id]=\"uniqueId\"\r\n              [required]=\"field.required || false\"\r\n              [placeholder]=\"field.placeholder || '' | translate\"\r\n              [disabled]=\"field.disabled || false\"\r\n              [readOnly]=\"field.readOnly || false\"\r\n              [formControl]=\"control\"\r\n              (input)=\"\r\n                isEmailField\r\n                  ? handleEmailInput($event)\r\n                  : field.type === 'text' && isAlphanumeric\r\n                    ? handleAlphanumericInput($event)\r\n                    : handleInput($event)\r\n              \"\r\n              (blur)=\"handleBlur($event)\"\r\n              class=\"peer h-8 w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)]\"\r\n              [ngClass]=\"{\r\n                'opacity-100': control.disabled || field.readOnly,\r\n                '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n                '!border-[var(--RHB-Blue-100)]': hasFocus(),\r\n                '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n                '!border-[var(--Green-100)]':\r\n                  field['hasSuccessBorder'] && control.valid && !control.errors,\r\n                'pr-8': field.icon,\r\n              }\"\r\n              (focus)=\"onFocus()\"\r\n            />\r\n            @if (field.icon) {\r\n              <span class=\"absolute bottom-2 right-0.5 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"bg-white\"\r\n                  [attr.data-icon-name]=\"field.icon.name\"\r\n                  [attr.data-icon-variant]=\"field.icon.variant\"\r\n                  [attr.data-icon-size]=\"getIconSizeName(field.icon.size)\"\r\n                  [attr.data-icon-color]=\"control.disabled ? 'var(--Base-30)' : ''\"\r\n                ></div>\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n\r\n    @if (showFormFieldMessage(control, helperText)) {\r\n      <div class=\"fn-field-message-container\">\r\n        <span\r\n          class=\"fn-field-message-text\"\r\n          [ngClass]=\"{\r\n            error: isError,\r\n            success: isSuccess,\r\n          }\"\r\n        >\r\n          {{ getFieldMessage() | translate }}\r\n        </span>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".fn-label-container{display:flex;flex-direction:column;gap:4px;width:100%}.fn-label-text{color:var(--fn-sys-color-on-surface-variant);font-family:var(--fn-sys-font-family-base);font-size:14px;font-weight:500;line-height:20px}.fn-label-text.disabled{color:var(--fn-sys-color-outline)}.fn-label-text.error{color:var(--fn-sys-color-error)}.fn-field-message-container{display:flex;align-items:center;gap:4px;margin-top:4px;min-height:20px}.fn-field-message-text{font-family:var(--fn-sys-font-family-base);font-size:12px;font-weight:400;line-height:16px;color:var(--fn-sys-color-on-surface-variant)}.fn-field-message-text.error{color:var(--fn-sys-color-error)}.fn-field-message-text.success{color:var(--fn-sys-color-success, #2e7d32)}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i2.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: TranslateModule }, { kind: "pipe", type: i3.TranslatePipe, name: "translate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.2", ngImport: i0, type: FNInput, decorators: [{
+            type: Component,
+            args: [{ selector: 'fn-input', standalone: true, imports: [FormsModule, CommonModule, ReactiveFormsModule, TranslateModule], changeDetection: ChangeDetectionStrategy.OnPush, template: "@if (field.name && isVisible() && !field.hidden) {\r\n  <div class=\"flex flex-col gap-2\">\r\n    @if (field.type! !== 'hidden') {\r\n      <label\r\n        [for]=\"uniqueId\"\r\n        class=\"fn-label !whitespace-normal\"\r\n        [ngClass]=\"\r\n          (field.statusLabel ? field.statusLabel : field.labelVariant || 'p4') +\r\n          ' ' +\r\n          (field.className || '')\r\n        \"\r\n        [style.color]=\"field.color || null\"\r\n      >\r\n        {{ getTranslatedLabel(field.label) }}\r\n        @if (!field.required && !field.hideOptional) {\r\n          <span>&nbsp;(Optional)</span>\r\n        }\r\n      </label>\r\n    }\r\n\r\n    <ng-container>\r\n      @switch (field.type) {\r\n        <!-- Textarea Field -->\r\n        @case ('textarea') {\r\n          <textarea\r\n            #fnTextarea\r\n            style=\"resize: none\"\r\n            [name]=\"field.name\"\r\n            [id]=\"uniqueId\"\r\n            [required]=\"field.required || false\"\r\n            [placeholder]=\"field.placeholder || '' | translate\"\r\n            [disabled]=\"field.disabled || false\"\r\n            [rows]=\"field.rows || 1\"\r\n            [readonly]=\"field.readOnly || false\"\r\n            [formControl]=\"control\"\r\n            (input)=\"handleTextArea($event)\"\r\n            (blur)=\"handleBlur($event)\"\r\n            class=\"peer w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)]\"\r\n            [ngClass]=\"{\r\n              'opacity-100': control.disabled || field.readOnly,\r\n              '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n              '!border-[var(--RHB-Blue-100)]': hasFocus(),\r\n              '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n              '!border-[var(--Green-100)]':\r\n                field['hasSuccessBorder'] && control.valid && !control.errors,\r\n            }\"\r\n            (focus)=\"onFocus()\"\r\n          ></textarea>\r\n        }\r\n\r\n        <!-- Password Field -->\r\n\r\n        @case ('password') {\r\n          <div class=\"relative w-full\">\r\n            <input\r\n              [type]=\"showPassword ? 'text' : 'password'\"\r\n              [id]=\"uniqueId\"\r\n              [required]=\"field.required || false\"\r\n              [disabled]=\"field.disabled || false\"\r\n              [formControl]=\"control\"\r\n              [placeholder]=\"field.placeholder || '' | translate\"\r\n              [readonly]=\"field.readOnly || false\"\r\n              (input)=\"isAlphanumeric ? handleAlphanumericInput($event) : handleInput($event)\"\r\n              (focus)=\"onPasswordFocus()\"\r\n              (blur)=\"handlePasswordBlur($event)\"\r\n              class=\"peer h-8 w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)] overflow-hidden text-ellipsis\"\r\n              [ngClass]=\"{\r\n                'opacity-100': control.disabled || field.readOnly,\r\n                '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n                '!border-[var(--RHB-Blue-100)]': hasFocus() && !control.disabled,\r\n                '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n                '!border-[var(--Green-100)]': field['hasSuccessBorder'] && control.valid,\r\n                'pr-12': field.toggleMask && !field.isCopyText,\r\n                'pr-16': field.isCopyText && !field.toggleMask,\r\n                'pr-24': field.toggleMask && field.isCopyText && !field.hasGenerateKey,\r\n                'pr-32': field.toggleMask && field.isCopyText && field.hasGenerateKey,\r\n              }\"\r\n            />\r\n            @if (field.toggleMask && !field.isCopyText) {\r\n              <!-- Only Eye Icon -->\r\n              <span\r\n                class=\"absolute right-0 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"showPassword = !showPassword\"\r\n                (keydown)=\"showPassword = !showPassword\"\r\n              >\r\n                @if (!showPassword) {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-close\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-open\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                }\r\n              </span>\r\n            } @else if (field.isCopyText && !field.toggleMask) {\r\n              <!-- Only Copy Icon -->\r\n              <span\r\n                class=\"absolute right-12 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"copyText($event)\"\r\n                (keydown)=\"copyText($event)\"\r\n              >\r\n                <div #iconContainer class=\"icon-container\" data-icon-name=\"two-square\"></div>\r\n              </span>\r\n              @if (field.hasGenerateKey) {\r\n                <span\r\n                  class=\"absolute right-4 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                  (click)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                  (keydown)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"two-square\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                  ></div>\r\n                </span>\r\n              }\r\n            } @else if (field.toggleMask && field.isCopyText) {\r\n              <!-- Both Eye + Copy Icons -->\r\n              <span\r\n                class=\"absolute right-20 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"showPassword = !showPassword\"\r\n                (keydown)=\"showPassword = !showPassword\"\r\n              >\r\n                @if (!showPassword) {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-close\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                } @else {\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"eye-open\"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"large\"\r\n                    data-icon-color=\"var(--Base-100)\"\r\n                  ></div>\r\n                }\r\n              </span>\r\n\r\n              <span\r\n                class=\"absolute right-12 top-0 cursor-pointer text-[var(--Base-10)] hover:text-[var(--RHB-Blue-100)]\"\r\n                (click)=\"copyText($event)\"\r\n                (keydown)=\"copyText($event)\"\r\n              >\r\n                <div #iconContainer class=\"icon-container\" data-icon-name=\"two-square\"></div>\r\n              </span>\r\n\r\n              @if (field.hasGenerateKey) {\r\n                <span\r\n                  class=\"absolute right-4 top-0 text-[var(--Base-10)]\"\r\n                  [ngClass]=\"{\r\n                    'cursor-pointer hover:text-[var(--RHB-Blue-100)]':\r\n                      control.value && control.value.length > 0,\r\n                    'cursor-not-allowed opacity-50': !control.value || control.value.length === 0,\r\n                  }\"\r\n                  (click)=\"\r\n                    control.value &&\r\n                      control.value.length > 0 &&\r\n                      field.onGenerateKey &&\r\n                      field.onGenerateKey()\r\n                  \"\r\n                  (keydown)=\"\r\n                    control.value &&\r\n                      control.value.length > 0 &&\r\n                      field.onGenerateKey &&\r\n                      field.onGenerateKey()\r\n                  \"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"round-arrow-top-left\"\r\n                  ></div>\r\n                </span>\r\n              }\r\n            }\r\n          </div>\r\n        }\r\n\r\n        <!-- Number Field -->\r\n        @case ('number') {\r\n          <input\r\n            [type]=\"field.type === 'number' && field.isCurrency ? 'text' : 'number'\"\r\n            [name]=\"field.name\"\r\n            [id]=\"uniqueId\"\r\n            [required]=\"field.required || false\"\r\n            [placeholder]=\"field.placeholder || '' | translate\"\r\n            [disabled]=\"isDisabled || false\"\r\n            [readOnly]=\"field.readOnly || false\"\r\n            [formControl]=\"control\"\r\n            [min]=\"field.type === 'number' && !field.isCurrency ? 0 : null\"\r\n            [max]=\"field.type === 'number' && !field.isCurrency ? field.max : null\"\r\n            [step]=\"field.type === 'number' && !field.isCurrency ? field.step || 1 : null\"\r\n            (input)=\"handleNumberInput($event, field?.minFractionDigits || 2)\"\r\n            (paste)=\"handleNumberPaste($event, field?.minFractionDigits || 2)\"\r\n            (blur)=\"handleBlur($event, field?.minFractionDigits || 2)\"\r\n            (keydown)=\"handleNumberKeydown($event, field?.isCurrency || false)\"\r\n            class=\"peer h-8 w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)]\"\r\n            [ngClass]=\"{\r\n              'opacity-100': control.disabled || field.readOnly,\r\n              '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n              '!border-[var(--RHB-Blue-100)]': hasFocus(),\r\n              '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n              '!border-[var(--Green-100)]':\r\n                field['hasSuccessBorder'] && control.valid && !control.errors,\r\n              'text-[24px] font-bold leading-[32px]': field.isCurrency,\r\n            }\"\r\n            (focus)=\"onFocus()\"\r\n          />\r\n        }\r\n\r\n        <!-- Default Input Field (text, email, etc.) -->\r\n        @default {\r\n          <div class=\"relative z-0\">\r\n            <input\r\n              [type]=\"field.type\"\r\n              [name]=\"field.name\"\r\n              [id]=\"uniqueId\"\r\n              [required]=\"field.required || false\"\r\n              [placeholder]=\"field.placeholder || '' | translate\"\r\n              [disabled]=\"field.disabled || false\"\r\n              [readOnly]=\"field.readOnly || false\"\r\n              [formControl]=\"control\"\r\n              (input)=\"\r\n                isEmailField\r\n                  ? handleEmailInput($event)\r\n                  : field.type === 'text' && isAlphanumeric\r\n                    ? handleAlphanumericInput($event)\r\n                    : handleInput($event)\r\n              \"\r\n              (blur)=\"handleBlur($event)\"\r\n              class=\"peer h-8 w-full leading-6 rounded-none border-0 border-b border-[var(--Base-30)] pb-1.75 bg-transparent text-base text-[var(--Base-100)] focus:outline-none focus:ring-0 placeholder:!text-[var(--Base-50)] placeholder:!text-base focus:[caret-color:var(--RHB-Blue-100)]\"\r\n              [ngClass]=\"{\r\n                'opacity-100': control.disabled || field.readOnly,\r\n                '!text-[var(--Base-30)]': control.disabled || field.readOnly,\r\n                '!border-[var(--RHB-Blue-100)]': hasFocus(),\r\n                '!border-[var(--RHB-Red-100)]': control.touched && control.errors,\r\n                '!border-[var(--Green-100)]':\r\n                  field['hasSuccessBorder'] && control.valid && !control.errors,\r\n                'pr-8': field.icon,\r\n              }\"\r\n              (focus)=\"onFocus()\"\r\n            />\r\n            @if (field.icon) {\r\n              <span class=\"absolute bottom-2 right-0.5 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"bg-white\"\r\n                  [attr.data-icon-name]=\"field.icon.name\"\r\n                  [attr.data-icon-variant]=\"field.icon.variant\"\r\n                  [attr.data-icon-size]=\"getIconSizeName(field.icon.size)\"\r\n                  [attr.data-icon-color]=\"control.disabled ? 'var(--Base-30)' : ''\"\r\n                ></div>\r\n              </span>\r\n            }\r\n          </div>\r\n        }\r\n      }\r\n    </ng-container>\r\n\r\n    @if (showFormFieldMessage(control, helperText)) {\r\n      <div class=\"fn-field-message-container\">\r\n        <span\r\n          class=\"fn-field-message-text\"\r\n          [ngClass]=\"{\r\n            error: isError,\r\n            success: isSuccess,\r\n          }\"\r\n        >\r\n          {{ getFieldMessage() | translate }}\r\n        </span>\r\n      </div>\r\n    }\r\n  </div>\r\n}\r\n", styles: [".fn-label-container{display:flex;flex-direction:column;gap:4px;width:100%}.fn-label-text{color:var(--fn-sys-color-on-surface-variant);font-family:var(--fn-sys-font-family-base);font-size:14px;font-weight:500;line-height:20px}.fn-label-text.disabled{color:var(--fn-sys-color-outline)}.fn-label-text.error{color:var(--fn-sys-color-error)}.fn-field-message-container{display:flex;align-items:center;gap:4px;margin-top:4px;min-height:20px}.fn-field-message-text{font-family:var(--fn-sys-font-family-base);font-size:12px;font-weight:400;line-height:16px;color:var(--fn-sys-color-on-surface-variant)}.fn-field-message-text.error{color:var(--fn-sys-color-error)}.fn-field-message-text.success{color:var(--fn-sys-color-success, #2e7d32)}\n"] }]
+        }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { field: [{
+                type: Input
+            }], helperHandle: [{
+                type: Input
+            }], toastService: [{
+                type: Input
+            }], currencyMeta: [{
+                type: Input
+            }], defaultLocale: [{
+                type: Input
+            }], form: [{
+                type: Input
+            }], valueChange: [{
+                type: Output
+            }], fieldBlur: [{
+                type: Output
+            }], textareaElement: [{
+                type: ViewChild,
+                args: ['fnTextarea']
+            }], iconContainers: [{
+                type: ViewChildren,
+                args: ['iconContainer']
+            }] } });
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { DEFAULT_CURRENCY_META, FNInput };
+//# sourceMappingURL=fn-input.mjs.map