fn-input 0.0.3 → 0.0.5

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

@@ -7,4 +7,4 @@ export const DEFAULT_CURRENCY_META = [
     { 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==
+//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZm4taW5wdXQudHlwZXMuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi9wcm9qZWN0cy9mbi1pbnB1dC9zcmMvbGliL2ZuLWlucHV0LnR5cGVzLnRzIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQXFJQSxNQUFNLENBQUMsTUFBTSxxQkFBcUIsR0FBRztJQUNuQyxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7SUFDN0QsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFO0lBQzlELEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRTtJQUM3RCxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7SUFDN0QsRUFBRSxJQUFJLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxPQUFPLEVBQUUsTUFBTSxFQUFFLEdBQUcsRUFBRSxLQUFLLEVBQUUsT0FBTyxFQUFFO0lBQzdELEVBQUUsSUFBSSxFQUFFLEtBQUssRUFBRSxNQUFNLEVBQUUsT0FBTyxFQUFFLE1BQU0sRUFBRSxHQUFHLEVBQUUsS0FBSyxFQUFFLE9BQU8sRUFBRTtJQUM3RCxFQUFFLElBQUksRUFBRSxLQUFLLEVBQUUsTUFBTSxFQUFFLE9BQU8sRUFBRSxNQUFNLEVBQUUsR0FBRyxFQUFFLEtBQUssRUFBRSxPQUFPLEVBQUU7Q0FDOUQsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IFZhbGlkYXRvckZuIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5cclxuZXhwb3J0IHR5cGUgVHlwZUljb25WYXJpYW50ID0gJ0NvbG91cicgfCAnRHVvdG9uZScgfCAnRmlsbCcgfCAnTGluZSc7XHJcbmV4cG9ydCB0eXBlIFR5cGVJY29uU2l6ZSA9IDEwIHwgMTYgfCAyMCB8IDI0IHwgMzIgfCA0ODtcclxuXHJcbmV4cG9ydCB0eXBlIFR5cGVMYWJlbFZhcmlhbnQgPVxyXG4gIHwgJ2gxJ1xyXG4gIHwgJ2gxQm9sZCdcclxuICB8ICdoMidcclxuICB8ICdoMkJvbGQnXHJcbiAgfCAnaDMnXHJcbiAgfCAnaDNCb2xkJ1xyXG4gIHwgJ3AxJ1xyXG4gIHwgJ3AxQm9sZCdcclxuICB8ICdwMidcclxuICB8ICdwMkJvbGQnXHJcbiAgfCAncDMnXHJcbiAgfCAncDNCb2xkJ1xyXG4gIHwgJ3A0J1xyXG4gIHwgJ3A0Qm9sZCdcclxuICB8ICdpbnRlcmFjdGlvbkxhcmdlJ1xyXG4gIHwgJ2ludGVyYWN0aW9uTGFyZ2VCb2xkJ1xyXG4gIHwgJ2ludGVyYWN0aW9uTWVkaXVtJ1xyXG4gIHwgJ2ludGVyYWN0aW9uTWVkaXVtQm9sZCdcclxuICB8ICdpbnRlcmFjdGlvblNtYWxsJ1xyXG4gIHwgJ2ludGVyYWN0aW9uU21hbGxCb2xkJ1xyXG4gIHwgJ2F2YXRhckxhYmVsJztcclxuXHJcbmV4cG9ydCB0eXBlIFR5cGVTdGF0dXNMYWJlbCA9XHJcbiAgfCAnU3RhbmRhcmQnXHJcbiAgfCAnU3VjY2VzcydcclxuICB8ICdIb3QnXHJcbiAgfCAnV2FybmluZydcclxuICB8ICdEaXNhYmxlZCdcclxuICB8ICdSSEJQcmVtaWVyQmFua2luZyc7XHJcblxyXG5leHBvcnQgaW50ZXJmYWNlIEZOSW5wdXRBZmZpeCB7XHJcbiAgaWNvbj86IHN0cmluZztcclxuICB0ZXh0Pzogc3RyaW5nO1xyXG4gIG9uQ2xpY2s/OiAoZTogRXZlbnQpID0+IHZvaWQ7XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgRk5JbnB1dFZpc2liaWxpdHlDb25kaXRpb24ge1xyXG4gIGRlcGVuZHNPbjogc3RyaW5nO1xyXG4gIHNob3dXaGVuOiBhbnk7XHJcbiAgaGlkZVdoZW4/OiBhbnk7XHJcbn1cclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgRk5JbnB1dENvbW1vblByb3BzPFQgPSBhbnk+IHtcclxuICBmaWVsZFR5cGU6ICdGTklucHV0JztcclxuICBuYW1lOiBzdHJpbmc7XHJcbiAgbGFiZWw6IHN0cmluZztcclxuICBwbGFjZWhvbGRlcj86IHN0cmluZztcclxuICBjbGFzc05hbWU/OiBzdHJpbmc7XHJcbiAgcmVxdWlyZWQ/OiBib29sZWFuO1xyXG4gIHZhbHVlPzogVDtcclxuICBkaXNhYmxlZD86IGJvb2xlYW47XHJcbiAgaGlkZGVuPzogYm9vbGVhbjtcclxuICByZWFkT25seT86IGJvb2xlYW47XHJcbiAgZmxvYXRMYWJlbFZhcmlhbnQ/OiAnaW4nIHwgJ292ZXInIHwgJ29uJztcclxuICB2YWxpZGF0b3JzPzogVmFsaWRhdG9yRm5bXTtcclxuICBlcnJvcnM/OiB7IFtrZXk6IHN0cmluZ106IHN0cmluZyB9O1xyXG4gIHJvd3M/OiBudW1iZXI7XHJcbiAgcHJlZml4PzogRk5JbnB1dEFmZml4O1xyXG4gIHN1ZmZpeD86IEZOSW5wdXRBZmZpeDtcclxuICBoYXNTdWNjZXNzQm9yZGVyPzogYm9vbGVhbjtcclxuICB2aXNpYmlsaXR5Q29uZGl0aW9uPzogRk5JbnB1dFZpc2liaWxpdHlDb25kaXRpb247XHJcbiAgaGVscGVyVGV4dD86IHN0cmluZztcclxuICBpc0FscGhhbnVtZXJpYz86IGJvb2xlYW47XHJcbiAgaGlkZU9wdGlvbmFsPzogYm9vbGVhbjtcclxuICBpc0FkZHJlc3NMaW5lPzogYm9vbGVhbjtcclxuICBjb2xvcj86IHN0cmluZztcclxuICBsYWJlbFZhcmlhbnQ/OiBUeXBlTGFiZWxWYXJpYW50O1xyXG4gIHN0YXR1c0xhYmVsPzogVHlwZVN0YXR1c0xhYmVsO1xyXG4gIGxhYmVsU2l6ZT86IHN0cmluZztcclxuICB2YWx1ZUNvbG9yPzogc3RyaW5nO1xyXG4gIHZhbHVlU2l6ZT86IHN0cmluZztcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTlRleHRJbnB1dFByb3BzPFQgPSBhbnk+IGV4dGVuZHMgRk5JbnB1dENvbW1vblByb3BzPFQ+IHtcclxuICB0eXBlOiAndGV4dCcgfCAnZW1haWwnIHwgJ3RleHRhcmVhJyB8ICdoaWRkZW4nO1xyXG4gIGNvbHM/OiBudW1iZXI7XHJcbiAgbWF4TGVuZ3RoPzogbnVtYmVyO1xyXG4gIGljb24/OiB7XHJcbiAgICBuYW1lOiBzdHJpbmc7XHJcbiAgICB2YXJpYW50OiBUeXBlSWNvblZhcmlhbnQ7XHJcbiAgICBzaXplOiBUeXBlSWNvblNpemU7XHJcbiAgfTtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTlBhc3N3b3JkUHJvcHMgZXh0ZW5kcyBGTklucHV0Q29tbW9uUHJvcHM8c3RyaW5nPiB7XHJcbiAgdHlwZTogJ3Bhc3N3b3JkJztcclxuICB0b2dnbGVNYXNrPzogYm9vbGVhbjtcclxuICBmZWVkYmFjaz86IGJvb2xlYW47XHJcbiAgd2Vha0xhYmVsPzogc3RyaW5nO1xyXG4gIG1lZGl1bUxhYmVsPzogc3RyaW5nO1xyXG4gIHN0cm9uZ0xhYmVsPzogc3RyaW5nO1xyXG4gIGlzQ29weVRleHQ/OiBib29sZWFuO1xyXG4gIGhhc0dlbmVyYXRlS2V5PzogYm9vbGVhbjtcclxuICBvbkdlbmVyYXRlS2V5PzogKCkgPT4gdm9pZDtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTklucHV0TnVtYmVyUHJvcHMgZXh0ZW5kcyBGTklucHV0Q29tbW9uUHJvcHM8bnVtYmVyPiB7XHJcbiAgdHlwZTogJ251bWJlcic7XHJcbiAgbWluPzogbnVtYmVyO1xyXG4gIG1heD86IG51bWJlcjtcclxuICBzdGVwPzogbnVtYmVyO1xyXG4gIG1pbkZyYWN0aW9uRGlnaXRzPzogbnVtYmVyO1xyXG4gIG1heEZyYWN0aW9uRGlnaXRzPzogbnVtYmVyO1xyXG4gIGN1cnJlbmN5Pzogc3RyaW5nO1xyXG4gIGN1cnJlbmN5RGlzcGxheT86ICdzeW1ib2wnIHwgJ2NvZGUnIHwgJ25hbWUnO1xyXG4gIGxvY2FsZT86IHN0cmluZztcclxuICB1c2VHcm91cGluZz86IGJvb2xlYW47XHJcbiAgbW9kZT86ICdkZWNpbWFsJyB8ICdjdXJyZW5jeSc7XHJcbiAgc2hvd0J1dHRvbnM/OiBib29sZWFuO1xyXG4gIGJ1dHRvbkxheW91dD86ICdzdGFja2VkJyB8ICdob3Jpem9udGFsJyB8ICd2ZXJ0aWNhbCc7XHJcbiAgaW5jcmVtZW50QnV0dG9uSWNvbj86IHN0cmluZztcclxuICBkZWNyZW1lbnRCdXR0b25JY29uPzogc3RyaW5nO1xyXG4gIGlzQ3VycmVuY3k/OiBib29sZWFuO1xyXG4gIG1heEludGVnZXJEaWdpdHM/OiBudW1iZXI7XHJcbn1cclxuXHJcbmV4cG9ydCB0eXBlIEZOSW5wdXRCYXNlID0gRk5UZXh0SW5wdXRQcm9wcyB8IEZOUGFzc3dvcmRQcm9wcyB8IEZOSW5wdXROdW1iZXJQcm9wcztcclxuXHJcbmV4cG9ydCBpbnRlcmZhY2UgRk5JbnB1dEhlbHBlciB7XHJcbiAgc2hvd0Zvcm1GaWVsZE1lc3NhZ2U6IChjb250cm9sOiBhbnksIGhlbHBlclRleHQ6IHN0cmluZykgPT4gYm9vbGVhbjtcclxufVxyXG5cclxuZXhwb3J0IGludGVyZmFjZSBGTklucHV0VG9hc3Qge1xyXG4gIHN1Y2Nlc3M6IChtZXNzYWdlOiBzdHJpbmcsIHRpdGxlPzogc3RyaW5nLCBkdXJhdGlvbj86IG51bWJlcikgPT4gc3RyaW5nO1xyXG4gIGVycm9yOiAobWVzc2FnZTogc3RyaW5nLCB0aXRsZT86IHN0cmluZywgZHVyYXRpb24/OiBudW1iZXIpID0+IHN0cmluZztcclxufVxyXG5cclxuZXhwb3J0IGNvbnN0IERFRkFVTFRfQ1VSUkVOQ1lfTUVUQSA9IFtcclxuICB7IGNvZGU6ICdVU0QnLCBsb2NhbGU6ICdlbi1VUycsIHN5bWJvbDogJyQnLCBkaWdpdDogJzEuMi0yJyB9LFxyXG4gIHsgY29kZTogJ01ZUicsIGxvY2FsZTogJ2VuLU1ZJywgc3ltYm9sOiAnUk0nLCBkaWdpdDogJzEuMi0yJyB9LFxyXG4gIHsgY29kZTogJ0VVUicsIGxvY2FsZTogJ2VuLVVTJywgc3ltYm9sOiAn4oKsJywgZGlnaXQ6ICcxLjItMicgfSxcclxuICB7IGNvZGU6ICdHQlAnLCBsb2NhbGU6ICdlbi1VUycsIHN5bWJvbDogJ8KjJywgZGlnaXQ6ICcxLjItMicgfSxcclxuICB7IGNvZGU6ICdKUFknLCBsb2NhbGU6ICdqYS1KUCcsIHN5bWJvbDogJ8KlJywgZGlnaXQ6ICcxLjAtMCcgfSxcclxuICB7IGNvZGU6ICdDTlknLCBsb2NhbGU6ICd6aC1DTicsIHN5bWJvbDogJ8KlJywgZGlnaXQ6ICcxLjItMicgfSxcclxuICB7IGNvZGU6ICdJTlInLCBsb2NhbGU6ICdlbi1JTicsIHN5bWJvbDogJ+KCuScsIGRpZ2l0OiAnMS4yLTInIH0sXHJcbl07XHJcbiJdfQ==

package/fesm2022/fn-input.mjs

@@ -20,6 +20,12 @@ const DEFAULT_CURRENCY_META = [
     { code: 'INR', locale: 'en-IN', symbol: '₹', digit: '1.2-2' },
 ];
 
+const CORE_ICONS = {
+    'eye-open': `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><circle cx="12" cy="12" r="3" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+    'eye-close': `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><line x1="1" y1="1" x2="23" y2="23" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+    'two-square': `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="9" y="9" width="13" height="13" rx="2" ry="2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+    'round-arrow-top-left': `<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2zm0 18a8 8 0 1 1 8-8 8 8 0 0 1-8 8z" fill="currentColor"/><path d="M15 9H9v6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><path d="M9 9l6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>`,
+};
 class FNInput {
     cdr;
     field = {};
@@ -189,6 +195,9 @@ class FNInput {
             this.control.setValue(filteredValue, { emitEvent: false });
             input.setSelectionRange(cursorPosition, cursorPosition);
         }
+        if (this.field.type === 'password' && this.field.feedback) {
+            this.checkPasswordStrength(filteredValue);
+        }
         this.valueChange.emit({ name: this.field.name, value: filteredValue });
         this.control.markAsTouched();
     }
@@ -354,6 +363,9 @@ class FNInput {
             target.setSelectionRange(newCursorPos, newCursorPos);
         }
         // Trailing spaces will be trimmed on blur, not during input
+        if (this.field.type === 'password' && this.field.feedback) {
+            this.checkPasswordStrength(filteredValue);
+        }
         this.valueChange.emit({ name: this.field.name, value: filteredValue });
         this.control.markAsTouched();
     }
@@ -384,6 +396,9 @@ class FNInput {
             const newCursorPos = Math.max(0, (cursorPosition || 0) - charsRemovedBeforeCursor);
             target.setSelectionRange(newCursorPos, newCursorPos);
         }
+        if (this.field.type === 'password' && this.field.feedback) {
+            this.checkPasswordStrength(filteredValue);
+        }
         this.valueChange.emit({ name: this.field.name, value: filteredValue });
         this.control.markAsTouched();
     }
