fn-input 0.0.1 → 0.0.3

package/esm2022/lib/fn-input.types.mjs

@@ -0,0 +1,10 @@
+export 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' },
+];
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm4taW5wdXQudHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9mbi1pbnB1dC9zcmMvbGliL2ZuLWlucHV0LnR5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQWtJQSxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRztJQUNuQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7SUFDN0QsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFO0lBQzlELEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRTtJQUM3RCxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7SUFDN0QsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFO0lBQzdELEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRTtJQUM3RCxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7Q0FDOUQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFZhbGlkYXRvckZuIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuZXhwb3J0IHR5cGUgVHlwZUljb25WYXJpYW50ID0gJ0NvbG91cicgfCAnRHVvdG9uZScgfCAnRmlsbCcgfCAnTGluZSc7XHJcbmV4cG9ydCB0eXBlIFR5cGVJY29uU2l6ZSA9IDEwIHwgMTYgfCAyMCB8IDI0IHwgMzIgfCA0ODtcclxuXHJcbmV4cG9ydCB0eXBlIFR5cGVMYWJlbFZhcmlhbnQgPVxyXG4gIHwgJ2gxJ1xyXG4gIHwgJ2gxQm9sZCdcclxuICB8ICdoMidcclxuICB8ICdoMkJvbGQnXHJcbiAgfCAnaDMnXHJcbiAgfCAnaDNCb2xkJ1xyXG4gIHwgJ3AxJ1xyXG4gIHwgJ3AxQm9sZCdcclxuICB8ICdwMidcclxuICB8ICdwMkJvbGQnXHJcbiAgfCAncDMnXHJcbiAgfCAncDNCb2xkJ1xyXG4gIHwgJ3A0J1xyXG4gIHwgJ3A0Qm9sZCdcclxuICB8ICdpbnRlcmFjdGlvbkxhcmdlJ1xyXG4gIHwgJ2ludGVyYWN0aW9uTGFyZ2VCb2xkJ1xyXG4gIHwgJ2ludGVyYWN0aW9uTWVkaXVtJ1xyXG4gIHwgJ2ludGVyYWN0aW9uTWVkaXVtQm9sZCdcclxuICB8ICdpbnRlcmFjdGlvblNtYWxsJ1xyXG4gIHwgJ2ludGVyYWN0aW9uU21hbGxCb2xkJ1xyXG4gIHwgJ2F2YXRhckxhYmVsJztcclxuXHJcbmV4cG9ydCB0eXBlIFR5cGVTdGF0dXNMYWJlbCA9XHJcbiAgfCAnU3RhbmRhcmQnXHJcbiAgfCAnU3VjY2VzcydcclxuICB8ICdIb3QnXHJcbiAgfCAnV2FybmluZydcclxuICB8ICdEaXNhYmxlZCdcclxuICB8ICdSSEJQcmVtaWVyQmFua2luZyc7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIEZOSW5wdXRBZmZpeCB7XHJcbiAgaWNvbj86IHN0cmluZztcclxuICB0ZXh0Pzogc3RyaW5nO1xyXG4gIG9uQ2xpY2s/OiAoZTogRXZlbnQpID0+IHZvaWQ7XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgRk5JbnB1dFZpc2liaWxpdHlDb25kaXRpb24ge1xyXG4gIGRlcGVuZHNPbjogc3RyaW5nO1xyXG4gIHNob3dXaGVuOiBhbnkgfCBhbnlbXTtcclxuICBoaWRlV2hlbj86IGFueSB8IGFueVtdO1xyXG59XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIEZOSW5wdXRDb21tb25Qcm9wczxUID0gYW55PiB7XHJcbiAgZmllbGRUeXBlOiAnRk5JbnB1dCc7XHJcbiAgbmFtZTogc3RyaW5nO1xyXG4gIGxhYmVsOiBzdHJpbmc7XHJcbiAgcGxhY2Vob2xkZXI/OiBzdHJpbmc7XHJcbiAgY2xhc3NOYW1lPzogc3RyaW5nO1xyXG4gIHJlcXVpcmVkPzogYm9vbGVhbjtcclxuICB2YWx1ZT86IFQ7XHJcbiAgZGlzYWJsZWQ/OiBib29sZWFuO1xyXG4gIGhpZGRlbj86IGJvb2xlYW47XHJcbiAgcmVhZE9ubHk/OiBib29sZWFuO1xyXG4gIGZsb2F0TGFiZWxWYXJpYW50PzogJ2luJyB8ICdvdmVyJyB8ICdvbic7XHJcbiAgdmFsaWRhdG9ycz86IFZhbGlkYXRvckZuW107XHJcbiAgZXJyb3JzPzogeyBba2V5OiBzdHJpbmddOiBzdHJpbmcgfTtcclxuICByb3dzPzogbnVtYmVyO1xyXG4gIHByZWZpeD86IEZOSW5wdXRBZmZpeDtcclxuICBzdWZmaXg/OiBGTklucHV0QWZmaXg7XHJcbiAgaGFzU3VjY2Vzc0JvcmRlcj86IGJvb2xlYW47XHJcbiAgdmlzaWJpbGl0eUNvbmRpdGlvbj86IEZOSW5wdXRWaXNpYmlsaXR5Q29uZGl0aW9uO1xyXG4gIGhlbHBlclRleHQ/OiBzdHJpbmc7XHJcbiAgaXNBbHBoYW51bWVyaWM/OiBib29sZWFuO1xyXG4gIGhpZGVPcHRpb25hbD86IGJvb2xlYW47XHJcbiAgaXNBZGRyZXNzTGluZT86IGJvb2xlYW47XHJcbiAgY29sb3I/OiBzdHJpbmc7XHJcbiAgbGFiZWxWYXJpYW50PzogVHlwZUxhYmVsVmFyaWFudDtcclxuICBzdGF0dXNMYWJlbD86IFR5cGVTdGF0dXNMYWJlbDtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTlRleHRJbnB1dFByb3BzPFQgPSBhbnk+IGV4dGVuZHMgRk5JbnB1dENvbW1vblByb3BzPFQ+IHtcclxuICB0eXBlOiAndGV4dCcgfCAnZW1haWwnIHwgJ3RleHRhcmVhJyB8ICdoaWRkZW4nO1xyXG4gIGNvbHM/OiBudW1iZXI7XHJcbiAgbWF4TGVuZ3RoPzogbnVtYmVyO1xyXG4gIGljb24/OiB7XHJcbiAgICBuYW1lOiBzdHJpbmc7XHJcbiAgICB2YXJpYW50OiBUeXBlSWNvblZhcmlhbnQ7XHJcbiAgICBzaXplOiBUeXBlSWNvblNpemU7XHJcbiAgfTtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTlBhc3N3b3JkUHJvcHMgZXh0ZW5kcyBGTklucHV0Q29tbW9uUHJvcHM8c3RyaW5nPiB7XHJcbiAgdHlwZTogJ3Bhc3N3b3JkJztcclxuICB0b2dnbGVNYXNrPzogYm9vbGVhbjtcclxuICBmZWVkYmFjaz86IGJvb2xlYW47XHJcbiAgd2Vha0xhYmVsPzogc3RyaW5nO1xyXG4gIG1lZGl1bUxhYmVsPzogc3RyaW5nO1xyXG4gIHN0cm9uZ0xhYmVsPzogc3RyaW5nO1xyXG4gIGlzQ29weVRleHQ/OiBib29sZWFuO1xyXG4gIGhhc0dlbmVyYXRlS2V5PzogYm9vbGVhbjtcclxuICBvbkdlbmVyYXRlS2V5PzogKCkgPT4gdm9pZDtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTklucHV0TnVtYmVyUHJvcHMgZXh0ZW5kcyBGTklucHV0Q29tbW9uUHJvcHM8bnVtYmVyPiB7XHJcbiAgdHlwZTogJ251bWJlcic7XHJcbiAgbWluPzogbnVtYmVyO1xyXG4gIG1heD86IG51bWJlcjtcclxuICBzdGVwPzogbnVtYmVyO1xyXG4gIG1pbkZyYWN0aW9uRGlnaXRzPzogbnVtYmVyO1xyXG4gIG1heEZyYWN0aW9uRGlnaXRzPzogbnVtYmVyO1xyXG4gIGN1cnJlbmN5Pzogc3RyaW5nO1xyXG4gIGN1cnJlbmN5RGlzcGxheT86ICdzeW1ib2wnIHwgJ2NvZGUnIHwgJ25hbWUnO1xyXG4gIGxvY2FsZT86IHN0cmluZztcclxuICB1c2VHcm91cGluZz86IGJvb2xlYW47XHJcbiAgbW9kZT86ICdkZWNpbWFsJyB8ICdjdXJyZW5jeSc7XHJcbiAgc2hvd0J1dHRvbnM/OiBib29sZWFuO1xyXG4gIGJ1dHRvbkxheW91dD86ICdzdGFja2VkJyB8ICdob3Jpem9udGFsJyB8ICd2ZXJ0aWNhbCc7XHJcbiAgaW5jcmVtZW50QnV0dG9uSWNvbj86IHN0cmluZztcclxuICBkZWNyZW1lbnRCdXR0b25JY29uPzogc3RyaW5nO1xyXG4gIGlzQ3VycmVuY3k/OiBib29sZWFuO1xyXG4gIG1heEludGVnZXJEaWdpdHM/OiBudW1iZXI7XHJcbn1cclxuXHJcbmV4cG9ydCB0eXBlIEZOSW5wdXRCYXNlID0gRk5UZXh0SW5wdXRQcm9wcyB8IEZOUGFzc3dvcmRQcm9wcyB8IEZOSW5wdXROdW1iZXJQcm9wcztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgRk5JbnB1dEhlbHBlciB7XHJcbiAgc2hvd0Zvcm1GaWVsZE1lc3NhZ2U6IChjb250cm9sOiBhbnksIGhlbHBlclRleHQ6IHN0cmluZykgPT4gYm9vbGVhbjtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTklucHV0VG9hc3Qge1xyXG4gIHN1Y2Nlc3M6IChtZXNzYWdlOiBzdHJpbmcsIHRpdGxlPzogc3RyaW5nLCBkdXJhdGlvbj86IG51bWJlcikgPT4gc3RyaW5nO1xyXG4gIGVycm9yOiAobWVzc2FnZTogc3RyaW5nLCB0aXRsZT86IHN0cmluZywgZHVyYXRpb24/OiBudW1iZXIpID0+IHN0cmluZztcclxufVxyXG5cclxuZXhwb3J0IGNvbnN0IERFRkFVTFRfQ1VSUkVOQ1lfTUVUQSA9IFtcclxuICB7IGNvZGU6ICdVU0QnLCBsb2NhbGU6ICdlbi1VUycsIHN5bWJvbDogJyQnLCBkaWdpdDogJzEuMi0yJyB9LFxyXG4gIHsgY29kZTogJ01ZUicsIGxvY2FsZTogJ2VuLU1ZJywgc3ltYm9sOiAnUk0nLCBkaWdpdDogJzEuMi0yJyB9LFxyXG4gIHsgY29kZTogJ0VVUicsIGxvY2FsZTogJ2VuLVVTJywgc3ltYm9sOiAn4oKsJywgZGlnaXQ6ICcxLjItMicgfSxcclxuICB7IGNvZGU6ICdHQlAnLCBsb2NhbGU6ICdlbi1VUycsIHN5bWJvbDogJ8KjJywgZGlnaXQ6ICcxLjItMicgfSxcclxuICB7IGNvZGU6ICdKUFknLCBsb2NhbGU6ICdqYS1KUCcsIHN5bWJvbDogJ8KlJywgZGlnaXQ6ICcxLjAtMCcgfSxcclxuICB7IGNvZGU6ICdDTlknLCBsb2NhbGU6ICd6aC1DTicsIHN5bWJvbDogJ8KlJywgZGlnaXQ6ICcxLjItMicgfSxcclxuICB7IGNvZGU6ICdJTlInLCBsb2NhbGU6ICdlbi1JTicsIHN5bWJvbDogJ+KCuScsIGRpZ2l0OiAnMS4yLTInIH0sXHJcbl07XHJcbiJdfQ==

