@webilix/ngx-form-m3 0.0.5 → 0.0.7
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/webilix-ngx-form-m3.mjs +91 -21
- package/fesm2022/webilix-ngx-form-m3.mjs.map +1 -1
- package/lib/inputs/date/input-date.interface.d.ts +1 -1
- package/lib/inputs/file/input-file.component.d.ts +12 -0
- package/lib/inputs/file/input-file.interface.d.ts +10 -0
- package/lib/inputs/index.d.ts +4 -0
- package/lib/inputs/input.component.d.ts +10 -0
- package/lib/inputs/input.interface.d.ts +1 -1
- package/lib/inputs/name/input-name.interface.d.ts +1 -1
- package/lib/inputs/text/input-text.interface.d.ts +1 -0
- package/lib/inputs/url/input-url.component.d.ts +11 -0
- package/lib/inputs/url/input-url.interface.d.ts +10 -0
- package/lib/ngx-form.interface.d.ts +2 -2
- package/ngx-form-m3.css +71 -0
- package/package.json +3 -3
|
@@ -10,7 +10,7 @@ import * as i2 from '@angular/material/input';
|
|
|
10
10
|
import { MatInputModule } from '@angular/material/input';
|
|
11
11
|
import { Helper } from '@webilix/helper-library';
|
|
12
12
|
import * as i1$1 from '@angular/platform-browser';
|
|
13
|
-
import { NgxHelperDatePipe } from '@webilix/ngx-helper-m3';
|
|
13
|
+
import { NgxHelperDatePipe, NgxHelperFileSizePipe } from '@webilix/ngx-helper-m3';
|
|
14
14
|
import * as i1$2 from '@webilix/ngx-calendar-m3';
|
|
15
15
|
import { JalaliDateTime } from '@webilix/jalali-date-time';
|
|
16
16
|
import * as i4 from '@angular/cdk/bidi';
|
|
@@ -46,12 +46,7 @@ class AutoFocusDirective {
|
|
|
46
46
|
const input = this.elementRef.nativeElement;
|
|
47
47
|
if (!input)
|
|
48
48
|
return;
|
|
49
|
-
setTimeout(() =>
|
|
50
|
-
if (input.focus)
|
|
51
|
-
input.focus();
|
|
52
|
-
if (input.select)
|
|
53
|
-
input.select();
|
|
54
|
-
}, 0);
|
|
49
|
+
setTimeout(() => input.focus && input.focus(), 0);
|
|
55
50
|
}
|
|
56
51
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
57
52
|
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: AutoFocusDirective, isStandalone: true, selector: "[AutoFocusDirective]", inputs: { AutoFocusDirective: "AutoFocusDirective" }, ngImport: i0 });
|
|
@@ -198,6 +193,8 @@ class InputErrorPipe {
|
|
|
198
193
|
return 'مقدار باید شامل حروف انگلیسی بزرگ باشد.';
|
|
199
194
|
}
|
|
200
195
|
return 'کاراکترهای الزامی در کلمه عبور استفاده نشدهاند.';
|
|
196
|
+
case 'URL':
|
|
197
|
+
return 'فرمت استاندارد آدرس سایت رعایت نشده است.';
|
|
201
198
|
}
|
|
202
199
|
break;
|
|
203
200
|
case 'mask':
|
|
@@ -248,16 +245,16 @@ class InputColorComponent {
|
|
|
248
245
|
input = inject(INPUT_TYPE);
|
|
249
246
|
config = inject(INPUT_CONFIG);
|
|
250
247
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
251
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputColorComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-color" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0631\u0646\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 <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'palette' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n <
|
|
248
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputColorComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-color" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0631\u0646\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 <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'palette' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n <div class=\"ngx-helper-form-m3-color-input\">\n <section>\n <input type=\"color\" (input)=\"formControl.setValue(colorInput.value)\" [value]=\"formControl.value\" #colorInput />\n <div\n class=\"color\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [style.background-color]=\"formControl.value || 'transparent'\"\n (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n >\n \n </div>\n </section>\n\n <div\n class=\"value ngx-form-m3-en\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n >\n {{ formControl.value || ' ' }}\n </div>\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])[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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
252
249
|
}
|
|
253
250
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputColorComponent, decorators: [{
|
|
254
251
|
type: Component,
|
|
255
|
-
args: [{ host: { selector: 'input-color' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0631\u0646\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 <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'palette' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n <
|
|
252
|
+
args: [{ host: { selector: 'input-color' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0631\u0646\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 <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'palette' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n <div class=\"ngx-helper-form-m3-color-input\">\n <section>\n <input type=\"color\" (input)=\"formControl.setValue(colorInput.value)\" [value]=\"formControl.value\" #colorInput />\n <div\n class=\"color\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [style.background-color]=\"formControl.value || 'transparent'\"\n (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n >\n \n </div>\n </section>\n\n <div\n class=\"value ngx-form-m3-en\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n (click)=\"formControl.disabled ? null : colorInput.click(); formControl.markAsTouched()\"\n >\n {{ formControl.value || ' ' }}\n </div>\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" }]
|
|
256
253
|
}] });
|
|
257
254
|
|
|
258
255
|
class InputColorMethods extends InputMethods {
|
|
259
256
|
control(input, validators) {
|
|
260
|
-
const value = input.value
|
|
257
|
+
const value = input.value && Helper.IS.STRING.color(input.value) ? Helper.COLOR.toHEX(input.value) : null;
|
|
261
258
|
return new FormControl(value, validators);
|
|
262
259
|
}
|
|
263
260
|
value(value, input) {
|
|
@@ -279,11 +276,11 @@ class InputDateComponent {
|
|
|
279
276
|
const minDate = this.input.minDate === 'NOW' ? new Date() : this.input.minDate;
|
|
280
277
|
const maxDate = this.input.maxDate === 'NOW' ? new Date() : this.input.maxDate;
|
|
281
278
|
this.ngxCalendarService
|
|
282
|
-
.getDate({ title: this.input.title, value: this.formControl.value, minDate, maxDate })
|
|
279
|
+
.getDate({ title: this.input.title || 'تاریخ', value: this.formControl.value, minDate, maxDate })
|
|
283
280
|
.dialog((data) => {
|
|
284
281
|
this.formControl.setValue(data.date);
|
|
285
282
|
this.formControl.markAsTouched();
|
|
286
|
-
});
|
|
283
|
+
}, () => this.formControl.markAsTouched());
|
|
287
284
|
}
|
|
288
285
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputDateComponent, deps: [{ token: i1$2.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
289
286
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputDateComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-date" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u062A\u0627\u0631\u06CC\u062E' }}</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 <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : setDate(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'calendar_month' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n <input\n type=\"text\"\n matInput\n [readonly]=\"true\"\n [disabled]=\"formControl.disabled\"\n (click)=\"setDate()\"\n [value]=\"formControl.value | ngxHelperDate\"\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])[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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperDatePipe, name: "ngxHelperDate" }] });
|
|
@@ -330,7 +327,7 @@ class InputDateMethods extends InputMethods {
|
|
|
330
327
|
validators.push(MinDateValidator(input.minDate));
|
|
331
328
|
if (input.maxDate)
|
|
332
329
|
validators.push(MaxDateValidator(input.maxDate));
|
|
333
|
-
const value = input.value
|
|
330
|
+
const value = input.value && Helper.IS.date(input.value) ? input.value : null;
|
|
334
331
|
return new FormControl(value, validators);
|
|
335
332
|
}
|
|
336
333
|
value(value, input) {
|
|
@@ -362,7 +359,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
362
359
|
class InputEmailMethods extends InputMethods {
|
|
363
360
|
control(input, validators) {
|
|
364
361
|
validators.push(Validators.pattern(Helper.RE.EMAIL.get()));
|
|
365
|
-
const value = input.value
|
|
362
|
+
const value = input.value && Helper.RE.EMAIL.verify(input.value) ? input.value.toLowerCase() : null;
|
|
366
363
|
return new FormControl(value, validators);
|
|
367
364
|
}
|
|
368
365
|
value(value, input) {
|
|
@@ -370,6 +367,43 @@ class InputEmailMethods extends InputMethods {
|
|
|
370
367
|
}
|
|
371
368
|
}
|
|
372
369
|
|
|
370
|
+
class InputFileComponent {
|
|
371
|
+
formControl = inject(INPUT_CONTROL);
|
|
372
|
+
input = inject(INPUT_TYPE);
|
|
373
|
+
config = inject(INPUT_CONFIG);
|
|
374
|
+
setFile(event) {
|
|
375
|
+
if (this.formControl.disabled)
|
|
376
|
+
return;
|
|
377
|
+
const files = event === null ? null : event.target.files;
|
|
378
|
+
const file = files && files.length !== 0 ? files.item(0) : null;
|
|
379
|
+
this.formControl.setValue(file);
|
|
380
|
+
this.formControl.markAsTouched();
|
|
381
|
+
}
|
|
382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputFileComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-file" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0641\u0627\u06CC\u0644' }}</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 <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : fileInput.click()\">\n {{ formControl.value ? 'close' : 'insert_drive_file' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input\n type=\"file\"\n [style.display]=\"'none !important'\"\n [accept]=\"(input.mimes === 'IMAGE' ? ['image/gif', 'image/jpeg', 'image/png'] : input.mimes || ['*']).join(',')\"\n (change)=\"setFile($event); fileInput.value = ''\"\n #fileInput\n />\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n <div\n class=\"ngx-helper-form-m3-file-input\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n (click)=\"fileInput.value = ''; fileInput.click()\"\n >\n <div class=\"size\">{{ formControl.value?.size | ngxHelperFileSize }}</div>\n <input type=\"text \" matInput [readonly]=\"true\" [disabled]=\"formControl.disabled\" class=\"ngx-form-m3-en\" />\n <div class=\"name ngx-form-m3-en\">{{ formControl.value?.name || ' ' }}</div>\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])[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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }, { kind: "pipe", type: NgxHelperFileSizePipe, name: "ngxHelperFileSize" }] });
|
|
384
|
+
}
|
|
385
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputFileComponent, decorators: [{
|
|
386
|
+
type: Component,
|
|
387
|
+
args: [{ host: { selector: 'input-file' }, imports: [
|
|
388
|
+
ReactiveFormsModule,
|
|
389
|
+
MatFormField,
|
|
390
|
+
MatIcon,
|
|
391
|
+
MatInputModule,
|
|
392
|
+
InputErrorPipe,
|
|
393
|
+
MultiLinePipe,
|
|
394
|
+
NgxHelperFileSizePipe,
|
|
395
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0641\u0627\u06CC\u0644' }}</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 <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : fileInput.click()\">\n {{ formControl.value ? 'close' : 'insert_drive_file' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input\n type=\"file\"\n [style.display]=\"'none !important'\"\n [accept]=\"(input.mimes === 'IMAGE' ? ['image/gif', 'image/jpeg', 'image/png'] : input.mimes || ['*']).join(',')\"\n (change)=\"setFile($event); fileInput.value = ''\"\n #fileInput\n />\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n <div\n class=\"ngx-helper-form-m3-file-input\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n (click)=\"fileInput.value = ''; fileInput.click()\"\n >\n <div class=\"size\">{{ formControl.value?.size | ngxHelperFileSize }}</div>\n <input type=\"text \" matInput [readonly]=\"true\" [disabled]=\"formControl.disabled\" class=\"ngx-form-m3-en\" />\n <div class=\"name ngx-form-m3-en\">{{ formControl.value?.name || ' ' }}</div>\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" }]
|
|
396
|
+
}] });
|
|
397
|
+
|
|
398
|
+
class InputFileMethods extends InputMethods {
|
|
399
|
+
control(input, validators) {
|
|
400
|
+
return new FormControl(null, validators);
|
|
401
|
+
}
|
|
402
|
+
value(value, input) {
|
|
403
|
+
return typeof value === 'object' ? value || null : null;
|
|
404
|
+
}
|
|
405
|
+
}
|
|
406
|
+
|
|
373
407
|
class InputMobileComponent {
|
|
374
408
|
formControl = inject(INPUT_CONTROL);
|
|
375
409
|
input = inject(INPUT_TYPE);
|
|
@@ -395,7 +429,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
395
429
|
|
|
396
430
|
class InputMobileMethods extends InputMethods {
|
|
397
431
|
control(input, validators) {
|
|
398
|
-
const value = input.value
|
|
432
|
+
const value = input.value && Helper.RE.MOBILE.verify(input.value) ? input.value.substring(2) : null;
|
|
399
433
|
return new FormControl(value, validators);
|
|
400
434
|
}
|
|
401
435
|
value(value, input) {
|
|
@@ -435,11 +469,11 @@ class InputNameComponent {
|
|
|
435
469
|
this.formControl.setValue(value);
|
|
436
470
|
}
|
|
437
471
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
438
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputNameComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-name" } }, ngImport: i0, template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"
|
|
472
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputNameComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-name" } }, ngImport: i0, template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"ngx-helper-form-m3-name-input\">\n <!-- FIRST NAME -->\n <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>\u0646\u0627\u0645 {{ input.title || '' }}</mat-label>\n @if (firstFormControl.invalid) { <mat-error>{{ firstFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <input\n matInput\n type=\"text\"\n [name]=\"input.name + '-first'\"\n [formControl]=\"firstFormControl\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (input)=\"setName()\"\n />\n </mat-form-field>\n <!-- LAST NAME -->\n <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>\u0646\u0627\u0645 \u062E\u0627\u0646\u0648\u0627\u062F\u06AF\u06CC {{ input.title || '' }}</mat-label>\n @if (lastFormControl.invalid) { <mat-error>{{ lastFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <input matInput type=\"text\" [name]=\"input.name + '-last'\" [formControl]=\"lastFormControl\" (input)=\"setName()\" />\n </mat-form-field>\n</div>\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: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }] });
|
|
439
473
|
}
|
|
440
474
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputNameComponent, decorators: [{
|
|
441
475
|
type: Component,
|
|
442
|
-
args: [{ host: { selector: 'input-name' }, imports: [ReactiveFormsModule, MatFormField, MatInputModule, AutoCompleteDirective, AutoFocusDirective, InputErrorPipe], template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"
|
|
476
|
+
args: [{ host: { selector: 'input-name' }, imports: [ReactiveFormsModule, MatFormField, MatInputModule, AutoCompleteDirective, AutoFocusDirective, InputErrorPipe], template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"ngx-helper-form-m3-name-input\">\n <!-- FIRST NAME -->\n <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>\u0646\u0627\u0645 {{ input.title || '' }}</mat-label>\n @if (firstFormControl.invalid) { <mat-error>{{ firstFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <input\n matInput\n type=\"text\"\n [name]=\"input.name + '-first'\"\n [formControl]=\"firstFormControl\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (input)=\"setName()\"\n />\n </mat-form-field>\n <!-- LAST NAME -->\n <mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>\u0646\u0627\u0645 \u062E\u0627\u0646\u0648\u0627\u062F\u06AF\u06CC {{ input.title || '' }}</mat-label>\n @if (lastFormControl.invalid) { <mat-error>{{ lastFormControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <input matInput type=\"text\" [name]=\"input.name + '-last'\" [formControl]=\"lastFormControl\" (input)=\"setName()\" />\n </mat-form-field>\n</div>\n" }]
|
|
443
477
|
}] });
|
|
444
478
|
|
|
445
479
|
class InputNameMethods extends InputMethods {
|
|
@@ -510,7 +544,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
510
544
|
class InputSelectMethods extends InputMethods {
|
|
511
545
|
control(input, validators) {
|
|
512
546
|
const ids = input.options.map((option) => option.id);
|
|
513
|
-
|
|
547
|
+
let value = input.value && ids.includes(input.value) ? input.value : null;
|
|
548
|
+
if (value === null && ids.length === 1 && !input.optional)
|
|
549
|
+
value = ids[0];
|
|
514
550
|
return new FormControl(value, validators);
|
|
515
551
|
}
|
|
516
552
|
value(value, input) {
|
|
@@ -523,7 +559,7 @@ class InputTextComponent {
|
|
|
523
559
|
input = inject(INPUT_TYPE);
|
|
524
560
|
config = inject(INPUT_CONFIG);
|
|
525
561
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
526
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputTextComponent, isStandalone: true, selector: "ng-component", 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) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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 [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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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" }] });
|
|
562
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputTextComponent, isStandalone: true, selector: "ng-component", 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) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\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 [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: [""], 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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { 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" }] });
|
|
527
563
|
}
|
|
528
564
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
529
565
|
type: Component,
|
|
@@ -536,7 +572,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
536
572
|
AutoFocusDirective,
|
|
537
573
|
InputErrorPipe,
|
|
538
574
|
MultiLinePipe,
|
|
539
|
-
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</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 <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 [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" }]
|
|
575
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</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 <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 [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" }]
|
|
540
576
|
}] });
|
|
541
577
|
|
|
542
578
|
class InputTextMethods extends InputMethods {
|
|
@@ -593,6 +629,38 @@ class InputTextareaMethods extends InputMethods {
|
|
|
593
629
|
}
|
|
594
630
|
}
|
|
595
631
|
|
|
632
|
+
class InputUrlComponent {
|
|
633
|
+
formControl = inject(INPUT_CONTROL);
|
|
634
|
+
input = inject(INPUT_TYPE);
|
|
635
|
+
config = inject(INPUT_CONFIG);
|
|
636
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputUrlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
637
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputUrlComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-url" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0633\u0627\u06CC\u062A' }}</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 <!-- 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>link</mat-icon>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n inputmode=\"url\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"ngx-form-m3-en\"\n [dir]=\"'ltr'\"\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])[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: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.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: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i3.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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" }] });
|
|
638
|
+
}
|
|
639
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputUrlComponent, decorators: [{
|
|
640
|
+
type: Component,
|
|
641
|
+
args: [{ host: { selector: 'input-url' }, imports: [
|
|
642
|
+
ReactiveFormsModule,
|
|
643
|
+
MatFormField,
|
|
644
|
+
MatIcon,
|
|
645
|
+
MatInputModule,
|
|
646
|
+
AutoCompleteDirective,
|
|
647
|
+
AutoFocusDirective,
|
|
648
|
+
InputErrorPipe,
|
|
649
|
+
MultiLinePipe,
|
|
650
|
+
], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0622\u062F\u0631\u0633 \u0633\u0627\u06CC\u062A' }}</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 <!-- 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>link</mat-icon>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n inputmode=\"url\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"ngx-form-m3-en\"\n [dir]=\"'ltr'\"\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" }]
|
|
651
|
+
}] });
|
|
652
|
+
|
|
653
|
+
class InputUrlMethods extends InputMethods {
|
|
654
|
+
control(input, validators) {
|
|
655
|
+
validators.push(Validators.pattern(Helper.RE.URL.get(true)));
|
|
656
|
+
const value = input.value && Helper.RE.URL.verify(input.value, true) ? input.value : null;
|
|
657
|
+
return new FormControl(value, validators);
|
|
658
|
+
}
|
|
659
|
+
value(value, input) {
|
|
660
|
+
return typeof value === 'string' && Helper.RE.URL.verify(value, true) ? value : null;
|
|
661
|
+
}
|
|
662
|
+
}
|
|
663
|
+
|
|
596
664
|
class InputComponent {
|
|
597
665
|
formGroup;
|
|
598
666
|
input;
|
|
@@ -630,12 +698,14 @@ const InputInfo = {
|
|
|
630
698
|
COLOR: { title: 'رنگ', methods: new InputColorMethods(), component: InputColorComponent },
|
|
631
699
|
DATE: { title: 'تاریخ', methods: new InputDateMethods(), component: InputDateComponent },
|
|
632
700
|
EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
|
|
701
|
+
FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
|
|
633
702
|
MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
|
|
634
703
|
NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
|
|
635
704
|
PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
|
|
636
705
|
SELECT: { title: 'لیست کشویی', methods: new InputSelectMethods(), component: InputSelectComponent },
|
|
637
706
|
TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
|
|
638
707
|
TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
|
|
708
|
+
URL: { title: 'آدرس سایت', methods: new InputUrlMethods(), component: InputUrlComponent },
|
|
639
709
|
};
|
|
640
710
|
|
|
641
711
|
const NGX_FORM_CONFIG = new InjectionToken('NGX-FORM-CONFIG');
|
|
@@ -827,7 +897,7 @@ class NgxFormComponent {
|
|
|
827
897
|
}
|
|
828
898
|
setInput(input) {
|
|
829
899
|
const name = input.name;
|
|
830
|
-
const validators = input.optional ? [] : [Validators.required];
|
|
900
|
+
const validators = input.optional || ('readonly' in input && input.readonly) ? [] : [Validators.required];
|
|
831
901
|
this.formGroup.setControl(name, InputInfo[input.type].methods.control(input, validators));
|
|
832
902
|
}
|
|
833
903
|
checkInputs() {
|