@@ -968,6 +983,11 @@ class FNInput {
     }
     loadIconToContainer(container, name, variant, sizeName, color, disabled) {
         const size = this.sizeMap[sizeName];
+        // Check built-in icons first
+        if (CORE_ICONS[name]) {
+            this.renderSvgToContainer(container, CORE_ICONS[name], color, size, name, disabled);
+            return;
+        }
         const iconPath = this.getIconPath(name, variant, size);
         if (!iconPath) {
             container.innerHTML = '';
@@ -975,59 +995,7 @@ class FNInput {
         }
         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 = '';
-                }
+                this.renderSvgToContainer(container, raw, color, size, name, disabled);
             },
             error: () => {
                 container.innerHTML = '';
@@ -1035,6 +1003,72 @@ class FNInput {
             },
         });
     }
+    renderSvgToContainer(container, raw, color, size, name, disabled) {
+        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%;`;
+            svg.setAttribute('style', (svg.getAttribute('style') || '') + style);
+            container.innerHTML = '';
+            if (color) {
+                container.style.color = color;
+            }
+            if (disabled) {
+                container.style.opacity = '0.5';
+                container.style.cursor = 'not-allowed';
+            }
+            else {
+                container.style.opacity = '1';
+                container.style.cursor = '';
+            }
+            container.appendChild(svg);
+            this.cdr.detectChanges();
+        }
+        catch (error) {
+            console.error(`[fn-input] Error parsing SVG for icon "${name}":`, error);
+            container.innerHTML = '';
+        }
+    }
     getIconPath(icon, variant, size) {
         if (!icon)
             return null;
@@ -1069,11 +1103,11 @@ class FNInput {
         return !!(this.control?.valid && this.control?.touched);
     }
     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 });
+    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\r\n        [for]=\"uniqueId\"\r\n        class=\"fn-label\"\r\n        [ngStyle]=\"{\r\n          color: field.color || '#03182b',\r\n          'font-size': field.labelSize || '',\r\n        }\"\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=\"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            [ngStyle]=\"{\r\n              color: field.valueColor || 'inherit',\r\n              'font-size': field.valueSize || '',\r\n            }\"\r\n            (focus)=\"onFocus()\"\r\n          ></textarea>\r\n        }\r\n\r\n        <!-- Password Field -->\r\n        @case ('password') {\r\n          <div class=\"relative w-full\">\r\n            @if (field.prefix?.icon) {\r\n              <div class=\"absolute left-0 top-1/2 -translate-y-1/2 pl-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.prefix!.icon\"\r\n                  data-icon-variant=\"Line\"\r\n                  data-icon-size=\"medium\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\r\n                ></div>\r\n              </div>\r\n            }\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                'pl-10': field.prefix?.icon,\r\n                'pr-12':\r\n                  (field.toggleMask && !field.isCopyText) ||\r\n                  (!field.toggleMask && field.isCopyText),\r\n                'pr-24': field.toggleMask && field.isCopyText,\r\n                'pr-32': field.toggleMask && field.isCopyText && field.hasGenerateKey,\r\n              }\"\r\n              [ngStyle]=\"{\r\n                color: field.valueColor || 'inherit',\r\n                'font-size': field.valueSize || '',\r\n              }\"\r\n            />\r\n\r\n            <div class=\"absolute right-0 top-1/2 -translate-y-1/2 flex items-center pr-3 gap-2\">\r\n              @if (field.toggleMask && !field.isCopyText) {\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"showPassword = !showPassword\"\r\n                  (keydown)=\"showPassword = !showPassword\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    [attr.data-icon-name]=\"showPassword ? 'eye-open' : '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                </span>\r\n              } @else if (field.isCopyText && !field.toggleMask) {\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"copyText($event)\"\r\n                  (keydown)=\"copyText($event)\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"two-square\"\r\n                    data-icon-color=\"#03182b\"\r\n                  ></div>\r\n                </span>\r\n                @if (field.hasGenerateKey) {\r\n                  <span\r\n                    class=\"cursor-pointer\"\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                      data-icon-color=\"#03182b\"\r\n                    ></div>\r\n                  </span>\r\n                }\r\n              } @else if (field.toggleMask && field.isCopyText) {\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"showPassword = !showPassword\"\r\n                  (keydown)=\"showPassword = !showPassword\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    [attr.data-icon-name]=\"showPassword ? 'eye-open' : '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                </span>\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"copyText($event)\"\r\n                  (keydown)=\"copyText($event)\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"two-square\"\r\n                    data-icon-color=\"#03182b\"\r\n                  ></div>\r\n                </span>\r\n                @if (field.hasGenerateKey) {\r\n                  <span\r\n                    class=\"cursor-pointer\"\r\n                    (click)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                    (keydown)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                    [ngClass]=\"{ 'opacity-50 cursor-not-allowed': !control.value }\"\r\n                  >\r\n                    <div\r\n                      #iconContainer\r\n                      class=\"icon-container\"\r\n                      data-icon-name=\"round-arrow-top-left\"\r\n                      data-icon-color=\"#03182b\"\r\n                    ></div>\r\n                  </span>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          @if (field.feedback && isPasswordFocused) {\r\n            <div class=\"mt-2 space-y-1\">\r\n              <div class=\"flex items-center justify-between text-xs\">\r\n                <span class=\"font-medium\" [ngClass]=\"strengthClass\">\r\n                  {{ passwordStrengthLabel | translate }}\r\n                </span>\r\n                <div class=\"flex items-center gap-1\">\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    [attr.data-icon-name]=\"\r\n                      passwordStrengthPercent > 50 ? 'check-circle' : 'info-circle'\r\n                    \"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"extrasmall\"\r\n                    [attr.data-icon-color]=\"\r\n                      passwordStrengthPercent <= 25\r\n                        ? '#ef3e42'\r\n                        : passwordStrengthPercent <= 75\r\n                          ? '#ff9f00'\r\n                          : '#6cc24a'\r\n                    \"\r\n                  ></div>\r\n                </div>\r\n              </div>\r\n              <div class=\"h-1.5 w-full bg-[#eef0f2] rounded-full overflow-hidden\">\r\n                <div\r\n                  class=\"h-full transition-all duration-300 rounded-full\"\r\n                  [ngClass]=\"{\r\n                    'bg-[#ef3e42]': passwordStrengthPercent <= 25,\r\n                    'bg-[#ff9f00]': passwordStrengthPercent > 25 && passwordStrengthPercent <= 75,\r\n                    'bg-[#6cc24a]': passwordStrengthPercent > 75,\r\n                  }\"\r\n                  [style.width.%]=\"passwordStrengthPercent\"\r\n                ></div>\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n\r\n        <!-- Number Field -->\r\n        @case ('number') {\r\n          <div class=\"relative w-full\">\r\n            @if (field.prefix?.icon) {\r\n              <div class=\"absolute left-0 top-1/2 -translate-y-1/2 pl-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.prefix!.icon\"\r\n                  data-icon-variant=\"Line\"\r\n                  data-icon-size=\"medium\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\r\n                ></div>\r\n              </div>\r\n            }\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                'pl-10': field.prefix?.icon,\r\n                'text-[24px] font-bold': field.isCurrency,\r\n              }\"\r\n              [ngStyle]=\"{\r\n                color: field.valueColor || 'inherit',\r\n                'font-size': field.valueSize || '',\r\n              }\"\r\n              (focus)=\"onFocus()\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Default Input Field (text, email, etc.) -->\r\n        @default {\r\n          <div class=\"relative z-0\">\r\n            @if (field.prefix?.icon) {\r\n              <div class=\"absolute left-0 top-1/2 -translate-y-1/2 pl-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.prefix!.icon\"\r\n                  data-icon-variant=\"Line\"\r\n                  data-icon-size=\"medium\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\r\n                ></div>\r\n              </div>\r\n            }\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                'pl-10': field.prefix?.icon,\r\n                'pr-10': field.icon || field.suffix?.icon,\r\n              }\"\r\n              [ngStyle]=\"{\r\n                color: field.valueColor || 'inherit',\r\n                'font-size': field.valueSize || '',\r\n              }\"\r\n              (focus)=\"onFocus()\"\r\n            />\r\n            @if (field.icon || field.suffix?.icon) {\r\n              <span class=\"absolute right-0 top-1/2 -translate-y-1/2 pr-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.suffix?.icon || field.icon!.name\"\r\n                  [attr.data-icon-variant]=\"field.icon?.variant || 'Line'\"\r\n                  [attr.data-icon-size]=\"field.icon ? getIconSizeName(field.icon.size) : 'medium'\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\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:0!important;border-bottom:1px solid #c4cdd2!important;padding:8px 12px;width:100%;box-sizing:border-box;transition:border-color .2s ease-in-out;border-radius:0!important;appearance:none!important}.fn-input-field:focus{border-bottom:1px solid #0067b1!important;outline:none}.fn-input-field.error{border-bottom:1px solid #ef3e42!important}.fn-input-field.disabled{background-color:#eef0f2;color:#c4cdd2;cursor:not-allowed}.fn-input-field.pl-10{padding-left:36px!important}.fn-input-field.pr-10{padding-right:36px!important}.fn-input-field.pr-12{padding-right:44px!important}.fn-input-field.pr-24{padding-right:88px!important}.fn-input-field.pr-32{padding-right:120px!important}.icon-container{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:inherit}.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}.mt-2{margin-top:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * (1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.bg-\\[\\#eef0f2\\]{background-color:#eef0f2}.bg-\\[\\#ef3e42\\]{background-color:#ef3e42}.bg-\\[\\#ff9f00\\]{background-color:#ff9f00}.bg-\\[\\#6cc24a\\]{background-color:#6cc24a}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.h-1\\.5{height:.375rem}.w-full{width:100%}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.absolute{position:absolute}.right-0{right:0}.left-0{left:0}.top-1\\/2{top:50%}.-translate-y-1\\/2{transform:translateY(-50%)}.z-0{z-index:0}.relative{position:relative}.cursor-pointer{cursor:pointer}.text-ellipsis{text-overflow:ellipsis}\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: "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=\"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"] }]
+            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\r\n        [for]=\"uniqueId\"\r\n        class=\"fn-label\"\r\n        [ngStyle]=\"{\r\n          color: field.color || '#03182b',\r\n          'font-size': field.labelSize || '',\r\n        }\"\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=\"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            [ngStyle]=\"{\r\n              color: field.valueColor || 'inherit',\r\n              'font-size': field.valueSize || '',\r\n            }\"\r\n            (focus)=\"onFocus()\"\r\n          ></textarea>\r\n        }\r\n\r\n        <!-- Password Field -->\r\n        @case ('password') {\r\n          <div class=\"relative w-full\">\r\n            @if (field.prefix?.icon) {\r\n              <div class=\"absolute left-0 top-1/2 -translate-y-1/2 pl-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.prefix!.icon\"\r\n                  data-icon-variant=\"Line\"\r\n                  data-icon-size=\"medium\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\r\n                ></div>\r\n              </div>\r\n            }\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                'pl-10': field.prefix?.icon,\r\n                'pr-12':\r\n                  (field.toggleMask && !field.isCopyText) ||\r\n                  (!field.toggleMask && field.isCopyText),\r\n                'pr-24': field.toggleMask && field.isCopyText,\r\n                'pr-32': field.toggleMask && field.isCopyText && field.hasGenerateKey,\r\n              }\"\r\n              [ngStyle]=\"{\r\n                color: field.valueColor || 'inherit',\r\n                'font-size': field.valueSize || '',\r\n              }\"\r\n            />\r\n\r\n            <div class=\"absolute right-0 top-1/2 -translate-y-1/2 flex items-center pr-3 gap-2\">\r\n              @if (field.toggleMask && !field.isCopyText) {\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"showPassword = !showPassword\"\r\n                  (keydown)=\"showPassword = !showPassword\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    [attr.data-icon-name]=\"showPassword ? 'eye-open' : '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                </span>\r\n              } @else if (field.isCopyText && !field.toggleMask) {\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"copyText($event)\"\r\n                  (keydown)=\"copyText($event)\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"two-square\"\r\n                    data-icon-color=\"#03182b\"\r\n                  ></div>\r\n                </span>\r\n                @if (field.hasGenerateKey) {\r\n                  <span\r\n                    class=\"cursor-pointer\"\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                      data-icon-color=\"#03182b\"\r\n                    ></div>\r\n                  </span>\r\n                }\r\n              } @else if (field.toggleMask && field.isCopyText) {\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"showPassword = !showPassword\"\r\n                  (keydown)=\"showPassword = !showPassword\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    [attr.data-icon-name]=\"showPassword ? 'eye-open' : '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                </span>\r\n                <span\r\n                  class=\"cursor-pointer\"\r\n                  (click)=\"copyText($event)\"\r\n                  (keydown)=\"copyText($event)\"\r\n                >\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    data-icon-name=\"two-square\"\r\n                    data-icon-color=\"#03182b\"\r\n                  ></div>\r\n                </span>\r\n                @if (field.hasGenerateKey) {\r\n                  <span\r\n                    class=\"cursor-pointer\"\r\n                    (click)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                    (keydown)=\"field.onGenerateKey && field.onGenerateKey()\"\r\n                    [ngClass]=\"{ 'opacity-50 cursor-not-allowed': !control.value }\"\r\n                  >\r\n                    <div\r\n                      #iconContainer\r\n                      class=\"icon-container\"\r\n                      data-icon-name=\"round-arrow-top-left\"\r\n                      data-icon-color=\"#03182b\"\r\n                    ></div>\r\n                  </span>\r\n                }\r\n              }\r\n            </div>\r\n          </div>\r\n\r\n          @if (field.feedback && isPasswordFocused) {\r\n            <div class=\"mt-2 space-y-1\">\r\n              <div class=\"flex items-center justify-between text-xs\">\r\n                <span class=\"font-medium\" [ngClass]=\"strengthClass\">\r\n                  {{ passwordStrengthLabel | translate }}\r\n                </span>\r\n                <div class=\"flex items-center gap-1\">\r\n                  <div\r\n                    #iconContainer\r\n                    class=\"icon-container\"\r\n                    [attr.data-icon-name]=\"\r\n                      passwordStrengthPercent > 50 ? 'check-circle' : 'info-circle'\r\n                    \"\r\n                    data-icon-variant=\"Line\"\r\n                    data-icon-size=\"extrasmall\"\r\n                    [attr.data-icon-color]=\"\r\n                      passwordStrengthPercent <= 25\r\n                        ? '#ef3e42'\r\n                        : passwordStrengthPercent <= 75\r\n                          ? '#ff9f00'\r\n                          : '#6cc24a'\r\n                    \"\r\n                  ></div>\r\n                </div>\r\n              </div>\r\n              <div class=\"h-1.5 w-full bg-[#eef0f2] rounded-full overflow-hidden\">\r\n                <div\r\n                  class=\"h-full transition-all duration-300 rounded-full\"\r\n                  [ngClass]=\"{\r\n                    'bg-[#ef3e42]': passwordStrengthPercent <= 25,\r\n                    'bg-[#ff9f00]': passwordStrengthPercent > 25 && passwordStrengthPercent <= 75,\r\n                    'bg-[#6cc24a]': passwordStrengthPercent > 75,\r\n                  }\"\r\n                  [style.width.%]=\"passwordStrengthPercent\"\r\n                ></div>\r\n              </div>\r\n            </div>\r\n          }\r\n        }\r\n\r\n        <!-- Number Field -->\r\n        @case ('number') {\r\n          <div class=\"relative w-full\">\r\n            @if (field.prefix?.icon) {\r\n              <div class=\"absolute left-0 top-1/2 -translate-y-1/2 pl-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.prefix!.icon\"\r\n                  data-icon-variant=\"Line\"\r\n                  data-icon-size=\"medium\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\r\n                ></div>\r\n              </div>\r\n            }\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                'pl-10': field.prefix?.icon,\r\n                'text-[24px] font-bold': field.isCurrency,\r\n              }\"\r\n              [ngStyle]=\"{\r\n                color: field.valueColor || 'inherit',\r\n                'font-size': field.valueSize || '',\r\n              }\"\r\n              (focus)=\"onFocus()\"\r\n            />\r\n          </div>\r\n        }\r\n\r\n        <!-- Default Input Field (text, email, etc.) -->\r\n        @default {\r\n          <div class=\"relative z-0\">\r\n            @if (field.prefix?.icon) {\r\n              <div class=\"absolute left-0 top-1/2 -translate-y-1/2 pl-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.prefix!.icon\"\r\n                  data-icon-variant=\"Line\"\r\n                  data-icon-size=\"medium\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\r\n                ></div>\r\n              </div>\r\n            }\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                'pl-10': field.prefix?.icon,\r\n                'pr-10': field.icon || field.suffix?.icon,\r\n              }\"\r\n              [ngStyle]=\"{\r\n                color: field.valueColor || 'inherit',\r\n                'font-size': field.valueSize || '',\r\n              }\"\r\n              (focus)=\"onFocus()\"\r\n            />\r\n            @if (field.icon || field.suffix?.icon) {\r\n              <span class=\"absolute right-0 top-1/2 -translate-y-1/2 pr-3 flex items-center\">\r\n                <div\r\n                  #iconContainer\r\n                  class=\"icon-container\"\r\n                  [attr.data-icon-name]=\"field.suffix?.icon || field.icon!.name\"\r\n                  [attr.data-icon-variant]=\"field.icon?.variant || 'Line'\"\r\n                  [attr.data-icon-size]=\"field.icon ? getIconSizeName(field.icon.size) : 'medium'\"\r\n                  [attr.data-icon-color]=\"control.disabled ? '#c4cdd2' : '#03182b'\"\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:0!important;border-bottom:1px solid #c4cdd2!important;padding:8px 12px;width:100%;box-sizing:border-box;transition:border-color .2s ease-in-out;border-radius:0!important;appearance:none!important}.fn-input-field:focus{border-bottom:1px solid #0067b1!important;outline:none}.fn-input-field.error{border-bottom:1px solid #ef3e42!important}.fn-input-field.disabled{background-color:#eef0f2;color:#c4cdd2;cursor:not-allowed}.fn-input-field.pl-10{padding-left:36px!important}.fn-input-field.pr-10{padding-right:36px!important}.fn-input-field.pr-12{padding-right:44px!important}.fn-input-field.pr-24{padding-right:88px!important}.fn-input-field.pr-32{padding-right:120px!important}.icon-container{display:flex;align-items:center;justify-content:center;width:24px;height:24px;color:inherit}.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}.mt-2{margin-top:.5rem}.space-y-1>:not([hidden])~:not([hidden]){--tw-space-y-reverse: 0;margin-top:calc(.25rem * (1 - var(--tw-space-y-reverse)));margin-bottom:calc(.25rem * var(--tw-space-y-reverse))}.text-xs{font-size:.75rem;line-height:1rem}.font-medium{font-weight:500}.bg-\\[\\#eef0f2\\]{background-color:#eef0f2}.bg-\\[\\#ef3e42\\]{background-color:#ef3e42}.bg-\\[\\#ff9f00\\]{background-color:#ff9f00}.bg-\\[\\#6cc24a\\]{background-color:#6cc24a}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}.duration-300{transition-duration:.3s}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.h-1\\.5{height:.375rem}.w-full{width:100%}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.gap-1{gap:.25rem}.pl-3{padding-left:.75rem}.pr-3{padding-right:.75rem}.absolute{position:absolute}.right-0{right:0}.left-0{left:0}.top-1\\/2{top:50%}.-translate-y-1\\/2{transform:translateY(-50%)}.z-0{z-index:0}.relative{position:relative}.cursor-pointer{cursor:pointer}.text-ellipsis{text-overflow:ellipsis}\n"] }]
         }], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { field: [{
                 type: Input
             }], helperHandle: [{