special-forms 17.0.0 → 18.0.0-SNAPSHOT-2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/esm2022/lib/components/special-autocomplete/special-autocomplete.component.mjs +5 -5
- package/esm2022/lib/components/special-checkbox/special-checkbox.component.mjs +7 -8
- package/esm2022/lib/components/special-datepicker/special-datepicker.component.mjs +6 -7
- package/esm2022/lib/components/special-dropdown/special-dropdown.component.mjs +5 -5
- package/esm2022/lib/components/special-form/special-form.component.mjs +14 -14
- package/esm2022/lib/components/special-form/special-form.module.mjs +4 -4
- package/esm2022/lib/components/special-input/special-input.component.mjs +10 -11
- package/esm2022/lib/components/special-label/special-label.component.mjs +5 -5
- package/esm2022/lib/components/special-multiple-autocomplete/special-multiple-autocomplete.component.mjs +5 -5
- package/esm2022/lib/components/special-richtext/special-richtext.component.mjs +19 -16
- package/esm2022/lib/components/special-richtext/special-richtext.interface.mjs +1 -1
- package/esm2022/lib/components/special-text-area/special-text-area.component.mjs +10 -11
- package/esm2022/lib/components/special-upload/special-upload-viewer.pipe.mjs +93 -0
- package/esm2022/lib/components/special-upload/special-upload.component.mjs +35 -46
- package/esm2022/lib/components/special-upload/special-upload.interface.mjs +1 -1
- package/esm2022/lib/core/forms/special-forms.mjs +1 -1
- package/esm2022/lib/core/pipes/controls-list-pipe/controls-list.pipe.mjs +3 -3
- package/esm2022/lib/core/pipes/error-message-pipe/error.pipe.mjs +4 -4
- package/esm2022/lib/core/pipes/text-by-function/text-by-function.pipe.mjs +4 -4
- package/esm2022/lib/core/services/error-state-matcher/error-matcher.mjs +3 -3
- package/esm2022/lib/core/services/special-form-builder/special-form-builder.service.mjs +4 -4
- package/fesm2022/special-forms.mjs +205 -127
- package/fesm2022/special-forms.mjs.map +1 -1
- package/lib/components/special-richtext/special-richtext.component.d.ts +2 -4
- package/lib/components/special-richtext/special-richtext.interface.d.ts +2 -1
- package/lib/components/special-upload/special-upload-viewer.pipe.d.ts +25 -0
- package/lib/components/special-upload/special-upload.component.d.ts +6 -13
- package/lib/components/special-upload/special-upload.interface.d.ts +2 -1
- package/lib/styles/tailwind-final.scss +144 -7
- package/package.json +10 -9
|
@@ -1,37 +1,42 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, Directive, NgModule, Injectable } from '@angular/core';
|
|
2
|
+
import { Pipe, Component, ChangeDetectionStrategy, Input, EventEmitter, Output, inject, Directive, NgModule, Injectable } from '@angular/core';
|
|
3
3
|
import { debounceTime } from 'rxjs/operators';
|
|
4
4
|
import * as i4 from '@angular/material/autocomplete';
|
|
5
5
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
6
6
|
import { Subscription } from 'rxjs';
|
|
7
7
|
import * as i1 from '@angular/material/input';
|
|
8
8
|
import { MatInputModule } from '@angular/material/input';
|
|
9
|
-
import * as
|
|
9
|
+
import * as i3 from '@angular/common';
|
|
10
10
|
import { CommonModule } from '@angular/common';
|
|
11
11
|
import * as i6 from '@angular/material/icon';
|
|
12
12
|
import { MatIconModule } from '@angular/material/icon';
|
|
13
|
-
import * as
|
|
13
|
+
import * as i5$1 from '@angular/forms';
|
|
14
14
|
import { ReactiveFormsModule, FormControl, FormsModule, FormGroup, FormArray, Validators } from '@angular/forms';
|
|
15
|
-
import * as
|
|
15
|
+
import * as i8 from '@angular/material/button';
|
|
16
16
|
import { MatButtonModule } from '@angular/material/button';
|
|
17
17
|
import * as i2 from '@angular/material/form-field';
|
|
18
|
+
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
18
19
|
import * as i5 from '@angular/material/core';
|
|
19
20
|
import { MatNativeDateModule } from '@angular/material/core';
|
|
20
|
-
import * as i1$
|
|
21
|
+
import * as i1$1 from '@ngneat/input-mask';
|
|
21
22
|
import { InputMaskModule, createMask } from '@ngneat/input-mask';
|
|
22
|
-
import * as i3 from '@angular/material/select';
|
|
23
|
+
import * as i3$1 from '@angular/material/select';
|
|
23
24
|
import { MatSelectModule } from '@angular/material/select';
|
|
24
|
-
import * as i3$
|
|
25
|
+
import * as i3$2 from '@angular/material/datepicker';
|
|
25
26
|
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
26
|
-
import * as
|
|
27
|
+
import * as i7 from '@angular/material/chips';
|
|
27
28
|
import { MatChipsModule } from '@angular/material/chips';
|
|
28
29
|
import * as i2$1 from '@angular/material/checkbox';
|
|
29
30
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
30
|
-
import * as
|
|
31
|
-
import * as i2$2 from 'ngx-dropzone';
|
|
32
|
-
import {
|
|
33
|
-
import * as
|
|
34
|
-
import
|
|
31
|
+
import * as i3$3 from '@angular/cdk/text-field';
|
|
32
|
+
import * as i2$2 from '@ngx-dropzone/cdk';
|
|
33
|
+
import { DropzoneCdkModule } from '@ngx-dropzone/cdk';
|
|
34
|
+
import * as i4$1 from '@ngx-dropzone/material';
|
|
35
|
+
import { DropzoneMaterialModule } from '@ngx-dropzone/material';
|
|
36
|
+
import { DomSanitizer } from '@angular/platform-browser';
|
|
37
|
+
import * as i8$1 from '@angular/material/card';
|
|
38
|
+
import { MatCardModule } from '@angular/material/card';
|
|
39
|
+
import * as i2$3 from 'ngx-editor';
|
|
35
40
|
import { Editor, NgxEditorModule } from 'ngx-editor';
|
|
36
41
|
|
|
37
42
|
class ErrorMessagePipe {
|
|
@@ -44,10 +49,10 @@ class ErrorMessagePipe {
|
|
|
44
49
|
}
|
|
45
50
|
return message;
|
|
46
51
|
}
|
|
47
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
48
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
52
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorMessagePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
53
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: ErrorMessagePipe, isStandalone: true, name: "errorMessage" }); }
|
|
49
54
|
}
|
|
50
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
55
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorMessagePipe, decorators: [{
|
|
51
56
|
type: Pipe,
|
|
52
57
|
args: [{
|
|
53
58
|
name: "errorMessage",
|
|
@@ -67,10 +72,10 @@ class TextByFunctionPipe {
|
|
|
67
72
|
return value;
|
|
68
73
|
}
|
|
69
74
|
}
|
|
70
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
71
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
75
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextByFunctionPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
76
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: TextByFunctionPipe, isStandalone: true, name: "textByFunction" }); }
|
|
72
77
|
}
|
|
73
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
78
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TextByFunctionPipe, decorators: [{
|
|
74
79
|
type: Pipe,
|
|
75
80
|
args: [{ name: 'textByFunction', standalone: true }]
|
|
76
81
|
}] });
|
|
@@ -83,10 +88,10 @@ class FormControlsListPipe {
|
|
|
83
88
|
.filter((control) => !control.hidden)
|
|
84
89
|
.map((control) => control);
|
|
85
90
|
}
|
|
86
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
87
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "
|
|
91
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsListPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
92
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: FormControlsListPipe, isStandalone: true, name: "controlsList" }); }
|
|
88
93
|
}
|
|
89
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
94
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsListPipe, decorators: [{
|
|
90
95
|
type: Pipe,
|
|
91
96
|
args: [{ name: 'controlsList', standalone: true }]
|
|
92
97
|
}] });
|
|
@@ -128,10 +133,10 @@ class SpecialAutocompleteComponent {
|
|
|
128
133
|
ngOnDestroy() {
|
|
129
134
|
this.subs.unsubscribe();
|
|
130
135
|
}
|
|
131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
132
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
137
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [required]=\"control.required\"\r\n [readonly]=\"control.readOnly\"\r\n [placeholder]=\"control.placeholder\"\r\n matInput\r\n [formControl]=\"control\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\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"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
133
138
|
}
|
|
134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialAutocompleteComponent, decorators: [{
|
|
135
140
|
type: Component,
|
|
136
141
|
args: [{ standalone: true, selector: 'sp-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
137
142
|
MatInputModule,
|
|
@@ -142,7 +147,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
142
147
|
MatButtonModule,
|
|
143
148
|
ErrorMessagePipe,
|
|
144
149
|
TextByFunctionPipe,
|
|
145
|
-
], template: "<mat-form-field\r\n
|
|
150
|
+
], 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\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [required]=\"control.required\"\r\n [readonly]=\"control.readOnly\"\r\n [placeholder]=\"control.placeholder\"\r\n matInput\r\n [formControl]=\"control\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\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"] }]
|
|
146
151
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
147
152
|
type: Input
|
|
148
153
|
}] } });
|
|
@@ -169,10 +174,10 @@ class SpecialInputComponent {
|
|
|
169
174
|
event.stopPropagation();
|
|
170
175
|
}
|
|
171
176
|
}
|
|
172
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
173
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
177
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
178
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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]=\"settings?.type || 'text'\"\r\n [readonly]=\"control.readOnly\"\r\n [required]=\"control.required\"\r\n [placeholder]=\"control.placeholder\"\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 @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 </mat-form-field>\r\n\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: CommonModule }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
174
179
|
}
|
|
175
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
180
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialInputComponent, decorators: [{
|
|
176
181
|
type: Component,
|
|
177
182
|
args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
178
183
|
InputMaskModule,
|
|
@@ -182,7 +187,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
182
187
|
ReactiveFormsModule,
|
|
183
188
|
MatButtonModule,
|
|
184
189
|
ErrorMessagePipe,
|
|
185
|
-
], template: "
|
|
190
|
+
], 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]=\"settings?.type || 'text'\"\r\n [readonly]=\"control.readOnly\"\r\n [required]=\"control.required\"\r\n [placeholder]=\"control.placeholder\"\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 @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 </mat-form-field>\r\n\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
186
191
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
187
192
|
type: Input
|
|
188
193
|
}] } });
|
|
@@ -202,10 +207,10 @@ class SpecialDropdownComponent {
|
|
|
202
207
|
if (this.settings.onSelect)
|
|
203
208
|
this.settings.onSelect(value);
|
|
204
209
|
}
|
|
205
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
210
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDropdownComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
211
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3$1.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
207
212
|
}
|
|
208
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
213
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDropdownComponent, decorators: [{
|
|
209
214
|
type: Component,
|
|
210
215
|
args: [{ standalone: true, selector: 'sp-dropdown', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
211
216
|
CommonModule,
|
|
@@ -215,7 +220,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
215
220
|
MatIconModule,
|
|
216
221
|
MatButtonModule,
|
|
217
222
|
TextByFunctionPipe,
|
|
218
|
-
], template: "
|
|
223
|
+
], 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"] }]
|
|
219
224
|
}], propDecorators: { control: [{
|
|
220
225
|
type: Input
|
|
221
226
|
}] } });
|
|
@@ -229,10 +234,10 @@ class SpecialDatepickerComponent {
|
|
|
229
234
|
return this.settings?.startAt || new Date();
|
|
230
235
|
}
|
|
231
236
|
ngOnInit() { }
|
|
232
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
233
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
237
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDatepickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
238
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$2.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$2.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$2.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatNativeDateModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
234
239
|
}
|
|
235
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
240
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialDatepickerComponent, decorators: [{
|
|
236
241
|
type: Component,
|
|
237
242
|
args: [{ standalone: true, selector: 'sp-datepicker', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
238
243
|
MatInputModule,
|
|
@@ -243,7 +248,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
243
248
|
MatButtonModule,
|
|
244
249
|
ErrorMessagePipe,
|
|
245
250
|
MatNativeDateModule,
|
|
246
|
-
], template: "
|
|
251
|
+
], 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"] }]
|
|
247
252
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
248
253
|
type: Input
|
|
249
254
|
}] } });
|
|
@@ -304,10 +309,10 @@ class SpecialMultipleAutocompleteComponent {
|
|
|
304
309
|
ngOnDestroy() {
|
|
305
310
|
this.subs.unsubscribe();
|
|
306
311
|
}
|
|
307
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
308
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
312
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialMultipleAutocompleteComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
313
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 <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\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [required]=\"control.required && !control.value?.length\"\r\n [readonly]=\"control.readOnly\"\r\n [placeholder]=\"control.placeholder\"\r\n matInput\r\n [formControl]=\"internalControl\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\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"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: CommonModule }, { kind: "pipe", type: i3.AsyncPipe, name: "async" }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i4.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: i5.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i4.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatIconButton, selector: "button[mat-icon-button]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "component", type: i7.MatChipListbox, selector: "mat-chip-listbox", inputs: ["multiple", "aria-orientation", "selectable", "compareWith", "required", "hideSingleSelectionIndicator", "value"], outputs: ["change"] }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
309
314
|
}
|
|
310
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
315
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialMultipleAutocompleteComponent, decorators: [{
|
|
311
316
|
type: Component,
|
|
312
317
|
args: [{ standalone: true, selector: 'sp-multiple-autocomplete', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
313
318
|
MatInputModule,
|
|
@@ -319,7 +324,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
319
324
|
ErrorMessagePipe,
|
|
320
325
|
TextByFunctionPipe,
|
|
321
326
|
MatChipsModule,
|
|
322
|
-
], template: "<div\r\n
|
|
327
|
+
], 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 <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\r\n type=\"text\"\r\n autocomplete=\"off\"\r\n [required]=\"control.required && !control.value?.length\"\r\n [readonly]=\"control.readOnly\"\r\n [placeholder]=\"control.placeholder\"\r\n matInput\r\n [formControl]=\"internalControl\"\r\n [matAutocomplete]=\"auto\"\r\n />\r\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"] }]
|
|
323
328
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
324
329
|
type: Input
|
|
325
330
|
}] } });
|
|
@@ -330,10 +335,10 @@ class SpecialCheckboxComponent {
|
|
|
330
335
|
}
|
|
331
336
|
constructor() { }
|
|
332
337
|
ngOnInit() { }
|
|
333
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
334
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
338
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialCheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
339
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: MatCheckboxModule }, { kind: "component", type: i2$1.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
335
340
|
}
|
|
336
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
341
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialCheckboxComponent, decorators: [{
|
|
337
342
|
type: Component,
|
|
338
343
|
args: [{ standalone: true, selector: 'sp-checkbox', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
339
344
|
FormsModule,
|
|
@@ -344,7 +349,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
344
349
|
ReactiveFormsModule,
|
|
345
350
|
MatButtonModule,
|
|
346
351
|
ErrorMessagePipe,
|
|
347
|
-
], template: "
|
|
352
|
+
], 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"] }]
|
|
348
353
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
349
354
|
type: Input
|
|
350
355
|
}] } });
|
|
@@ -355,10 +360,10 @@ class SpecialTextAreaComponent {
|
|
|
355
360
|
this.onEnter = new EventEmitter();
|
|
356
361
|
}
|
|
357
362
|
ngOnInit() { }
|
|
358
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
359
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
363
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialTextAreaComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
364
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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 [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 </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"], dependencies: [{ kind: "ngmodule", type: InputMaskModule }, { kind: "ngmodule", type: CommonModule }, { 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"], exportAs: ["matInput"] }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i3$3.CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.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 }); }
|
|
360
365
|
}
|
|
361
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
366
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialTextAreaComponent, decorators: [{
|
|
362
367
|
type: Component,
|
|
363
368
|
args: [{ standalone: true, selector: 'sp-text-area', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
364
369
|
InputMaskModule,
|
|
@@ -368,7 +373,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
368
373
|
ReactiveFormsModule,
|
|
369
374
|
MatButtonModule,
|
|
370
375
|
ErrorMessagePipe,
|
|
371
|
-
], template: "
|
|
376
|
+
], 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 [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 </mat-form-field>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
372
377
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
373
378
|
type: Input
|
|
374
379
|
}], onBlur: [{
|
|
@@ -377,41 +382,109 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
377
382
|
type: Output
|
|
378
383
|
}] } });
|
|
379
384
|
|
|
380
|
-
class
|
|
381
|
-
|
|
382
|
-
this.
|
|
383
|
-
|
|
385
|
+
class previewImageUrlPipe {
|
|
386
|
+
constructor() {
|
|
387
|
+
this.imageTypeFormats = [
|
|
388
|
+
'jpeg',
|
|
389
|
+
'jpg',
|
|
390
|
+
'png',
|
|
391
|
+
'gif',
|
|
392
|
+
'bmp',
|
|
393
|
+
'webp',
|
|
394
|
+
'svg',
|
|
395
|
+
];
|
|
396
|
+
this.docFormats = ['doc', 'docx'];
|
|
397
|
+
this.pdfIcon = `
|
|
398
|
+
<svg version="1.1" id="_x34_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512" xml:space="preserve" width="800px" height="800px" fill="#000000">
|
|
399
|
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
|
400
|
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
|
401
|
+
<g id="SVGRepo_iconCarrier"> <g> <polygon style="fill:#FFFEFE;" points="475.435,117.825 475.435,512 47.791,512 47.791,0.002 357.613,0.002 412.491,54.881 "/> <rect x="36.565" y="34.295" style="fill:#B43331;" width="205.097" height="91.768"/> <g> <g> <path style="fill:#FFFEFE;" d="M110.133,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.659-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.127-1.432-8.141-1.432H69.652v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.371-2.261,6.031-3.92c1.658-1.658,2.865-3.543,3.769-5.804c0.828-2.186,1.281-4.523,1.281-6.935 C111.413,68.902,110.961,66.565,110.133,64.379z M97.845,77.118c-1.508,1.432-3.618,2.186-6.182,2.186H81.035V63.323h10.628 c2.564,0,4.674,0.754,6.182,2.261c1.432,1.432,2.185,3.392,2.185,5.804C100.031,73.726,99.277,75.686,97.845,77.118z"/> <path style="fill:#FFFEFE;" d="M164.558,75.761c-0.075-2.035-0.15-3.844-0.377-5.503c-0.225-1.659-0.603-3.166-1.131-4.598 c-0.527-1.357-1.206-2.714-2.111-3.92c-2.035-2.94-4.522-5.126-7.312-6.483c-2.864-1.357-6.256-2.035-10.252-2.035H122.42v58.195 h20.956c3.996,0,7.388-0.678,10.252-2.035c2.79-1.357,5.277-3.543,7.312-6.483c0.905-1.206,1.584-2.563,2.111-3.92 c0.528-1.432,0.905-2.94,1.131-4.598c0.227-1.658,0.301-3.468,0.377-5.503c0.075-1.96,0.075-4.146,0.075-6.558 C164.633,79.908,164.633,77.721,164.558,75.761z M153.175,88.2c0,1.734-0.15,3.091-0.302,4.297 c-0.151,1.131-0.376,2.186-0.678,2.94c-0.301,0.829-0.754,1.583-1.281,2.261c-1.885,2.412-4.749,3.543-8.518,3.543h-8.668V63.323 h8.668c3.769,0,6.634,1.206,8.518,3.618c0.528,0.678,0.98,1.357,1.281,2.186c0.302,0.829,0.528,1.809,0.678,3.015 c0.152,1.131,0.302,2.563,0.302,4.221c0.075,1.659,0.075,3.694,0.075,5.955C153.251,84.581,153.251,86.541,153.175,88.2z"/> <path style="fill:#FFFEFE;" d="M213.18,63.323V53.222h-38.37v58.195h11.383V87.823h22.992V77.646h-22.992V63.323H213.18z"/> </g> <g> <path style="fill:#FFFEFE;" d="M110.133,64.379c-0.905-2.186-2.111-4.146-3.769-5.804c-1.659-1.658-3.694-3.015-6.031-3.92 c-2.412-0.98-5.127-1.432-8.141-1.432H69.652v58.195h11.383V89.481h11.157c3.015,0,5.729-0.452,8.141-1.432 c2.337-0.905,4.371-2.261,6.031-3.92c1.658-1.658,2.865-3.543,3.769-5.804c0.828-2.186,1.281-4.523,1.281-6.935 C111.413,68.902,110.961,66.565,110.133,64.379z M97.845,77.118c-1.508,1.432-3.618,2.186-6.182,2.186H81.035V63.323h10.628 c2.564,0,4.674,0.754,6.182,2.261c1.432,1.432,2.185,3.392,2.185,5.804C100.031,73.726,99.277,75.686,97.845,77.118z"/> </g> </g> <polygon style="opacity:0.08;fill:#040000;" points="475.435,117.825 475.435,512 47.791,512 47.791,419.581 247.706,219.667 259.541,207.832 266.099,201.273 277.029,190.343 289.995,177.377 412.491,54.881 "/> <polygon style="fill:#BBBBBA;" points="475.435,117.836 357.6,117.836 357.6,0 "/> <g> <path style="fill:#B43331;" d="M414.376,370.658c-2.488-4.372-5.88-8.518-10.101-12.287c-3.467-3.166-7.538-6.106-12.137-8.82 c-18.543-10.93-45.003-16.207-80.961-16.207h-3.618c-1.96-1.809-3.996-3.618-6.106-5.503 c-13.644-12.287-24.499-25.63-32.942-40.48c16.583-36.561,24.499-69.126,23.519-96.867c-0.151-4.674-0.83-9.046-2.036-13.117 c-1.808-6.558-4.824-12.363-9.046-17.112c-0.075-0.075-0.075-0.075-0.15-0.151c-6.709-7.538-16.056-11.835-25.555-11.835 c-9.574,0-18.393,4.146-24.802,11.76c-6.331,7.538-9.724,17.866-9.875,30.002c-0.225,18.544,1.282,36.108,4.448,52.315 c0.301,1.282,0.528,2.563,0.829,3.844c3.166,14.7,7.84,28.645,13.871,41.611c-7.086,14.398-14.248,26.836-19.222,35.279 c-3.769,6.408-7.916,13.117-12.213,19.826c-19.373,3.468-35.807,7.689-50.129,12.966c-19.374,7.011-34.903,16.056-46.059,26.836 c-7.238,6.935-12.137,14.323-14.55,22.012c-2.563,7.915-2.411,15.83,0.453,22.916c2.638,6.558,7.387,12.061,13.719,15.83 c1.508,0.905,3.091,1.658,4.749,2.337c4.825,1.96,10.102,3.015,15.604,3.015c12.74,0,25.856-5.503,36.938-15.378 c20.654-18.469,41.988-48.169,54.576-66.94c10.327-1.583,21.559-2.94,34.224-4.297c14.927-1.508,28.118-2.412,40.104-2.865 c3.694,3.317,7.237,6.483,10.63,9.498c18.846,16.81,33.168,28.947,46.134,37.465c0,0.075,0.075,0.075,0.15,0.075 c5.127,3.392,10.026,6.181,14.926,8.443c5.502,2.563,11.081,3.92,16.81,3.92c7.237,0,14.021-2.186,19.675-6.181 c5.729-4.146,9.875-10.101,11.76-16.81C420.181,387.694,418.899,378.724,414.376,370.658z M247.706,219.667 c-1.056-9.348-1.508-19.072-1.357-29.324c0.15-9.724,3.694-16.283,8.895-16.283c3.919,0,8.066,3.543,9.951,10.327 c0.528,2.035,0.905,4.372,0.98,7.01c0.15,3.166,0.075,6.483-0.075,9.875c-0.452,9.574-2.112,19.75-4.976,30.681 c-1.734,7.011-3.995,14.323-6.784,21.936C251.173,243.186,248.911,231.803,247.706,219.667z M121.968,418.073 c-1.282-3.166,0.15-9.272,7.99-16.81c11.985-11.458,30.755-20.504,56.914-27.364c-4.976,6.784-9.875,12.966-14.625,18.619 c-7.237,8.744-14.172,16.132-20.429,21.71c-5.351,4.824-11.232,7.84-16.81,8.594c-0.98,0.151-1.96,0.226-2.94,0.226 C127.169,423.049,123.173,421.089,121.968,418.073z M242.428,337.942l0.528-0.829l-0.829,0.151 c0.15-0.377,0.377-0.754,0.602-1.055c3.167-5.352,7.161-12.212,11.458-20.127l0.377,0.829l0.98-2.035 c3.166,4.523,6.634,8.971,10.252,13.267c1.735,2.035,3.544,3.995,5.352,5.955l-1.205,0.075l1.055,0.98 c-3.09,0.226-6.331,0.528-9.573,0.829c-2.036,0.226-4.147,0.377-6.257,0.603C250.796,337.037,246.499,337.49,242.428,337.942z M369.298,384.98c-8.97-5.729-18.997-13.795-31.36-24.575c17.564,1.809,31.36,5.654,41.159,11.383 c4.297,2.488,7.538,5.051,9.724,7.538c3.619,3.844,4.901,7.312,4.221,9.649c-0.602,2.337-3.241,3.92-6.483,3.92 c-1.885,0-3.844-0.452-5.879-1.432c-3.468-1.658-7.086-3.694-10.931-6.181C369.598,385.282,369.448,385.131,369.298,384.98z"/> </g> </g> </g>
|
|
402
|
+
</svg>
|
|
403
|
+
`;
|
|
404
|
+
this.wordIcon = `
|
|
405
|
+
<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000">
|
|
406
|
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
|
407
|
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
|
408
|
+
<g id="SVGRepo_iconCarrier">
|
|
409
|
+
<title>file_type_word2</title>
|
|
410
|
+
<path d="M18.536,2.323V4.868c3.4.019,7.12-.035,10.521.019a.783.783,0,0,1,.912.861c.054,6.266-.013,12.89.032,19.157-.02.4.009,1.118-.053,1.517-.079.509-.306.607-.817.676-.286.039-.764.034-1.045.047-2.792-.014-5.582-.011-8.374-.01l-1.175,0v2.547L2,27.133Q2,16,2,4.873L18.536,2.322" style="fill:#283c82"/>
|
|
411
|
+
<path d="M18.536,5.822h10.5V26.18h-10.5V23.635h8.27V22.363h-8.27v-1.59h8.27V19.5h-8.27v-1.59h8.27V16.637h-8.27v-1.59h8.27V13.774h-8.27v-1.59h8.27V10.911h-8.27V9.321h8.27V8.048h-8.27V5.822" style="fill:#fff"/>
|
|
412
|
+
<path d="M8.573,11.443c.6-.035,1.209-.06,1.813-.092.423,2.147.856,4.291,1.314,6.429.359-2.208.757-4.409,1.142-6.613.636-.022,1.272-.057,1.905-.1-.719,3.082-1.349,6.19-2.134,9.254-.531.277-1.326-.013-1.956.032-.423-2.106-.916-4.2-1.295-6.314C8.99,16.1,8.506,18.133,8.08,20.175q-.916-.048-1.839-.111c-.528-2.8-1.148-5.579-1.641-8.385.544-.025,1.091-.048,1.635-.067.328,2.026.7,4.043.986,6.072.448-2.08.907-4.161,1.352-6.241" style="fill:#fff"/>
|
|
413
|
+
</g>
|
|
414
|
+
</svg>
|
|
415
|
+
`;
|
|
416
|
+
this.byDefectIcon = `
|
|
417
|
+
<svg width="800px" height="800px" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg" fill="#000000">
|
|
418
|
+
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
|
|
419
|
+
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
|
|
420
|
+
<g id="SVGRepo_iconCarrier">
|
|
421
|
+
<title>file_type_word2</title>
|
|
422
|
+
<path d="M18.536,2.323V4.868c3.4.019,7.12-.035,10.521.019a.783.783,0,0,1,.912.861c.054,6.266-.013,12.89.032,19.157-.02.4.009,1.118-.053,1.517-.079.509-.306.607-.817.676-.286.039-.764.034-1.045.047-2.792-.014-5.582-.011-8.374-.01l-1.175,0v2.547L2,27.133Q2,16,2,4.873L18.536,2.322" style="fill:#283c82"/>
|
|
423
|
+
<path d="M18.536,5.822h10.5V26.18h-10.5V23.635h8.27V22.363h-8.27v-1.59h8.27V19.5h-8.27v-1.59h8.27V16.637h-8.27v-1.59h8.27V13.774h-8.27v-1.59h8.27V10.911h-8.27V9.321h8.27V8.048h-8.27V5.822" style="fill:#fff"/>
|
|
424
|
+
<path d="M8.573,11.443c.6-.035,1.209-.06,1.813-.092.423,2.147.856,4.291,1.314,6.429.359-2.208.757-4.409,1.142-6.613.636-.022,1.272-.057,1.905-.1-.719,3.082-1.349,6.19-2.134,9.254-.531.277-1.326-.013-1.956.032-.423-2.106-.916-4.2-1.295-6.314C8.99,16.1,8.506,18.133,8.08,20.175q-.916-.048-1.839-.111c-.528-2.8-1.148-5.579-1.641-8.385.544-.025,1.091-.048,1.635-.067.328,2.026.7,4.043.986,6.072.448-2.08.907-4.161,1.352-6.241" style="fill:#fff"/>
|
|
425
|
+
</g>
|
|
426
|
+
</svg>
|
|
427
|
+
`;
|
|
428
|
+
this.sanitizer = inject(DomSanitizer);
|
|
429
|
+
}
|
|
430
|
+
transform(file) {
|
|
431
|
+
if (this.imageTypeFormats.some((format) => file.type.includes(format))) {
|
|
432
|
+
return this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file));
|
|
433
|
+
}
|
|
434
|
+
if (file.type.includes('pdf')) {
|
|
435
|
+
return this.svgConfiguration(this.pdfIcon);
|
|
436
|
+
}
|
|
437
|
+
if (this.docFormats.some((format) => file.type.includes(format))) {
|
|
438
|
+
return this.svgConfiguration(this.wordIcon);
|
|
439
|
+
}
|
|
440
|
+
return this.svgConfiguration(this.byDefectIcon);
|
|
384
441
|
}
|
|
385
|
-
|
|
386
|
-
this.sanitizer
|
|
387
|
-
this.previewImages = [];
|
|
442
|
+
svgConfiguration(svg) {
|
|
443
|
+
return this.sanitizer.bypassSecurityTrustUrl('data:image/svg+xml;base64,' + btoa(this.pdfIcon));
|
|
388
444
|
}
|
|
389
|
-
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
445
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: previewImageUrlPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
446
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: previewImageUrlPipe, isStandalone: true, name: "previewImageUrl" }); }
|
|
447
|
+
}
|
|
448
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: previewImageUrlPipe, decorators: [{
|
|
449
|
+
type: Pipe,
|
|
450
|
+
args: [{ name: 'previewImageUrl', standalone: true }]
|
|
451
|
+
}] });
|
|
452
|
+
class TruncatePipe {
|
|
453
|
+
transform(text, lenght = 12, suffix = '...') {
|
|
454
|
+
return text.slice(0, lenght) + suffix;
|
|
455
|
+
}
|
|
456
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TruncatePipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
457
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: TruncatePipe, isStandalone: true, name: "truncate" }); }
|
|
458
|
+
}
|
|
459
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: TruncatePipe, decorators: [{
|
|
460
|
+
type: Pipe,
|
|
461
|
+
args: [{ name: 'truncate', standalone: true }]
|
|
462
|
+
}] });
|
|
463
|
+
class IsArrayPipe {
|
|
464
|
+
transform(input) {
|
|
465
|
+
return Array.isArray(input);
|
|
466
|
+
}
|
|
467
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsArrayPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
468
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: IsArrayPipe, isStandalone: true, name: "isArray" }); }
|
|
469
|
+
}
|
|
470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: IsArrayPipe, decorators: [{
|
|
471
|
+
type: Pipe,
|
|
472
|
+
args: [{ name: 'isArray', standalone: true }]
|
|
473
|
+
}] });
|
|
474
|
+
|
|
475
|
+
class SpecialUploadComponent {
|
|
476
|
+
constructor() {
|
|
477
|
+
this.DEFAULT_ACCEPTED_TYPES = 'image/png, .jpeg, .jpg, image/gif';
|
|
478
|
+
}
|
|
479
|
+
get settings() {
|
|
480
|
+
return this.control.settings;
|
|
404
481
|
}
|
|
405
482
|
onSelectOne(event) {
|
|
406
|
-
this.previewImages = event.addedFiles.map((file) => ({
|
|
407
|
-
lastModified: file.lastModified,
|
|
408
|
-
url: this.sanitizer.bypassSecurityTrustUrl(URL.createObjectURL(file)),
|
|
409
|
-
}));
|
|
410
483
|
this.control.setValue(event.addedFiles.map(this.fixFileName));
|
|
411
|
-
this.
|
|
484
|
+
this.onSelectFile(this.control.value);
|
|
412
485
|
this.control.markAsDirty();
|
|
413
486
|
}
|
|
414
|
-
|
|
487
|
+
onSelectFile(value) {
|
|
415
488
|
if (this.control.settings?.onSelectFile) {
|
|
416
489
|
this.control.settings.onSelectFile(value);
|
|
417
490
|
}
|
|
@@ -422,30 +495,32 @@ class SpecialUploadComponent {
|
|
|
422
495
|
value: file.name.normalize('NFD').replace(/[\u0300-\u036f]/g, ''),
|
|
423
496
|
});
|
|
424
497
|
}
|
|
425
|
-
clean() {
|
|
426
|
-
this.previewImages = [];
|
|
427
|
-
}
|
|
428
498
|
onRemove(file) {
|
|
429
499
|
this.control.setValue(this.control.value.filter((fl) => fl.lastModified !== file.lastModified));
|
|
430
|
-
this.previewImages = this.previewImages.filter((fl) => fl.lastModified !== file.lastModified);
|
|
431
500
|
}
|
|
432
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
433
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
501
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialUploadComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
502
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialUploadComponent, isStandalone: true, selector: "sp-upload", 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 <ngx-mat-dropzone>\r\n <input\r\n [multiple]=\"settings.multiple\"\r\n type=\"file\"\r\n fileInput\r\n [mode]=\"settings.mode\"\r\n [accept]=\"\r\n control.settings?.accept\r\n ? control.settings?.accept\r\n : DEFAULT_ACCEPTED_TYPES\r\n \"\r\n [placeholder]=\"control.placeholder\"\r\n [formControl]=\"control\"\r\n [required]=\"control.required\"\r\n [readonly]=\"control.readOnly\"\r\n (ngModelChange)=\"onSelectFile($event)\"\r\n />\r\n </ngx-mat-dropzone>\r\n @if (control.value | isArray) {\r\n <mat-chip-set>\r\n @for (file of control.value; track file.lastModified) {\r\n <mat-chip-row>\r\n <img\r\n matChipAvatar\r\n [src]=\"file | previewImageUrl\"\r\n alt=\"Photo of a Shiba Inu\"\r\n />\r\n {{ file.name | truncate }}\r\n <button (click)=\"onRemove(file)\" matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-set>\r\n } @else if (control.value) {\r\n <mat-card appearance=\"outlined\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{ control.value.name }}</mat-card-title>\r\n <mat-card-subtitle>{{ control.value.type }}</mat-card-subtitle>\r\n <img mat-card-sm-image [src]=\"control.value | previewImageUrl\" />\r\n </mat-card-title-group>\r\n </mat-card-header>\r\n <mat-card-actions align=\"end\">\r\n <button\r\n mat-mini-fab\r\n color=\"warn\"\r\n (click)=\"control.reset(); $event.stopPropagation()\"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n }\r\n @if (control.icon) {\r\n <mat-icon matSuffix>{{ 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}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:5rem;height:5rem;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"], dependencies: [{ kind: "pipe", type: previewImageUrlPipe, name: "previewImageUrl" }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i5$1.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: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "ngmodule", type: DropzoneCdkModule }, { kind: "directive", type: i2$2.FileInputDirective, selector: "input[fileInput]", inputs: ["value", "accept", "mode", "disabled"], outputs: ["selectionChange"], exportAs: ["fileInput"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "component", type: i2.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: DropzoneMaterialModule }, { kind: "component", type: i4$1.MatDropzone, selector: "ngx-mat-dropzone", inputs: ["aria-describedby", "placeholder", "required"], exportAs: ["matDropzone"] }, { kind: "ngmodule", type: CommonModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i6.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i8.MatMiniFabButton, selector: "button[mat-mini-fab]", exportAs: ["matButton"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatChipsModule }, { kind: "directive", type: i7.MatChipAvatar, selector: "mat-chip-avatar, [matChipAvatar]" }, { kind: "directive", type: i7.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i7.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "component", type: i7.MatChipSet, selector: "mat-chip-set", inputs: ["disabled", "role", "tabIndex"] }, { kind: "pipe", type: TruncatePipe, name: "truncate" }, { kind: "pipe", type: IsArrayPipe, name: "isArray" }, { kind: "ngmodule", type: MatCardModule }, { kind: "component", type: i8$1.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i8$1.MatCardActions, selector: "mat-card-actions", inputs: ["align"], exportAs: ["matCardActions"] }, { kind: "component", type: i8$1.MatCardHeader, selector: "mat-card-header" }, { kind: "directive", type: i8$1.MatCardSmImage, selector: "[mat-card-sm-image], [matCardImageSmall]" }, { kind: "directive", type: i8$1.MatCardSubtitle, selector: "mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]" }, { kind: "directive", type: i8$1.MatCardTitle, selector: "mat-card-title, [mat-card-title], [matCardTitle]" }, { kind: "component", type: i8$1.MatCardTitleGroup, selector: "mat-card-title-group" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
434
503
|
}
|
|
435
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
504
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialUploadComponent, decorators: [{
|
|
436
505
|
type: Component,
|
|
437
506
|
args: [{ standalone: true, selector: 'sp-upload', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
507
|
+
previewImageUrlPipe,
|
|
438
508
|
FormsModule,
|
|
439
|
-
|
|
509
|
+
DropzoneCdkModule,
|
|
510
|
+
MatInputModule,
|
|
511
|
+
DropzoneMaterialModule,
|
|
440
512
|
CommonModule,
|
|
441
513
|
MatIconModule,
|
|
442
514
|
ReactiveFormsModule,
|
|
443
515
|
MatButtonModule,
|
|
444
516
|
ErrorMessagePipe,
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
517
|
+
MatChipsModule,
|
|
518
|
+
TruncatePipe,
|
|
519
|
+
IsArrayPipe,
|
|
520
|
+
MatCardModule
|
|
521
|
+
], 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 <ngx-mat-dropzone>\r\n <input\r\n [multiple]=\"settings.multiple\"\r\n type=\"file\"\r\n fileInput\r\n [mode]=\"settings.mode\"\r\n [accept]=\"\r\n control.settings?.accept\r\n ? control.settings?.accept\r\n : DEFAULT_ACCEPTED_TYPES\r\n \"\r\n [placeholder]=\"control.placeholder\"\r\n [formControl]=\"control\"\r\n [required]=\"control.required\"\r\n [readonly]=\"control.readOnly\"\r\n (ngModelChange)=\"onSelectFile($event)\"\r\n />\r\n </ngx-mat-dropzone>\r\n @if (control.value | isArray) {\r\n <mat-chip-set>\r\n @for (file of control.value; track file.lastModified) {\r\n <mat-chip-row>\r\n <img\r\n matChipAvatar\r\n [src]=\"file | previewImageUrl\"\r\n alt=\"Photo of a Shiba Inu\"\r\n />\r\n {{ file.name | truncate }}\r\n <button (click)=\"onRemove(file)\" matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-set>\r\n } @else if (control.value) {\r\n <mat-card appearance=\"outlined\">\r\n <mat-card-header>\r\n <mat-card-title-group>\r\n <mat-card-title>{{ control.value.name }}</mat-card-title>\r\n <mat-card-subtitle>{{ control.value.type }}</mat-card-subtitle>\r\n <img mat-card-sm-image [src]=\"control.value | previewImageUrl\" />\r\n </mat-card-title-group>\r\n </mat-card-header>\r\n <mat-card-actions align=\"end\">\r\n <button\r\n mat-mini-fab\r\n color=\"warn\"\r\n (click)=\"control.reset(); $event.stopPropagation()\"\r\n >\r\n <mat-icon>delete</mat-icon>\r\n </button>\r\n </mat-card-actions>\r\n </mat-card>\r\n }\r\n @if (control.icon) {\r\n <mat-icon matSuffix>{{ 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}:host .special-upload{margin-bottom:1rem}:host .special-upload__dropzone{min-height:180px;height:unset!important}:host .special-upload__icon{height:64px;width:64px;font-size:64px}:host .special-upload__card{width:5rem;height:5rem;margin:0;box-sizing:border-box;display:flex;align-items:center;flex-direction:column}:host .special-upload__card--image{width:100%;height:100%;object-fit:cover}\n"] }]
|
|
522
|
+
}], propDecorators: { control: [{
|
|
523
|
+
type: Input
|
|
449
524
|
}] } });
|
|
450
525
|
|
|
451
526
|
class SpecialLabelComponent {
|
|
@@ -459,12 +534,12 @@ class SpecialLabelComponent {
|
|
|
459
534
|
this.settings.onClickLink(this.control.value);
|
|
460
535
|
}
|
|
461
536
|
}
|
|
462
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
463
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
537
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialLabelComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
538
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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: i3.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "pipe", type: TextByFunctionPipe, name: "textByFunction" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
464
539
|
}
|
|
465
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
540
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialLabelComponent, decorators: [{
|
|
466
541
|
type: Component,
|
|
467
|
-
args: [{ standalone: true, selector: 'sp-label', changeDetection: ChangeDetectionStrategy.OnPush, imports: [CommonModule, MatIconModule, TextByFunctionPipe], template: "
|
|
542
|
+
args: [{ standalone: true, 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"] }]
|
|
468
543
|
}], ctorParameters: () => [], propDecorators: { control: [{
|
|
469
544
|
type: Input
|
|
470
545
|
}] } });
|
|
@@ -488,12 +563,6 @@ var EControlTypes;
|
|
|
488
563
|
})(EControlTypes || (EControlTypes = {}));
|
|
489
564
|
|
|
490
565
|
class SpecialRichtextComponent {
|
|
491
|
-
set control(control) {
|
|
492
|
-
this.formControl = control;
|
|
493
|
-
if (control.settings.colorPresets)
|
|
494
|
-
this.colorPresets = control.settings.colorPresets;
|
|
495
|
-
this.editor = new Editor();
|
|
496
|
-
}
|
|
497
566
|
constructor() {
|
|
498
567
|
this.colorPresets = ['red', 'yellow', 'green', 'blue', 'black'];
|
|
499
568
|
this.toolbar = [
|
|
@@ -509,14 +578,22 @@ class SpecialRichtextComponent {
|
|
|
509
578
|
['horizontal_rule', 'format_clear'],
|
|
510
579
|
];
|
|
511
580
|
}
|
|
512
|
-
ngOnInit() {
|
|
581
|
+
ngOnInit() {
|
|
582
|
+
if (this.control.settings.colorPresets)
|
|
583
|
+
this.colorPresets = this.control.settings.colorPresets;
|
|
584
|
+
this.editor = new Editor();
|
|
585
|
+
this.control.valueChanges.subscribe((val) => {
|
|
586
|
+
console.log(this.control);
|
|
587
|
+
console.log(val);
|
|
588
|
+
});
|
|
589
|
+
}
|
|
513
590
|
ngOnDestroy() {
|
|
514
591
|
this.editor.destroy();
|
|
515
592
|
}
|
|
516
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
517
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
593
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialRichtextComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", 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: CommonModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i5$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i5$1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i5$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: NgxEditorModule }, { kind: "component", type: i2$3.NgxEditorComponent, selector: "ngx-editor", inputs: ["editor", "outputFormat", "placeholder"], outputs: ["focusOut", "focusIn"] }, { kind: "component", type: i2$3.MenuComponent, selector: "ngx-editor-menu", inputs: ["toolbar", "colorPresets", "disabled", "editor", "customMenuRef", "dropdownPlacement"] }, { kind: "pipe", type: ErrorMessagePipe, name: "errorMessage" }, { kind: "ngmodule", type: MatFormFieldModule }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
518
595
|
}
|
|
519
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialRichtextComponent, decorators: [{
|
|
520
597
|
type: Component,
|
|
521
598
|
args: [{ standalone: true, selector: 'sp-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
522
599
|
CommonModule,
|
|
@@ -525,8 +602,9 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
525
602
|
ReactiveFormsModule,
|
|
526
603
|
NgxEditorModule,
|
|
527
604
|
ErrorMessagePipe,
|
|
528
|
-
|
|
529
|
-
|
|
605
|
+
MatFormFieldModule,
|
|
606
|
+
], 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"] }]
|
|
607
|
+
}], propDecorators: { control: [{
|
|
530
608
|
type: Input
|
|
531
609
|
}] } });
|
|
532
610
|
|
|
@@ -535,12 +613,12 @@ class SpecialFormComponent {
|
|
|
535
613
|
this.form = form;
|
|
536
614
|
}
|
|
537
615
|
ngOnInit() { }
|
|
538
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
539
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
616
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
617
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialFormComponent, 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 <div\r\n [class]=\"\r\n form.label\r\n ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\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 </div>\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 }); }
|
|
540
618
|
}
|
|
541
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
619
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormComponent, decorators: [{
|
|
542
620
|
type: Component,
|
|
543
|
-
args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
621
|
+
args: [{ selector: 'sp-form', changeDetection: ChangeDetectionStrategy.OnPush, 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 <div\r\n [class]=\"\r\n form.label\r\n ? 'w-full mt-2 p-3 border-slate-200 border border-solid box-border'\r\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 </div>\r\n }\r\n </div>\r\n}\r\n", styles: [":host{display:contents}\n"] }]
|
|
544
622
|
}], propDecorators: { form: [{
|
|
545
623
|
type: Input,
|
|
546
624
|
args: ['control']
|
|
@@ -563,12 +641,12 @@ class SpecialArrayComponent {
|
|
|
563
641
|
addItem() {
|
|
564
642
|
this.formArray.addItem();
|
|
565
643
|
}
|
|
566
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
567
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "
|
|
644
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
645
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "18.2.0", type: SpecialArrayComponent, 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(() => i3.NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => i8.MatButton), selector: " button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button] ", exportAs: ["matButton"] }, { kind: "directive", type: i0.forwardRef(() => FormControlsRenderDirective), selector: "[controlRender]", inputs: ["control"] }, { kind: "pipe", type: i0.forwardRef(() => FormControlsListPipe), name: "controlsList" }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
568
646
|
}
|
|
569
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
647
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialArrayComponent, decorators: [{
|
|
570
648
|
type: Component,
|
|
571
|
-
args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, template: "
|
|
649
|
+
args: [{ selector: 'sp-array', changeDetection: ChangeDetectionStrategy.OnPush, 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"] }]
|
|
572
650
|
}], ctorParameters: () => [], propDecorators: { formArray: [{
|
|
573
651
|
type: Input,
|
|
574
652
|
args: ['control']
|
|
@@ -599,10 +677,10 @@ class FormControlsRenderDirective {
|
|
|
599
677
|
[EControlTypes.richText]: SpecialRichtextComponent,
|
|
600
678
|
};
|
|
601
679
|
}
|
|
602
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
603
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "
|
|
680
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsRenderDirective, deps: [{ token: i0.ViewContainerRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
681
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "18.2.0", type: FormControlsRenderDirective, selector: "[controlRender]", inputs: { controlSetter: ["control", "controlSetter"] }, ngImport: i0 }); }
|
|
604
682
|
}
|
|
605
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
683
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: FormControlsRenderDirective, decorators: [{
|
|
606
684
|
type: Directive,
|
|
607
685
|
args: [{
|
|
608
686
|
selector: `[controlRender]`,
|
|
@@ -613,8 +691,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.3.0", ngImpor
|
|
|
613
691
|
}] } });
|
|
614
692
|
|
|
615
693
|
class SpecialFormModule {
|
|
616
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
617
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "
|
|
694
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
695
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, declarations: [SpecialArrayComponent,
|
|
618
696
|
FormControlsRenderDirective,
|
|
619
697
|
SpecialFormComponent], imports: [CommonModule,
|
|
620
698
|
FormControlsListPipe,
|
|
@@ -631,7 +709,7 @@ class SpecialFormModule {
|
|
|
631
709
|
SpecialUploadComponent], exports: [SpecialArrayComponent,
|
|
632
710
|
FormControlsRenderDirective,
|
|
633
711
|
SpecialFormComponent] }); }
|
|
634
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "
|
|
712
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, imports: [CommonModule,
|
|
635
713
|
MatButtonModule,
|
|
636
714
|
SpecialRichtextComponent,
|
|
637
715
|
SpecialDropdownComponent,
|
|
@@ -644,7 +722,7 @@ class SpecialFormModule {
|
|
|
644
722
|
SpecialTextAreaComponent,
|
|
645
723
|
SpecialUploadComponent] }); }
|
|
646
724
|
}
|
|
647
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
725
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormModule, decorators: [{
|
|
648
726
|
type: NgModule,
|
|
649
727
|
args: [{
|
|
650
728
|
declarations: [
|
|
@@ -1055,10 +1133,10 @@ class SpecialFormBuilderService {
|
|
|
1055
1133
|
}
|
|
1056
1134
|
return { noItems: 'NO_SELECTED_ITEM' };
|
|
1057
1135
|
}
|
|
1058
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1059
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1136
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormBuilderService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1137
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormBuilderService, providedIn: 'root' }); }
|
|
1060
1138
|
}
|
|
1061
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1139
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: SpecialFormBuilderService, decorators: [{
|
|
1062
1140
|
type: Injectable,
|
|
1063
1141
|
args: [{
|
|
1064
1142
|
providedIn: 'root',
|
|
@@ -1069,10 +1147,10 @@ class ErrorStateMatcherService {
|
|
|
1069
1147
|
isErrorState(control) {
|
|
1070
1148
|
return control && control.invalid && control.dirty;
|
|
1071
1149
|
}
|
|
1072
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "
|
|
1073
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "
|
|
1150
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorStateMatcherService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1151
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorStateMatcherService }); }
|
|
1074
1152
|
}
|
|
1075
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "
|
|
1153
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.0", ngImport: i0, type: ErrorStateMatcherService, decorators: [{
|
|
1076
1154
|
type: Injectable
|
|
1077
1155
|
}] });
|
|
1078
1156
|
|