@webilix/ngx-form-m3 0.0.45 → 0.0.47
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.
|
@@ -207,6 +207,8 @@ class InputErrorPipe {
|
|
|
207
207
|
return `شماره کارت بانکی صحیح مشخص نشده است.`;
|
|
208
208
|
case 'bank-sheba':
|
|
209
209
|
return `شماره شبا صحیح مشخص نشده است.`;
|
|
210
|
+
case 'username':
|
|
211
|
+
return value;
|
|
210
212
|
case 'pattern':
|
|
211
213
|
switch (type) {
|
|
212
214
|
case 'EMAIL':
|
|
@@ -493,6 +495,48 @@ const LengthValidator = (length) => {
|
|
|
493
495
|
};
|
|
494
496
|
};
|
|
495
497
|
|
|
498
|
+
const UsernameValidator = (verify) => {
|
|
499
|
+
return (formControl) => {
|
|
500
|
+
const value = formControl.value;
|
|
501
|
+
if (Helper.IS.empty(value) || !Helper.IS.string(value))
|
|
502
|
+
return null;
|
|
503
|
+
// MINLENGTH
|
|
504
|
+
const minLength = verify?.minLength;
|
|
505
|
+
if (minLength && minLength > 0 && value.length < minLength)
|
|
506
|
+
return { username: `مقدار باید حداقل داری ${Helper.NUMBER.format(minLength)} کاراکتر باشد.` };
|
|
507
|
+
// USERNAME
|
|
508
|
+
const regExp = new RegExp(/^[a-z0-9-.]{1,}$/);
|
|
509
|
+
if (!regExp.test(value)) {
|
|
510
|
+
const chars = [
|
|
511
|
+
'حروف انگلیسی کوچک',
|
|
512
|
+
'اعداد انگلیسی',
|
|
513
|
+
!!verify?.useDash ? 'خط فاصله' : '',
|
|
514
|
+
!!verify?.useDot ? 'نقطه' : '',
|
|
515
|
+
].filter((char) => char !== '');
|
|
516
|
+
return { username: `کاراکترهای مجاز: ${chars.join('، ')}` };
|
|
517
|
+
}
|
|
518
|
+
// USE DASH
|
|
519
|
+
if (!verify?.useDash && value.indexOf('-') !== -1)
|
|
520
|
+
return { username: `امکان استفاده از خط فاصله در کلمه عبور وجود ندارد.` };
|
|
521
|
+
// USE DOT
|
|
522
|
+
if (!verify?.useDot && value.indexOf('.') !== -1)
|
|
523
|
+
return { username: `امکان استفاده از نقطه در کلمه عبور وجود ندارد.` };
|
|
524
|
+
// START WITH CHAR
|
|
525
|
+
if (!!verify?.startWithChar) {
|
|
526
|
+
const regExp = new RegExp(/^[a-z]{1}/);
|
|
527
|
+
if (!regExp.test(value))
|
|
528
|
+
return { username: 'مقدار باید با یک کاراکتر انگلیسی شروع شده باشد.' };
|
|
529
|
+
}
|
|
530
|
+
// END WITH CHAR
|
|
531
|
+
if (!!verify?.endWithChar) {
|
|
532
|
+
const regExp = new RegExp(/[a-z]{1}$/);
|
|
533
|
+
if (!regExp.test(value))
|
|
534
|
+
return { username: 'مقدار باید با یک کاراکتر انگلیسی تمام شده باشد.' };
|
|
535
|
+
}
|
|
536
|
+
return null;
|
|
537
|
+
};
|
|
538
|
+
};
|
|
539
|
+
|
|
496
540
|
class InputBankCardMethods extends InputMethods {
|
|
497
541
|
control(input, validators) {
|
|
498
542
|
validators.push(BankCardValidator());
|
|
@@ -1801,7 +1845,7 @@ class InputTagComponent {
|
|
|
1801
1845
|
event.option.deselect();
|
|
1802
1846
|
}
|
|
1803
1847
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTagComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1804
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputTagComponent, isStandalone: true, selector: "ng-component", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: true, transformFunction: null }, isButtonDisabled: { classPropertyName: "isButtonDisabled", publicName: "isButtonDisabled", isSignal: false, isRequired: true, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange" }, host: { attributes: { "selector": "input-tag" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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 <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n @for (tag of tags; track $index) {\n <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n <span class=\"tag\">{{ tag }}</span>\n <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n </mat-chip-row>\n }\n
|
|
1848
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputTagComponent, isStandalone: true, selector: "ng-component", inputs: { values: { classPropertyName: "values", publicName: "values", isSignal: false, isRequired: true, transformFunction: null }, isButtonDisabled: { classPropertyName: "isButtonDisabled", publicName: "isButtonDisabled", isSignal: false, isRequired: true, transformFunction: null }, inputValue: { classPropertyName: "inputValue", publicName: "inputValue", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { inputValue: "inputValueChange" }, host: { attributes: { "selector": "input-tag" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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 <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n @for (tag of tags; track $index) {\n <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n <span class=\"tag\">{{ tag }}</span>\n <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n </mat-chip-row>\n }\n <input\n type=\"text\"\n name=\"inputValue\"\n [(ngModel)]=\"inputValue\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n [matChipInputFor]=\"chipGrid\"\n [matAutocomplete]=\"auto\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n #tagInput\n />\n </mat-chip-grid>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n </mat-autocomplete>\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])[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.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i3$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i3$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i3$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i3$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { 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.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" }] });
|
|
1805
1849
|
}
|
|
1806
1850
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputTagComponent, decorators: [{
|
|
1807
1851
|
type: Component,
|
|
@@ -1818,7 +1862,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImpor
|
|
|
1818
1862
|
AutoFocusDirective,
|
|
1819
1863
|
InputErrorPipe,
|
|
1820
1864
|
MultiLinePipe,
|
|
1821
|
-
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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 <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n @for (tag of tags; track $index) {\n <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n <span class=\"tag\">{{ tag }}</span>\n <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n </mat-chip-row>\n }\n
|
|
1865
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"tags.length === 0 ? 'auto' : 'always'\">\n <mat-label>{{ input.title || '\u062A\u06AF' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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 <mat-chip-grid #chipGrid [formControl]=\"formControl\" class=\"ngx-helper-form-m3-tag-input\">\n @for (tag of tags; track $index) {\n <mat-chip-row (removed)=\"removeTag(tag); tagInput.value = ''\">\n <span class=\"tag\">{{ tag }}</span>\n <button matChipRemove type=\"button\"><mat-icon>cancel</mat-icon></button>\n </mat-chip-row>\n }\n <input\n type=\"text\"\n name=\"inputValue\"\n [(ngModel)]=\"inputValue\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n [matChipInputFor]=\"chipGrid\"\n [matAutocomplete]=\"auto\"\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\n (matChipInputTokenEnd)=\"addTag($event); tagInput.value = ''\"\n #tagInput\n />\n </mat-chip-grid>\n <mat-autocomplete #auto=\"matAutocomplete\" (optionSelected)=\"selectTag($event); tagInput.value = ''\">\n @for (option of filteredTags(); track $index) { <mat-option [value]=\"option\">{{ option }}</mat-option> }\n </mat-autocomplete>\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" }]
|
|
1822
1866
|
}], propDecorators: { values: [{
|
|
1823
1867
|
type: Input,
|
|
1824
1868
|
args: [{ required: true }]
|
|
@@ -1979,6 +2023,47 @@ class InputUrlMethods extends InputMethods {
|
|
|
1979
2023
|
}
|
|
1980
2024
|
}
|
|
1981
2025
|
|
|
2026
|
+
class InputUsernameComponent {
|
|
2027
|
+
formControl = inject(INPUT_CONTROL);
|
|
2028
|
+
input = inject(INPUT_TYPE);
|
|
2029
|
+
config = inject(INPUT_CONFIG);
|
|
2030
|
+
values;
|
|
2031
|
+
isButtonDisabled;
|
|
2032
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputUsernameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
2033
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.1.4", type: InputUsernameComponent, isStandalone: true, selector: "ng-component", inputs: { values: "values", isButtonDisabled: "isButtonDisabled" }, host: { attributes: { "selector": "input-username" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\u06CC' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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]=\"'ngx-form-m3-en'\"\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: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { 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.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" }] });
|
|
2034
|
+
}
|
|
2035
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.1.4", ngImport: i0, type: InputUsernameComponent, decorators: [{
|
|
2036
|
+
type: Component,
|
|
2037
|
+
args: [{ host: { selector: 'input-username' }, imports: [
|
|
2038
|
+
NgClass,
|
|
2039
|
+
ReactiveFormsModule,
|
|
2040
|
+
MatFormField,
|
|
2041
|
+
MatIcon,
|
|
2042
|
+
MatIconButton,
|
|
2043
|
+
MatInputModule,
|
|
2044
|
+
AutoCompleteDirective,
|
|
2045
|
+
AutoFocusDirective,
|
|
2046
|
+
InputErrorPipe,
|
|
2047
|
+
MultiLinePipe,
|
|
2048
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0646\u0627\u0645 \u06A9\u0627\u0631\u0628\u0631\u06CC' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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]=\"'ngx-form-m3-en'\"\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" }]
|
|
2049
|
+
}], propDecorators: { values: [{
|
|
2050
|
+
type: Input,
|
|
2051
|
+
args: [{ required: true }]
|
|
2052
|
+
}], isButtonDisabled: [{
|
|
2053
|
+
type: Input,
|
|
2054
|
+
args: [{ required: true }]
|
|
2055
|
+
}] } });
|
|
2056
|
+
|
|
2057
|
+
class InputUsernameMethods extends InputMethods {
|
|
2058
|
+
control(input, validators) {
|
|
2059
|
+
validators.push(UsernameValidator(input.verify));
|
|
2060
|
+
return new FormControl(input.value || null, validators);
|
|
2061
|
+
}
|
|
2062
|
+
value(value, input) {
|
|
2063
|
+
return Helper.IS.string(value) && value !== '' ? value : null;
|
|
2064
|
+
}
|
|
2065
|
+
}
|
|
2066
|
+
|
|
1982
2067
|
class InputComponent {
|
|
1983
2068
|
formGroup;
|
|
1984
2069
|
input;
|
|
@@ -2056,6 +2141,7 @@ const InputInfo = {
|
|
|
2056
2141
|
TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
|
|
2057
2142
|
TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
|
|
2058
2143
|
URL: { title: 'آدرس سایت', methods: new InputUrlMethods(), component: InputUrlComponent },
|
|
2144
|
+
USERNAME: { title: 'نام کاربری', methods: new InputUsernameMethods(), component: InputUsernameComponent },
|
|
2059
2145
|
};
|
|
2060
2146
|
|
|
2061
2147
|
const NGX_FORM_CONFIG = new InjectionToken('NGX-FORM-CONFIG');
|