@webilix/ngx-form-m3 0.0.2 → 0.0.3
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 +83 -160
- package/fesm2022/webilix-ngx-form-m3.mjs.map +1 -1
- package/lib/inputs/color/input-color.component.d.ts +11 -0
- package/lib/inputs/color/input-color.interface.d.ts +9 -0
- package/lib/inputs/email/input-email.component.d.ts +3 -5
- package/lib/inputs/index.d.ts +2 -0
- package/lib/inputs/input.component.d.ts +5 -0
- package/lib/inputs/input.interface.d.ts +4 -0
- package/lib/inputs/mobile/input-mobile.component.d.ts +3 -5
- package/lib/inputs/name/input-name.component.d.ts +3 -4
- package/lib/inputs/password/input-password.component.d.ts +3 -5
- package/lib/inputs/select/input-select.component.d.ts +3 -5
- package/lib/inputs/text/input-text.component.d.ts +3 -5
- package/lib/inputs/textarea/input-textarea.component.d.ts +3 -4
- package/lib/ngx-form.interface.d.ts +2 -2
- package/package.json +1 -1
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Directive, HostBinding, Input, HostListener, Optional, Pipe,
|
|
2
|
+
import { Directive, HostBinding, Input, HostListener, Optional, Pipe, InjectionToken, inject, Component, Injector, makeEnvironmentProviders, EventEmitter, Inject, ViewChild, Output } from '@angular/core';
|
|
3
3
|
import { NgClass, DecimalPipe, NgComponentOutlet } from '@angular/common';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
|
-
import { ReactiveFormsModule,
|
|
5
|
+
import { ReactiveFormsModule, FormControl, Validators, FormGroup } from '@angular/forms';
|
|
6
6
|
import { MatButton } from '@angular/material/button';
|
|
7
7
|
import * as i3 from '@angular/material/form-field';
|
|
8
8
|
import { MatFormField } from '@angular/material/form-field';
|
|
@@ -230,18 +230,40 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
230
230
|
args: [{ name: 'MultiLinePipe' }]
|
|
231
231
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }] });
|
|
232
232
|
|
|
233
|
-
class
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
|
|
239
|
-
|
|
240
|
-
|
|
241
|
-
|
|
233
|
+
class InputMethods {
|
|
234
|
+
}
|
|
235
|
+
const INPUT_CONTROL = new InjectionToken('NGX-FORM-INPUT-CONTROL');
|
|
236
|
+
const INPUT_TYPE = new InjectionToken('NGX-FORM-INPUT-TYPE');
|
|
237
|
+
const INPUT_CONFIG = new InjectionToken('NGX-FORM-INPUT-CONFIG');
|
|
238
|
+
|
|
239
|
+
class InputColorComponent {
|
|
240
|
+
formControl = inject(INPUT_CONTROL);
|
|
241
|
+
input = inject(INPUT_TYPE);
|
|
242
|
+
config = inject(INPUT_CONFIG);
|
|
243
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputColorComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
244
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n <span> </span>\n <mat-icon\n (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\"\n [style.opacity]=\"formControl.value ? 1 : 0\"\n >\n close\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 [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n [style.cursor]=\"formControl.disabled ? 'default' : 'pointer'\"\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\"\n [ngClass]=\"config.enClass\"\n [dir]=\"'ltr'\"\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 [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: ["content{display:flex;align-items:center}content section{flex:1;display:block;position:relative}content section .color{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}.suffix{display:inline-flex}.suffix mat-icon{cursor:pointer}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
245
|
+
}
|
|
246
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputColorComponent, decorators: [{
|
|
247
|
+
type: Component,
|
|
248
|
+
args: [{ host: { selector: 'input-color' }, imports: [NgClass, 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=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n <span> </span>\n <mat-icon\n (click)=\"formControl.value ? formControl.setValue(null) : colorInput.click(); formControl.markAsTouched()\"\n [style.opacity]=\"formControl.value ? 1 : 0\"\n >\n close\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 [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n [style.cursor]=\"formControl.disabled ? 'default' : 'pointer'\"\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\"\n [ngClass]=\"config.enClass\"\n [dir]=\"'ltr'\"\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 [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: ["content{display:flex;align-items:center}content section{flex:1;display:block;position:relative}content section .color{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}.suffix{display:inline-flex}.suffix mat-icon{cursor:pointer}\n"] }]
|
|
249
|
+
}] });
|
|
250
|
+
|
|
251
|
+
class InputColorMethods extends InputMethods {
|
|
252
|
+
control(input, validators) {
|
|
253
|
+
const value = input.value !== undefined && Helper.IS.STRING.color(input.value) ? Helper.COLOR.toHEX(input.value) : null;
|
|
254
|
+
return new FormControl(value, validators);
|
|
255
|
+
}
|
|
256
|
+
value(value, input) {
|
|
257
|
+
return Helper.IS.STRING.color(value) ? String(Helper.COLOR.toHEX(value)).toUpperCase() : null;
|
|
242
258
|
}
|
|
243
|
-
|
|
244
|
-
|
|
259
|
+
}
|
|
260
|
+
|
|
261
|
+
class InputEmailComponent {
|
|
262
|
+
formControl = inject(INPUT_CONTROL);
|
|
263
|
+
input = inject(INPUT_TYPE);
|
|
264
|
+
config = inject(INPUT_CONFIG);
|
|
265
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEmailComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
266
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n <span [ngClass]=\"config.enClass\"> </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 [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{padding-right:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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" }] });
|
|
245
267
|
}
|
|
246
268
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputEmailComponent, decorators: [{
|
|
247
269
|
type: Component,
|
|
@@ -255,20 +277,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
255
277
|
AutoFocusDirective,
|
|
256
278
|
InputErrorPipe,
|
|
257
279
|
MultiLinePipe,
|
|
258
|
-
], 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 (
|
|
259
|
-
}]
|
|
260
|
-
type: Inject,
|
|
261
|
-
args: ['formControl']
|
|
262
|
-
}] }, { type: undefined, decorators: [{
|
|
263
|
-
type: Inject,
|
|
264
|
-
args: ['input']
|
|
265
|
-
}] }, { type: undefined, decorators: [{
|
|
266
|
-
type: Inject,
|
|
267
|
-
args: ['config']
|
|
268
|
-
}] }] });
|
|
269
|
-
|
|
270
|
-
class InputMethods {
|
|
271
|
-
}
|
|
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\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n <span [ngClass]=\"config.enClass\"> </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 [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{padding-right:.5rem}\n"] }]
|
|
281
|
+
}] });
|
|
272
282
|
|
|
273
283
|
class InputEmailMethods extends InputMethods {
|
|
274
284
|
control(input, validators) {
|
|
@@ -282,18 +292,12 @@ class InputEmailMethods extends InputMethods {
|
|
|
282
292
|
}
|
|
283
293
|
|
|
284
294
|
class InputMobileComponent {
|
|
285
|
-
formControl;
|
|
286
|
-
input;
|
|
287
|
-
config;
|
|
288
|
-
focused = false;
|
|
295
|
+
formControl = inject(INPUT_CONTROL);
|
|
296
|
+
input = inject(INPUT_TYPE);
|
|
297
|
+
config = inject(INPUT_CONFIG);
|
|
289
298
|
inputTransformFn = (value) => Helper.STRING.changeNumbers(value.toString(), 'EN');
|
|
290
|
-
|
|
291
|
-
|
|
292
|
-
this.input = input;
|
|
293
|
-
this.config = config;
|
|
294
|
-
}
|
|
295
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputMobileComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
|
|
296
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && input.hint) { <mat-hint>{{ input.hint }}</mat-hint> }\n\n <!-- ICON & SUFFIX -->\n <span matTextSuffix class=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n <span [ngClass]=\"config.enClass\">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 [ngClass]=\"config.enClass\"\n [dir]=\"'ltr'\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n [mask]=\"'00-000-0000'\"\n [inputTransformFn]=\"inputTransformFn\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\"\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{padding-right:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: 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"], 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" }] });
|
|
299
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputMobileComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
300
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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=\"suffix\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n <span [ngClass]=\"config.enClass\">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 [ngClass]=\"config.enClass\"\n [dir]=\"'ltr'\"\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 [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{padding-right:.5rem}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[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: 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"], 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" }] });
|
|
297
301
|
}
|
|
298
302
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputMobileComponent, decorators: [{
|
|
299
303
|
type: Component,
|
|
@@ -308,17 +312,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
308
312
|
AutoFocusDirective,
|
|
309
313
|
InputErrorPipe,
|
|
310
314
|
MultiLinePipe,
|
|
311
|
-
], 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 (
|
|
312
|
-
}]
|
|
313
|
-
type: Inject,
|
|
314
|
-
args: ['formControl']
|
|
315
|
-
}] }, { type: undefined, decorators: [{
|
|
316
|
-
type: Inject,
|
|
317
|
-
args: ['input']
|
|
318
|
-
}] }, { type: undefined, decorators: [{
|
|
319
|
-
type: Inject,
|
|
320
|
-
args: ['config']
|
|
321
|
-
}] }] });
|
|
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\" [style.opacity]=\"formControl.disabled ? '0.4' : 1\">\n <span [ngClass]=\"config.enClass\">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 [ngClass]=\"config.enClass\"\n [dir]=\"'ltr'\"\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 [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{padding-right:.5rem}\n"] }]
|
|
316
|
+
}] });
|
|
322
317
|
|
|
323
318
|
class InputMobileMethods extends InputMethods {
|
|
324
319
|
control(input, validators) {
|
|
@@ -331,16 +326,11 @@ class InputMobileMethods extends InputMethods {
|
|
|
331
326
|
}
|
|
332
327
|
|
|
333
328
|
class InputNameComponent {
|
|
334
|
-
formControl;
|
|
335
|
-
input;
|
|
336
|
-
config;
|
|
329
|
+
formControl = inject(INPUT_CONTROL);
|
|
330
|
+
input = inject(INPUT_TYPE);
|
|
331
|
+
config = inject(INPUT_CONFIG);
|
|
337
332
|
firstFormControl;
|
|
338
333
|
lastFormControl;
|
|
339
|
-
constructor(formControl, input, config) {
|
|
340
|
-
this.formControl = formControl;
|
|
341
|
-
this.input = input;
|
|
342
|
-
this.config = config;
|
|
343
|
-
}
|
|
344
334
|
ngOnInit() {
|
|
345
335
|
const value = this.formControl.value;
|
|
346
336
|
const first = value?.first || null;
|
|
@@ -366,22 +356,13 @@ class InputNameComponent {
|
|
|
366
356
|
const value = first !== '' && last !== '' ? { first, last } : null;
|
|
367
357
|
this.formControl.setValue(value);
|
|
368
358
|
}
|
|
369
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputNameComponent, deps: [
|
|
370
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", type: InputNameComponent, isStandalone: true, selector: "ng-component", host: { attributes: { "selector": "input-name" } }, ngImport: i0, template: "<!-- INPUT -->\n<input
|
|
359
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputNameComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
360
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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" }] });
|
|
371
361
|
}
|
|
372
362
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputNameComponent, decorators: [{
|
|
373
363
|
type: Component,
|
|
374
|
-
args: [{ host: { selector: 'input-name' }, imports: [ReactiveFormsModule, MatFormField, MatInputModule, AutoCompleteDirective, AutoFocusDirective, InputErrorPipe], template: "<!-- INPUT -->\n<input
|
|
375
|
-
}]
|
|
376
|
-
type: Inject,
|
|
377
|
-
args: ['formControl']
|
|
378
|
-
}] }, { type: undefined, decorators: [{
|
|
379
|
-
type: Inject,
|
|
380
|
-
args: ['input']
|
|
381
|
-
}] }, { type: undefined, decorators: [{
|
|
382
|
-
type: Inject,
|
|
383
|
-
args: ['config']
|
|
384
|
-
}] }] });
|
|
364
|
+
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
|
+
}] });
|
|
385
366
|
|
|
386
367
|
class InputNameMethods extends InputMethods {
|
|
387
368
|
control(input, validators) {
|
|
@@ -394,18 +375,12 @@ class InputNameMethods extends InputMethods {
|
|
|
394
375
|
}
|
|
395
376
|
|
|
396
377
|
class InputPasswordComponent {
|
|
397
|
-
formControl;
|
|
398
|
-
input;
|
|
399
|
-
config;
|
|
400
|
-
focused = false;
|
|
378
|
+
formControl = inject(INPUT_CONTROL);
|
|
379
|
+
input = inject(INPUT_TYPE);
|
|
380
|
+
config = inject(INPUT_CONFIG);
|
|
401
381
|
showPassword = false;
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
this.input = input;
|
|
405
|
-
this.config = config;
|
|
406
|
-
}
|
|
407
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputPasswordComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
|
|
408
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && 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 (focus)=\"focused = true\"\n (blur)=\"focused = false\"\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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
382
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputPasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
383
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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=\"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"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "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: AutoFocusDirective, selector: "[AutoFocusDirective]", inputs: ["AutoFocusDirective"] }, { kind: "pipe", type: InputErrorPipe, name: "InputErrorPipe" }, { kind: "pipe", type: MultiLinePipe, name: "MultiLinePipe" }] });
|
|
409
384
|
}
|
|
410
385
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputPasswordComponent, decorators: [{
|
|
411
386
|
type: Component,
|
|
@@ -418,17 +393,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
418
393
|
AutoFocusDirective,
|
|
419
394
|
InputErrorPipe,
|
|
420
395
|
MultiLinePipe,
|
|
421
|
-
], 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 (
|
|
422
|
-
}]
|
|
423
|
-
type: Inject,
|
|
424
|
-
args: ['formControl']
|
|
425
|
-
}] }, { type: undefined, decorators: [{
|
|
426
|
-
type: Inject,
|
|
427
|
-
args: ['input']
|
|
428
|
-
}] }, { type: undefined, decorators: [{
|
|
429
|
-
type: Inject,
|
|
430
|
-
args: ['config']
|
|
431
|
-
}] }] });
|
|
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"] }]
|
|
397
|
+
}] });
|
|
432
398
|
|
|
433
399
|
class InputPasswordMethods extends InputMethods {
|
|
434
400
|
control(input, validators) {
|
|
@@ -449,20 +415,14 @@ class InputPasswordMethods extends InputMethods {
|
|
|
449
415
|
}
|
|
450
416
|
|
|
451
417
|
class InputSelectComponent {
|
|
452
|
-
formControl;
|
|
453
|
-
input;
|
|
454
|
-
config;
|
|
455
|
-
focused = false;
|
|
456
|
-
constructor(formControl, input, config) {
|
|
457
|
-
this.formControl = formControl;
|
|
458
|
-
this.input = input;
|
|
459
|
-
this.config = config;
|
|
460
|
-
}
|
|
418
|
+
formControl = inject(INPUT_CONTROL);
|
|
419
|
+
input = inject(INPUT_TYPE);
|
|
420
|
+
config = inject(INPUT_CONFIG);
|
|
461
421
|
getTitle() {
|
|
462
422
|
return this.input.options.find((option) => option.id === this.formControl.value)?.title || '';
|
|
463
423
|
}
|
|
464
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputSelectComponent, deps: [
|
|
465
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (
|
|
424
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputSelectComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
425
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 ? config.enClass : ''\"\n [dir]=\"'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 ? ['english', config.enClass] : ''\">{{ 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 ? ['english', config.enClass] : ''\">{{ option.title }}</div>\n </mat-option>\n }\n </mat-select>\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: [".english{display:inline-block;direction:ltr}\n"], 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: "directive", type: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i4$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"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "directive", type: i4$1.MatSelectTrigger, selector: "mat-select-trigger" }, { kind: "component", type: i5.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" }] });
|
|
466
426
|
}
|
|
467
427
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputSelectComponent, decorators: [{
|
|
468
428
|
type: Component,
|
|
@@ -475,17 +435,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
475
435
|
AutoFocusDirective,
|
|
476
436
|
InputErrorPipe,
|
|
477
437
|
MultiLinePipe,
|
|
478
|
-
], 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 (
|
|
479
|
-
}]
|
|
480
|
-
type: Inject,
|
|
481
|
-
args: ['formControl']
|
|
482
|
-
}] }, { type: undefined, decorators: [{
|
|
483
|
-
type: Inject,
|
|
484
|
-
args: ['input']
|
|
485
|
-
}] }, { type: undefined, decorators: [{
|
|
486
|
-
type: Inject,
|
|
487
|
-
args: ['config']
|
|
488
|
-
}] }] });
|
|
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 ? config.enClass : ''\"\n [dir]=\"'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 ? ['english', config.enClass] : ''\">{{ 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 ? ['english', config.enClass] : ''\">{{ option.title }}</div>\n </mat-option>\n }\n </mat-select>\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: [".english{display:inline-block;direction:ltr}\n"] }]
|
|
439
|
+
}] });
|
|
489
440
|
|
|
490
441
|
class InputSelectMethods extends InputMethods {
|
|
491
442
|
control(input, validators) {
|
|
@@ -499,17 +450,11 @@ class InputSelectMethods extends InputMethods {
|
|
|
499
450
|
}
|
|
500
451
|
|
|
501
452
|
class InputTextComponent {
|
|
502
|
-
formControl;
|
|
503
|
-
input;
|
|
504
|
-
config;
|
|
505
|
-
|
|
506
|
-
|
|
507
|
-
this.formControl = formControl;
|
|
508
|
-
this.input = input;
|
|
509
|
-
this.config = config;
|
|
510
|
-
}
|
|
511
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
|
|
512
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && 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 ? config.enClass : ''\"\n [maxLength]=\"input.maxLength || 524288\"\n [dir]=\"input.english ? 'ltr' : 'rtl'\"\n [AutoFocusDirective]=\"config.autoFocus === input.name\"\n (focus)=\"focused = true\"\n (blur)=\"focused = false\"\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: [""], 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: 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" }] });
|
|
453
|
+
formControl = inject(INPUT_CONTROL);
|
|
454
|
+
input = inject(INPUT_TYPE);
|
|
455
|
+
config = inject(INPUT_CONFIG);
|
|
456
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
457
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 ? config.enClass : ''\"\n [maxLength]=\"input.maxLength || 524288\"\n [dir]=\"input.english ? 'ltr' : 'rtl'\"\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: [""], 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: 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" }] });
|
|
513
458
|
}
|
|
514
459
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextComponent, decorators: [{
|
|
515
460
|
type: Component,
|
|
@@ -522,17 +467,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
522
467
|
AutoFocusDirective,
|
|
523
468
|
InputErrorPipe,
|
|
524
469
|
MultiLinePipe,
|
|
525
|
-
], 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 (
|
|
526
|
-
}]
|
|
527
|
-
type: Inject,
|
|
528
|
-
args: ['formControl']
|
|
529
|
-
}] }, { type: undefined, decorators: [{
|
|
530
|
-
type: Inject,
|
|
531
|
-
args: ['input']
|
|
532
|
-
}] }, { type: undefined, decorators: [{
|
|
533
|
-
type: Inject,
|
|
534
|
-
args: ['config']
|
|
535
|
-
}] }] });
|
|
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 ? config.enClass : ''\"\n [maxLength]=\"input.maxLength || 524288\"\n [dir]=\"input.english ? 'ltr' : 'rtl'\"\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" }]
|
|
471
|
+
}] });
|
|
536
472
|
|
|
537
473
|
const LengthValidator = (length) => {
|
|
538
474
|
return (formControl) => {
|
|
@@ -563,17 +499,12 @@ class InputTextMethods extends InputMethods {
|
|
|
563
499
|
}
|
|
564
500
|
|
|
565
501
|
class InputTextareaComponent {
|
|
566
|
-
formControl;
|
|
567
|
-
input;
|
|
568
|
-
config;
|
|
502
|
+
formControl = inject(INPUT_CONTROL);
|
|
503
|
+
input = inject(INPUT_TYPE);
|
|
504
|
+
config = inject(INPUT_CONFIG);
|
|
569
505
|
focused = false;
|
|
570
|
-
|
|
571
|
-
|
|
572
|
-
this.input = input;
|
|
573
|
-
this.config = config;
|
|
574
|
-
}
|
|
575
|
-
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextareaComponent, deps: [{ token: 'formControl' }, { token: 'input' }, { token: 'config' }], target: i0.ɵɵFactoryTarget.Component });
|
|
576
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 (focused && 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 ? config.enClass : ''\"\n [dir]=\"input.english ? 'ltr' : 'rtl'\"\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 [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: [""], 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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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" }] });
|
|
506
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextareaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
507
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "19.0.3", 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 ? config.enClass : ''\"\n [dir]=\"input.english ? 'ltr' : 'rtl'\"\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 [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: [""], 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: i4.Dir, selector: "[dir]", inputs: ["dir"], outputs: ["dirChange"], exportAs: ["dir"] }, { 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" }] });
|
|
577
508
|
}
|
|
578
509
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImport: i0, type: InputTextareaComponent, decorators: [{
|
|
579
510
|
type: Component,
|
|
@@ -587,17 +518,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
587
518
|
AutoHeightDirective,
|
|
588
519
|
InputErrorPipe,
|
|
589
520
|
MultiLinePipe,
|
|
590
|
-
], 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 (
|
|
591
|
-
}]
|
|
592
|
-
type: Inject,
|
|
593
|
-
args: ['formControl']
|
|
594
|
-
}] }, { type: undefined, decorators: [{
|
|
595
|
-
type: Inject,
|
|
596
|
-
args: ['input']
|
|
597
|
-
}] }, { type: undefined, decorators: [{
|
|
598
|
-
type: Inject,
|
|
599
|
-
args: ['config']
|
|
600
|
-
}] }] });
|
|
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 ? config.enClass : ''\"\n [dir]=\"input.english ? 'ltr' : 'rtl'\"\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 [ngClass]=\"config.descriptionClass\"\n [style.opacity]=\"formControl.disabled ? '0.4' : 1\"\n [innerHTML]=\"input.description | MultiLinePipe\"\n ></div>\n }\n</mat-form-field>\n" }]
|
|
522
|
+
}] });
|
|
601
523
|
|
|
602
524
|
class InputTextareaMethods extends InputMethods {
|
|
603
525
|
control(input, validators) {
|
|
@@ -621,9 +543,9 @@ class InputComponent {
|
|
|
621
543
|
const formControl = this.formGroup.get(this.input.name);
|
|
622
544
|
this.injector = Injector.create({
|
|
623
545
|
providers: [
|
|
624
|
-
{ provide:
|
|
625
|
-
{ provide:
|
|
626
|
-
{ provide:
|
|
546
|
+
{ provide: INPUT_CONTROL, useValue: formControl },
|
|
547
|
+
{ provide: INPUT_TYPE, useValue: this.input },
|
|
548
|
+
{ provide: INPUT_CONFIG, useValue: this.config },
|
|
627
549
|
],
|
|
628
550
|
});
|
|
629
551
|
}
|
|
@@ -645,6 +567,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.0.3", ngImpor
|
|
|
645
567
|
}] } });
|
|
646
568
|
|
|
647
569
|
const InputInfo = {
|
|
570
|
+
COLOR: { title: 'رنگ', methods: new InputColorMethods(), component: InputColorComponent },
|
|
648
571
|
EMAIL: { title: 'ایمیل', methods: new InputEmailMethods(), component: InputEmailComponent },
|
|
649
572
|
MOBILE: { title: 'موبایل', methods: new InputMobileMethods(), component: InputMobileComponent },
|
|
650
573
|
NAME: { title: 'نام و نام خانوادگی', methods: new InputNameMethods(), component: InputNameComponent },
|