@webilix/ngx-form-m3 0.0.3 → 0.0.4
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.
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Directive, HostBinding, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, makeEnvironmentProviders, EventEmitter, Inject, ViewChild, Output } from '@angular/core';
|
|
3
|
-
import { NgClass, DecimalPipe, NgComponentOutlet } from '@angular/common';
|
|
4
3
|
import * as i1 from '@angular/forms';
|
|
5
4
|
import { ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
|
|
6
5
|
import { MatButton } from '@angular/material/button';
|
|
@@ -13,17 +12,18 @@ import { Helper } from '@webilix/helper-library';
|
|
|
13
12
|
import * as i1$1 from '@angular/platform-browser';
|
|
14
13
|
import * as i4 from '@angular/cdk/bidi';
|
|
15
14
|
import { provideNgxMask, NgxMaskDirective } from 'ngx-mask';
|
|
16
|
-
import
|
|
15
|
+
import { NgClass, DecimalPipe, NgComponentOutlet } from '@angular/common';
|
|
16
|
+
import * as i3$1 from '@angular/material/select';
|
|
17
17
|
import { MatSelectModule } from '@angular/material/select';
|
|
18
|
-
import * as
|
|
18
|
+
import * as i4$1 from '@angular/material/core';
|
|
19
19
|
import * as i1$2 from '@angular/router';
|
|
20
20
|
|
|
21
21
|
class AutoCompleteDirective {
|
|
22
22
|
autocomplete = 'one-time-code';
|
|
23
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
24
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
23
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoCompleteDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive });
|
|
24
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: AutoCompleteDirective, isStandalone: true, selector: "input[type=\"text\"]", host: { properties: { "attr.autocomplete": "this.autocomplete" } }, ngImport: i0 });
|
|
25
25
|
}
|
|
26
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
26
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoCompleteDirective, decorators: [{
|
|
27
27
|
type: Directive,
|
|
28
28
|
args: [{ selector: 'input[type="text"]' }]
|
|
29
29
|
}], propDecorators: { autocomplete: [{
|
|
@@ -50,10 +50,10 @@ class AutoFocusDirective {
|
|
|
50
50
|
input.select();
|
|
51
51
|
}, 0);
|
|
52
52
|
}
|
|
53
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
54
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
53
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoFocusDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive });
|
|
54
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: AutoFocusDirective, isStandalone: true, selector: "[AutoFocusDirective]", inputs: { AutoFocusDirective: "AutoFocusDirective" }, ngImport: i0 });
|
|
55
55
|
}
|
|
56
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
56
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoFocusDirective, decorators: [{
|
|
57
57
|
type: Directive,
|
|
58
58
|
args: [{ selector: '[AutoFocusDirective]' }]
|
|
59
59
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { AutoFocusDirective: [{
|
|
@@ -98,10 +98,10 @@ class AutoHeightDirective {
|
|
|
98
98
|
this.renderer2.setStyle(this.elementRef.nativeElement, 'height', value);
|
|
99
99
|
this.renderer2.setStyle(this.elementRef.nativeElement, 'overflow', 'auto');
|
|
100
100
|
}
|
|
101
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
102
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
101
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoHeightDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
|
|
102
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: AutoHeightDirective, isStandalone: true, selector: "[AutoHeightDirective]", inputs: { AutoHeightDirective: "AutoHeightDirective", minHeight: "minHeight", maxHeight: "maxHeight" }, host: { listeners: { "focus": "focus()", "blur": "blur()", "input": "resize()" } }, ngImport: i0 });
|
|
103
103
|
}
|
|
104
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
104
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: AutoHeightDirective, decorators: [{
|
|
105
105
|
type: Directive,
|
|
106
106
|
args: [{ selector: '[AutoHeightDirective]' }]
|
|
107
107
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { AutoHeightDirective: [{
|
|
@@ -146,10 +146,10 @@ class FormErrorDirective {
|
|
|
146
146
|
const top = element.getBoundingClientRect().top + window.scrollY - labelOffset;
|
|
147
147
|
window.scroll({ top, left: 0, behavior: 'smooth' });
|
|
148
148
|
}
|
|
149
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
150
|
-
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.
|
|
149
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FormErrorDirective, deps: [{ token: i0.ElementRef }, { token: i1.FormGroupDirective, optional: true }], target: i0.ɵɵFactoryTarget.Directive });
|
|
150
|
+
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "19.0.4", type: FormErrorDirective, isStandalone: true, selector: "form.ngx-form", host: { listeners: { "submit": "onSubmit()" } }, ngImport: i0 });
|
|
151
151
|
}
|
|
152
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
152
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: FormErrorDirective, decorators: [{
|
|
153
153
|
type: Directive,
|
|
154
154
|
args: [{ selector: 'form.ngx-form' }]
|
|
155
155
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i1.FormGroupDirective, decorators: [{
|
|
@@ -202,10 +202,10 @@ class InputErrorPipe {
|
|
|
202
202
|
}
|
|
203
203
|
return 'مقدار وارد شده صحیح نیست.';
|
|
204
204
|
}
|
|
205
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
206
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
205
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputErrorPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe });
|
|
206
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: InputErrorPipe, isStandalone: true, name: "InputErrorPipe" });
|
|
207
207
|
}
|
|
208
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
208
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputErrorPipe, decorators: [{
|
|
209
209
|
type: Pipe,
|
|
210
210
|
args: [{ name: 'InputErrorPipe' }]
|
|
211
211
|
}] });
|
|
@@ -222,10 +222,10 @@ class MultiLinePipe {
|
|
|
222
222
|
? this.sanitizer.bypassSecurityTrustHtml(value.replace(/(?:\r\n|\r|\n)/g, '<br />'))
|
|
223
223
|
: Helper.STRING.escapeHTML(value).replace(/(?:\r\n|\r|\n)/g, '<br />');
|
|
224
224
|
}
|
|
225
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
226
|
-
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.
|
|
225
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MultiLinePipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe });
|
|
226
|
+
static ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "19.0.4", ngImport: i0, type: MultiLinePipe, isStandalone: true, name: "MultiLinePipe" });
|
|
227
227
|
}
|
|
228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
228
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: MultiLinePipe, decorators: [{
|
|
229
229
|
type: Pipe,
|
|
230
230
|
args: [{ name: 'MultiLinePipe' }]
|
|
231
231
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
|
|
@@ -240,12 +240,12 @@ class InputColorComponent {
|
|
|
240
240
|
formControl = inject(INPUT_CONTROL);
|
|
241
241
|
input = inject(INPUT_TYPE);
|
|
242
242
|
config = inject(INPUT_CONFIG);
|
|
243
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
244
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputColorComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-color" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\" [floatLabel]=\"formControl.value ? 'always' : 'auto'\">\n <mat-label>{{ input.title || '\u0631\u0646\u06AF' }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <!-- SUFFIX -->\n <span matTextSuffix class=\"ngx-form-m3-input-suffix click\" [class.ngx-form-m3-disabled-input]=\"formControl.disabled\">\n <span> </span>\n <mat-icon (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\">\n {{ formControl.value ? 'close' : 'palette' }}\n </mat-icon>\n </span>\n\n <!-- INPUT -->\n <input matInput type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n <content>\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 </content>\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: ["content{display:flex;align-items:center}content section{flex:1;display:block;position:relative}content section .color{cursor:pointer;border-width:0px}content section input[type=color]{position:absolute;bottom:0;left:0;width:0!important;opacity:0;z-index:-1}content .value{width:90px;text-align:left;cursor:pointer;text-transform:uppercase}\n"], 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" }] });
|
|
245
245
|
}
|
|
246
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputColorComponent, decorators: [{
|
|
247
247
|
type: Component,
|
|
248
|
-
args: [{ host: { selector: 'input-color' }, imports: [
|
|
248
|
+
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 <content>\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 </content>\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: ["content{display:flex;align-items:center}content section{flex:1;display:block;position:relative}content section .color{cursor:pointer;border-width:0px}content section input[type=color]{position:absolute;bottom:0;left:0;width:0!important;opacity:0;z-index:-1}content .value{width:90px;text-align:left;cursor:pointer;text-transform:uppercase}\n"] }]
|
|
249
249
|
}] });
|
|
250
250
|
|
|
251
251
|
class InputColorMethods extends InputMethods {
|
|
@@ -262,13 +262,12 @@ class InputEmailComponent {
|
|
|
262
262
|
formControl = inject(INPUT_CONTROL);
|
|
263
263
|
input = inject(INPUT_TYPE);
|
|
264
264
|
config = inject(INPUT_CONFIG);
|
|
265
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
266
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
265
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
266
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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" }] });
|
|
267
267
|
}
|
|
268
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
268
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputEmailComponent, decorators: [{
|
|
269
269
|
type: Component,
|
|
270
270
|
args: [{ host: { selector: 'input-email' }, imports: [
|
|
271
|
-
NgClass,
|
|
272
271
|
ReactiveFormsModule,
|
|
273
272
|
MatFormField,
|
|
274
273
|
MatIcon,
|
|
@@ -277,7 +276,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
277
276
|
AutoFocusDirective,
|
|
278
277
|
InputErrorPipe,
|
|
279
278
|
MultiLinePipe,
|
|
280
|
-
], 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=\"suffix\" [
|
|
279
|
+
], 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" }]
|
|
281
280
|
}] });
|
|
282
281
|
|
|
283
282
|
class InputEmailMethods extends InputMethods {
|
|
@@ -296,13 +295,12 @@ class InputMobileComponent {
|
|
|
296
295
|
input = inject(INPUT_TYPE);
|
|
297
296
|
config = inject(INPUT_CONFIG);
|
|
298
297
|
inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
|
|
299
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
300
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
298
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
299
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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" }] });
|
|
301
300
|
}
|
|
302
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
301
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputMobileComponent, decorators: [{
|
|
303
302
|
type: Component,
|
|
304
303
|
args: [{ host: { selector: 'input-mobile' }, imports: [
|
|
305
|
-
NgClass,
|
|
306
304
|
ReactiveFormsModule,
|
|
307
305
|
MatFormField,
|
|
308
306
|
MatIcon,
|
|
@@ -312,7 +310,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
312
310
|
AutoFocusDirective,
|
|
313
311
|
InputErrorPipe,
|
|
314
312
|
MultiLinePipe,
|
|
315
|
-
], providers: [provideNgxMask()], 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=\"suffix\" [
|
|
313
|
+
], providers: [provideNgxMask()], 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" }]
|
|
316
314
|
}] });
|
|
317
315
|
|
|
318
316
|
class InputMobileMethods extends InputMethods {
|
|
@@ -356,10 +354,10 @@ class InputNameComponent {
|
|
|
356
354
|
const value = first !== '' && last !== '' ? { first, last } : null;
|
|
357
355
|
this.formControl.setValue(value);
|
|
358
356
|
}
|
|
359
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
360
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
357
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
358
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputNameComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-name" } }, ngImport: i0, template: "<!-- INPUT -->\n<input type=\"text\" [name]=\"input.name\" [formControl]=\"formControl\" [style.display]=\"'none !important'\" />\n\n<div class=\"columns\">\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: [".columns{display:flex;column-gap:1rem}.columns mat-form-field{flex:1}\n"], 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" }] });
|
|
361
359
|
}
|
|
362
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
360
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputNameComponent, decorators: [{
|
|
363
361
|
type: Component,
|
|
364
362
|
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=\"columns\">\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: [".columns{display:flex;column-gap:1rem}.columns mat-form-field{flex:1}\n"] }]
|
|
365
363
|
}] });
|
|
@@ -379,21 +377,12 @@ class InputPasswordComponent {
|
|
|
379
377
|
input = inject(INPUT_TYPE);
|
|
380
378
|
config = inject(INPUT_CONFIG);
|
|
381
379
|
showPassword = false;
|
|
382
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
383
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
380
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
381
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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" }] });
|
|
384
382
|
}
|
|
385
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
383
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputPasswordComponent, decorators: [{
|
|
386
384
|
type: Component,
|
|
387
|
-
args: [{ host: { selector: 'input-password' }, imports: [
|
|
388
|
-
NgClass,
|
|
389
|
-
ReactiveFormsModule,
|
|
390
|
-
MatFormField,
|
|
391
|
-
MatIcon,
|
|
392
|
-
MatInputModule,
|
|
393
|
-
AutoFocusDirective,
|
|
394
|
-
InputErrorPipe,
|
|
395
|
-
MultiLinePipe,
|
|
396
|
-
], 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=\"suffix\"\n (click)=\"showPassword = !showPassword\"\n [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n >\n <span [ngClass]=\"config.enClass\"> </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 [ngClass]=\"config.enClass\"\n [dir]=\"'ltr'\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n [ngClass]=\"config.descriptionClass\"\n [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [".suffix{display:inline-flex}.suffix mat-icon{cursor:pointer;padding-right:.5rem}\n"] }]
|
|
385
|
+
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" }]
|
|
397
386
|
}] });
|
|
398
387
|
|
|
399
388
|
class InputPasswordMethods extends InputMethods {
|
|
@@ -421,10 +410,10 @@ class InputSelectComponent {
|
|
|
421
410
|
getTitle() {
|
|
422
411
|
return this.input.options.find((option) => option.id === this.formControl.value)?.title || '';
|
|
423
412
|
}
|
|
424
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
425
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
413
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
414
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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" }] });
|
|
426
415
|
}
|
|
427
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
416
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
428
417
|
type: Component,
|
|
429
418
|
args: [{ host: { selector: 'input-select' }, imports: [
|
|
430
419
|
NgClass,
|
|
@@ -435,7 +424,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
435
424
|
AutoFocusDirective,
|
|
436
425
|
InputErrorPipe,
|
|
437
426
|
MultiLinePipe,
|
|
438
|
-
], 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 ?
|
|
427
|
+
], 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" }]
|
|
439
428
|
}] });
|
|
440
429
|
|
|
441
430
|
class InputSelectMethods extends InputMethods {
|
|
@@ -453,10 +442,10 @@ class InputTextComponent {
|
|
|
453
442
|
formControl = inject(INPUT_CONTROL);
|
|
454
443
|
input = inject(INPUT_TYPE);
|
|
455
444
|
config = inject(INPUT_CONFIG);
|
|
456
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
457
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
445
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
446
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", type: InputTextComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-text" } }, ngImport: i0, template: "<mat-form-field [appearance]=\"input.appearance || config.appearance\">\n <mat-label>{{ input.title }}</mat-label>\n @if (formControl.invalid) { <mat-error>{{ formControl.errors | InputErrorPipe : input.type }}</mat-error> }\n\n <!-- HINT -->\n @if (input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <input\n matInput\n type=\"text\"\n [name]=\"input.name\"\n [formControl]=\"formControl\"\n [ngClass]=\"input.english ? 'ngx-form-m3-en' : ''\"\n [maxLength]=\"input.maxLength || 524288\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n />\n\n <!-- DESCRIPTION -->\n @if (input.description) {\n <div\n class=\"ngx-form-m3-input-description\"\n [class.ngx-form-m3-disabled-input]=\"formControl.disabled\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: i3.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i3.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: AutoCompleteDirective, selector: "input[type=\"text\"]" }, { kind: "directive", type: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
458
447
|
}
|
|
459
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
448
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
460
449
|
type: Component,
|
|
461
450
|
args: [{ host: { selector: 'input-text' }, imports: [
|
|
462
451
|
NgClass,
|
|
@@ -467,7 +456,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
467
456
|
AutoFocusDirective,
|
|
468
457
|
InputErrorPipe,
|
|
469
458
|
MultiLinePipe,
|
|
470
|
-
], 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 ?
|
|
459
|
+
], 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" }]
|
|
471
460
|
}] });
|
|
472
461
|
|
|
473
462
|
const LengthValidator = (length) => {
|
|
@@ -503,10 +492,10 @@ class InputTextareaComponent {
|
|
|
503
492
|
input = inject(INPUT_TYPE);
|
|
504
493
|
config = inject(INPUT_CONFIG);
|
|
505
494
|
focused = false;
|
|
506
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
507
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
495
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
496
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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" }] });
|
|
508
497
|
}
|
|
509
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
498
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputTextareaComponent, decorators: [{
|
|
510
499
|
type: Component,
|
|
511
500
|
args: [{ host: { selector: 'input-textarea' }, imports: [
|
|
512
501
|
DecimalPipe,
|
|
@@ -518,7 +507,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
518
507
|
AutoHeightDirective,
|
|
519
508
|
InputErrorPipe,
|
|
520
509
|
MultiLinePipe,
|
|
521
|
-
], 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 ?
|
|
510
|
+
], 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" }]
|
|
522
511
|
}] });
|
|
523
512
|
|
|
524
513
|
class InputTextareaMethods extends InputMethods {
|
|
@@ -549,10 +538,10 @@ class InputComponent {
|
|
|
549
538
|
],
|
|
550
539
|
});
|
|
551
540
|
}
|
|
552
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
553
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.
|
|
541
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
542
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.0.4", 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"] }] });
|
|
554
543
|
}
|
|
555
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
544
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: InputComponent, decorators: [{
|
|
556
545
|
type: Component,
|
|
557
546
|
args: [{ selector: 'form-input', imports: [NgComponentOutlet], template: "<ng-container *ngComponentOutlet=\"inputInfo[input.type].component; injector: injector\"></ng-container>\n" }]
|
|
558
547
|
}], propDecorators: { formGroup: [{
|
|
@@ -598,19 +587,12 @@ class NgxFormComponent {
|
|
|
598
587
|
lastValues = {};
|
|
599
588
|
lastSubmit;
|
|
600
589
|
isMobile = false;
|
|
601
|
-
headerClass;
|
|
602
590
|
inputConfig;
|
|
603
591
|
constructor(router, config) {
|
|
604
592
|
this.router = router;
|
|
605
593
|
this.config = config;
|
|
606
594
|
}
|
|
607
595
|
ngOnInit() {
|
|
608
|
-
this.headerClass = this.config?.headerClass || 'ngx-form-header';
|
|
609
|
-
this.inputConfig = {
|
|
610
|
-
appearance: this.ngxForm.appearance || 'fill',
|
|
611
|
-
enClass: this.config?.enClass || 'ngx-form-en',
|
|
612
|
-
descriptionClass: this.config?.descriptionClass || 'ngx-form-description',
|
|
613
|
-
};
|
|
614
596
|
this.formGroup = new FormGroup({});
|
|
615
597
|
const inputs = this.getInputs();
|
|
616
598
|
// SET FORM GROUP INPUTS
|
|
@@ -623,7 +605,11 @@ class NgxFormComponent {
|
|
|
623
605
|
if (!input.disableOn && !input.hideOn)
|
|
624
606
|
autoFocus = input.name;
|
|
625
607
|
});
|
|
626
|
-
|
|
608
|
+
// INPUT CONFIG
|
|
609
|
+
this.inputConfig = {
|
|
610
|
+
appearance: this.ngxForm.appearance || 'fill',
|
|
611
|
+
autoFocus,
|
|
612
|
+
};
|
|
627
613
|
// REGISTER VALUE CHANGE
|
|
628
614
|
this.formGroup.valueChanges.subscribe({
|
|
629
615
|
next: () => {
|
|
@@ -847,12 +833,12 @@ class NgxFormComponent {
|
|
|
847
833
|
else
|
|
848
834
|
this.router.navigate(action);
|
|
849
835
|
}
|
|
850
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.
|
|
851
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.
|
|
836
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxFormComponent, deps: [{ token: i1$2.Router }, { token: NGX_FORM_CONFIG, optional: true }], target: i0.ɵɵFactoryTarget.Component });
|
|
837
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.4", 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" }] });
|
|
852
838
|
}
|
|
853
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.
|
|
839
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.4", ngImport: i0, type: NgxFormComponent, decorators: [{
|
|
854
840
|
type: Component,
|
|
855
|
-
args: [{ selector: 'ngx-form', imports: [
|
|
841
|
+
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"] }]
|
|
856
842
|
}], ctorParameters: () => [{ type: i1$2.Router }, { type: undefined, decorators: [{
|
|
857
843
|
type: Optional
|
|
858
844
|
}, {
|