special-forms 21.0.2 → 21.1.0
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.
|
@@ -21,7 +21,7 @@ import { MatSelectModule } from '@angular/material/select';
|
|
|
21
21
|
import { MatNativeDateModule } from '@angular/material/core';
|
|
22
22
|
import * as i2$2 from '@angular/material/datepicker';
|
|
23
23
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
24
|
-
import * as
|
|
24
|
+
import * as i1$2 from '@angular/material/chips';
|
|
25
25
|
import { MatChipsModule } from '@angular/material/chips';
|
|
26
26
|
import * as i2$3 from '@angular/material/checkbox';
|
|
27
27
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
@@ -33,6 +33,8 @@ import { DomSanitizer } from '@angular/platform-browser';
|
|
|
33
33
|
import * as i2$5 from 'ngx-editor';
|
|
34
34
|
import { Editor, NgxEditorModule } from 'ngx-editor';
|
|
35
35
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
36
|
+
import { LiveAnnouncer } from '@angular/cdk/a11y';
|
|
37
|
+
import { ENTER, COMMA } from '@angular/cdk/keycodes';
|
|
36
38
|
|
|
37
39
|
class ErrorMessagePipe {
|
|
38
40
|
transform(errorsObj, errorMessages, control) {
|
|
@@ -44,10 +46,10 @@ class ErrorMessagePipe {
|
|
|
44
46
|
}
|
|
45
47
|
return message;
|
|
46
48
|
}
|
|
47
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
48
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
49
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
50
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" }); }
|
|
49
51
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
52
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ErrorMessagePipe, decorators: [{
|
|
51
53
|
type: Pipe,
|
|
52
54
|
args: [{
|
|
53
55
|
name: "errorMessage",
|
|
@@ -65,10 +67,10 @@ class TextByFunctionPipe {
|
|
|
65
67
|
}
|
|
66
68
|
return value;
|
|
67
69
|
}
|
|
68
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
69
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
70
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
71
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" }); }
|
|
70
72
|
}
|
|
71
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
73
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TextByFunctionPipe, decorators: [{
|
|
72
74
|
type: Pipe,
|
|
73
75
|
args: [{ name: 'textByFunction', standalone: true }]
|
|
74
76
|
}] });
|
|
@@ -81,10 +83,10 @@ class FormControlsListPipe {
|
|
|
81
83
|
.filter((control) => !control.hidden)
|
|
82
84
|
.map((control) => control);
|
|
83
85
|
}
|
|
84
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
85
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
86
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
87
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" }); }
|
|
86
88
|
}
|
|
87
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
89
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormControlsListPipe, decorators: [{
|
|
88
90
|
type: Pipe,
|
|
89
91
|
args: [{ name: 'controlsList', standalone: true }]
|
|
90
92
|
}] });
|
|
@@ -92,6 +94,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
92
94
|
class SpecialAutocompleteComponent {
|
|
93
95
|
constructor() {
|
|
94
96
|
this.subs = new Subscription();
|
|
97
|
+
this.browserAutocompleteName = `sf-ac-${Math.random().toString(36).slice(2)}`;
|
|
98
|
+
this.preventBrowserAutocomplete = true;
|
|
95
99
|
this.configValue = (item) => {
|
|
96
100
|
if (!item)
|
|
97
101
|
return '';
|
|
@@ -117,6 +121,9 @@ class SpecialAutocompleteComponent {
|
|
|
117
121
|
this.settings.getData('', this.control);
|
|
118
122
|
}
|
|
119
123
|
}
|
|
124
|
+
allowInput() {
|
|
125
|
+
this.preventBrowserAutocomplete = false;
|
|
126
|
+
}
|
|
120
127
|
optionSelected(data) {
|
|
121
128
|
this.control.setValue(data.option.value);
|
|
122
129
|
if (this.settings.onSelect)
|
|
@@ -131,10 +138,10 @@ class SpecialAutocompleteComponent {
|
|
|
131
138
|
ngOnDestroy() {
|
|
132
139
|
this.subs.unsubscribe();
|
|
133
140
|
}
|
|
134
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
135
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
141
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
142
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialAutocompleteComponent, isStandalone: true, selector: "sp-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n [id]=\"control.elementId\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\n type=\"text\"\n autocomplete=\"new-password\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.name]=\"browserAutocompleteName\"\n [attr.id]=\"browserAutocompleteName\"\n [required]=\"control.required\"\n [readonly]=\"control.readOnly || preventBrowserAutocomplete\"\n [placeholder]=\"control.placeholder\"\n matInput\n [formControl]=\"control\"\n [matAutocomplete]=\"auto\"\n (mousedown)=\"allowInput()\"\n (touchstart)=\"allowInput()\"\n (focus)=\"allowInput(); firstLoad()\"\n />\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"configValue\"\r\n (optionSelected)=\"optionSelected($event)\"\r\n >\r\n @for (\r\n option of settings?.source | async;\r\n track option[settings.fieldId]\r\n ) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"flex items-center\">\r\n @if (settings.fieldImage) {\r\n <img\r\n class=\"w-8 pr-2\"\r\n alt=\"\"\r\n [src]=\"option | textByFunction: settings.fieldImage\"\r\n />\r\n }\r\n <span>\r\n {{ option | textByFunction: settings.fieldName }}\r\n </span>\r\n </div>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (settings.icon) {\r\n <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n <mat-icon>\r\n {{ settings.icon }}\r\n </mat-icon>\r\n </button>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
136
143
|
}
|
|
137
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
144
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
|
|
138
145
|
type: Component,
|
|
139
146
|
args: [{ selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
140
147
|
MatInputModule,
|
|
@@ -145,14 +152,14 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
145
152
|
MatButtonModule,
|
|
146
153
|
ErrorMessagePipe,
|
|
147
154
|
TextByFunctionPipe,
|
|
148
|
-
], template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n [id]=\"control.elementId\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\
|
|
155
|
+
], template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n class=\"special-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n [id]=\"control.elementId\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\n type=\"text\"\n autocomplete=\"new-password\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.name]=\"browserAutocompleteName\"\n [attr.id]=\"browserAutocompleteName\"\n [required]=\"control.required\"\n [readonly]=\"control.readOnly || preventBrowserAutocomplete\"\n [placeholder]=\"control.placeholder\"\n matInput\n [formControl]=\"control\"\n [matAutocomplete]=\"auto\"\n (mousedown)=\"allowInput()\"\n (touchstart)=\"allowInput()\"\n (focus)=\"allowInput(); firstLoad()\"\n />\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"configValue\"\r\n (optionSelected)=\"optionSelected($event)\"\r\n >\r\n @for (\r\n option of settings?.source | async;\r\n track option[settings.fieldId]\r\n ) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"flex items-center\">\r\n @if (settings.fieldImage) {\r\n <img\r\n class=\"w-8 pr-2\"\r\n alt=\"\"\r\n [src]=\"option | textByFunction: settings.fieldImage\"\r\n />\r\n }\r\n <span>\r\n {{ option | textByFunction: settings.fieldName }}\r\n </span>\r\n </div>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (settings.icon) {\r\n <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n <mat-icon>\r\n {{ settings.icon }}\r\n </mat-icon>\r\n </button>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
149
156
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
150
157
|
type: Input
|
|
151
158
|
}] } });
|
|
152
159
|
|
|
153
160
|
class SpecialInputComponent {
|
|
154
161
|
constructor() {
|
|
155
|
-
this.watchValue = signal(false, ...(ngDevMode ? [{ debugName: "watchValue" }] : []));
|
|
162
|
+
this.watchValue = signal(false, ...(ngDevMode ? [{ debugName: "watchValue" }] : /* istanbul ignore next */ []));
|
|
156
163
|
}
|
|
157
164
|
ngOnInit() { }
|
|
158
165
|
onEnterClick() {
|
|
@@ -180,10 +187,10 @@ class SpecialInputComponent {
|
|
|
180
187
|
watch() {
|
|
181
188
|
this.watchValue.set(!this.watchValue());
|
|
182
189
|
}
|
|
183
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
184
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
190
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
191
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialInputComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n [id]=\"control.elementId\"\r\n class=\"special-input w-full mb-3 {{ control.styleClasses }}\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\r\n matInput\r\n (blur)=\"onBlurAction()\"\r\n (keydown.enter)=\"onEnterClick()\"\r\n [inputMask]=\"settings?.mask\"\r\n autocomplete=\"off\"\r\n [type]=\"watchValue() ? 'text' : this.settings.type || 'text'\"\r\n [readonly]=\"control.readOnly\"\r\n [required]=\"control.required\"\r\n [placeholder]=\"control.placeholder\"\r\n [maxlength]=\"settings?.withMaxlength ? control.length : null\"\r\n [formControl]=\"control\"\r\n />\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n @if (settings.icon) {\r\n <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n <mat-icon>\r\n {{ settings.icon }}\r\n </mat-icon>\r\n </button>\r\n }\r\n\r\n @if (settings.withClearButton && control.value) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n (click)=\"clear(); $event.preventDefault(); $event.stopPropagation()\"\r\n >\r\n <mat-icon> close </mat-icon>\r\n </button>\r\n }\r\n\r\n @if (settings.withWatchButton && settings.type === \"password\") {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n (click)=\"watch(); $event.preventDefault(); $event.stopPropagation()\"\r\n >\r\n <mat-icon>\r\n {{ watchValue() ? \"visibility_off\" : \"visibility\" }}\r\n </mat-icon>\r\n </button>\r\n }\r\n\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n @if (settings.withCounter && control.length) {\r\n <mat-hint align=\"end\"\r\n >{{ control.value?.length ?? 0 }} / {{ control.length }}</mat-hint\r\n >\r\n }\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "directive", type: i1$1.InputMaskDirective, selector: "[inputMask]", inputs: ["inputMask"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
185
192
|
}
|
|
186
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
193
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialInputComponent, decorators: [{
|
|
187
194
|
type: Component,
|
|
188
195
|
args: [{ selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
189
196
|
InputMaskModule,
|
|
@@ -211,10 +218,10 @@ class SpecialDropdownComponent {
|
|
|
211
218
|
if (this.settings.onSelect)
|
|
212
219
|
this.settings.onSelect(value, this.control);
|
|
213
220
|
}
|
|
214
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
215
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
221
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
222
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialDropdownComponent, isStandalone: true, selector: "sp-dropdown", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n [id]=\"control.elementId\"\r\n class=\"special-dropdown w-full mb-3 {{ control.styleClasses }}\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControl]=\"control\"\r\n [required]=\"control.required\"\r\n (selectionChange)=\"optionSelected($event.value)\"\r\n [placeholder]=\"control.placeholder\"\r\n >\r\n @if (!control.required) {\r\n <mat-option [value]=\"null\">\r\n {{ control.placeholder || settings.notSelectedText }}\r\n </mat-option>\r\n }\r\n @for (item of settings.source | async; track item[settings.fieldId]) {\r\n <mat-option [value]=\"item[settings.fieldId]\">\r\n {{ item | textByFunction: settings.fieldName }}\r\n </mat-option>\r\n }\r\n </mat-select>\r\n @if (settings.icon) {\r\n <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n <mat-icon>\r\n {{ settings.icon }}\r\n </mat-icon>\r\n </button>\r\n }\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i2$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: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
216
223
|
}
|
|
217
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
224
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
|
|
218
225
|
type: Component,
|
|
219
226
|
args: [{ selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
220
227
|
CommonModule,
|
|
@@ -238,10 +245,10 @@ class SpecialDatepickerComponent {
|
|
|
238
245
|
return this.settings?.startAt || new Date();
|
|
239
246
|
}
|
|
240
247
|
ngOnInit() { }
|
|
241
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
242
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
248
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
249
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialDatepickerComponent, isStandalone: true, selector: "sp-datepicker", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n [id]=\"control.elementId\"\r\n class=\"special-datepicker w-full mb-3 {{ control.styleClasses }}\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\r\n matInput\r\n autocomplete=\"off\"\r\n [readonly]=\"control.readOnly\"\r\n [matDatepicker]=\"picker\"\r\n [required]=\"control.required\"\r\n [placeholder]=\"control.placeholder\"\r\n [formControl]=\"control\"\r\n />\r\n <mat-datepicker-toggle matSuffix [for]=\"picker\"></mat-datepicker-toggle>\r\n <mat-datepicker #picker startView=\"year\" [startAt]=\"startAt\">\r\n </mat-datepicker>\r\n <mat-hint>\r\n {{ control.tooltip }}\r\n </mat-hint>\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i2$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i2$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i2$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatNativeDateModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
243
250
|
}
|
|
244
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
251
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
|
|
245
252
|
type: Component,
|
|
246
253
|
args: [{ selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
247
254
|
MatInputModule,
|
|
@@ -260,6 +267,8 @@ class SpecialMultipleAutocompleteComponent {
|
|
|
260
267
|
constructor() {
|
|
261
268
|
this.subs = new Subscription();
|
|
262
269
|
this.internalControl = new FormControl();
|
|
270
|
+
this.browserAutocompleteName = `sf-mac-${Math.random().toString(36).slice(2)}`;
|
|
271
|
+
this.preventBrowserAutocomplete = true;
|
|
263
272
|
this.configValue = (item) => {
|
|
264
273
|
if (!item)
|
|
265
274
|
return '';
|
|
@@ -287,6 +296,9 @@ class SpecialMultipleAutocompleteComponent {
|
|
|
287
296
|
this.settings.getData('', this.control);
|
|
288
297
|
}
|
|
289
298
|
}
|
|
299
|
+
allowInput() {
|
|
300
|
+
this.preventBrowserAutocomplete = false;
|
|
301
|
+
}
|
|
290
302
|
optionSelected(data) {
|
|
291
303
|
const newItem = data.option.value;
|
|
292
304
|
this.internalControl.reset();
|
|
@@ -317,10 +329,10 @@ class SpecialMultipleAutocompleteComponent {
|
|
|
317
329
|
ngOnDestroy() {
|
|
318
330
|
this.subs.unsubscribe();
|
|
319
331
|
}
|
|
320
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
321
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
332
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
333
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialMultipleAutocompleteComponent, isStandalone: true, selector: "sp-multiple-autocomplete", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <div\r\n class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n [id]=\"control.elementId\"\r\n >\r\n \r\n <mat-form-field\r\n class=\"w-full\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\n type=\"text\"\n autocomplete=\"new-password\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.name]=\"browserAutocompleteName\"\n [attr.id]=\"browserAutocompleteName\"\n [required]=\"control.required && !control.value?.length\"\n [readonly]=\"control.readOnly || preventBrowserAutocomplete\"\n [placeholder]=\"control.placeholder\"\n matInput\n [formControl]=\"internalControl\"\n [matAutocomplete]=\"auto\"\n (mousedown)=\"allowInput()\"\n (touchstart)=\"allowInput()\"\n (focus)=\"allowInput(); firstLoad()\"\n />\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"configValue\"\r\n (optionSelected)=\"optionSelected($event)\"\r\n >\r\n @for (\r\n option of settings?.source | async;\r\n track option[settings.fieldId]\r\n ) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"flex items-center\">\r\n @if (settings.fieldImage) {\r\n <img\r\n class=\"w-8 pr-2\"\r\n alt=\"\"\r\n [src]=\"option | textByFunction: settings.fieldImage\"\r\n />\r\n }\r\n <span>\r\n {{ option | textByFunction: settings.fieldName }}\r\n </span>\r\n </div>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (settings.icon) {\r\n <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n <mat-icon>\r\n {{ settings.icon }}\r\n </mat-icon>\r\n </button>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <mat-chip-listbox>\r\n @for (chip of control.value; track chip[settings.fieldId]) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"remove(chip)\">\r\n <div class=\"flex items-center\">\r\n @if (settings.fieldImage) {\r\n <img\r\n class=\"w-8 pr-2\"\r\n alt=\"\"\r\n [src]=\"chip | textByFunction: settings.fieldImage\"\r\n />\r\n }\r\n {{ chip | textByFunction: settings.fieldName }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </div>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-listbox>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i2.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i2.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i5.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i1$2.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i1$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "pipe", type: i7.AsyncPipe, name: "async" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
322
334
|
}
|
|
323
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
335
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
|
|
324
336
|
type: Component,
|
|
325
337
|
args: [{ selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
326
338
|
MatInputModule,
|
|
@@ -332,7 +344,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
332
344
|
ErrorMessagePipe,
|
|
333
345
|
TextByFunctionPipe,
|
|
334
346
|
MatChipsModule,
|
|
335
|
-
], template: "@if (control && !control.hidden) {\r\n <div\r\n class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n [id]=\"control.elementId\"\r\n >\r\n \r\n <mat-form-field\r\n class=\"w-full\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\
|
|
347
|
+
], template: "@if (control && !control.hidden) {\r\n <div\r\n class=\"special-multiple-autocomplete w-full mb-3 {{ control.styleClasses }}\"\r\n [id]=\"control.elementId\"\r\n >\r\n \r\n <mat-form-field\r\n class=\"w-full\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <input\n type=\"text\"\n autocomplete=\"new-password\"\n autocapitalize=\"off\"\n spellcheck=\"false\"\n [attr.name]=\"browserAutocompleteName\"\n [attr.id]=\"browserAutocompleteName\"\n [required]=\"control.required && !control.value?.length\"\n [readonly]=\"control.readOnly || preventBrowserAutocomplete\"\n [placeholder]=\"control.placeholder\"\n matInput\n [formControl]=\"internalControl\"\n [matAutocomplete]=\"auto\"\n (mousedown)=\"allowInput()\"\n (touchstart)=\"allowInput()\"\n (focus)=\"allowInput(); firstLoad()\"\n />\n <mat-autocomplete\r\n #auto=\"matAutocomplete\"\r\n [displayWith]=\"configValue\"\r\n (optionSelected)=\"optionSelected($event)\"\r\n >\r\n @for (\r\n option of settings?.source | async;\r\n track option[settings.fieldId]\r\n ) {\r\n <mat-option [value]=\"option\">\r\n <div class=\"flex items-center\">\r\n @if (settings.fieldImage) {\r\n <img\r\n class=\"w-8 pr-2\"\r\n alt=\"\"\r\n [src]=\"option | textByFunction: settings.fieldImage\"\r\n />\r\n }\r\n <span>\r\n {{ option | textByFunction: settings.fieldName }}\r\n </span>\r\n </div>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (settings.icon) {\r\n <button mat-icon-button matSuffix (click)=\"iconClick($event)\">\r\n <mat-icon>\r\n {{ settings.icon }}\r\n </mat-icon>\r\n </button>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n\r\n <mat-chip-listbox>\r\n @for (chip of control.value; track chip[settings.fieldId]) {\r\n <mat-chip-row [removable]=\"true\" (removed)=\"remove(chip)\">\r\n <div class=\"flex items-center\">\r\n @if (settings.fieldImage) {\r\n <img\r\n class=\"w-8 pr-2\"\r\n alt=\"\"\r\n [src]=\"chip | textByFunction: settings.fieldImage\"\r\n />\r\n }\r\n {{ chip | textByFunction: settings.fieldName }}\r\n <mat-icon matChipRemove>cancel</mat-icon>\r\n </div>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-listbox>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
336
348
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
337
349
|
type: Input
|
|
338
350
|
}] } });
|
|
@@ -343,10 +355,10 @@ class SpecialCheckboxComponent {
|
|
|
343
355
|
}
|
|
344
356
|
constructor() { }
|
|
345
357
|
ngOnInit() { }
|
|
346
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
347
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
358
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
359
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialCheckboxComponent, isStandalone: true, selector: "sp-checkbox", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <div\r\n [id]=\"control.elementId\"\r\n class=\"special-checkbox w-full mb-3 flex flex-col {{\r\n control.styleClasses\r\n }}\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <mat-checkbox\r\n [required]=\"control.required\"\r\n [ngModel]=\"control.value\"\r\n (ngModelChange)=\"control.setValue($event); control.markAsDirty()\"\r\n [indeterminate]=\"settings.indeterminate\"\r\n [labelPosition]=\"settings.labelPosition\"\r\n [color]=\"settings.color\"\r\n [disabled]=\"control.disabled\"\r\n >\r\n @if (control.icon) {\r\n <mat-icon matSuffix>{{ control.icon }}</mat-icon>\r\n }\r\n {{ control.placeholder }}\r\n </mat-checkbox>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$3.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
348
360
|
}
|
|
349
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
361
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
|
|
350
362
|
type: Component,
|
|
351
363
|
args: [{ selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
352
364
|
FormsModule,
|
|
@@ -370,10 +382,10 @@ class SpecialTextAreaComponent {
|
|
|
370
382
|
get settings() {
|
|
371
383
|
return this.control.settings;
|
|
372
384
|
}
|
|
373
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
374
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
385
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
386
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialTextAreaComponent, isStandalone: true, selector: "sp-text-area", inputs: { control: "control" }, outputs: { onBlur: "onBlur", onEnter: "onEnter" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n [id]=\"control.elementId\"\r\n class=\"special-textarea w-full mb-3 {{ control.styleClasses }}\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>\r\n {{ control.label }}\r\n </mat-label>\r\n }\r\n <textarea\r\n cdkTextareaAutosize\r\n #autosize=\"cdkTextareaAutosize\"\r\n cdkAutosizeMinRows=\"1\"\r\n cdkAutosizeMaxRows=\"5\"\r\n matInput\r\n (blur)=\"onBlur.emit(control.value)\"\r\n (keydown.enter)=\"onEnter.emit(control.value)\"\r\n [readonly]=\"control.readOnly\"\r\n [required]=\"control.required\"\r\n [placeholder]=\"control.placeholder\"\r\n [maxlength]=\"settings?.withMaxlength ? control.length : null\"\r\n [formControl]=\"control\"\r\n ></textarea>\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n @if (settings.withCounter && control.length) {\r\n <mat-hint align=\"end\"\r\n >{{ control.value?.length ?? 0 }} / {{ control.length }}</mat-hint\r\n >\r\n }\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$4.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
375
387
|
}
|
|
376
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
388
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
|
|
377
389
|
type: Component,
|
|
378
390
|
args: [{ selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
379
391
|
InputMaskModule,
|
|
@@ -399,10 +411,10 @@ class FileNamePipe {
|
|
|
399
411
|
const url = new URL(input, window.location.origin);
|
|
400
412
|
return url.pathname.substring(url.pathname.lastIndexOf('/') + 1);
|
|
401
413
|
}
|
|
402
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
403
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
414
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileNamePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
415
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: FileNamePipe, isStandalone: true, name: "fileName" }); }
|
|
404
416
|
}
|
|
405
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
417
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FileNamePipe, decorators: [{
|
|
406
418
|
type: Pipe,
|
|
407
419
|
args: [{ name: 'fileName', standalone: true }]
|
|
408
420
|
}] });
|
|
@@ -499,10 +511,10 @@ class previewImagePipe {
|
|
|
499
511
|
svgConfiguration(svg) {
|
|
500
512
|
return this.sanitizer.bypassSecurityTrustUrl('data:image/svg+xml;base64,' + btoa(this.pdfIcon));
|
|
501
513
|
}
|
|
502
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
503
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
514
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: previewImagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
515
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: previewImagePipe, isStandalone: true, name: "previewImage" }); }
|
|
504
516
|
}
|
|
505
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
517
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: previewImagePipe, decorators: [{
|
|
506
518
|
type: Pipe,
|
|
507
519
|
args: [{ name: 'previewImage', standalone: true }]
|
|
508
520
|
}] });
|
|
@@ -511,10 +523,10 @@ class TruncatePipe {
|
|
|
511
523
|
transform(text, lenght = 12, suffix = '...') {
|
|
512
524
|
return text.slice(0, lenght) + suffix;
|
|
513
525
|
}
|
|
514
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
515
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
526
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
527
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
|
|
516
528
|
}
|
|
517
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
529
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: TruncatePipe, decorators: [{
|
|
518
530
|
type: Pipe,
|
|
519
531
|
args: [{ name: 'truncate', standalone: true }]
|
|
520
532
|
}] });
|
|
@@ -531,6 +543,7 @@ var EControlTypes;
|
|
|
531
543
|
EControlTypes["upload"] = "UPLOAD";
|
|
532
544
|
EControlTypes["autocomplete"] = "AUTOCOMPLETE";
|
|
533
545
|
EControlTypes["multiple"] = "MULTIPLE-AUTOCOMPLETE";
|
|
546
|
+
EControlTypes["chipInput"] = "CHIP-INPUT";
|
|
534
547
|
EControlTypes["array"] = "ARRAY";
|
|
535
548
|
EControlTypes["form"] = "FORM";
|
|
536
549
|
EControlTypes["label"] = "LABEL";
|
|
@@ -919,10 +932,10 @@ class SpecialFormBuilderService {
|
|
|
919
932
|
}
|
|
920
933
|
return { noItems: 'NO_SELECTED_ITEM' };
|
|
921
934
|
}
|
|
922
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
923
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
935
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
936
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' }); }
|
|
924
937
|
}
|
|
925
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
938
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
|
|
926
939
|
type: Injectable,
|
|
927
940
|
args: [{
|
|
928
941
|
providedIn: 'root',
|
|
@@ -933,10 +946,10 @@ class ErrorStateMatcherService {
|
|
|
933
946
|
isErrorState(control) {
|
|
934
947
|
return control && control.invalid && control.dirty;
|
|
935
948
|
}
|
|
936
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
937
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
949
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ErrorStateMatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
950
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ErrorStateMatcherService }); }
|
|
938
951
|
}
|
|
939
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
952
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: ErrorStateMatcherService, decorators: [{
|
|
940
953
|
type: Injectable
|
|
941
954
|
}] });
|
|
942
955
|
|
|
@@ -1035,10 +1048,10 @@ class SpecialUploadComponent {
|
|
|
1035
1048
|
this.realControl.reset();
|
|
1036
1049
|
}
|
|
1037
1050
|
}
|
|
1038
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1039
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1051
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1052
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", inputs: { control: "control" }, ngImport: i0, template: "@if (internalControl && !internalControl.hidden) {\r\n <mat-form-field\r\n [id]=\"internalControl.elementId\"\r\n class=\"w-full mb-3 {{ internalControl.styleClasses }}\"\r\n [appearance]=\"internalControl.label ? 'outline' : 'fill'\"\r\n >\r\n @if (internalControl.label) {\r\n <mat-label>\r\n {{ internalControl.label }} {{ internalControl.required ? \"*\" : \"\" }}\r\n </mat-label>\r\n }\r\n <ngx-mat-dropzone>\r\n <input\r\n type=\"file\"\r\n fileInput\r\n [multiple]=\"settings.multiple\"\r\n [mode]=\"settings.mode\"\r\n [accept]=\"settings?.accept || DEFAULT_ACCEPTED_TYPES\"\r\n [placeholder]=\"internalControl.placeholder\"\r\n [formControl]=\"internalControl\"\r\n [required]=\"internalControl.required\"\r\n [disabled]=\"internalControl.disabled\"\r\n (ngModelChange)=\"onSelectFile($event)\"\r\n />\r\n @for (item of elements; track item?.lastModified || item) {\r\n <mat-chip-row>\r\n <img matChipAvatar [src]=\"item | previewImage\" alt=\"\" />\r\n {{ item | fileName | truncate }}\r\n <button (click)=\"onRemove(item)\" matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </ngx-mat-dropzone>\r\n @if (internalControl.icon) {\r\n <mat-icon matSuffix>{{ internalControl.icon }}</mat-icon>\r\n }\r\n @if (internalControl.tooltip) {\r\n <mat-hint>{{ internalControl.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ internalControl.errors | errorMessage: internalControl.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i4.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: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "component", type: MatDropzone, selector: "ngx-mat-dropzone", inputs: ["aria-describedby", "placeholder", "required"], exportAs: ["matDropzone"] }, { kind: "directive", type: FileInputDirective, selector: "input[fileInput]", inputs: ["value", "accept", "mode", "disabled"], outputs: ["selectionChange"], exportAs: ["fileInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$2.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i1$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatCardModule }, { kind: "pipe", type: previewImagePipe, name: "previewImage" }, { kind: "pipe", type: FileNamePipe, name: "fileName" }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TruncatePipe, name: "truncate" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1040
1053
|
}
|
|
1041
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1054
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialUploadComponent, decorators: [{
|
|
1042
1055
|
type: Component,
|
|
1043
1056
|
args: [{ selector: 'sp-upload', imports: [
|
|
1044
1057
|
previewImagePipe,
|
|
@@ -1070,10 +1083,10 @@ class SpecialLabelComponent {
|
|
|
1070
1083
|
this.settings.onClickLink(this.control.value);
|
|
1071
1084
|
}
|
|
1072
1085
|
}
|
|
1073
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1074
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1086
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1087
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialLabelComponent, isStandalone: true, selector: "sp-label", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <div\r\n class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n control.value | textByFunction: settings.stylesPipe\r\n }}\"\r\n [id]=\"control.elementId\"\r\n >\r\n @if (control.label) {\r\n <div class=\"special-label__title font-bold\">\r\n {{ control.label }}\r\n </div>\r\n }\r\n <div\r\n class=\"special-label__text\"\r\n [ngClass]=\"{\r\n 'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink,\r\n }\"\r\n (click)=\"onLink()\"\r\n >\r\n {{ control.value | textByFunction: control.settings.pipe }}\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i7.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1075
1088
|
}
|
|
1076
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1089
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialLabelComponent, decorators: [{
|
|
1077
1090
|
type: Component,
|
|
1078
1091
|
args: [{ selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "@if (control && !control.hidden) {\r\n <div\r\n class=\"special-label px-2 mb-3 {{ control.styleClasses }} {{\r\n control.value | textByFunction: settings.stylesPipe\r\n }}\"\r\n [id]=\"control.elementId\"\r\n >\r\n @if (control.label) {\r\n <div class=\"special-label__title font-bold\">\r\n {{ control.label }}\r\n </div>\r\n }\r\n <div\r\n class=\"special-label__text\"\r\n [ngClass]=\"{\r\n 'cursor-pointer text-blue-600 hover:text-blue-700': settings.isLink,\r\n }\"\r\n (click)=\"onLink()\"\r\n >\r\n {{ control.value | textByFunction: control.settings.pipe }}\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
1079
1092
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
@@ -1104,10 +1117,10 @@ class SpecialRichtextComponent {
|
|
|
1104
1117
|
ngOnDestroy() {
|
|
1105
1118
|
this.editor.destroy();
|
|
1106
1119
|
}
|
|
1107
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1108
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1120
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialRichtextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1121
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialRichtextComponent, isStandalone: true, selector: "sp-input", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <div\r\n class=\"special-richtext w-full mb-3 {{ control.styleClasses }}\"\r\n [id]=\"control.elementId\"\r\n >\r\n @if (control.label) {\r\n <h4 class=\"text-md font-medium pl-2 mb-2\">\r\n {{ control.label }}\r\n </h4>\r\n }\r\n <ngx-editor-menu\r\n [colorPresets]=\"colorPresets\"\r\n [toolbar]=\"toolbar\"\r\n [editor]=\"editor\"\r\n >\r\n </ngx-editor-menu>\r\n <ngx-editor\r\n [editor]=\"editor\"\r\n [formControl]=\"control\"\r\n [required]=\"control.required\"\r\n [outputFormat]=\"control.settings.outputFormat || 'html'\"\r\n [disabled]=\"false\"\r\n [placeholder]=\"control.placeholder\"\r\n ></ngx-editor>\r\n <div class=\"px-5 mt-2\">\r\n @if (\r\n control.dirty && control.errors | errorMessage: control.errorMessages;\r\n as error\r\n ) {\r\n <div class=\"text-sm text-rose-500\">\r\n {{ error }}\r\n </div>\r\n } @else {\r\n <div class=\"text-sm font-medium\">{{ control.tooltip }}</div>\r\n }\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i4.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i4.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i4.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i2$5.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i2$5.NgxEditorMenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1109
1122
|
}
|
|
1110
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1123
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialRichtextComponent, decorators: [{
|
|
1111
1124
|
type: Component,
|
|
1112
1125
|
args: [{ selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1113
1126
|
MatInputModule,
|
|
@@ -1121,17 +1134,79 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1121
1134
|
type: Input
|
|
1122
1135
|
}] } });
|
|
1123
1136
|
|
|
1137
|
+
class SpecialChipInputComponent {
|
|
1138
|
+
constructor() {
|
|
1139
|
+
this.separatorKeysCodes = [ENTER, COMMA];
|
|
1140
|
+
this.announcer = inject(LiveAnnouncer);
|
|
1141
|
+
}
|
|
1142
|
+
get settings() {
|
|
1143
|
+
return this.control.settings;
|
|
1144
|
+
}
|
|
1145
|
+
get values() {
|
|
1146
|
+
return Array.isArray(this.control.value) ? this.control.value : [];
|
|
1147
|
+
}
|
|
1148
|
+
add(event) {
|
|
1149
|
+
const value = (event.value || '').trim();
|
|
1150
|
+
if (value && this.canModify()) {
|
|
1151
|
+
this.updateValue([...this.values, value]);
|
|
1152
|
+
}
|
|
1153
|
+
event.chipInput?.clear();
|
|
1154
|
+
}
|
|
1155
|
+
remove(index) {
|
|
1156
|
+
if (!this.canModify() || index < 0 || index >= this.values.length)
|
|
1157
|
+
return;
|
|
1158
|
+
const removedValue = this.values[index];
|
|
1159
|
+
const values = [...this.values];
|
|
1160
|
+
values.splice(index, 1);
|
|
1161
|
+
this.updateValue(values);
|
|
1162
|
+
this.announcer.announce(`Removed ${removedValue}`);
|
|
1163
|
+
}
|
|
1164
|
+
edit(index, event) {
|
|
1165
|
+
if (!this.settings.withEditButton || !this.canModify())
|
|
1166
|
+
return;
|
|
1167
|
+
const value = event.value.trim();
|
|
1168
|
+
if (!value) {
|
|
1169
|
+
this.remove(index);
|
|
1170
|
+
return;
|
|
1171
|
+
}
|
|
1172
|
+
const values = [...this.values];
|
|
1173
|
+
values[index] = value;
|
|
1174
|
+
this.updateValue(values);
|
|
1175
|
+
}
|
|
1176
|
+
canModify() {
|
|
1177
|
+
return !this.control.readOnly && !this.control.disabled;
|
|
1178
|
+
}
|
|
1179
|
+
updateValue(values) {
|
|
1180
|
+
this.control.markAsDirty();
|
|
1181
|
+
this.control.setValue(values);
|
|
1182
|
+
}
|
|
1183
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialChipInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1184
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialChipInputComponent, isStandalone: true, selector: "sp-chip-input", inputs: { control: "control" }, ngImport: i0, template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n [id]=\"control.elementId\"\r\n class=\"special-chip-input w-full mb-3 {{ control.styleClasses }}\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>{{ control.label }}</mat-label>\r\n }\r\n\r\n <mat-chip-grid #chipGrid [attr.aria-label]=\"control.label || control.placeholder\">\r\n @for (value of values; track $index; let index = $index) {\r\n <mat-chip-row\r\n [editable]=\"!!settings.withEditButton && !control.readOnly && !control.disabled\"\r\n [disabled]=\"control.disabled\"\r\n (edited)=\"edit(index, $event)\"\r\n (removed)=\"remove(index)\"\r\n [attr.aria-description]=\"settings.withEditButton ? 'Press enter to edit ' + value : null\"\r\n >\r\n @if (settings.withEditButton && !control.readOnly && !control.disabled) {\r\n <button matChipEdit [attr.aria-label]=\"'Edit ' + value\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n {{ value }}\r\n @if (!control.readOnly && !control.disabled) {\r\n <button matChipRemove [attr.aria-label]=\"'Remove ' + value\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n }\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n matInput\r\n [placeholder]=\"control.placeholder\"\r\n [required]=\"control.required\"\r\n [readonly]=\"control.readOnly\"\r\n [disabled]=\"control.disabled\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"settings.addOnBlur ?? true\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n />\r\n\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i1$2.MatChipEdit, selector: "[matChipEdit]" }, { kind: "component", type: i1$2.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i1$2.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i1$2.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i1$2.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i1.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: "component", type: i1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1185
|
+
}
|
|
1186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialChipInputComponent, decorators: [{
|
|
1187
|
+
type: Component,
|
|
1188
|
+
args: [{ selector: 'sp-chip-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
1189
|
+
ReactiveFormsModule,
|
|
1190
|
+
MatChipsModule,
|
|
1191
|
+
MatIconModule,
|
|
1192
|
+
MatInputModule,
|
|
1193
|
+
ErrorMessagePipe,
|
|
1194
|
+
], template: "@if (control && !control.hidden) {\r\n <mat-form-field\r\n [id]=\"control.elementId\"\r\n class=\"special-chip-input w-full mb-3 {{ control.styleClasses }}\"\r\n [appearance]=\"control.label ? 'outline' : 'fill'\"\r\n >\r\n @if (control.label) {\r\n <mat-label>{{ control.label }}</mat-label>\r\n }\r\n\r\n <mat-chip-grid #chipGrid [attr.aria-label]=\"control.label || control.placeholder\">\r\n @for (value of values; track $index; let index = $index) {\r\n <mat-chip-row\r\n [editable]=\"!!settings.withEditButton && !control.readOnly && !control.disabled\"\r\n [disabled]=\"control.disabled\"\r\n (edited)=\"edit(index, $event)\"\r\n (removed)=\"remove(index)\"\r\n [attr.aria-description]=\"settings.withEditButton ? 'Press enter to edit ' + value : null\"\r\n >\r\n @if (settings.withEditButton && !control.readOnly && !control.disabled) {\r\n <button matChipEdit [attr.aria-label]=\"'Edit ' + value\">\r\n <mat-icon>edit</mat-icon>\r\n </button>\r\n }\r\n {{ value }}\r\n @if (!control.readOnly && !control.disabled) {\r\n <button matChipRemove [attr.aria-label]=\"'Remove ' + value\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n }\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n matInput\r\n [placeholder]=\"control.placeholder\"\r\n [required]=\"control.required\"\r\n [readonly]=\"control.readOnly\"\r\n [disabled]=\"control.disabled\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"settings.addOnBlur ?? true\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n />\r\n\r\n @if (control.icon) {\r\n <mat-icon matPrefix>{{ control.icon }}</mat-icon>\r\n }\r\n @if (control.tooltip) {\r\n <mat-hint>{{ control.tooltip }}</mat-hint>\r\n }\r\n <mat-error>\r\n {{ control.errors | errorMessage: control.errorMessages }}\r\n </mat-error>\r\n </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
1195
|
+
}], propDecorators: { control: [{
|
|
1196
|
+
type: Input
|
|
1197
|
+
}] } });
|
|
1198
|
+
|
|
1124
1199
|
class SpecialFormComponent {
|
|
1125
1200
|
set control(form) {
|
|
1126
1201
|
this.form = form;
|
|
1127
1202
|
}
|
|
1128
1203
|
ngOnInit() { }
|
|
1129
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1130
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1204
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1205
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialFormComponent, isStandalone: false, selector: "sp-form", inputs: { form: ["control", "form"] }, ngImport: i0, template: "@if (form && !form.hidden) {\r\n <div\r\n [id]=\"form.elementId\"\r\n class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n >\r\n @if (form) {\r\n <form\n autocomplete=\"off\"\n [class]=\"\n form.label\n ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\n : 'container'\r\n \"\r\n >\r\n @if (form.label) {\r\n <h1 class=\"font-bold py-3\">{{ form.label }}</h1>\r\n }\r\n <div class=\"w-full flex flex-wrap\">\r\n @for (control of form.controls | controlsList; track control.name) {\r\n <ng-template controlRender [control]=\"control\"></ng-template>\r\n }\r\n </div>\r\n </form>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1131
1206
|
}
|
|
1132
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1207
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormComponent, decorators: [{
|
|
1133
1208
|
type: Component,
|
|
1134
|
-
args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (form && !form.hidden) {\r\n <div\r\n [id]=\"form.elementId\"\r\n class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n >\r\n @if (form) {\r\n <
|
|
1209
|
+
args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (form && !form.hidden) {\r\n <div\r\n [id]=\"form.elementId\"\r\n class=\"special-form w-full box-border p-2 {{ form.styleClasses }}\"\r\n >\r\n @if (form) {\r\n <form\n autocomplete=\"off\"\n [class]=\"\n form.label\n ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\n : 'container'\r\n \"\r\n >\r\n @if (form.label) {\r\n <h1 class=\"font-bold py-3\">{{ form.label }}</h1>\r\n }\r\n <div class=\"w-full flex flex-wrap\">\r\n @for (control of form.controls | controlsList; track control.name) {\r\n <ng-template controlRender [control]=\"control\"></ng-template>\r\n }\r\n </div>\r\n </form>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
1135
1210
|
}], propDecorators: { form: [{
|
|
1136
1211
|
type: Input,
|
|
1137
1212
|
args: ['control']
|
|
@@ -1154,10 +1229,10 @@ class SpecialArrayComponent {
|
|
|
1154
1229
|
addItem() {
|
|
1155
1230
|
this.formArray.addItem();
|
|
1156
1231
|
}
|
|
1157
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1158
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "
|
|
1232
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1233
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.2.8", type: SpecialArrayComponent, isStandalone: false, selector: "sp-array", inputs: { formArray: ["control", "formArray"] }, ngImport: i0, template: "@if (formArray && !formArray.hidden) {\r\n <div\r\n [id]=\"formArray.elementId\"\r\n class=\"special-form-array w-full box-border p-2 {{\r\n formArray.styleClasses\r\n }}\"\r\n >\r\n <div\r\n class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\r\n >\r\n @if (formArray.label) {\r\n <h1 class=\"font-bold py-3\">\r\n {{ formArray.label }}\r\n </h1>\r\n }\r\n <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n @if (formArray.form) {\r\n <div\r\n [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n class=\"grid gap-4 grid-cols-12\"\r\n >\r\n @if (!withFormHeader) {\r\n @for (\r\n item of formArray.form.controls | controlsList;\r\n track item.name\r\n ) {\r\n <h2 [class]=\"item.styleClasses\">\r\n {{ item.label }}\r\n </h2>\r\n }\r\n @if (settings.withActionButtons) {\r\n <div\r\n class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n ></div>\r\n }\r\n } @else {\r\n @for (\r\n item of formArray.form.controls | controlsList;\r\n track item.name\r\n ) {\r\n <ng-template controlRender [control]=\"item\"></ng-template>\r\n }\r\n @if (settings.withActionButtons) {\r\n <div\r\n class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n >\r\n <button\r\n mat-flat-button\r\n color=\"primary\"\r\n [disabled]=\"formArray.form.invalid\"\r\n (click)=\"addItem()\"\r\n >\r\n {{ settings.addActionLabel || \"Add\" }}\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n @for (\r\n formGroup of formArray.controls;\r\n track formGroup.name;\r\n let i = $index\r\n ) {\r\n <div class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\">\r\n @for (item of formGroup.controls | controlsList; track item.name) {\r\n <ng-template controlRender [control]=\"item\"></ng-template>\r\n }\r\n <div\r\n class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n >\r\n <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n {{ settings.removeActionLabel || \"Remove\" }}\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => i7.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => i5.MatButton), selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
1159
1234
|
}
|
|
1160
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialArrayComponent, decorators: [{
|
|
1161
1236
|
type: Component,
|
|
1162
1237
|
args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (formArray && !formArray.hidden) {\r\n <div\r\n [id]=\"formArray.elementId\"\r\n class=\"special-form-array w-full box-border p-2 {{\r\n formArray.styleClasses\r\n }}\"\r\n >\r\n <div\r\n class=\"w-full mt-2 p-3 border-slate-200 border border-solid box-border\"\r\n >\r\n @if (formArray.label) {\r\n <h1 class=\"font-bold py-3\">\r\n {{ formArray.label }}\r\n </h1>\r\n }\r\n <div class=\"divide-y divide-x-0 divide-solid divide-slate-200\">\r\n @if (formArray.form) {\r\n <div\r\n [ngClass]=\"{ 'md:grid-cols-15': settings.withActionButtons }\"\r\n class=\"grid gap-4 grid-cols-12\"\r\n >\r\n @if (!withFormHeader) {\r\n @for (\r\n item of formArray.form.controls | controlsList;\r\n track item.name\r\n ) {\r\n <h2 [class]=\"item.styleClasses\">\r\n {{ item.label }}\r\n </h2>\r\n }\r\n @if (settings.withActionButtons) {\r\n <div\r\n class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n ></div>\r\n }\r\n } @else {\r\n @for (\r\n item of formArray.form.controls | controlsList;\r\n track item.name\r\n ) {\r\n <ng-template controlRender [control]=\"item\"></ng-template>\r\n }\r\n @if (settings.withActionButtons) {\r\n <div\r\n class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n >\r\n <button\r\n mat-flat-button\r\n color=\"primary\"\r\n [disabled]=\"formArray.form.invalid\"\r\n (click)=\"addItem()\"\r\n >\r\n {{ settings.addActionLabel || \"Add\" }}\r\n </button>\r\n </div>\r\n }\r\n }\r\n </div>\r\n }\r\n @for (\r\n formGroup of formArray.controls;\r\n track formGroup.name;\r\n let i = $index\r\n ) {\r\n <div class=\"w-full pt-5 grid gap-4 grid-cols-12 md:grid-cols-15\">\r\n @for (item of formGroup.controls | controlsList; track item.name) {\r\n <ng-template controlRender [control]=\"item\"></ng-template>\r\n }\r\n <div\r\n class=\"col-start-7 col-end-13 md:col-start-13 md:col-end-16 pb-5 my-auto ml-auto md:m-auto\"\r\n >\r\n <button mat-flat-button color=\"warn\" (click)=\"removeItem(i)\">\r\n {{ settings.removeActionLabel || \"Remove\" }}\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n </div>\r\n </div>\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
1163
1238
|
}], ctorParameters: () => [], propDecorators: { formArray: [{
|
|
@@ -1183,6 +1258,7 @@ class FormControlsRenderDirective {
|
|
|
1183
1258
|
[EControlTypes.array]: SpecialArrayComponent,
|
|
1184
1259
|
[EControlTypes.input]: SpecialInputComponent,
|
|
1185
1260
|
[EControlTypes.multiple]: SpecialMultipleAutocompleteComponent,
|
|
1261
|
+
[EControlTypes.chipInput]: SpecialChipInputComponent,
|
|
1186
1262
|
[EControlTypes.textArea]: SpecialTextAreaComponent,
|
|
1187
1263
|
[EControlTypes.label]: SpecialLabelComponent,
|
|
1188
1264
|
[EControlTypes.upload]: SpecialUploadComponent,
|
|
@@ -1190,10 +1266,10 @@ class FormControlsRenderDirective {
|
|
|
1190
1266
|
[EControlTypes.richText]: SpecialRichtextComponent,
|
|
1191
1267
|
};
|
|
1192
1268
|
}
|
|
1193
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1194
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
1269
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
1270
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "21.2.8", type: FormControlsRenderDirective, isStandalone: false, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 }); }
|
|
1195
1271
|
}
|
|
1196
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1272
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
|
|
1197
1273
|
type: Directive,
|
|
1198
1274
|
args: [{
|
|
1199
1275
|
selector: `[controlRender]`,
|
|
@@ -1205,8 +1281,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1205
1281
|
}] } });
|
|
1206
1282
|
|
|
1207
1283
|
class SpecialFormModule {
|
|
1208
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1209
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
1284
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
1285
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
|
|
1210
1286
|
FormControlsRenderDirective,
|
|
1211
1287
|
SpecialFormComponent], imports: [CommonModule,
|
|
1212
1288
|
FormControlsListPipe,
|
|
@@ -1218,12 +1294,13 @@ class SpecialFormModule {
|
|
|
1218
1294
|
SpecialDatepickerComponent,
|
|
1219
1295
|
SpecialLabelComponent,
|
|
1220
1296
|
SpecialMultipleAutocompleteComponent,
|
|
1297
|
+
SpecialChipInputComponent,
|
|
1221
1298
|
SpecialCheckboxComponent,
|
|
1222
1299
|
SpecialTextAreaComponent,
|
|
1223
1300
|
SpecialUploadComponent], exports: [SpecialArrayComponent,
|
|
1224
1301
|
FormControlsRenderDirective,
|
|
1225
1302
|
SpecialFormComponent] }); }
|
|
1226
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
1303
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
|
|
1227
1304
|
MatButtonModule,
|
|
1228
1305
|
SpecialRichtextComponent,
|
|
1229
1306
|
SpecialDropdownComponent,
|
|
@@ -1232,11 +1309,12 @@ class SpecialFormModule {
|
|
|
1232
1309
|
SpecialDatepickerComponent,
|
|
1233
1310
|
SpecialLabelComponent,
|
|
1234
1311
|
SpecialMultipleAutocompleteComponent,
|
|
1312
|
+
SpecialChipInputComponent,
|
|
1235
1313
|
SpecialCheckboxComponent,
|
|
1236
1314
|
SpecialTextAreaComponent,
|
|
1237
1315
|
SpecialUploadComponent] }); }
|
|
1238
1316
|
}
|
|
1239
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1317
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.2.8", ngImport: i0, type: SpecialFormModule, decorators: [{
|
|
1240
1318
|
type: NgModule,
|
|
1241
1319
|
args: [{
|
|
1242
1320
|
declarations: [
|
|
@@ -1255,6 +1333,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImpo
|
|
|
1255
1333
|
SpecialDatepickerComponent,
|
|
1256
1334
|
SpecialLabelComponent,
|
|
1257
1335
|
SpecialMultipleAutocompleteComponent,
|
|
1336
|
+
SpecialChipInputComponent,
|
|
1258
1337
|
SpecialCheckboxComponent,
|
|
1259
1338
|
SpecialTextAreaComponent,
|
|
1260
1339
|
SpecialUploadComponent,
|
|
@@ -1290,5 +1369,5 @@ const numberMask = (max = 1000) => createMask({ alias: 'numeric', min: 0, max })
|
|
|
1290
1369
|
* Generated bundle index. Do not edit.
|
|
1291
1370
|
*/
|
|
1292
1371
|
|
|
1293
|
-
export { EControlTypes, ErrorMessagePipe, ErrorStateMatcherService, FormControlsListPipe, FormControlsRenderDirective, ISpecialControl, SpecialArrayComponent, SpecialAutocompleteComponent, SpecialCheckboxComponent, SpecialDatepickerComponent, SpecialDropdownComponent, SpecialFormArray, SpecialFormBuilderService, SpecialFormComponent, SpecialFormControl, SpecialFormGroup, SpecialFormModule, SpecialInputComponent, SpecialLabelComponent, SpecialMultipleAutocompleteComponent, SpecialRichtextComponent, SpecialTextAreaComponent, SpecialUploadComponent, TextByFunctionPipe, currencyInputMask, numberMask };
|
|
1372
|
+
export { EControlTypes, ErrorMessagePipe, ErrorStateMatcherService, FormControlsListPipe, FormControlsRenderDirective, ISpecialControl, SpecialArrayComponent, SpecialAutocompleteComponent, SpecialCheckboxComponent, SpecialChipInputComponent, SpecialDatepickerComponent, SpecialDropdownComponent, SpecialFormArray, SpecialFormBuilderService, SpecialFormComponent, SpecialFormControl, SpecialFormGroup, SpecialFormModule, SpecialInputComponent, SpecialLabelComponent, SpecialMultipleAutocompleteComponent, SpecialRichtextComponent, SpecialTextAreaComponent, SpecialUploadComponent, TextByFunctionPipe, currencyInputMask, numberMask };
|
|
1294
1373
|
//# sourceMappingURL=special-forms.mjs.map
|