@webilix/ngx-form-m3 0.0.66 → 0.0.69
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.
|
@@ -229,8 +229,12 @@ class InputErrorPipe {
|
|
|
229
229
|
return `شماره موبایل صحیح مشخص نشده است.`;
|
|
230
230
|
}
|
|
231
231
|
break;
|
|
232
|
+
case 'id':
|
|
233
|
+
return value;
|
|
232
234
|
case 'username':
|
|
233
235
|
return value;
|
|
236
|
+
case 'nationalCode':
|
|
237
|
+
return 'کدملی صحیح مشخص نشده است.';
|
|
234
238
|
case 'pattern':
|
|
235
239
|
switch (type) {
|
|
236
240
|
case 'EMAIL':
|
|
@@ -247,6 +251,8 @@ class InputErrorPipe {
|
|
|
247
251
|
return 'کاراکترهای الزامی در کلمه عبور استفاده نشدهاند.';
|
|
248
252
|
case 'URL':
|
|
249
253
|
return 'فرمت استاندارد آدرس سایت رعایت نشده است.';
|
|
254
|
+
default:
|
|
255
|
+
return 'فرمت مقدار وارد شده صحیح نیست.';
|
|
250
256
|
}
|
|
251
257
|
break;
|
|
252
258
|
}
|
|
@@ -373,7 +379,7 @@ class InputBankCardComponent {
|
|
|
373
379
|
setCard(card) {
|
|
374
380
|
card = card.replace(/-/g, '').substring(0, 6);
|
|
375
381
|
const bank = Helper.BANK.findCard(card);
|
|
376
|
-
this.bank.
|
|
382
|
+
this.bank.set(bank?.title || '');
|
|
377
383
|
}
|
|
378
384
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputBankCardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
379
385
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputBankCardComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-bank-card" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0634\u0645\u0627\u0631\u0647 \u06A9\u0627\u0631\u062A \u0628\u0627\u0646\u06A9\u06CC' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint) {\n <mat-hint>{{ input.hint }}</mat-hint>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <div class=\"ngx-helper-form-m3-bank-card-input\">\n <!-- BANK NAME -->\n @if (!input.hideBank && bank() !== '') {\n <div class=\"bank\">{{ bank() }}</div>\n }\n\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"ngx-form-m3-en\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (input)=\"setValue(); setCard(bankCardInput.value)\"\n #bankCardInput\n />\n </div>\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
@@ -528,6 +534,47 @@ const DuplicateValidator = (callback) => {
|
|
|
528
534
|
};
|
|
529
535
|
};
|
|
530
536
|
|
|
537
|
+
const IdValidator = (verify) => {
|
|
538
|
+
return (formControl) => {
|
|
539
|
+
const value = formControl.value;
|
|
540
|
+
if (Helper.IS.empty(value) || !Helper.IS.string(value))
|
|
541
|
+
return null;
|
|
542
|
+
// MINLENGTH
|
|
543
|
+
const minLength = verify?.minLength;
|
|
544
|
+
if (minLength && minLength > 0 && value.length < minLength)
|
|
545
|
+
return { id: `مقدار باید حداقل داری ${Helper.NUMBER.format(minLength)} کاراکتر باشد.` };
|
|
546
|
+
// MAXLENGTH
|
|
547
|
+
const maxLength = verify?.maxLength;
|
|
548
|
+
if (maxLength && maxLength > 0 && value.length > maxLength)
|
|
549
|
+
return { id: `مقدار میتواند حداکثر داری ${Helper.NUMBER.format(maxLength)} کاراکتر باشد.` };
|
|
550
|
+
// ID
|
|
551
|
+
const regExp = new RegExp(/^[a-z0-9-.]{1,}$/);
|
|
552
|
+
if (!regExp.test(value)) {
|
|
553
|
+
const chars = [].filter((char) => char !== '');
|
|
554
|
+
return { id: 'کاراکترهای مجاز: حروف انگلیسی کوچک و اعداد انگلیسی' };
|
|
555
|
+
}
|
|
556
|
+
// USE DASH
|
|
557
|
+
if (!verify?.useDash && value.indexOf('-') !== -1)
|
|
558
|
+
return { id: `امکان استفاده از خط فاصله در مقدار وجود ندارد.` };
|
|
559
|
+
// USE DOT
|
|
560
|
+
if (!verify?.useDot && value.indexOf('.') !== -1)
|
|
561
|
+
return { id: `امکان استفاده از نقطه در مقدار وجود ندارد.` };
|
|
562
|
+
// START WITH CHAR
|
|
563
|
+
if (!verify?.canStartWithNumber) {
|
|
564
|
+
const regExp = new RegExp(/^[a-z]{1}/);
|
|
565
|
+
if (!regExp.test(value))
|
|
566
|
+
return { id: 'مقدار باید با یک کاراکتر انگلیسی شروع شده باشد.' };
|
|
567
|
+
}
|
|
568
|
+
// END WITH CHAR
|
|
569
|
+
if (!verify?.canEndWithNumber) {
|
|
570
|
+
const regExp = new RegExp(/[a-z]{1}$/);
|
|
571
|
+
if (!regExp.test(value))
|
|
572
|
+
return { id: 'مقدار باید با یک کاراکتر انگلیسی تمام شده باشد.' };
|
|
573
|
+
}
|
|
574
|
+
return null;
|
|
575
|
+
};
|
|
576
|
+
};
|
|
577
|
+
|
|
531
578
|
const LengthValidator = (length) => {
|
|
532
579
|
return (formControl) => {
|
|
533
580
|
const value = formControl.value;
|
|
@@ -551,6 +598,18 @@ const MobileValidator = () => {
|
|
|
551
598
|
};
|
|
552
599
|
};
|
|
553
600
|
|
|
601
|
+
const NationalCodeValidator = () => {
|
|
602
|
+
return (formControl) => {
|
|
603
|
+
const value = formControl.value;
|
|
604
|
+
if (Helper.IS.empty(value) || !Helper.IS.string(value))
|
|
605
|
+
return null;
|
|
606
|
+
// ERRORS
|
|
607
|
+
if (!Helper.IS.STRING.nationalCode(value))
|
|
608
|
+
return { nationalCode: true };
|
|
609
|
+
return null;
|
|
610
|
+
};
|
|
611
|
+
};
|
|
612
|
+
|
|
554
613
|
const UsernameValidator = (verify) => {
|
|
555
614
|
return (formControl) => {
|
|
556
615
|
const value = formControl.value;
|
|
@@ -573,10 +632,10 @@ const UsernameValidator = (verify) => {
|
|
|
573
632
|
}
|
|
574
633
|
// USE DASH
|
|
575
634
|
if (!verify?.useDash && value.indexOf('-') !== -1)
|
|
576
|
-
return { username: `امکان استفاده از خط فاصله در
|
|
635
|
+
return { username: `امکان استفاده از خط فاصله در نام کاربری وجود ندارد.` };
|
|
577
636
|
// USE DOT
|
|
578
637
|
if (!verify?.useDot && value.indexOf('.') !== -1)
|
|
579
|
-
return { username: `امکان استفاده از نقطه در
|
|
638
|
+
return { username: `امکان استفاده از نقطه در نام کاربری وجود ندارد.` };
|
|
580
639
|
// START WITH CHAR
|
|
581
640
|
if (!!verify?.startWithChar) {
|
|
582
641
|
const regExp = new RegExp(/^[a-z]{1}/);
|
|
@@ -1015,6 +1074,46 @@ class InputIconMethods extends InputMethods {
|
|
|
1015
1074
|
}
|
|
1016
1075
|
}
|
|
1017
1076
|
|
|
1077
|
+
class InputIdComponent {
|
|
1078
|
+
formControl = inject(INPUT_CONTROL);
|
|
1079
|
+
input = inject(INPUT_TYPE);
|
|
1080
|
+
config = inject(INPUT_CONFIG);
|
|
1081
|
+
values;
|
|
1082
|
+
isButtonDisabled;
|
|
1083
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIdComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1084
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputIdComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-id" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0634\u0646\u0627\u0633\u0647' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint) {\n <mat-hint>{{ input.hint }}</mat-hint>\n }\n\n <!-- ICON -->\n @if (input.showIcon) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon>label</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"ngx-form-m3-en\"\n [maxLength]=\"input.verify?.maxLength || 524288\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1085
|
+
}
|
|
1086
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputIdComponent, decorators: [{
|
|
1087
|
+
type: Component,
|
|
1088
|
+
args: [{ host: { selector: 'input-id' }, imports: [
|
|
1089
|
+
ReactiveFormsModule,
|
|
1090
|
+
MatFormField,
|
|
1091
|
+
MatIcon,
|
|
1092
|
+
MatIconButton,
|
|
1093
|
+
MatInputModule,
|
|
1094
|
+
AutoCompleteDirective,
|
|
1095
|
+
AutoFocusDirective,
|
|
1096
|
+
InputErrorPipe,
|
|
1097
|
+
MultiLinePipe,
|
|
1098
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0634\u0646\u0627\u0633\u0647' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint) {\n <mat-hint>{{ input.hint }}</mat-hint>\n }\n\n <!-- ICON -->\n @if (input.showIcon) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon>label</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"ngx-form-m3-en\"\n [maxLength]=\"input.verify?.maxLength || 524288\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n" }]
|
|
1099
|
+
}], propDecorators: { values: [{
|
|
1100
|
+
type: Input,
|
|
1101
|
+
args: [{ required: true }]
|
|
1102
|
+
}], isButtonDisabled: [{
|
|
1103
|
+
type: Input,
|
|
1104
|
+
args: [{ required: true }]
|
|
1105
|
+
}] } });
|
|
1106
|
+
|
|
1107
|
+
class InputIdMethods extends InputMethods {
|
|
1108
|
+
control(input, validators) {
|
|
1109
|
+
validators.push(IdValidator(input.verify));
|
|
1110
|
+
return new FormControl(input.value || null, validators);
|
|
1111
|
+
}
|
|
1112
|
+
value(value, input) {
|
|
1113
|
+
return Helper.IS.string(value) && value !== '' ? value : null;
|
|
1114
|
+
}
|
|
1115
|
+
}
|
|
1116
|
+
|
|
1018
1117
|
class InputIpComponent {
|
|
1019
1118
|
formControl = inject(INPUT_CONTROL);
|
|
1020
1119
|
input = inject(INPUT_TYPE);
|
|
@@ -1483,6 +1582,55 @@ class InputNameMethods extends InputMethods {
|
|
|
1483
1582
|
}
|
|
1484
1583
|
}
|
|
1485
1584
|
|
|
1585
|
+
class InputNationalCodeComponent {
|
|
1586
|
+
formControl = inject(INPUT_CONTROL);
|
|
1587
|
+
input = inject(INPUT_TYPE);
|
|
1588
|
+
config = inject(INPUT_CONFIG);
|
|
1589
|
+
values;
|
|
1590
|
+
isButtonDisabled;
|
|
1591
|
+
maskitoOptions = {
|
|
1592
|
+
mask: Array.from({ length: 10 }).fill(/\d/),
|
|
1593
|
+
preprocessors: [
|
|
1594
|
+
// CHANGE PERSIAN NUMBERS
|
|
1595
|
+
({ elementState, data }) => ({ elementState, data: Helper.STRING.changeNumbers(data.toString(), 'EN') }),
|
|
1596
|
+
],
|
|
1597
|
+
};
|
|
1598
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNationalCodeComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1599
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputNationalCodeComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-national-code" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u06A9\u062F\u0645\u0644\u06CC' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint) {\n <mat-hint>{{ input.hint }}</mat-hint>\n }\n\n <!-- ICON & SUFFIX -->\n @if (input.showIcon) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <mat-icon>badge</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"ngx-form-m3-en\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
1600
|
+
}
|
|
1601
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNationalCodeComponent, decorators: [{
|
|
1602
|
+
type: Component,
|
|
1603
|
+
args: [{ host: { selector: 'input-national-code' }, imports: [
|
|
1604
|
+
ReactiveFormsModule,
|
|
1605
|
+
MatFormField,
|
|
1606
|
+
MatIcon,
|
|
1607
|
+
MatIconButton,
|
|
1608
|
+
MatInputModule,
|
|
1609
|
+
MaskitoDirective,
|
|
1610
|
+
AutoCompleteDirective,
|
|
1611
|
+
AutoFocusDirective,
|
|
1612
|
+
InputErrorPipe,
|
|
1613
|
+
MultiLinePipe,
|
|
1614
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u06A9\u062F\u0645\u0644\u06CC' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint) {\n <mat-hint>{{ input.hint }}</mat-hint>\n }\n\n <!-- ICON & SUFFIX -->\n @if (input.showIcon) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <mat-icon>badge</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"ngx-form-m3-en\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n" }]
|
|
1615
|
+
}], propDecorators: { values: [{
|
|
1616
|
+
type: Input,
|
|
1617
|
+
args: [{ required: true }]
|
|
1618
|
+
}], isButtonDisabled: [{
|
|
1619
|
+
type: Input,
|
|
1620
|
+
args: [{ required: true }]
|
|
1621
|
+
}] } });
|
|
1622
|
+
|
|
1623
|
+
class InputNationalCodeMethods extends InputMethods {
|
|
1624
|
+
control(input, validators) {
|
|
1625
|
+
validators.push(NationalCodeValidator());
|
|
1626
|
+
const value = input.value && Helper.IS.STRING.nationalCode(input.value) ? input.value.toLowerCase() : null;
|
|
1627
|
+
return new FormControl(value, validators);
|
|
1628
|
+
}
|
|
1629
|
+
value(value, input) {
|
|
1630
|
+
return typeof value === 'string' && Helper.IS.STRING.nationalCode(value) ? value.toLowerCase() : null;
|
|
1631
|
+
}
|
|
1632
|
+
}
|
|
1633
|
+
|
|
1486
1634
|
class InputNumberComponent {
|
|
1487
1635
|
formControl = inject(INPUT_CONTROL);
|
|
1488
1636
|
input = inject(INPUT_TYPE);
|
|
@@ -1528,7 +1676,7 @@ class InputNumberComponent {
|
|
|
1528
1676
|
this.hintText = (isNegative ? 'منفی ' : '') + Helper.NUMBER.getTitle(Math.abs(value));
|
|
1529
1677
|
}
|
|
1530
1678
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNumberComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1531
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputNumberComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-number" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.suffix }}</span>\n </span>\n }\n\n <!-- ICON -->\n @if (input.showIcon && !input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon>tag</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n
|
|
1679
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputNumberComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-number" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.suffix }}</span>\n </span>\n }\n\n <!-- ICON -->\n @if (input.showIcon && !input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon>tag</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (input)=\"setValue(numberInput.value); updateHint()\"\n [disabled]=\"formControl.disabled\"\n (focus)=\"isFocused = true; updateHint()\"\n (blur)=\"isFocused = false\"\n #numberInput\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix.text{padding-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1532
1680
|
}
|
|
1533
1681
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputNumberComponent, decorators: [{
|
|
1534
1682
|
type: Component,
|
|
@@ -1544,7 +1692,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
1544
1692
|
AutoFocusDirective,
|
|
1545
1693
|
InputErrorPipe,
|
|
1546
1694
|
MultiLinePipe,
|
|
1547
|
-
], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.suffix }}</span>\n </span>\n }\n\n <!-- ICON -->\n @if (input.showIcon && !input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon>tag</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n
|
|
1695
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix text\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.suffix }}</span>\n </span>\n }\n\n <!-- ICON -->\n @if (input.showIcon && !input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon>tag</mat-icon>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (input)=\"setValue(numberInput.value); updateHint()\"\n [disabled]=\"formControl.disabled\"\n (focus)=\"isFocused = true; updateHint()\"\n (blur)=\"isFocused = false\"\n #numberInput\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix.text{padding-right:.5rem}\n"] }]
|
|
1548
1696
|
}], propDecorators: { values: [{
|
|
1549
1697
|
type: Input,
|
|
1550
1698
|
args: [{ required: true }]
|
|
@@ -1747,7 +1895,7 @@ class InputPriceComponent {
|
|
|
1747
1895
|
: Helper.NUMBER.getTitle(Math.abs(value)) + (this.input.currency ? ` ${this.input.currency}` : '');
|
|
1748
1896
|
}
|
|
1749
1897
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputPriceComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1750
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputPriceComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-price" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.currency) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.currency }}</span>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n
|
|
1898
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputPriceComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-price" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.currency) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.currency }}</span>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (input)=\"setValue(numberInput.value); updateHint()\"\n [disabled]=\"formControl.disabled\"\n (focus)=\"isFocused = true; updateHint()\"\n (blur)=\"isFocused = false\"\n #numberInput\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
1751
1899
|
}
|
|
1752
1900
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputPriceComponent, decorators: [{
|
|
1753
1901
|
type: Component,
|
|
@@ -1763,7 +1911,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
1763
1911
|
AutoFocusDirective,
|
|
1764
1912
|
InputErrorPipe,
|
|
1765
1913
|
MultiLinePipe,
|
|
1766
|
-
], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.currency) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.currency }}</span>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n
|
|
1914
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0642\u06CC\u0645\u062A' }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint || (isFocused && hintText)) {\n <mat-hint>{{ isFocused && hintText ? hintText : input.hint }}</mat-hint>\n }\n\n <!-- CURRENCY -->\n @if (input.currency) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span>{{ input.currency }}</span>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n matInput\n type=\"text\"\n inputmode=\"numeric\"\n class=\"ngx-form-m3-en\"\n [ngModel]=\"formControl.value?.toString() || ''\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (input)=\"setValue(numberInput.value); updateHint()\"\n [disabled]=\"formControl.disabled\"\n (focus)=\"isFocused = true; updateHint()\"\n (blur)=\"isFocused = false\"\n #numberInput\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}\n"] }]
|
|
1767
1915
|
}], propDecorators: { values: [{
|
|
1768
1916
|
type: Input,
|
|
1769
1917
|
args: [{ required: true }]
|
|
@@ -2001,8 +2149,22 @@ class InputTextComponent {
|
|
|
2001
2149
|
config = inject(INPUT_CONFIG);
|
|
2002
2150
|
values;
|
|
2003
2151
|
isButtonDisabled;
|
|
2152
|
+
maskitoOptions = this.input.mask
|
|
2153
|
+
? {
|
|
2154
|
+
mask: this.input.mask,
|
|
2155
|
+
preprocessors: this.input.maskChangeNumbers
|
|
2156
|
+
? [
|
|
2157
|
+
// CHANGE PERSIAN NUMBERS
|
|
2158
|
+
({ elementState, data }) => ({
|
|
2159
|
+
elementState,
|
|
2160
|
+
data: Helper.STRING.changeNumbers(data.toString(), 'EN'),
|
|
2161
|
+
}),
|
|
2162
|
+
]
|
|
2163
|
+
: [],
|
|
2164
|
+
}
|
|
2165
|
+
: null;
|
|
2004
2166
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2005
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputTextComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-text" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {
|
|
2167
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.4", type: InputTextComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-text" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"!!input.prefix ? 'always' : 'auto'\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint) {\n <mat-hint>{{ input.hint }}</mat-hint>\n }\n\n <!-- SUFFIX -->\n @if (!!input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span [class.ngx-form-m3-en]=\"input.suffixEnglish\">{{ input.suffix }}</span>\n </span>\n }\n\n <!-- PREFIX -->\n @if (!!input.prefix) {\n <span matTextPrefix=\"\" class=\"ngx-form-m3-input-prefix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span [class.ngx-form-m3-en]=\"input.prefixEnglish\">{{ input.prefix }}</span>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n [maxLength]=\"input.maxLength || 524288\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n [readonly]=\"input.readonly\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}.ngx-form-m3-input-prefix{padding-left:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2$1.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: MaskitoDirective, selector: "[maskito]", inputs: ["maskito", "maskitoElement"], outputs: ["maskitoChange", "maskitoElementChange"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }], changeDetection: i0.ChangeDetectionStrategy.Eager });
|
|
2006
2168
|
}
|
|
2007
2169
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
2008
2170
|
type: Component,
|
|
@@ -2013,11 +2175,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
|
|
|
2013
2175
|
MatIcon,
|
|
2014
2176
|
MatIconButton,
|
|
2015
2177
|
MatInputModule,
|
|
2178
|
+
MaskitoDirective,
|
|
2016
2179
|
AutoCompleteDirective,
|
|
2017
2180
|
AutoFocusDirective,
|
|
2018
2181
|
InputErrorPipe,
|
|
2019
2182
|
MultiLinePipe,
|
|
2020
|
-
], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {
|
|
2183
|
+
], changeDetection: ChangeDetectionStrategy.Eager, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"!!input.prefix ? 'always' : 'auto'\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) {\n <mat-error>{{ formControl.errors | InputErrorPipe: input.type }}</mat-error>\n }\n\n <!-- HINT -->\n @if (input.hint) {\n <mat-hint>{{ input.hint }}</mat-hint>\n }\n\n <!-- SUFFIX -->\n @if (!!input.suffix) {\n <span matTextSuffix class=\"ngx-form-m3-input-suffix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span [class.ngx-form-m3-en]=\"input.suffixEnglish\">{{ input.suffix }}</span>\n </span>\n }\n\n <!-- PREFIX -->\n @if (!!input.prefix) {\n <span matTextPrefix=\"\" class=\"ngx-form-m3-input-prefix\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span [class.ngx-form-m3-en]=\"input.prefixEnglish\">{{ input.prefix }}</span>\n </span>\n }\n\n <!-- BUTTON -->\n @if (input.button) {\n <span matIconSuffix>\n <button\n mat-icon-button\n type=\"button\"\n [disabled]=\"isButtonDisabled\"\n (click)=\"input.button.onClick(values)\"\n [tabIndex]=\"-1\"\n >\n <mat-icon [style.color]=\"isButtonDisabled ? undefined : input.button.color\">\n {{ input.button.icon }}\n </mat-icon>\n </button>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n [maxLength]=\"input.maxLength || 524288\"\n [maskito]=\"maskitoOptions\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n [readonly]=\"input.readonly\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [".ngx-form-m3-input-suffix{padding-right:.5rem}.ngx-form-m3-input-prefix{padding-left:.5rem}\n"] }]
|
|
2021
2184
|
}], propDecorators: { values: [{
|
|
2022
2185
|
type: Input,
|
|
2023
2186
|
args: [{ required: true }]
|
|
@@ -2038,6 +2201,8 @@ class InputTextMethods extends InputMethods {
|
|
|
2038
2201
|
if (maxLength && maxLength > 0)
|
|
2039
2202
|
validators.push(Validators.maxLength(maxLength));
|
|
2040
2203
|
}
|
|
2204
|
+
if (input.pattern)
|
|
2205
|
+
validators.push(Validators.pattern(input.pattern));
|
|
2041
2206
|
return new FormControl(input.value || null, validators);
|
|
2042
2207
|
}
|
|
2043
2208
|
value(value, input) {
|
|
@@ -2328,12 +2493,14 @@ const InputInfo = {
|
|
|
2328
2493
|
EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
|
|
2329
2494
|
FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
|
|
2330
2495
|
ICON: { title: 'آیکون', methods: new InputIconMethods(), component: InputIconComponent },
|
|
2496
|
+
ID: { title: 'شناسه', methods: new InputIdMethods(), component: InputIdComponent },
|
|
2331
2497
|
IP: { title: 'آدرس آیپی', methods: new InputIpMethods(), component: InputIpComponent },
|
|
2332
2498
|
'ITEM-LIST': { title: 'لیست مقادیر', methods: new InputItemListMethods(), component: InputItemListComponent },
|
|
2333
2499
|
MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
|
|
2334
2500
|
MOMENT: { title: 'زمان', methods: new InputMomentMethods(), component: InputMomentComponent },
|
|
2335
2501
|
'MULTI-SELECT': { title: 'چند انتخابی', methods: new InputMultiSelectMethods(), component: InputMultiSelectComponent },
|
|
2336
2502
|
NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
|
|
2503
|
+
'NATIONAL-CODE': { title: 'کدملی', methods: new InputNationalCodeMethods(), component: InputNationalCodeComponent },
|
|
2337
2504
|
NUMBER: { title: 'مقدار عددی', methods: new InputNumberMethods(), component: InputNumberComponent },
|
|
2338
2505
|
'OPTION-LIST': { title: 'لیست گزینهها', methods: new InputOptionListMethods(), component: InputOptionListComponent },
|
|
2339
2506
|
PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
|