318 lines
9.1 KiB
TypeScript
318 lines
9.1 KiB
TypeScript
import { Maybe } from '@/core';
|
||
import { ToastService } from '@/core/services/toast.service';
|
||
import { UikitLabelComponent } from '@/uikit';
|
||
import { UikitFieldComponent } from '@/uikit/uikit-field.component';
|
||
import { CommonModule } from '@angular/common';
|
||
import {
|
||
Component,
|
||
computed,
|
||
ContentChild,
|
||
EventEmitter,
|
||
inject,
|
||
Input,
|
||
Output,
|
||
TemplateRef,
|
||
} from '@angular/core';
|
||
import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
|
||
import { InputGroupModule } from 'primeng/inputgroup';
|
||
import { InputGroupAddon } from 'primeng/inputgroupaddon';
|
||
import { InputMaskModule } from 'primeng/inputmask';
|
||
import { InputNumberModule } from 'primeng/inputnumber';
|
||
import { InputTextModule } from 'primeng/inputtext';
|
||
import { KeyFilterModule } from 'primeng/keyfilter';
|
||
import { ToggleSwitch } from 'primeng/toggleswitch';
|
||
|
||
@Component({
|
||
selector: 'app-input',
|
||
standalone: true,
|
||
imports: [
|
||
CommonModule,
|
||
ReactiveFormsModule,
|
||
InputTextModule,
|
||
InputGroupModule,
|
||
UikitFieldComponent,
|
||
ToggleSwitch,
|
||
InputGroupAddon,
|
||
InputNumberModule,
|
||
KeyFilterModule,
|
||
InputMaskModule,
|
||
UikitLabelComponent,
|
||
],
|
||
templateUrl: './input.component.html',
|
||
})
|
||
export class InputComponent {
|
||
private lastValidNumericValue = '';
|
||
@Input() type:
|
||
| 'simple'
|
||
| 'postalCode'
|
||
| 'nationalId'
|
||
| 'mobile'
|
||
| 'phone'
|
||
| 'email'
|
||
| 'checkbox'
|
||
| 'switch'
|
||
| 'number' = 'simple';
|
||
@Input() control!: FormControl<Maybe<any>>;
|
||
@Input() name!: string;
|
||
@Input() label: string = '';
|
||
@Input() placeholder?: string;
|
||
@Input() required = false;
|
||
@Input() disabled = false;
|
||
@Input() size?: 'small' | 'large';
|
||
@Input() autocomplete?: string = 'off';
|
||
@Input() showErrors = true;
|
||
@Input() hint?: string;
|
||
@Input() isLtrInput = false;
|
||
@Input() suffix: string = '';
|
||
@Input() maxLength?: number;
|
||
@Input() length?: number;
|
||
@Input() min?: number;
|
||
@Input() max?: number;
|
||
@Input() fixed?: number;
|
||
@Input() numericValue?: number;
|
||
@Output() valueChange = new EventEmitter<string | number>();
|
||
@Output() blur = new EventEmitter<void>();
|
||
|
||
@ContentChild('suffixTemp', { static: true }) suffixTemp!: TemplateRef<any> | null;
|
||
@ContentChild('labelSuffix', { static: false }) labelSuffix!: TemplateRef<any> | null;
|
||
@ContentChild('labelTextView', { static: false }) labelTextView!: TemplateRef<any> | null;
|
||
|
||
private readonly toastService = inject(ToastService);
|
||
|
||
preparedSuffix = computed(() => {
|
||
return this.suffix;
|
||
});
|
||
|
||
get preparedPlaceholder(): string | null {
|
||
if (this.placeholder) return this.placeholder;
|
||
switch (this.type) {
|
||
case 'mobile':
|
||
return '09xxxxxxxx';
|
||
case 'postalCode':
|
||
return 'کد پستی (۱۰ رقم)';
|
||
case 'nationalId':
|
||
return 'کد ملی (۱۰ رقم)';
|
||
case 'phone':
|
||
return 'شماره تلفن';
|
||
case 'email':
|
||
return 'آدرس ایمیل خود را وارد کنید';
|
||
default:
|
||
return '';
|
||
}
|
||
}
|
||
|
||
get inputMode(): string {
|
||
switch (this.type) {
|
||
case 'number':
|
||
return 'decimal';
|
||
case 'postalCode':
|
||
case 'nationalId':
|
||
return 'numeric';
|
||
case 'mobile':
|
||
case 'phone':
|
||
return 'tel';
|
||
case 'email':
|
||
return 'email';
|
||
case 'checkbox':
|
||
return 'checkbox';
|
||
case 'switch':
|
||
return 'radio';
|
||
default:
|
||
return 'text';
|
||
}
|
||
}
|
||
|
||
get isNumeric(): boolean {
|
||
return ['number', 'decimal'].includes(this.inputMode);
|
||
}
|
||
|
||
get preparedMaxLength(): number | null {
|
||
const length = this.length || this.maxLength;
|
||
if (length) return length;
|
||
switch (this.type) {
|
||
case 'mobile':
|
||
return 11;
|
||
case 'postalCode':
|
||
case 'nationalId':
|
||
return 10;
|
||
case 'phone':
|
||
return 11;
|
||
default:
|
||
return this.maxLength || null;
|
||
}
|
||
}
|
||
|
||
get inputClass(): string {
|
||
let inputClass = [];
|
||
switch (this.type) {
|
||
case 'mobile':
|
||
case 'phone':
|
||
case 'number':
|
||
inputClass.push('ltrInput');
|
||
break;
|
||
case 'email':
|
||
case 'postalCode':
|
||
case 'nationalId':
|
||
inputClass.push('ltrInput', 'rtlPlaceholder');
|
||
break;
|
||
}
|
||
|
||
if (this.isLtrInput) {
|
||
inputClass.push('ltrInput', 'rtlPlaceholder');
|
||
}
|
||
return inputClass.join(' ');
|
||
}
|
||
|
||
get htmlType(): string {
|
||
switch (this.type) {
|
||
case 'email':
|
||
return 'email';
|
||
// case 'mobile':
|
||
// case 'phone':
|
||
// case 'postalCode':
|
||
// case 'nationalId':
|
||
case 'number':
|
||
return 'number';
|
||
case 'checkbox':
|
||
return 'checkbox';
|
||
case 'switch':
|
||
return 'radio';
|
||
default:
|
||
return 'text';
|
||
}
|
||
}
|
||
|
||
get isRequired(): boolean {
|
||
return this.required || this.control.hasValidator(Validators.required);
|
||
}
|
||
|
||
private toEnglishDigits(value: string): string {
|
||
return value
|
||
.replace(/[۰-۹]/g, (digit) => String(digit.charCodeAt(0) - 1776))
|
||
.replace(/[٠-٩]/g, (digit) => String(digit.charCodeAt(0) - 1632));
|
||
}
|
||
|
||
private sanitizeNumericValue(value: string, allowDecimal: boolean): string {
|
||
const normalized = this.toEnglishDigits(value).replace(/,/g, '');
|
||
|
||
const cleaned = normalized.replace(allowDecimal ? /[^0-9.]/g : /[^0-9]/g, '');
|
||
if (!allowDecimal) return cleaned;
|
||
|
||
const [integerPart = '', ...decimalParts] = cleaned.split('.');
|
||
const mergedDecimals = decimalParts.join('');
|
||
return decimalParts.length ? `${integerPart}.${mergedDecimals}` : integerPart;
|
||
}
|
||
|
||
private applyFixed(value: string): string {
|
||
if (this.fixed === undefined || this.fixed === null || this.fixed < 0 || value === '') {
|
||
return value;
|
||
}
|
||
|
||
if (this.fixed === 0) {
|
||
return value.split('.')[0] || '0';
|
||
}
|
||
|
||
const [integerPart = '0', decimalPart = ''] = value.split('.');
|
||
const normalizedInteger = integerPart === '' ? '0' : integerPart;
|
||
const fixedDecimal = decimalPart.slice(0, this.fixed).padEnd(this.fixed, '0');
|
||
return `${normalizedInteger}.${fixedDecimal}`;
|
||
}
|
||
|
||
private normalizeLeadingZeros(value: string, allowDecimal: boolean): string {
|
||
if (!value) return value;
|
||
if (!allowDecimal) {
|
||
return value.replace(/^0+(?=\d)/, '');
|
||
}
|
||
|
||
if (value.includes('.')) {
|
||
const [integerPart = '0', decimalPart = ''] = value.split('.');
|
||
const normalizedInteger = integerPart.replace(/^0+(?=\d)/, '') || '0';
|
||
return `${normalizedInteger}.${decimalPart}`;
|
||
}
|
||
|
||
return value.replace(/^0+(?=\d)/, '');
|
||
}
|
||
|
||
private enforceMaxLength(value: string): string {
|
||
if (!this.preparedMaxLength || value.length <= this.preparedMaxLength) return value;
|
||
return value.slice(0, this.preparedMaxLength);
|
||
}
|
||
|
||
private parseNumericValue(value: string): number {
|
||
return Number.isNaN(parseFloat(value)) ? 0 : parseFloat(value);
|
||
}
|
||
|
||
private isOutOfRange(numericValue: number): { min: boolean; max: boolean } {
|
||
return {
|
||
min: !!((this.min || this.min === 0) && numericValue < this.min),
|
||
max: !!((this.max || this.max === 0) && numericValue > this.max),
|
||
};
|
||
}
|
||
|
||
private notifyRangeError(range: { min: boolean; max: boolean }) {
|
||
if (range.max) {
|
||
this.toastService.warn({
|
||
text: `مقدار ${this.label} نمیتواند بیشتر از ${this.max} باشد.`,
|
||
});
|
||
}
|
||
if (range.min) {
|
||
this.toastService.warn({
|
||
text: `مقدار ${this.label} نمیتواند کمتر از ${this.min} باشد.`,
|
||
});
|
||
}
|
||
}
|
||
|
||
private isIdentifierField(): boolean {
|
||
return ['mobile', 'phone', 'postalCode', 'nationalId'].includes(this.type);
|
||
}
|
||
|
||
private writeControlAndViewValue(target: HTMLInputElement, value: string, numericValue: number) {
|
||
const isIdentifierField = this.isIdentifierField();
|
||
|
||
const controlValue = isIdentifierField ? value : value === '' ? '' : numericValue;
|
||
this.control.setValue(controlValue);
|
||
target.value = value;
|
||
}
|
||
|
||
onInput($event: Event) {
|
||
const target = $event.target as HTMLInputElement | null;
|
||
if (!target) return;
|
||
|
||
let value = target.value ?? '';
|
||
const allowDecimal = this.type === 'number';
|
||
const isNumericMode = this.isNumeric;
|
||
|
||
if (isNumericMode) {
|
||
value = this.sanitizeNumericValue(value, allowDecimal);
|
||
value = this.applyFixed(value);
|
||
value = this.normalizeLeadingZeros(value, allowDecimal);
|
||
|
||
value = this.enforceMaxLength(value);
|
||
|
||
let numericValue = this.parseNumericValue(value);
|
||
|
||
const range = this.isOutOfRange(numericValue);
|
||
if (value !== '' && (range.min || range.max)) {
|
||
this.notifyRangeError(range);
|
||
value = this.lastValidNumericValue;
|
||
numericValue = this.parseNumericValue(value);
|
||
this.writeControlAndViewValue(target, value, numericValue);
|
||
return;
|
||
} else {
|
||
this.lastValidNumericValue = value;
|
||
}
|
||
|
||
this.writeControlAndViewValue(target, value, numericValue);
|
||
if (this.valueChange.observed) {
|
||
this.valueChange.emit(this.isIdentifierField() ? value : numericValue);
|
||
}
|
||
}
|
||
}
|
||
|
||
ngOnInit() {
|
||
const allowDecimal = this.type === 'number';
|
||
const initial = this.sanitizeNumericValue(`${this.control?.value ?? ''}`, allowDecimal);
|
||
this.lastValidNumericValue = initial;
|
||
}
|
||
}
|