fn-input 0.0.2 → 0.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/fesm2022/fn-input.mjs
CHANGED
|
@@ -1069,11 +1069,11 @@ class FNInput {
|
|
|
1069
1069
|
return !!(this.control?.valid && this.control?.touched);
|
|
1070
1070
|
}
|
|
1071
1071
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNInput, deps: [{ token: i0.ChangeDetectorRef }], target: i0.ɵɵFactoryTarget.Component });
|
|
1072
|
-
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=\"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> (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 });
|
|
1072
|
+
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> (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 });
|
|
1073
1073
|
}
|
|
1074
1074
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.12", ngImport: i0, type: FNInput, decorators: [{
|
|
1075
1075
|
type: Component,
|
|
1076
|
-
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> (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"] }]
|
|
1076
|
+
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> (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"] }]
|
|
1077
1077
|
}], ctorParameters: () => [{ type: i0.ChangeDetectorRef }], propDecorators: { field: [{
|
|
1078
1078
|
type: Input
|
|
1079
1079
|
}], helperHandle: [{
|