@webilix/ngx-form-m3 0.0.6 → 0.0.8
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 +210 -60
- package/fesm2022/webilix-ngx-form-m3.mjs.map +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 +6 -0
- package/lib/inputs/input.component.d.ts +15 -0
- package/lib/inputs/moment/input-moment.component.d.ts +15 -0
- package/lib/inputs/moment/input-moment.interface.d.ts +12 -0
- 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/lib/validators/index.d.ts +2 -0
- package/lib/validators/moment/max-moment.validator.d.ts +2 -0
- package/lib/validators/moment/min-moment.validator.d.ts +2 -0
- package/ngx-form-m3.css +71 -0
- package/package.json +8 -8
|
@@ -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';
|
|
@@ -23,10 +23,10 @@ import * as i1$3 from '@angular/router';
|
|
|
23
23
|
|
|
24
24
|
class AutoCompleteDirective {
|
|
25
25
|
autocomplete = 'one-time-code';
|
|
26
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
27
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
26
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutoCompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
27
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: AutoCompleteDirective, isStandalone: true, selector: "input[type=\"text\"]", host: { properties: { "attr.autocomplete": "this.autocomplete" } }, ngImport: i0 });
|
|
28
28
|
}
|
|
29
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
29
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutoCompleteDirective, decorators: [{
|
|
30
30
|
type: Directive,
|
|
31
31
|
args: [{ selector: 'input[type="text"]' }]
|
|
32
32
|
}], propDecorators: { autocomplete: [{
|
|
@@ -48,10 +48,10 @@ class AutoFocusDirective {
|
|
|
48
48
|
return;
|
|
49
49
|
setTimeout(() => input.focus && input.focus(), 0);
|
|
50
50
|
}
|
|
51
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
52
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
51
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
52
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: AutoFocusDirective, isStandalone: true, selector: "[AutoFocusDirective]", inputs: { AutoFocusDirective: "AutoFocusDirective" }, ngImport: i0 });
|
|
53
53
|
}
|
|
54
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
54
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutoFocusDirective, decorators: [{
|
|
55
55
|
type: Directive,
|
|
56
56
|
args: [{ selector: '[AutoFocusDirective]' }]
|
|
57
57
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { AutoFocusDirective: [{
|
|
@@ -96,10 +96,10 @@ class AutoHeightDirective {
|
|
|
96
96
|
this.renderer2.setStyle(this.elementRef.nativeElement, 'height', value);
|
|
97
97
|
this.renderer2.setStyle(this.elementRef.nativeElement, 'overflow', 'auto');
|
|
98
98
|
}
|
|
99
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
100
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
99
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutoHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
100
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: AutoHeightDirective, isStandalone: true, selector: "[AutoHeightDirective]", inputs: { AutoHeightDirective: "AutoHeightDirective", minHeight: "minHeight", maxHeight: "maxHeight" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "input": "resize()" } }, ngImport: i0 });
|
|
101
101
|
}
|
|
102
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
102
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: AutoHeightDirective, decorators: [{
|
|
103
103
|
type: Directive,
|
|
104
104
|
args: [{ selector: '[AutoHeightDirective]' }]
|
|
105
105
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { AutoHeightDirective: [{
|
|
@@ -144,10 +144,10 @@ class FormErrorDirective {
|
|
|
144
144
|
const top = element.getBoundingClientRect().top + window.scrollY - labelOffset;
|
|
145
145
|
window.scroll({ top, left: 0, behavior: 'smooth' });
|
|
146
146
|
}
|
|
147
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
148
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
147
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
148
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.5", type: FormErrorDirective, isStandalone: true, selector: "form.ngx-form", host: { listeners: { "submit": "onSubmit()" } }, ngImport: i0 });
|
|
149
149
|
}
|
|
150
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
150
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: FormErrorDirective, decorators: [{
|
|
151
151
|
type: Directive,
|
|
152
152
|
args: [{ selector: 'form.ngx-form' }]
|
|
153
153
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FormGroupDirective, decorators: [{
|
|
@@ -179,6 +179,10 @@ class InputErrorPipe {
|
|
|
179
179
|
return `تاریخ باید برابر یا بعد از ${value} انتخاب شده باشد.`;
|
|
180
180
|
case 'maxdate':
|
|
181
181
|
return `تاریخ باید برابر یا قبل از ${value} انتخاب شده باشد.`;
|
|
182
|
+
case 'minmoment':
|
|
183
|
+
return `زمان باید برابر یا بعد از ${value} انتخاب شده باشد.`;
|
|
184
|
+
case 'maxmoment':
|
|
185
|
+
return `زمان باید برابر یا قبل از ${value} انتخاب شده باشد.`;
|
|
182
186
|
case 'pattern':
|
|
183
187
|
switch (type) {
|
|
184
188
|
case 'EMAIL':
|
|
@@ -193,6 +197,8 @@ class InputErrorPipe {
|
|
|
193
197
|
return 'مقدار باید شامل حروف انگلیسی بزرگ باشد.';
|
|
194
198
|
}
|
|
195
199
|
return 'کاراکترهای الزامی در کلمه عبور استفاده نشدهاند.';
|
|
200
|
+
case 'URL':
|
|
201
|
+
return 'فرمت استاندارد آدرس سایت رعایت نشده است.';
|
|
196
202
|
}
|
|
197
203
|
break;
|
|
198
204
|
case 'mask':
|
|
@@ -204,10 +210,10 @@ class InputErrorPipe {
|
|
|
204
210
|
}
|
|
205
211
|
return 'مقدار وارد شده صحیح نیست.';
|
|
206
212
|
}
|
|
207
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
208
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
213
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
214
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: InputErrorPipe, isStandalone: true, name: "InputErrorPipe" });
|
|
209
215
|
}
|
|
210
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
216
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputErrorPipe, decorators: [{
|
|
211
217
|
type: Pipe,
|
|
212
218
|
args: [{ name: 'InputErrorPipe' }]
|
|
213
219
|
}] });
|
|
@@ -224,10 +230,10 @@ class MultiLinePipe {
|
|
|
224
230
|
? this.sanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
|
|
225
231
|
: Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
|
|
226
232
|
}
|
|
227
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
228
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
233
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
234
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.5", ngImport: i0, type: MultiLinePipe, isStandalone: true, name: "MultiLinePipe" });
|
|
229
235
|
}
|
|
230
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
236
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: MultiLinePipe, decorators: [{
|
|
231
237
|
type: Pipe,
|
|
232
238
|
args: [{ name: 'MultiLinePipe' }]
|
|
233
239
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
|
|
@@ -242,12 +248,12 @@ class InputColorComponent {
|
|
|
242
248
|
formControl = inject(INPUT_CONTROL);
|
|
243
249
|
input = inject(INPUT_TYPE);
|
|
244
250
|
config = inject(INPUT_CONFIG);
|
|
245
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
246
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
251
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
252
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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" }] });
|
|
247
253
|
}
|
|
248
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
254
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputColorComponent, decorators: [{
|
|
249
255
|
type: Component,
|
|
250
|
-
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 <
|
|
256
|
+
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" }]
|
|
251
257
|
}] });
|
|
252
258
|
|
|
253
259
|
class InputColorMethods extends InputMethods {
|
|
@@ -278,38 +284,66 @@ class InputDateComponent {
|
|
|
278
284
|
.dialog((data) => {
|
|
279
285
|
this.formControl.setValue(data.date);
|
|
280
286
|
this.formControl.markAsTouched();
|
|
281
|
-
});
|
|
287
|
+
}, () => this.formControl.markAsTouched());
|
|
282
288
|
}
|
|
283
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
284
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
289
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputDateComponent, deps: [{ token: i1$2.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
290
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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" }] });
|
|
285
291
|
}
|
|
286
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
292
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputDateComponent, decorators: [{
|
|
287
293
|
type: Component,
|
|
288
294
|
args: [{ host: { selector: 'input-date' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, InputErrorPipe, MultiLinePipe, NgxHelperDatePipe], 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" }]
|
|
289
295
|
}], ctorParameters: () => [{ type: i1$2.NgxCalendarService }] });
|
|
290
296
|
|
|
291
297
|
const MaxDateValidator = (max) => {
|
|
298
|
+
const jalali = JalaliDateTime();
|
|
292
299
|
return (formControl) => {
|
|
293
300
|
const value = formControl.value;
|
|
294
301
|
if (Helper.IS.empty(value) || !Helper.IS.date(value))
|
|
295
302
|
return null;
|
|
296
|
-
const jalali = JalaliDateTime();
|
|
297
303
|
const maximum = jalali.periodDay(1, max === 'NOW' ? new Date() : max).to;
|
|
298
304
|
return value.getTime() > maximum.getTime() ? { maxdate: jalali.toFullText(maximum, { format: 'Y/M/D' }) } : null;
|
|
299
305
|
};
|
|
300
306
|
};
|
|
301
307
|
|
|
302
308
|
const MinDateValidator = (min) => {
|
|
309
|
+
const jalali = JalaliDateTime();
|
|
303
310
|
return (formControl) => {
|
|
304
311
|
const value = formControl.value;
|
|
305
312
|
if (Helper.IS.empty(value) || !Helper.IS.date(value))
|
|
306
313
|
return null;
|
|
307
|
-
const jalali = JalaliDateTime();
|
|
308
314
|
const minimum = jalali.periodDay(1, min === 'NOW' ? new Date() : min).from;
|
|
309
315
|
return value.getTime() < minimum.getTime() ? { mindate: jalali.toFullText(minimum, { format: 'Y/M/D' }) } : null;
|
|
310
316
|
};
|
|
311
317
|
};
|
|
312
318
|
|
|
319
|
+
const MaxMomentValidator = (max) => {
|
|
320
|
+
const jalali = JalaliDateTime();
|
|
321
|
+
const formatDate = (date) => jalali.toString(date, { format: 'Y-M-D H:I' });
|
|
322
|
+
return (formControl) => {
|
|
323
|
+
const value = formControl.value;
|
|
324
|
+
if (Helper.IS.empty(value) || !Helper.IS.date(value))
|
|
325
|
+
return null;
|
|
326
|
+
const maximum = max === 'NOW' ? new Date() : max;
|
|
327
|
+
return formatDate(value) > formatDate(maximum)
|
|
328
|
+
? { maxmoment: jalali.toFullText(maximum, { format: 'H:I Y/M/D' }) }
|
|
329
|
+
: null;
|
|
330
|
+
};
|
|
331
|
+
};
|
|
332
|
+
|
|
333
|
+
const MinMomentValidator = (min) => {
|
|
334
|
+
const jalali = JalaliDateTime();
|
|
335
|
+
const formatDate = (date) => jalali.toString(date, { format: 'Y-M-D H:I' });
|
|
336
|
+
return (formControl) => {
|
|
337
|
+
const value = formControl.value;
|
|
338
|
+
if (Helper.IS.empty(value) || !Helper.IS.date(value))
|
|
339
|
+
return null;
|
|
340
|
+
const minimum = min === 'NOW' ? new Date() : min;
|
|
341
|
+
return formatDate(value) < formatDate(minimum)
|
|
342
|
+
? { minmoment: jalali.toFullText(minimum, { format: 'H:I Y/M/D' }) }
|
|
343
|
+
: null;
|
|
344
|
+
};
|
|
345
|
+
};
|
|
346
|
+
|
|
313
347
|
const LengthValidator = (length) => {
|
|
314
348
|
return (formControl) => {
|
|
315
349
|
const value = formControl.value;
|
|
@@ -337,10 +371,10 @@ class InputEmailComponent {
|
|
|
337
371
|
formControl = inject(INPUT_CONTROL);
|
|
338
372
|
input = inject(INPUT_TYPE);
|
|
339
373
|
config = inject(INPUT_CONFIG);
|
|
340
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
341
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
374
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
375
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputEmailComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-email" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0627\u06CC\u0645\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 <!-- 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>alternate_email</mat-icon>\n </span>\n }\n\n <input\n matInput\n type=\"text\"\n inputmode=\"email\"\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" }] });
|
|
342
376
|
}
|
|
343
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
377
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputEmailComponent, decorators: [{
|
|
344
378
|
type: Component,
|
|
345
379
|
args: [{ host: { selector: 'input-email' }, imports: [
|
|
346
380
|
ReactiveFormsModule,
|
|
@@ -365,15 +399,52 @@ class InputEmailMethods extends InputMethods {
|
|
|
365
399
|
}
|
|
366
400
|
}
|
|
367
401
|
|
|
402
|
+
class InputFileComponent {
|
|
403
|
+
formControl = inject(INPUT_CONTROL);
|
|
404
|
+
input = inject(INPUT_TYPE);
|
|
405
|
+
config = inject(INPUT_CONFIG);
|
|
406
|
+
setFile(event) {
|
|
407
|
+
if (this.formControl.disabled)
|
|
408
|
+
return;
|
|
409
|
+
const files = event === null ? null : event.target.files;
|
|
410
|
+
const file = files && files.length !== 0 ? files.item(0) : null;
|
|
411
|
+
this.formControl.setValue(file);
|
|
412
|
+
this.formControl.markAsTouched();
|
|
413
|
+
}
|
|
414
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputFileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
415
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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" }] });
|
|
416
|
+
}
|
|
417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputFileComponent, decorators: [{
|
|
418
|
+
type: Component,
|
|
419
|
+
args: [{ host: { selector: 'input-file' }, imports: [
|
|
420
|
+
ReactiveFormsModule,
|
|
421
|
+
MatFormField,
|
|
422
|
+
MatIcon,
|
|
423
|
+
MatInputModule,
|
|
424
|
+
InputErrorPipe,
|
|
425
|
+
MultiLinePipe,
|
|
426
|
+
NgxHelperFileSizePipe,
|
|
427
|
+
], 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" }]
|
|
428
|
+
}] });
|
|
429
|
+
|
|
430
|
+
class InputFileMethods extends InputMethods {
|
|
431
|
+
control(input, validators) {
|
|
432
|
+
return new FormControl(null, validators);
|
|
433
|
+
}
|
|
434
|
+
value(value, input) {
|
|
435
|
+
return typeof value === 'object' ? value || null : null;
|
|
436
|
+
}
|
|
437
|
+
}
|
|
438
|
+
|
|
368
439
|
class InputMobileComponent {
|
|
369
440
|
formControl = inject(INPUT_CONTROL);
|
|
370
441
|
input = inject(INPUT_TYPE);
|
|
371
442
|
config = inject(INPUT_CONFIG);
|
|
372
443
|
inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
|
|
373
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
374
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
444
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
445
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputMobileComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-mobile" } }, providers: [provideNgxMask()], ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u0645\u0648\u0628\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 <!-- ICON & 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\">09</span>\n @if (input.showIcon) { <mat-icon>smartphone</mat-icon> }\n </span>\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 [AutoFocusDirective]=\"config.autoFocus === input.name\"\n [mask]=\"'00-000-0000'\"\n [inputTransformFn]=\"inputTransformFn\"\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: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix"], outputs: ["maskFilled"], exportAs: ["mask", "ngxMask"] }, { 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" }] });
|
|
375
446
|
}
|
|
376
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
447
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMobileComponent, decorators: [{
|
|
377
448
|
type: Component,
|
|
378
449
|
args: [{ host: { selector: 'input-mobile' }, imports: [
|
|
379
450
|
ReactiveFormsModule,
|
|
@@ -398,6 +469,48 @@ class InputMobileMethods extends InputMethods {
|
|
|
398
469
|
}
|
|
399
470
|
}
|
|
400
471
|
|
|
472
|
+
class InputMomentComponent {
|
|
473
|
+
ngxCalendarService;
|
|
474
|
+
formControl = inject(INPUT_CONTROL);
|
|
475
|
+
input = inject(INPUT_TYPE);
|
|
476
|
+
config = inject(INPUT_CONFIG);
|
|
477
|
+
constructor(ngxCalendarService) {
|
|
478
|
+
this.ngxCalendarService = ngxCalendarService;
|
|
479
|
+
}
|
|
480
|
+
setMoment() {
|
|
481
|
+
if (this.formControl.disabled)
|
|
482
|
+
return;
|
|
483
|
+
const minDate = this.input.minDate === 'NOW' ? new Date() : this.input.minDate;
|
|
484
|
+
const maxDate = this.input.maxDate === 'NOW' ? new Date() : this.input.maxDate;
|
|
485
|
+
this.ngxCalendarService
|
|
486
|
+
.getMoment({ title: this.input.title || 'زمان', value: this.formControl.value, minDate, maxDate })
|
|
487
|
+
.dialog((moment) => {
|
|
488
|
+
this.formControl.setValue(moment.moment);
|
|
489
|
+
this.formControl.markAsTouched();
|
|
490
|
+
}, () => this.formControl.markAsTouched());
|
|
491
|
+
}
|
|
492
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMomentComponent, deps: [{ token: i1$2.NgxCalendarService }], target: i0.ɵɵFactoryTarget.Component });
|
|
493
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputMomentComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-moment" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0632\u0645\u0627\u0646' }}</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) : setMoment(); 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)=\"setMoment()\"\n [value]=\"formControl.value | ngxHelperDate : { format: 'FULL' }\"\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" }] });
|
|
494
|
+
}
|
|
495
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputMomentComponent, decorators: [{
|
|
496
|
+
type: Component,
|
|
497
|
+
args: [{ host: { selector: 'input-moment' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, InputErrorPipe, MultiLinePipe, NgxHelperDatePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0632\u0645\u0627\u0646' }}</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) : setMoment(); 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)=\"setMoment()\"\n [value]=\"formControl.value | ngxHelperDate : { format: 'FULL' }\"\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" }]
|
|
498
|
+
}], ctorParameters: () => [{ type: i1$2.NgxCalendarService }] });
|
|
499
|
+
|
|
500
|
+
class InputMomentMethods extends InputMethods {
|
|
501
|
+
control(input, validators) {
|
|
502
|
+
if (input.minDate)
|
|
503
|
+
validators.push(MinMomentValidator(input.minDate));
|
|
504
|
+
if (input.maxDate)
|
|
505
|
+
validators.push(MaxMomentValidator(input.maxDate));
|
|
506
|
+
const value = input.value && Helper.IS.date(input.value) ? input.value : null;
|
|
507
|
+
return new FormControl(value, validators);
|
|
508
|
+
}
|
|
509
|
+
value(value, input) {
|
|
510
|
+
return Helper.IS.date(value) ? value : null;
|
|
511
|
+
}
|
|
512
|
+
}
|
|
513
|
+
|
|
401
514
|
class InputNameComponent {
|
|
402
515
|
formControl = inject(INPUT_CONTROL);
|
|
403
516
|
input = inject(INPUT_TYPE);
|
|
@@ -429,12 +542,12 @@ class InputNameComponent {
|
|
|
429
542
|
const value = first !== '' && last !== '' ? { first, last } : null;
|
|
430
543
|
this.formControl.setValue(value);
|
|
431
544
|
}
|
|
432
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
433
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
545
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
546
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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" }] });
|
|
434
547
|
}
|
|
435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
548
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputNameComponent, decorators: [{
|
|
436
549
|
type: Component,
|
|
437
|
-
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=\"
|
|
550
|
+
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" }]
|
|
438
551
|
}] });
|
|
439
552
|
|
|
440
553
|
class InputNameMethods extends InputMethods {
|
|
@@ -452,10 +565,10 @@ class InputPasswordComponent {
|
|
|
452
565
|
input = inject(INPUT_TYPE);
|
|
453
566
|
config = inject(INPUT_CONFIG);
|
|
454
567
|
showPassword = false;
|
|
455
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
456
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
568
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
569
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputPasswordComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-password" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u06A9\u0644\u0645\u0647 \u0639\u0628\u0648\u0631' }}</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 <!-- SHOW PASSWORD -->\n <span\n matTextSuffix\n class=\"ngx-form-m3-input-suffix click\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n (click)=\"showPassword = !showPassword\"\n >\n <span> </span>\n <mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>\n </span>\n\n <input\n matInput\n [type]=\"showPassword ? 'text' : 'password'\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"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: "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: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
457
570
|
}
|
|
458
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
571
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputPasswordComponent, decorators: [{
|
|
459
572
|
type: Component,
|
|
460
573
|
args: [{ host: { selector: 'input-password' }, imports: [ReactiveFormsModule, MatFormField, MatIcon, MatInputModule, AutoFocusDirective, InputErrorPipe, MultiLinePipe], template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title || '\u06A9\u0644\u0645\u0647 \u0639\u0628\u0648\u0631' }}</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 <!-- SHOW PASSWORD -->\n <span\n matTextSuffix\n class=\"ngx-form-m3-input-suffix click\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n (click)=\"showPassword = !showPassword\"\n >\n <span> </span>\n <mat-icon>{{ showPassword ? 'visibility_off' : 'visibility' }}</mat-icon>\n </span>\n\n <input\n matInput\n [type]=\"showPassword ? 'text' : 'password'\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n class=\"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" }]
|
|
461
574
|
}] });
|
|
@@ -485,10 +598,10 @@ class InputSelectComponent {
|
|
|
485
598
|
getTitle() {
|
|
486
599
|
return this.input.options.find((option) => option.id === this.formControl.value)?.title || '';
|
|
487
600
|
}
|
|
488
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
489
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
601
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
602
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputSelectComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-select" } }, 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 <mat-select\n [formControl]=\"formControl\"\n [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n [style.direction]=\"'rtl'\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n >\n <!-- OPTIONAL -->\n @if (!!input.optional) { <mat-option></mat-option> }\n\n <!-- TRIGGER -->\n <mat-select-trigger>\n <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ getTitle() }}</div>\n </mat-select-trigger>\n\n <!-- OPTIONS -->\n @for (option of input.options; track $index) {\n <mat-option [value]=\"option.id\">\n <div [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\">{{ option.title }}</div>\n </mat-option>\n }\n </mat-select>\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.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: 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: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i3$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i4$1.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
490
603
|
}
|
|
491
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
604
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
492
605
|
type: Component,
|
|
493
606
|
args: [{ host: { selector: 'input-select' }, imports: [
|
|
494
607
|
NgClass,
|
|
@@ -505,7 +618,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
505
618
|
class InputSelectMethods extends InputMethods {
|
|
506
619
|
control(input, validators) {
|
|
507
620
|
const ids = input.options.map((option) => option.id);
|
|
508
|
-
|
|
621
|
+
let value = input.value && ids.includes(input.value) ? input.value : null;
|
|
622
|
+
if (value === null && ids.length === 1 && !input.optional)
|
|
623
|
+
value = ids[0];
|
|
509
624
|
return new FormControl(value, validators);
|
|
510
625
|
}
|
|
511
626
|
value(value, input) {
|
|
@@ -517,10 +632,10 @@ class InputTextComponent {
|
|
|
517
632
|
formControl = inject(INPUT_CONTROL);
|
|
518
633
|
input = inject(INPUT_TYPE);
|
|
519
634
|
config = inject(INPUT_CONFIG);
|
|
520
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
521
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
635
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
636
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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" }] });
|
|
522
637
|
}
|
|
523
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
638
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
524
639
|
type: Component,
|
|
525
640
|
args: [{ host: { selector: 'input-text' }, imports: [
|
|
526
641
|
NgClass,
|
|
@@ -531,7 +646,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImpor
|
|
|
531
646
|
AutoFocusDirective,
|
|
532
647
|
InputErrorPipe,
|
|
533
648
|
MultiLinePipe,
|
|
534
|
-
], 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" }]
|
|
649
|
+
], 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" }]
|
|
535
650
|
}] });
|
|
536
651
|
|
|
537
652
|
class InputTextMethods extends InputMethods {
|
|
@@ -558,10 +673,10 @@ class InputTextareaComponent {
|
|
|
558
673
|
input = inject(INPUT_TYPE);
|
|
559
674
|
config = inject(INPUT_CONFIG);
|
|
560
675
|
focused = false;
|
|
561
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
562
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
676
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
677
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: InputTextareaComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-textarea" } }, 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 <!-- COUNTER -->\n @if (focused && input.counter) {\n <mat-hint [align]=\"'end'\">\n {{ formControl.value?.length || 0 | number }}{{ input.maxLength ? ' \u0627\u0632 ' + (input.maxLength | number) : '' }}\n </mat-hint>\n }\n\n <textarea\n matInput\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n [style.height]=\"input.height ? input.height.toString() + 'px' : '75px'\"\n [style.resize]=\"'none'\"\n [maxLength]=\"input.maxLength || 524288\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n [AutoHeightDirective]=\"!!input.autoHeight\"\n [minHeight]=\"input.height || 75\"\n [maxHeight]=\"input.maxHeight || 0\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\"\n ></textarea>\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: "pipe", type: DecimalPipe, name: "number" }, { 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: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "directive", type: AutoHeightDirective, selector: "[AutoHeightDirective]", inputs: ["AutoHeightDirective", "minHeight", "maxHeight"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
563
678
|
}
|
|
564
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
679
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputTextareaComponent, decorators: [{
|
|
565
680
|
type: Component,
|
|
566
681
|
args: [{ host: { selector: 'input-textarea' }, imports: [
|
|
567
682
|
DecimalPipe,
|
|
@@ -588,6 +703,38 @@ class InputTextareaMethods extends InputMethods {
|
|
|
588
703
|
}
|
|
589
704
|
}
|
|
590
705
|
|
|
706
|
+
class InputUrlComponent {
|
|
707
|
+
formControl = inject(INPUT_CONTROL);
|
|
708
|
+
input = inject(INPUT_TYPE);
|
|
709
|
+
config = inject(INPUT_CONFIG);
|
|
710
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputUrlComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
711
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", 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" }] });
|
|
712
|
+
}
|
|
713
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputUrlComponent, decorators: [{
|
|
714
|
+
type: Component,
|
|
715
|
+
args: [{ host: { selector: 'input-url' }, imports: [
|
|
716
|
+
ReactiveFormsModule,
|
|
717
|
+
MatFormField,
|
|
718
|
+
MatIcon,
|
|
719
|
+
MatInputModule,
|
|
720
|
+
AutoCompleteDirective,
|
|
721
|
+
AutoFocusDirective,
|
|
722
|
+
InputErrorPipe,
|
|
723
|
+
MultiLinePipe,
|
|
724
|
+
], 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" }]
|
|
725
|
+
}] });
|
|
726
|
+
|
|
727
|
+
class InputUrlMethods extends InputMethods {
|
|
728
|
+
control(input, validators) {
|
|
729
|
+
validators.push(Validators.pattern(Helper.RE.URL.get(true)));
|
|
730
|
+
const value = input.value && Helper.RE.URL.verify(input.value, true) ? input.value : null;
|
|
731
|
+
return new FormControl(value, validators);
|
|
732
|
+
}
|
|
733
|
+
value(value, input) {
|
|
734
|
+
return typeof value === 'string' && Helper.RE.URL.verify(value, true) ? value : null;
|
|
735
|
+
}
|
|
736
|
+
}
|
|
737
|
+
|
|
591
738
|
class InputComponent {
|
|
592
739
|
formGroup;
|
|
593
740
|
input;
|
|
@@ -604,10 +751,10 @@ class InputComponent {
|
|
|
604
751
|
],
|
|
605
752
|
});
|
|
606
753
|
}
|
|
607
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
608
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
754
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
755
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.5", type: InputComponent, isStandalone: true, selector: "form-input", inputs: { formGroup: "formGroup", input: "input", config: "config" }, ngImport: i0, template: "<ng-container *ngComponentOutlet=\"inputInfo[input.type].component; injector: injector\"></ng-container>\n", styles: [""], dependencies: [{ kind: "directive", type: NgComponentOutlet, selector: "[ngComponentOutlet]", inputs: ["ngComponentOutlet", "ngComponentOutletInputs", "ngComponentOutletInjector", "ngComponentOutletContent", "ngComponentOutletNgModule", "ngComponentOutletNgModuleFactory"] }] });
|
|
609
756
|
}
|
|
610
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
757
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: InputComponent, decorators: [{
|
|
611
758
|
type: Component,
|
|
612
759
|
args: [{ selector: 'form-input', imports: [NgComponentOutlet], template: "<ng-container *ngComponentOutlet=\"inputInfo[input.type].component; injector: injector\"></ng-container>\n" }]
|
|
613
760
|
}], propDecorators: { formGroup: [{
|
|
@@ -625,12 +772,15 @@ const InputInfo = {
|
|
|
625
772
|
COLOR: { title: 'رنگ', methods: new InputColorMethods(), component: InputColorComponent },
|
|
626
773
|
DATE: { title: 'تاریخ', methods: new InputDateMethods(), component: InputDateComponent },
|
|
627
774
|
EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
|
|
775
|
+
FILE: { title: 'فایل', methods: new InputFileMethods(), component: InputFileComponent },
|
|
628
776
|
MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
|
|
777
|
+
MOMENT: { title: 'زمان', methods: new InputMomentMethods(), component: InputMomentComponent },
|
|
629
778
|
NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
|
|
630
779
|
PASSWORD: { title: 'کلمه عبور', methods: new InputPasswordMethods(), component: InputPasswordComponent },
|
|
631
780
|
SELECT: { title: 'لیست کشویی', methods: new InputSelectMethods(), component: InputSelectComponent },
|
|
632
781
|
TEXT: { title: 'متن یک خطی', methods: new InputTextMethods(), component: InputTextComponent },
|
|
633
782
|
TEXTAREA: { title: 'متن چند خطی', methods: new InputTextareaMethods(), component: InputTextareaComponent },
|
|
783
|
+
URL: { title: 'آدرس سایت', methods: new InputUrlMethods(), component: InputUrlComponent },
|
|
634
784
|
};
|
|
635
785
|
|
|
636
786
|
const NGX_FORM_CONFIG = new InjectionToken('NGX-FORM-CONFIG');
|
|
@@ -822,7 +972,7 @@ class NgxFormComponent {
|
|
|
822
972
|
}
|
|
823
973
|
setInput(input) {
|
|
824
974
|
const name = input.name;
|
|
825
|
-
const validators = input.optional ? [] : [Validators.required];
|
|
975
|
+
const validators = input.optional || ('readonly' in input && input.readonly) ? [] : [Validators.required];
|
|
826
976
|
this.formGroup.setControl(name, InputInfo[input.type].methods.control(input, validators));
|
|
827
977
|
}
|
|
828
978
|
checkInputs() {
|
|
@@ -900,10 +1050,10 @@ class NgxFormComponent {
|
|
|
900
1050
|
else
|
|
901
1051
|
this.router.navigate(action);
|
|
902
1052
|
}
|
|
903
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
904
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
1053
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$3.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
1054
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.5", type: NgxFormComponent, isStandalone: true, selector: "ngx-form", inputs: { ngxForm: "ngxForm" }, outputs: { onInit: "onInit", onSubmit: "onSubmit", onChange: "onChange" }, host: { listeners: { "window:resize": "onResize($event)" } }, viewQueries: [{ propertyName: "ngForm", first: true, predicate: ["formObject"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n <section class=\"sections\">\n @for (section of sections; track $index) {\n <!-- CHECK SECTION VIEW -->\n @if (showSection(section)) {\n <!-- SECTION HEADER -->\n @if (section.header) {\n <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n }\n\n <div class=\"section\" [class.section-mobile]=\"isMobile\">\n <!-- SECTIONS -->\n @for (column of section.columns; track $index) {\n <!-- CHECK COLUMN VIEW -->\n @if (showColumn(column)) {\n <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n <!-- COLUMN HEADER -->\n @if (column.header) {\n <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n }\n\n <!-- ROWS -->\n @for (row of column.rows; track $index) {\n <!-- CHECK Row VIEW -->\n @if (showRow(row)) {\n <!-- ROW HEADER -->\n @if (row.header) {\n <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n }\n\n <div class=\"inputs\">\n <!-- INPUTS -->\n @for (input of row.inputs; track $index) {\n <!-- CHECK Row VIEW -->\n @if (showInput(input)) {\n <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n <form-input [formGroup]=\"formGroup\" [input]=\"input\" [config]=\"inputConfig\"></form-input>\n </div>\n } }\n </div>\n } }\n </div>\n } }\n </div>\n } }\n </section>\n\n <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n <!-- EXTRA BUTTONS -->\n @for (item of (ngxForm.buttons || []); track $index) {\n <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n }\n <!-- SUBMIT BUTTON -->\n <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: MatButton, selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "component", type: InputComponent, selector: "form-input", inputs: ["formGroup", "input", "config"] }, { kind: "directive", type: FormErrorDirective, selector: "form.ngx-form" }] });
|
|
905
1055
|
}
|
|
906
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
1056
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.5", ngImport: i0, type: NgxFormComponent, decorators: [{
|
|
907
1057
|
type: Component,
|
|
908
1058
|
args: [{ selector: 'ngx-form', imports: [ReactiveFormsModule, MatButton, InputComponent, FormErrorDirective], template: "<form [formGroup]=\"formGroup\" (ngSubmit)=\"checkSubmit()\" dir=\"rtl\" class=\"ngx-form\" #formObject=\"ngForm\">\n <section class=\"sections\">\n @for (section of sections; track $index) {\n <!-- CHECK SECTION VIEW -->\n @if (showSection(section)) {\n <!-- SECTION HEADER -->\n @if (section.header) {\n <div class=\"ngx-form-m3-header section-header\">{{ section.header }}</div>\n }\n\n <div class=\"section\" [class.section-mobile]=\"isMobile\">\n <!-- SECTIONS -->\n @for (column of section.columns; track $index) {\n <!-- CHECK COLUMN VIEW -->\n @if (showColumn(column)) {\n <div class=\"column\" [style.flex]=\"section.flex[$index]\">\n <!-- COLUMN HEADER -->\n @if (column.header) {\n <div class=\"ngx-form-m3-header column-header\">{{ column.header }}</div>\n }\n\n <!-- ROWS -->\n @for (row of column.rows; track $index) {\n <!-- CHECK Row VIEW -->\n @if (showRow(row)) {\n <!-- ROW HEADER -->\n @if (row.header) {\n <div class=\"ngx-form-m3-header row-header\">{{ row.header }}</div>\n }\n\n <div class=\"inputs\">\n <!-- INPUTS -->\n @for (input of row.inputs; track $index) {\n <!-- CHECK Row VIEW -->\n @if (showInput(input)) {\n <div class=\"input\" [style.flex]=\"row.flex[$index]\">\n <form-input [formGroup]=\"formGroup\" [input]=\"input\" [config]=\"inputConfig\"></form-input>\n </div>\n } }\n </div>\n } }\n </div>\n } }\n </div>\n } }\n </section>\n\n <section class=\"ngx-form-m3-form-buttons\" [class.mobile-view]=\"isMobile\">\n <!-- EXTRA BUTTONS -->\n @for (item of (ngxForm.buttons || []); track $index) {\n <button type=\"button\" mat-stroked-button (click)=\"onClick(item.action)\">{{ item.title }}</button>\n }\n <!-- SUBMIT BUTTON -->\n <button type=\"submit\" mat-flat-button>{{ ngxForm.submit }}</button>\n </section>\n</form>\n", styles: [".sections{display:flex;flex-direction:column}.sections .column-header,.sections .section-header{margin-bottom:1rem}.sections .row-header{margin:1rem 0}.sections .section,.sections .section .column .inputs{display:flex;align-items:flex-start;column-gap:1rem}.sections .section-mobile{display:block}:host ::ng-deep mat-form-field{width:100%;margin-bottom:.5rem}:host ::ng-deep .mat-mdc-form-field-infix{width:100%!important}\n"] }]
|
|
909
1059
|
}], ctorParameters: () => [{ type: i1$3.Router }, { type: undefined, decorators: [{
|