package/esm2022/public-api.mjs

@@ -0,0 +1,3 @@
+export * from './lib/fn-input.component';
+export * from './lib/fn-input.types';
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoicHVibGljLWFwaS5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3Byb2plY3RzL2ZuLWlucHV0L3NyYy9wdWJsaWMtYXBpLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLGNBQWMsMEJBQTBCLENBQUM7QUFDekMsY0FBYyxzQkFBc0IsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImV4cG9ydCAqIGZyb20gJy4vbGliL2ZuLWlucHV0LmNvbXBvbmVudCc7XG5leHBvcnQgKiBmcm9tICcuL2xpYi9mbi1pbnB1dC50eXBlcyc7XG4iXX0=

package/fesm2022/fn-input.mjs

@@ -31,7 +31,7 @@ class FNInput {
     valueChange = new EventEmitter();
     fieldBlur = new EventEmitter();
     translate = inject(TranslateService);
-    hasFocus = signal(false, ...(ngDevMode ? [{ debugName: "hasFocus" }] : /* istanbul ignore next */ []));
+    hasFocus = signal(false);
     textareaElement;
     iconContainers;
     http = inject(HttpClient);
@@ -72,7 +72,7 @@ class FNInput {
     }
     isDisabled = false;
     control;
-    isVisible = signal(true, ...(ngDevMode ? [{ debugName: "isVisible" }] : /* istanbul ignore next */ [])); // Track visibility state
+    isVisible = signal(true); // Track visibility state
     helperText = '';
     // Use a counter-based approach for unique IDs (safer than Math.random())
     static idCounter = 0;
@@ -1068,12 +1068,12 @@ class FNInput {
     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 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "17.3.12", 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=\"fn-input-container\">\r\n    @if (field.type! !== 'hidden') {\r\n      <label [for]=\"uniqueId\" class=\"fn-label\" [ngStyle]=\"{ color: field.color || '#03182b' }\">\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=\"fn-input-field\"\r\n            [ngClass]=\"{\r\n              disabled: control.disabled || field.readOnly,\r\n              error: control.touched && control.errors,\r\n              success: 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=\"fn-input-field overflow-hidden text-ellipsis\"\r\n              [ngClass]=\"{\r\n                disabled: control.disabled || field.readOnly,\r\n                error: control.touched && control.errors,\r\n                success: 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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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=\"#03182b\"\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=\"#03182b\"\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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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=\"#03182b\"\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=\"#03182b\"\r\n                  ></div>\r\n                }\r\n              </span>\r\n\r\n              <span\r\n                class=\"absolute right-12 top-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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-2 text-[#818c95]\"\r\n                  [ngClass]=\"{\r\n                    'cursor-pointer hover:text-[#0067b1]':\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=\"fn-input-field\"\r\n            [ngClass]=\"{\r\n              disabled: control.disabled || field.readOnly,\r\n              error: control.touched && control.errors,\r\n              success: field['hasSuccessBorder'] && control.valid && !control.errors,\r\n              'text-[24px] font-bold': 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=\"fn-input-field\"\r\n              [ngClass]=\"{\r\n                disabled: control.disabled || field.readOnly,\r\n                error: control.touched && control.errors,\r\n                success: 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-2 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"bg-transparent\"\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 ? '#c4cdd2' : ''\"\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-input-container{display:flex;flex-direction:column;gap:8px;width:100%}.fn-label{color:#03182b;font-family:inherit;font-size:14px;font-weight:500;line-height:20px;margin-bottom:4px}.fn-input-field{background-color:#eff9fd;border:none;border-bottom:1px solid #c4cdd2;padding:8px 12px;width:100%;box-sizing:border-box;transition:border-color .2s ease-in-out}.fn-input-field:focus{border-bottom:1px solid #0067b1;outline:none}.fn-input-field.error{border-bottom:1px solid #ef3e42}.fn-input-field.disabled{background-color:#eef0f2;color:#c4cdd2;cursor:not-allowed}.fn-field-message-container{display:flex;align-items:center;gap:4px;margin-top:4px;min-height:20px}.fn-field-message-text{font-family:inherit;font-size:12px;font-weight:400;line-height:16px;color:#818c95}.fn-field-message-text.error{color:#ef3e42}.fn-field-message-text.success{color:#6cc24a}\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: "directive", type: i2.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { 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: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", 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"] }]
+            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=\"fn-input-container\">\r\n    @if (field.type! !== 'hidden') {\r\n      <label [for]=\"uniqueId\" class=\"fn-label\" [ngStyle]=\"{ color: field.color || '#03182b' }\">\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=\"fn-input-field\"\r\n            [ngClass]=\"{\r\n              disabled: control.disabled || field.readOnly,\r\n              error: control.touched && control.errors,\r\n              success: 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=\"fn-input-field overflow-hidden text-ellipsis\"\r\n              [ngClass]=\"{\r\n                disabled: control.disabled || field.readOnly,\r\n                error: control.touched && control.errors,\r\n                success: 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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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=\"#03182b\"\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=\"#03182b\"\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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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=\"#03182b\"\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=\"#03182b\"\r\n                  ></div>\r\n                }\r\n              </span>\r\n\r\n              <span\r\n                class=\"absolute right-12 top-2 cursor-pointer text-[#818c95] hover:text-[#0067b1]\"\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-2 text-[#818c95]\"\r\n                  [ngClass]=\"{\r\n                    'cursor-pointer hover:text-[#0067b1]':\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=\"fn-input-field\"\r\n            [ngClass]=\"{\r\n              disabled: control.disabled || field.readOnly,\r\n              error: control.touched && control.errors,\r\n              success: field['hasSuccessBorder'] && control.valid && !control.errors,\r\n              'text-[24px] font-bold': 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=\"fn-input-field\"\r\n              [ngClass]=\"{\r\n                disabled: control.disabled || field.readOnly,\r\n                error: control.touched && control.errors,\r\n                success: 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-2 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"bg-transparent\"\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 ? '#c4cdd2' : ''\"\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-input-container{display:flex;flex-direction:column;gap:8px;width:100%}.fn-label{color:#03182b;font-family:inherit;font-size:14px;font-weight:500;line-height:20px;margin-bottom:4px}.fn-input-field{background-color:#eff9fd;border:none;border-bottom:1px solid #c4cdd2;padding:8px 12px;width:100%;box-sizing:border-box;transition:border-color .2s ease-in-out}.fn-input-field:focus{border-bottom:1px solid #0067b1;outline:none}.fn-input-field.error{border-bottom:1px solid #ef3e42}.fn-input-field.disabled{background-color:#eef0f2;color:#c4cdd2;cursor:not-allowed}.fn-field-message-container{display:flex;align-items:center;gap:4px;margin-top:4px;min-height:20px}.fn-field-message-text{font-family:inherit;font-size:12px;font-weight:400;line-height:16px;color:#818c95}.fn-field-message-text.error{color:#ef3e42}.fn-field-message-text.success{color:#6cc24a}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { field: [{
                 type: Input
             }], helperHandle: [{