@kms-ngx-ui/presentational 20.0.12 → 20.1.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/fesm2022/kms-ngx-ui-presentational.mjs +1628 -298
- package/fesm2022/kms-ngx-ui-presentational.mjs.map +1 -1
- package/index.d.ts +703 -215
- package/package.json +2 -1
- package/src/assets/icons.json +1 -1
- package/src/assets/sprite.svg +1 -1
- package/src/lib/ui/molecules/date-input/date-input.component.scss +11 -0
- package/src/lib/ui/molecules/numeric-input/numeric-input.component.scss +11 -0
- package/src/lib/ui/molecules/text-input/text-input.component.scss +15 -0
- package/src/lib/ui/organisms/generic-form/components/form-actions/form-actions.component.scss +9 -0
- package/src/lib/ui/organisms/generic-form/components/form-field/form-field.component.scss +82 -0
- package/src/lib/ui/organisms/generic-form/components/form-section/form-section.component.scss +28 -0
- package/src/lib/ui/organisms/generic-form/components/generic-form/generic-form.component.scss +30 -0
- package/src/styles/default-values.scss +1 -0
- package/src/styles/styles.scss +5 -0
|
@@ -1,66 +1,72 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
|
-
import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, inject, Injector, ViewChild,
|
|
2
|
+
import { Component, Pipe, NgModule, EventEmitter, Output, Input, Directive, HostListener, PLATFORM_ID, DOCUMENT, Inject, Injectable, input, VERSION, forwardRef, inject, Injector, ViewChild, computed, HostBinding, output, signal, effect, ChangeDetectionStrategy, model, ViewContainerRef, untracked, DestroyRef, ElementRef, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
|
|
3
3
|
import * as i1 from '@angular/common';
|
|
4
|
-
import { CommonModule, CurrencyPipe, isPlatformBrowser } from '@angular/common';
|
|
4
|
+
import { CommonModule, CurrencyPipe, isPlatformBrowser, NgClass, NgStyle } from '@angular/common';
|
|
5
5
|
import * as i2 from '@angular/forms';
|
|
6
|
-
import { NG_VALUE_ACCESSOR, NgControl, UntypedFormGroup, UntypedFormControl, NG_VALIDATORS, FormsModule
|
|
6
|
+
import { NG_VALUE_ACCESSOR, NgControl, FormControl, UntypedFormGroup, UntypedFormControl, FormGroup, ReactiveFormsModule, NG_VALIDATORS, FormsModule } from '@angular/forms';
|
|
7
7
|
import * as i1$2 from '@angular/material/checkbox';
|
|
8
8
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
9
|
-
import * as i1$
|
|
9
|
+
import * as i1$5 from '@angular/material/radio';
|
|
10
10
|
import { MatRadioModule } from '@angular/material/radio';
|
|
11
11
|
import * as i3$1 from '@angular/material/slide-toggle';
|
|
12
12
|
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
13
13
|
import * as i1$1 from '@angular/platform-browser';
|
|
14
|
-
import * as i1$
|
|
14
|
+
import * as i1$6 from '@angular-slider/ngx-slider';
|
|
15
15
|
import { NgxSliderModule } from '@angular-slider/ngx-slider';
|
|
16
16
|
export { ChangeContext as KmsSliderChange, Options as KmsSliderOptions } from '@angular-slider/ngx-slider';
|
|
17
|
-
import * as i1$
|
|
17
|
+
import * as i1$8 from '@angular/cdk/drag-drop';
|
|
18
18
|
import { moveItemInArray, DragDropModule } from '@angular/cdk/drag-drop';
|
|
19
|
-
import * as i1$
|
|
19
|
+
import * as i1$4 from '@angular/google-maps';
|
|
20
20
|
import { GoogleMapsModule } from '@angular/google-maps';
|
|
21
|
-
import * as i5 from '@angular/material/autocomplete';
|
|
21
|
+
import * as i5$1 from '@angular/material/autocomplete';
|
|
22
22
|
import { MatAutocompleteModule } from '@angular/material/autocomplete';
|
|
23
|
-
import * as i2$
|
|
23
|
+
import * as i2$2 from '@angular/material/button';
|
|
24
24
|
import { MatButtonModule } from '@angular/material/button';
|
|
25
|
-
import * as i4$
|
|
25
|
+
import * as i4$2 from '@angular/material/card';
|
|
26
26
|
import { MatCardModule } from '@angular/material/card';
|
|
27
|
-
import
|
|
27
|
+
import { MatNativeDateModule } from '@angular/material/core';
|
|
28
|
+
import * as i4 from '@angular/material/datepicker';
|
|
29
|
+
import { MatDatepickerModule } from '@angular/material/datepicker';
|
|
30
|
+
import * as i1$7 from '@angular/material/dialog';
|
|
28
31
|
import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
|
|
29
|
-
import * as i3$
|
|
32
|
+
import * as i3$3 from '@angular/material/expansion';
|
|
30
33
|
import { MatExpansionModule } from '@angular/material/expansion';
|
|
31
|
-
import * as
|
|
34
|
+
import * as i2$1 from '@angular/material/form-field';
|
|
32
35
|
import { MatFormFieldModule } from '@angular/material/form-field';
|
|
33
|
-
import * as
|
|
36
|
+
import * as i3$2 from '@angular/material/input';
|
|
34
37
|
import { MatInputModule } from '@angular/material/input';
|
|
35
|
-
import * as i3$
|
|
38
|
+
import * as i3$4 from '@angular/material/list';
|
|
36
39
|
import { MatListModule } from '@angular/material/list';
|
|
37
40
|
import * as i2$3 from '@angular/material/menu';
|
|
38
41
|
import { MatMenuModule } from '@angular/material/menu';
|
|
39
|
-
import * as i1$
|
|
42
|
+
import * as i1$3 from '@angular/material/progress-spinner';
|
|
40
43
|
import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
|
|
41
44
|
import * as i3 from '@angular/material/select';
|
|
42
45
|
import { MatSelectModule } from '@angular/material/select';
|
|
46
|
+
import * as i5 from 'ngx-mat-select-search';
|
|
47
|
+
import { NgxMatSelectSearchModule } from 'ngx-mat-select-search';
|
|
43
48
|
import { MatTooltipModule } from '@angular/material/tooltip';
|
|
44
|
-
import * as i4 from '@ngx-translate/core';
|
|
49
|
+
import * as i4$1 from '@ngx-translate/core';
|
|
45
50
|
import { TranslateModule } from '@ngx-translate/core';
|
|
46
51
|
import { autoUpdate, computePosition, shift, offset, arrow, flip } from '@floating-ui/dom';
|
|
47
|
-
import { Subject } from 'rxjs';
|
|
52
|
+
import { Subject, takeUntil as takeUntil$1, isObservable, merge } from 'rxjs';
|
|
48
53
|
import { trigger, state, style } from '@angular/animations';
|
|
49
54
|
import { register } from 'swiper/element/bundle';
|
|
50
55
|
import { isEmpty } from 'lodash';
|
|
51
56
|
import moment from 'moment';
|
|
57
|
+
import { takeUntil } from 'rxjs/operators';
|
|
52
58
|
|
|
53
59
|
class KmsUiPresentationalComponent {
|
|
54
60
|
constructor() { }
|
|
55
61
|
ngOnInit() { }
|
|
56
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
57
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
62
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
63
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: KmsUiPresentationalComponent, isStandalone: false, selector: "lib-kms-ngx-ui-presentational", ngImport: i0, template: `
|
|
58
64
|
<p>
|
|
59
65
|
kms-ngx-ui-presentational works!
|
|
60
66
|
</p>
|
|
61
67
|
`, isInline: true }); }
|
|
62
68
|
}
|
|
63
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
69
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalComponent, decorators: [{
|
|
64
70
|
type: Component,
|
|
65
71
|
args: [{ standalone: false, selector: 'lib-kms-ngx-ui-presentational', template: `
|
|
66
72
|
<p>
|
|
@@ -86,10 +92,10 @@ class IntegerCurrency {
|
|
|
86
92
|
throw new Error('No value provided');
|
|
87
93
|
}
|
|
88
94
|
}
|
|
89
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
90
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
95
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IntegerCurrency, deps: [{ token: i1.CurrencyPipe }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
96
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: IntegerCurrency, isStandalone: false, name: "kmsIntegerCurrency" }); }
|
|
91
97
|
}
|
|
92
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
98
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IntegerCurrency, decorators: [{
|
|
93
99
|
type: Pipe,
|
|
94
100
|
args: [{
|
|
95
101
|
name: 'kmsIntegerCurrency',
|
|
@@ -107,10 +113,10 @@ class SafeHtmlPipe {
|
|
|
107
113
|
transform(html) {
|
|
108
114
|
return this.sanitizer.bypassSecurityTrustHtml(html);
|
|
109
115
|
}
|
|
110
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
111
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
116
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SafeHtmlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
117
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: SafeHtmlPipe, isStandalone: false, name: "kmsSafeHtml" }); }
|
|
112
118
|
}
|
|
113
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
119
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SafeHtmlPipe, decorators: [{
|
|
114
120
|
type: Pipe,
|
|
115
121
|
args: [{
|
|
116
122
|
name: 'kmsSafeHtml',
|
|
@@ -128,10 +134,10 @@ class SafeResourceUrlPipe {
|
|
|
128
134
|
transform(url) {
|
|
129
135
|
return this.sanitizer.bypassSecurityTrustResourceUrl(url);
|
|
130
136
|
}
|
|
131
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
132
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
137
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SafeResourceUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
138
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: SafeResourceUrlPipe, isStandalone: false, name: "kmsSafeResourceSUrl" }); }
|
|
133
139
|
}
|
|
134
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
140
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SafeResourceUrlPipe, decorators: [{
|
|
135
141
|
type: Pipe,
|
|
136
142
|
args: [{
|
|
137
143
|
name: 'kmsSafeResourceSUrl',
|
|
@@ -149,10 +155,10 @@ class SafeUrlPipe {
|
|
|
149
155
|
transform(url) {
|
|
150
156
|
return this.sanitizer.bypassSecurityTrustUrl(url);
|
|
151
157
|
}
|
|
152
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
153
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
158
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SafeUrlPipe, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
159
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: SafeUrlPipe, isStandalone: false, name: "kmsSafeSUrl" }); }
|
|
154
160
|
}
|
|
155
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
161
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SafeUrlPipe, decorators: [{
|
|
156
162
|
type: Pipe,
|
|
157
163
|
args: [{
|
|
158
164
|
name: 'kmsSafeSUrl',
|
|
@@ -164,10 +170,10 @@ class SanitizeNullPipe {
|
|
|
164
170
|
transform(value) {
|
|
165
171
|
return value === 'null' || value == null ? '' : value;
|
|
166
172
|
}
|
|
167
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
168
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
173
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SanitizeNullPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
174
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: SanitizeNullPipe, isStandalone: false, name: "sanitizeNull" }); }
|
|
169
175
|
}
|
|
170
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
176
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SanitizeNullPipe, decorators: [{
|
|
171
177
|
type: Pipe,
|
|
172
178
|
args: [{ name: 'sanitizeNull', standalone: false }]
|
|
173
179
|
}] });
|
|
@@ -182,10 +188,10 @@ class TrimPipe {
|
|
|
182
188
|
}
|
|
183
189
|
return value.trim();
|
|
184
190
|
}
|
|
185
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
186
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
191
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrimPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
192
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TrimPipe, isStandalone: false, name: "kmsTrim" }); }
|
|
187
193
|
}
|
|
188
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
194
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TrimPipe, decorators: [{
|
|
189
195
|
type: Pipe,
|
|
190
196
|
args: [{ name: 'kmsTrim', standalone: false }]
|
|
191
197
|
}] });
|
|
@@ -194,10 +200,10 @@ class TypeofPipe {
|
|
|
194
200
|
transform(value) {
|
|
195
201
|
return typeof value;
|
|
196
202
|
}
|
|
197
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
198
|
-
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.
|
|
203
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TypeofPipe, deps: [], target: i0.ɵɵFactoryTarget.Pipe }); }
|
|
204
|
+
static { this.ɵpipe = i0.ɵɵngDeclarePipe({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: TypeofPipe, isStandalone: false, name: "kmsTypeOf" }); }
|
|
199
205
|
}
|
|
200
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
206
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TypeofPipe, decorators: [{
|
|
201
207
|
type: Pipe,
|
|
202
208
|
args: [{
|
|
203
209
|
name: 'kmsTypeOf',
|
|
@@ -209,8 +215,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
209
215
|
* @copyright KMS GmbH
|
|
210
216
|
*/
|
|
211
217
|
class CustomPipesModule {
|
|
212
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
213
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
218
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPipesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
219
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: CustomPipesModule, declarations: [IntegerCurrency,
|
|
214
220
|
SafeHtmlPipe,
|
|
215
221
|
SanitizeNullPipe,
|
|
216
222
|
SafeUrlPipe,
|
|
@@ -223,9 +229,9 @@ class CustomPipesModule {
|
|
|
223
229
|
TrimPipe,
|
|
224
230
|
SafeResourceUrlPipe,
|
|
225
231
|
TypeofPipe] }); }
|
|
226
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
232
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPipesModule, providers: [CurrencyPipe], imports: [CommonModule] }); }
|
|
227
233
|
}
|
|
228
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
234
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CustomPipesModule, decorators: [{
|
|
229
235
|
type: NgModule,
|
|
230
236
|
args: [{
|
|
231
237
|
declarations: [
|
|
@@ -306,10 +312,10 @@ class GetMaxHeightDirective {
|
|
|
306
312
|
this.maxHeightChanged.emit(maxHeight);
|
|
307
313
|
this.sumOfHeight.emit(sumOfHeight);
|
|
308
314
|
}
|
|
309
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
310
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
315
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GetMaxHeightDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
316
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: GetMaxHeightDirective, isStandalone: false, selector: "[getMaxHeight]", inputs: { cssClassName: ["getMaxHeight", "cssClassName"] }, outputs: { maxHeightChanged: "maxHeightChanged", sumOfHeight: "sumOfHeight" }, ngImport: i0 }); }
|
|
311
317
|
}
|
|
312
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
318
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GetMaxHeightDirective, decorators: [{
|
|
313
319
|
type: Directive,
|
|
314
320
|
args: [{
|
|
315
321
|
selector: '[getMaxHeight]',
|
|
@@ -478,10 +484,10 @@ class SwipeDirective {
|
|
|
478
484
|
this._moveEventData = undefined;
|
|
479
485
|
}
|
|
480
486
|
}
|
|
481
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
482
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
487
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SwipeDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
488
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: SwipeDirective, isStandalone: false, selector: "[swipeDirective]", inputs: { config: ["swipeDirective", "config"] }, outputs: { moveEvent: "moveEvent", releaseEvent: "releaseEvent" }, host: { listeners: { "mousedown": "onMouseDown($event)", "touchstart": "onMouseDown($event)", "mousemove": "onMove($event)", "touchmove": "onMove($event)", "mouseup": "onRelease($event)", "mouseleave": "onRelease($event)", "touchend": "onRelease($event)" } }, ngImport: i0 }); }
|
|
483
489
|
}
|
|
484
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
490
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SwipeDirective, decorators: [{
|
|
485
491
|
type: Directive,
|
|
486
492
|
args: [{
|
|
487
493
|
selector: '[swipeDirective]',
|
|
@@ -545,10 +551,10 @@ class TimeDirective {
|
|
|
545
551
|
inputElement.dispatchEvent(new Event('input'));
|
|
546
552
|
}
|
|
547
553
|
}
|
|
548
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
549
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
554
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeDirective, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
555
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TimeDirective, isStandalone: false, selector: "[kmsTime]", host: { listeners: { "input": "onInputChange($event)", "beforeinput": "onBeforeInput($event)" } }, ngImport: i0 }); }
|
|
550
556
|
}
|
|
551
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
557
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeDirective, decorators: [{
|
|
552
558
|
type: Directive,
|
|
553
559
|
args: [{
|
|
554
560
|
selector: '[kmsTime]',
|
|
@@ -655,10 +661,10 @@ class TooltipDirective {
|
|
|
655
661
|
this.renderer.removeClass(this.arrow, 'kms-tooltip__arrow--top');
|
|
656
662
|
this.renderer.addClass(this.arrow, 'kms-tooltip__arrow--' + side);
|
|
657
663
|
}
|
|
658
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
659
|
-
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.
|
|
664
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
665
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "20.3.16", type: TooltipDirective, isStandalone: false, selector: "[kmsTooltip]", inputs: { kmsTooltip: "kmsTooltip", placement: "placement", delay: "delay", alwaysVisible: "alwaysVisible" }, host: { listeners: { "mouseover": "onMouseOver()", "mouseout": "onMouseOut()" } }, usesOnChanges: true, ngImport: i0 }); }
|
|
660
666
|
}
|
|
661
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
667
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipDirective, decorators: [{
|
|
662
668
|
type: Directive,
|
|
663
669
|
args: [{ selector: '[kmsTooltip]', standalone: false }]
|
|
664
670
|
}], ctorParameters: () => [{ type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { kmsTooltip: [{
|
|
@@ -681,17 +687,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
681
687
|
* @copyright KMS GmbH
|
|
682
688
|
*/
|
|
683
689
|
class DirectivesModule {
|
|
684
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
685
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
690
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DirectivesModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
691
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: DirectivesModule, declarations: [SwipeDirective,
|
|
686
692
|
GetMaxHeightDirective,
|
|
687
693
|
TooltipDirective,
|
|
688
694
|
TimeDirective], exports: [SwipeDirective,
|
|
689
695
|
GetMaxHeightDirective,
|
|
690
696
|
TooltipDirective,
|
|
691
697
|
TimeDirective] }); }
|
|
692
|
-
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.
|
|
698
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DirectivesModule }); }
|
|
693
699
|
}
|
|
694
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
700
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DirectivesModule, decorators: [{
|
|
695
701
|
type: NgModule,
|
|
696
702
|
args: [{
|
|
697
703
|
declarations: [
|
|
@@ -1047,10 +1053,10 @@ class ViewportService {
|
|
|
1047
1053
|
window.removeEventListener('resize', this.documentSizeChanged);
|
|
1048
1054
|
}
|
|
1049
1055
|
}
|
|
1050
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1051
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
1056
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ViewportService, deps: [{ token: PLATFORM_ID }, { token: DOCUMENT }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
1057
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ViewportService }); }
|
|
1052
1058
|
}
|
|
1053
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1059
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ViewportService, decorators: [{
|
|
1054
1060
|
type: Injectable
|
|
1055
1061
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
1056
1062
|
type: Inject,
|
|
@@ -1122,12 +1128,12 @@ class IconComponent {
|
|
|
1122
1128
|
this.color = input(Color.BLACK, ...(ngDevMode ? [{ debugName: "color" }] : []));
|
|
1123
1129
|
this.Version = VERSION.full;
|
|
1124
1130
|
}
|
|
1125
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1131
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1132
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: IconComponent, isStandalone: true, selector: "kms-icon", inputs: { icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, iconClass: { classPropertyName: "iconClass", publicName: "iconClass", isSignal: true, isRequired: false, transformFunction: null }, size: { classPropertyName: "size", publicName: "size", isSignal: true, isRequired: false, transformFunction: null }, dontUseSprite: { classPropertyName: "dontUseSprite", publicName: "dontUseSprite", isSignal: true, isRequired: false, transformFunction: null }, color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (icon() !== 'none' && dontUseSprite() === false) {\n <span\n class=\"icon\"\n [ngClass]=\"iconClass()\"\n [ngStyle]=\"{\n color: 'var(' + color() + ')'\n }\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n >\n <svg [style.width.px]=\"size()\" [style.height.px]=\"size()\">\n <use\n [attr.xlink:href]=\"\n 'assets/sprite.svg?Version=' + Version + '#' + icon()\n \"\n ></use>\n </svg>\n </span>\n}\n@if (icon() !== 'none' && dontUseSprite() === true) {\n <object\n [data]=\"\n sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon() + '')\n \"\n type=\"image/svg+xml\"\n class=\"icon\"\n [ngClass]=\"iconClass()\"\n ></object>\n}\n", styles: [":root{--kms-primary: #162f43;--kms-primary-50: #0f2334;--kms-primary-100: #162f43;--kms-primary-200: #26415e;--kms-primary-300: #375e79;--kms-primary-400: #4b7a94;--kms-primary-500: #5f97af;--kms-primary-600: #7cb3ca;--kms-primary-700: #9acfe5;--kms-primary-800: #b8ebff;--kms-primary-900: #d6f7ff;--kms-secondary: #48acd1;--kms-tertiary: #43403e;--kms-tertiary-50: #1e1d1c;--kms-tertiary-100: #43403e;--kms-tertiary-200: #54524f;--kms-tertiary-300: #6c6a67;--kms-tertiary-400: #97938f;--kms-tertiary-500: #c2beb9;--kms-tertiary-600: #e3e1df;--kms-tertiary-700: #eeedec;--kms-tertiary-800: #f4f3f2;--kms-tertiary-900: #ffffff;--kms-success: #39b948;--kms-alert: #e5c936;--kms-error: #c3293b;--kms-disabled: #a6a6a6;--kms-background: #fafafa;--kms-white: #ffffff;--kms-black: #000000;--kms-border-grey: #101423;--kms-green: #008000;--kms-light-green: #00c800;--kms-font-green: #27ae60}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1127
1133
|
}
|
|
1128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1134
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: IconComponent, decorators: [{
|
|
1129
1135
|
type: Component,
|
|
1130
|
-
args: [{ selector: 'kms-icon', standalone:
|
|
1136
|
+
args: [{ selector: 'kms-icon', standalone: true, imports: [NgClass, NgStyle], template: "@if (icon() !== 'none' && dontUseSprite() === false) {\n <span\n class=\"icon\"\n [ngClass]=\"iconClass()\"\n [ngStyle]=\"{\n color: 'var(' + color() + ')'\n }\"\n [style.width.px]=\"size()\"\n [style.height.px]=\"size()\"\n >\n <svg [style.width.px]=\"size()\" [style.height.px]=\"size()\">\n <use\n [attr.xlink:href]=\"\n 'assets/sprite.svg?Version=' + Version + '#' + icon()\n \"\n ></use>\n </svg>\n </span>\n}\n@if (icon() !== 'none' && dontUseSprite() === true) {\n <object\n [data]=\"\n sanitizer.bypassSecurityTrustResourceUrl('assets/icons/' + icon() + '')\n \"\n type=\"image/svg+xml\"\n class=\"icon\"\n [ngClass]=\"iconClass()\"\n ></object>\n}\n", styles: [":root{--kms-primary: #162f43;--kms-primary-50: #0f2334;--kms-primary-100: #162f43;--kms-primary-200: #26415e;--kms-primary-300: #375e79;--kms-primary-400: #4b7a94;--kms-primary-500: #5f97af;--kms-primary-600: #7cb3ca;--kms-primary-700: #9acfe5;--kms-primary-800: #b8ebff;--kms-primary-900: #d6f7ff;--kms-secondary: #48acd1;--kms-tertiary: #43403e;--kms-tertiary-50: #1e1d1c;--kms-tertiary-100: #43403e;--kms-tertiary-200: #54524f;--kms-tertiary-300: #6c6a67;--kms-tertiary-400: #97938f;--kms-tertiary-500: #c2beb9;--kms-tertiary-600: #e3e1df;--kms-tertiary-700: #eeedec;--kms-tertiary-800: #f4f3f2;--kms-tertiary-900: #ffffff;--kms-success: #39b948;--kms-alert: #e5c936;--kms-error: #c3293b;--kms-disabled: #a6a6a6;--kms-background: #fafafa;--kms-white: #ffffff;--kms-black: #000000;--kms-border-grey: #101423;--kms-green: #008000;--kms-light-green: #00c800;--kms-font-green: #27ae60}\n"] }]
|
|
1131
1137
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], iconClass: [{ type: i0.Input, args: [{ isSignal: true, alias: "iconClass", required: false }] }], size: [{ type: i0.Input, args: [{ isSignal: true, alias: "size", required: false }] }], dontUseSprite: [{ type: i0.Input, args: [{ isSignal: true, alias: "dontUseSprite", required: false }] }], color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }] } });
|
|
1132
1138
|
|
|
1133
1139
|
/**
|
|
@@ -1158,10 +1164,10 @@ class BackToTopComponent {
|
|
|
1158
1164
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
1159
1165
|
}
|
|
1160
1166
|
}
|
|
1161
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1162
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1167
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BackToTopComponent, deps: [{ token: PLATFORM_ID }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1168
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: BackToTopComponent, isStandalone: false, selector: "kms-back-to-top", host: { listeners: { "window:scroll": "onWindowScroll()" } }, ngImport: i0, template: "<div\n class=\"scrollToTop\"\n [ngClass]=\"{ show: windowScrolled }\"\n (click)=\"scrollToTop()\"\n>\n <div class=\"scrollToTop-inner\">\n <kms-icon\n icon=\"floating_button_clear\"\n [color]=\"Color.WHITE\"\n [size]=\"IconSizePx.SM\"\n ></kms-icon>\n </div>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
1163
1169
|
}
|
|
1164
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1170
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: BackToTopComponent, decorators: [{
|
|
1165
1171
|
type: Component,
|
|
1166
1172
|
args: [{ selector: 'kms-back-to-top', standalone: false, template: "<div\n class=\"scrollToTop\"\n [ngClass]=\"{ show: windowScrolled }\"\n (click)=\"scrollToTop()\"\n>\n <div class=\"scrollToTop-inner\">\n <kms-icon\n icon=\"floating_button_clear\"\n [color]=\"Color.WHITE\"\n [size]=\"IconSizePx.SM\"\n ></kms-icon>\n </div>\n</div>\n" }]
|
|
1167
1173
|
}], ctorParameters: () => [{ type: Object, decorators: [{
|
|
@@ -1177,10 +1183,10 @@ class CardComponent {
|
|
|
1177
1183
|
this.imageUrl = input('', ...(ngDevMode ? [{ debugName: "imageUrl" }] : []));
|
|
1178
1184
|
this.hoverEffect = input(false, ...(ngDevMode ? [{ debugName: "hoverEffect" }] : []));
|
|
1179
1185
|
}
|
|
1180
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1181
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1186
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1187
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: CardComponent, isStandalone: false, selector: "kms-card", inputs: { imageUrl: { classPropertyName: "imageUrl", publicName: "imageUrl", isSignal: true, isRequired: false, transformFunction: null }, hoverEffect: { classPropertyName: "hoverEffect", publicName: "hoverEffect", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"card\" [ngClass]=\"{ hoverEffect: hoverEffect() }\">\n @if(imageUrl() !== '') {\n <div\n class=\"card-image\"\n [ngStyle]=\"{ 'background-image': 'url(' + imageUrl() + ')' }\"\n ></div>\n }\n <div class=\"card-content\">\n <ng-content></ng-content>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }] }); }
|
|
1182
1188
|
}
|
|
1183
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1189
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CardComponent, decorators: [{
|
|
1184
1190
|
type: Component,
|
|
1185
1191
|
args: [{ selector: 'kms-card', standalone: false, template: "<div class=\"card\" [ngClass]=\"{ hoverEffect: hoverEffect() }\">\n @if(imageUrl() !== '') {\n <div\n class=\"card-image\"\n [ngStyle]=\"{ 'background-image': 'url(' + imageUrl() + ')' }\"\n ></div>\n }\n <div class=\"card-content\">\n <ng-content></ng-content>\n </div>\n</div>\n" }]
|
|
1186
1192
|
}], propDecorators: { imageUrl: [{ type: i0.Input, args: [{ isSignal: true, alias: "imageUrl", required: false }] }], hoverEffect: [{ type: i0.Input, args: [{ isSignal: true, alias: "hoverEffect", required: false }] }] } });
|
|
@@ -1217,16 +1223,16 @@ class CheckboxComponent {
|
|
|
1217
1223
|
registerOnTouched(fn) {
|
|
1218
1224
|
this.onTouched = fn;
|
|
1219
1225
|
}
|
|
1220
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1221
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1226
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1227
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: CheckboxComponent, isStandalone: false, selector: "kms-checkbox", inputs: { infoText: "infoText", checked: "checked", disabled: "disabled", name: "name" }, outputs: { change: "change" }, providers: [
|
|
1222
1228
|
{
|
|
1223
1229
|
provide: NG_VALUE_ACCESSOR,
|
|
1224
1230
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1225
1231
|
multi: true,
|
|
1226
1232
|
},
|
|
1227
|
-
], ngImport: i0, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n <mat-checkbox\n [disabled]=\"disabled\"\n [name]=\"name\"\n [(ngModel)]=\"checked\"\n (change)=\"valueChanged($event.checked)\"\n color=\"primary\"\n >\n
|
|
1233
|
+
], ngImport: i0, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n <mat-checkbox\n [disabled]=\"disabled\"\n [name]=\"name\"\n [(ngModel)]=\"checked\"\n (change)=\"valueChanged($event.checked)\"\n color=\"primary\"\n >\n <span [innerHTML]=\"infoText | kmsSafeHtml\"></span>\n </mat-checkbox>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }] }); }
|
|
1228
1234
|
}
|
|
1229
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1235
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: CheckboxComponent, decorators: [{
|
|
1230
1236
|
type: Component,
|
|
1231
1237
|
args: [{ selector: 'kms-checkbox', providers: [
|
|
1232
1238
|
{
|
|
@@ -1234,7 +1240,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1234
1240
|
useExisting: forwardRef(() => CheckboxComponent),
|
|
1235
1241
|
multi: true,
|
|
1236
1242
|
},
|
|
1237
|
-
], standalone: false, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n <mat-checkbox\n [disabled]=\"disabled\"\n [name]=\"name\"\n [(ngModel)]=\"checked\"\n (change)=\"valueChanged($event.checked)\"\n color=\"primary\"\n >\n
|
|
1243
|
+
], standalone: false, template: "<div class=\"checkbox-container\" [class.disabled]=\"disabled\">\n <mat-checkbox\n [disabled]=\"disabled\"\n [name]=\"name\"\n [(ngModel)]=\"checked\"\n (change)=\"valueChanged($event.checked)\"\n color=\"primary\"\n >\n <span [innerHTML]=\"infoText | kmsSafeHtml\"></span>\n </mat-checkbox>\n</div>\n" }]
|
|
1238
1244
|
}], propDecorators: { infoText: [{
|
|
1239
1245
|
type: Input
|
|
1240
1246
|
}], checked: [{
|
|
@@ -1253,69 +1259,19 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1253
1259
|
class FormParentComponent {
|
|
1254
1260
|
constructor() {
|
|
1255
1261
|
this.formInitialized = false;
|
|
1256
|
-
this.allowedCharsOnlyNumbers = new Set('0123456789'.split('').map((c) => c.charCodeAt(0)));
|
|
1257
1262
|
this.formDataChanged = new EventEmitter();
|
|
1258
1263
|
this.disabled = false;
|
|
1259
1264
|
}
|
|
1260
|
-
// TODO make a service or make own compoennt etc.
|
|
1261
|
-
/**
|
|
1262
|
-
* Returns if a number was pressed
|
|
1263
|
-
* @param e
|
|
1264
|
-
* @returns
|
|
1265
|
-
*/
|
|
1266
|
-
checkIfKeyWasNumber(e, allowDelete = true, allowArrows = true, allowCutCopyPaste = true) {
|
|
1267
|
-
// returns if keycode of numbers-row or numberpad. Or if parameter set, allow delete/backspace key
|
|
1268
|
-
const isNumberRow = e.keyCode >= 48 && e.keyCode <= 57;
|
|
1269
|
-
const isNumberPad = e.keyCode >= 96 && e.keyCode <= 105;
|
|
1270
|
-
const isArrows = e.keyCode >= 37 && e.keyCode <= 40;
|
|
1271
|
-
const isDelete = e.keyCode == 8 || e.keyCode == 46;
|
|
1272
|
-
const isCutCopyOrPaste = (e.ctrlKey || e.metaKey) &&
|
|
1273
|
-
(e.keyCode == 86 || e.keyCode == 88 || e.keyCode == 67);
|
|
1274
|
-
return (isNumberRow ||
|
|
1275
|
-
isNumberPad ||
|
|
1276
|
-
(allowDelete && isDelete) ||
|
|
1277
|
-
(allowArrows && isArrows) ||
|
|
1278
|
-
(allowCutCopyPaste && isCutCopyOrPaste));
|
|
1279
|
-
}
|
|
1280
|
-
// TODO make a service or make own compoennt etc.
|
|
1281
|
-
/**
|
|
1282
|
-
* Prevents to input other chars than numbers in input
|
|
1283
|
-
* @param event
|
|
1284
|
-
*/
|
|
1285
|
-
removeNumbersOnType(event) {
|
|
1286
|
-
// only allow keydown from numbers-row or numberpad of keybard and block other chars than numbers
|
|
1287
|
-
if (!this.checkIfKeyWasNumber(event) &&
|
|
1288
|
-
!this.allowedCharsOnlyNumbers.has(event.keyCode)) {
|
|
1289
|
-
event.preventDefault();
|
|
1290
|
-
}
|
|
1291
|
-
}
|
|
1292
|
-
// TODO make a service or make own compoennt etc.
|
|
1293
|
-
/**
|
|
1294
|
-
* Prevents input when pasting which is not number
|
|
1295
|
-
* @param event
|
|
1296
|
-
*/
|
|
1297
|
-
removeNumbersOnPaste(event) {
|
|
1298
|
-
const clipboardData = event.clipboardData;
|
|
1299
|
-
if (clipboardData) {
|
|
1300
|
-
const pastedText = clipboardData.getData('text');
|
|
1301
|
-
if (pastedText) {
|
|
1302
|
-
const isnum = /^\d+$/.test(pastedText);
|
|
1303
|
-
if (!isnum) {
|
|
1304
|
-
event.preventDefault();
|
|
1305
|
-
}
|
|
1306
|
-
}
|
|
1307
|
-
}
|
|
1308
|
-
}
|
|
1309
1265
|
ngOnInit() {
|
|
1310
1266
|
this.formDataChanged.emit(this.form);
|
|
1311
1267
|
this.form.valueChanges.subscribe(() => {
|
|
1312
1268
|
this.formDataChanged.emit(this.form);
|
|
1313
1269
|
});
|
|
1314
1270
|
}
|
|
1315
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1316
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1271
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormParentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1272
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FormParentComponent, isStandalone: false, selector: "kms-form", inputs: { disabled: "disabled" }, outputs: { formDataChanged: "formDataChanged" }, ngImport: i0, template: '', isInline: true }); }
|
|
1317
1273
|
}
|
|
1318
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1274
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormParentComponent, decorators: [{
|
|
1319
1275
|
type: Component,
|
|
1320
1276
|
args: [{
|
|
1321
1277
|
standalone: false,
|
|
@@ -1391,19 +1347,19 @@ class FormControlParentComponent extends FormParentComponent {
|
|
|
1391
1347
|
}
|
|
1392
1348
|
this.disabled = isDisabled;
|
|
1393
1349
|
if (isDisabled) {
|
|
1394
|
-
this.form.disable();
|
|
1350
|
+
this.form.disable({ emitEvent: false });
|
|
1395
1351
|
}
|
|
1396
1352
|
else {
|
|
1397
|
-
this.form.enable();
|
|
1353
|
+
this.form.enable({ emitEvent: false });
|
|
1398
1354
|
}
|
|
1399
1355
|
}
|
|
1400
1356
|
validate(_) {
|
|
1401
1357
|
return this.form.valid ? null : false;
|
|
1402
1358
|
}
|
|
1403
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1404
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1359
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormControlParentComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1360
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: FormControlParentComponent, isStandalone: false, selector: "kms-formControlParent", inputs: { defaultDataOverride: "defaultDataOverride" }, outputs: { onSelectItemEmitter: "onSelectItemEmitter" }, viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], usesInheritance: true, ngImport: i0, template: '', isInline: true }); }
|
|
1405
1361
|
}
|
|
1406
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1362
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormControlParentComponent, decorators: [{
|
|
1407
1363
|
type: Component,
|
|
1408
1364
|
args: [{
|
|
1409
1365
|
standalone: false,
|
|
@@ -1423,6 +1379,61 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1423
1379
|
* Dropdown from data component {@link https://leaseplan-dev.rentoffice.de/styleguide#ui-elements}
|
|
1424
1380
|
*/
|
|
1425
1381
|
class DropdownFromDataComponent extends FormControlParentComponent {
|
|
1382
|
+
resolveBaseKeysAndValues() {
|
|
1383
|
+
const plainArray = this.optionsPlainArray();
|
|
1384
|
+
if (plainArray)
|
|
1385
|
+
return { keys: [...plainArray], values: [...plainArray] };
|
|
1386
|
+
const optionsObjArrayValue = this.optionsObjArray();
|
|
1387
|
+
const mapKeyValue = this.mapKey();
|
|
1388
|
+
const mapValueValue = this.mapValue();
|
|
1389
|
+
if (optionsObjArrayValue && mapKeyValue && mapValueValue) {
|
|
1390
|
+
return {
|
|
1391
|
+
keys: optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]),
|
|
1392
|
+
values: optionsObjArrayValue.map((obj) => obj[`${mapValueValue}`]),
|
|
1393
|
+
};
|
|
1394
|
+
}
|
|
1395
|
+
if (optionsObjArrayValue && mapKeyValue) {
|
|
1396
|
+
const mapped = optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]);
|
|
1397
|
+
return { keys: mapped, values: mapped };
|
|
1398
|
+
}
|
|
1399
|
+
return { keys: [], values: [] };
|
|
1400
|
+
}
|
|
1401
|
+
applyEnumOverrides(keys, values) {
|
|
1402
|
+
const optionsEnumValue = this.optionsEnum();
|
|
1403
|
+
if (!optionsEnumValue)
|
|
1404
|
+
return { keys, values };
|
|
1405
|
+
const enumObj = optionsEnumValue;
|
|
1406
|
+
const enumKeys = Object.keys(enumObj).filter((k) => Number.isNaN(Number(k)));
|
|
1407
|
+
const plainArray = this.optionsPlainArray();
|
|
1408
|
+
if (plainArray)
|
|
1409
|
+
return { keys: enumKeys, values: plainArray };
|
|
1410
|
+
const enumValues = enumKeys.map((k) => enumObj[k]);
|
|
1411
|
+
const isKeyValueEnum = enumKeys.some((_, i) => i !== enumValues[i]);
|
|
1412
|
+
return {
|
|
1413
|
+
keys: enumKeys,
|
|
1414
|
+
values: isKeyValueEnum || this.useEnumIndexAsValue() ? enumValues : [...enumKeys],
|
|
1415
|
+
};
|
|
1416
|
+
}
|
|
1417
|
+
get keys() {
|
|
1418
|
+
return this._keysAndValues().keys;
|
|
1419
|
+
}
|
|
1420
|
+
get values() {
|
|
1421
|
+
return this._keysAndValues().values;
|
|
1422
|
+
}
|
|
1423
|
+
get filteredKeys() {
|
|
1424
|
+
if (!this.searchTerm)
|
|
1425
|
+
return this.keys;
|
|
1426
|
+
return this.keys.filter((_, i) => this.matchesSearch(i));
|
|
1427
|
+
}
|
|
1428
|
+
get filteredValues() {
|
|
1429
|
+
if (!this.searchTerm)
|
|
1430
|
+
return this.values;
|
|
1431
|
+
return this.values.filter((_, i) => this.matchesSearch(i));
|
|
1432
|
+
}
|
|
1433
|
+
matchesSearch(index) {
|
|
1434
|
+
const display = String(this.setDisplayKey(this.keys[index]) ?? '').toLowerCase();
|
|
1435
|
+
return display.includes(this.searchTerm);
|
|
1436
|
+
}
|
|
1426
1437
|
constructor(renderer) {
|
|
1427
1438
|
super(renderer);
|
|
1428
1439
|
this.renderer = renderer;
|
|
@@ -1450,18 +1461,25 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1450
1461
|
this.multiple = input(false, ...(ngDevMode ? [{ debugName: "multiple" }] : []));
|
|
1451
1462
|
this.selectAllText = input(...(ngDevMode ? [undefined, { debugName: "selectAllText" }] : []));
|
|
1452
1463
|
this.disableOptions = input(false, ...(ngDevMode ? [{ debugName: "disableOptions" }] : []));
|
|
1464
|
+
this.searchable = input(false, ...(ngDevMode ? [{ debugName: "searchable" }] : []));
|
|
1453
1465
|
this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
1454
|
-
|
|
1455
|
-
this.
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1466
|
+
// prefix / suffix
|
|
1467
|
+
this.prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
|
|
1468
|
+
this.prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
|
|
1469
|
+
this.suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
|
|
1470
|
+
this.suffixIcon = input('', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
|
|
1471
|
+
this._keysAndValues = computed(() => {
|
|
1472
|
+
let { keys, values } = this.resolveBaseKeysAndValues();
|
|
1473
|
+
({ keys, values } = this.applyEnumOverrides(keys, values));
|
|
1474
|
+
if (this.hasNullOption()) {
|
|
1475
|
+
keys = [null, ...keys];
|
|
1476
|
+
values = [null, ...values];
|
|
1462
1477
|
}
|
|
1463
|
-
|
|
1464
|
-
});
|
|
1478
|
+
return { keys, values };
|
|
1479
|
+
}, ...(ngDevMode ? [{ debugName: "_keysAndValues" }] : []));
|
|
1480
|
+
this.searchControl = new FormControl('');
|
|
1481
|
+
this.searchTerm = '';
|
|
1482
|
+
this.pendingValue = undefined;
|
|
1465
1483
|
}
|
|
1466
1484
|
ngOnInit() {
|
|
1467
1485
|
this.form = new UntypedFormGroup({
|
|
@@ -1472,6 +1490,13 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1472
1490
|
this.internalValue = value.dropdownData;
|
|
1473
1491
|
this.onChange(value.dropdownData);
|
|
1474
1492
|
});
|
|
1493
|
+
this.searchControl.valueChanges.subscribe((term) => {
|
|
1494
|
+
this.searchTerm = (term ?? '').toLowerCase();
|
|
1495
|
+
});
|
|
1496
|
+
if (this.pendingValue !== undefined) {
|
|
1497
|
+
this.form.patchValue({ dropdownData: this.pendingValue }, { emitEvent: false });
|
|
1498
|
+
this.pendingValue = undefined;
|
|
1499
|
+
}
|
|
1475
1500
|
const preselected = this.preselectedKeys();
|
|
1476
1501
|
if (preselected)
|
|
1477
1502
|
this.form.patchValue({
|
|
@@ -1479,55 +1504,6 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1479
1504
|
});
|
|
1480
1505
|
super.ngOnInit();
|
|
1481
1506
|
}
|
|
1482
|
-
/**
|
|
1483
|
-
* transofrms the data values to the correct format for be used by the template
|
|
1484
|
-
* @param value
|
|
1485
|
-
*/
|
|
1486
|
-
setKeyValues() {
|
|
1487
|
-
const optionsObjArrayValue = this.optionsObjArray();
|
|
1488
|
-
const mapKeyValue = this.mapKey();
|
|
1489
|
-
const mapValueValue = this.mapValue();
|
|
1490
|
-
const optionsEnumValue = this.optionsEnum();
|
|
1491
|
-
const optionsPlainArrayValue = this.optionsPlainArray();
|
|
1492
|
-
const useEnumIndexAsValueValue = this.useEnumIndexAsValue();
|
|
1493
|
-
const hasNullOptionValue = this.hasNullOption();
|
|
1494
|
-
if (optionsObjArrayValue && mapKeyValue && mapValueValue) {
|
|
1495
|
-
this.keys = optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]);
|
|
1496
|
-
this.values = optionsObjArrayValue.map((obj) => obj[`${mapValueValue}`]);
|
|
1497
|
-
}
|
|
1498
|
-
else if (optionsObjArrayValue && mapKeyValue) {
|
|
1499
|
-
this.keys = optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]);
|
|
1500
|
-
this.values = optionsObjArrayValue.map((obj) => obj[`${mapKeyValue}`]);
|
|
1501
|
-
}
|
|
1502
|
-
if (optionsEnumValue) {
|
|
1503
|
-
const enumObj = optionsEnumValue;
|
|
1504
|
-
// Get enum keys (excluding reverse mappings for numeric enums)
|
|
1505
|
-
this.keys = Object.keys(enumObj).filter((k) => isNaN(Number(k)));
|
|
1506
|
-
if (optionsPlainArrayValue) {
|
|
1507
|
-
this.values = optionsPlainArrayValue;
|
|
1508
|
-
}
|
|
1509
|
-
else {
|
|
1510
|
-
const values = this.keys.map((k) => enumObj[k]);
|
|
1511
|
-
let keyValueEnum = false;
|
|
1512
|
-
for (let i = 0; i < this.keys.length; i++) {
|
|
1513
|
-
if (i !== values[i]) {
|
|
1514
|
-
keyValueEnum = true;
|
|
1515
|
-
break;
|
|
1516
|
-
}
|
|
1517
|
-
}
|
|
1518
|
-
if (keyValueEnum || useEnumIndexAsValueValue) {
|
|
1519
|
-
this.values = values;
|
|
1520
|
-
}
|
|
1521
|
-
else {
|
|
1522
|
-
this.values = [...this.keys];
|
|
1523
|
-
}
|
|
1524
|
-
}
|
|
1525
|
-
}
|
|
1526
|
-
if (hasNullOptionValue === true) {
|
|
1527
|
-
this.keys.unshift(null);
|
|
1528
|
-
this.values.unshift(null);
|
|
1529
|
-
}
|
|
1530
|
-
}
|
|
1531
1507
|
/**
|
|
1532
1508
|
* set the value of the dropdown based if translation is set
|
|
1533
1509
|
* @param key
|
|
@@ -1583,20 +1559,23 @@ class DropdownFromDataComponent extends FormControlParentComponent {
|
|
|
1583
1559
|
super.writeValue(value);
|
|
1584
1560
|
if (value !== undefined) {
|
|
1585
1561
|
if (this.formInitialized) {
|
|
1586
|
-
this.form.patchValue({ dropdownData: value });
|
|
1562
|
+
this.form.patchValue({ dropdownData: value }, { emitEvent: false });
|
|
1563
|
+
}
|
|
1564
|
+
else {
|
|
1565
|
+
this.pendingValue = value;
|
|
1587
1566
|
}
|
|
1588
1567
|
}
|
|
1589
1568
|
}
|
|
1590
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1591
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1569
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFromDataComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1570
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DropdownFromDataComponent, isStandalone: false, selector: "kms-dropdown-from-data", inputs: { optionsEnum: { classPropertyName: "optionsEnum", publicName: "optionsEnum", isSignal: true, isRequired: false, transformFunction: null }, optionsPlainArray: { classPropertyName: "optionsPlainArray", publicName: "optionsPlainArray", isSignal: true, isRequired: false, transformFunction: null }, optionsObjArray: { classPropertyName: "optionsObjArray", publicName: "optionsObjArray", isSignal: true, isRequired: false, transformFunction: null }, mapKey: { classPropertyName: "mapKey", publicName: "mapKey", isSignal: true, isRequired: false, transformFunction: null }, mapValue: { classPropertyName: "mapValue", publicName: "mapValue", isSignal: true, isRequired: false, transformFunction: null }, hasNullOption: { classPropertyName: "hasNullOption", publicName: "hasNullOption", isSignal: true, isRequired: false, transformFunction: null }, preselectedKeys: { classPropertyName: "preselectedKeys", publicName: "preselectedKeys", isSignal: true, isRequired: false, transformFunction: null }, translation: { classPropertyName: "translation", publicName: "translation", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, useEnumIndexAsValue: { classPropertyName: "useEnumIndexAsValue", publicName: "useEnumIndexAsValue", isSignal: true, isRequired: false, transformFunction: null }, multiple: { classPropertyName: "multiple", publicName: "multiple", isSignal: true, isRequired: false, transformFunction: null }, selectAllText: { classPropertyName: "selectAllText", publicName: "selectAllText", isSignal: true, isRequired: false, transformFunction: null }, disableOptions: { classPropertyName: "disableOptions", publicName: "disableOptions", isSignal: true, isRequired: false, transformFunction: null }, searchable: { classPropertyName: "searchable", publicName: "searchable", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null } }, providers: [
|
|
1592
1571
|
{
|
|
1593
1572
|
provide: NG_VALUE_ACCESSOR,
|
|
1594
1573
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
1595
1574
|
multi: true,
|
|
1596
1575
|
},
|
|
1597
|
-
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (selectAllText() && multiple() && !disableOptions()) {\n <mat-checkbox\n color=\"accent\"\n class=\"dropdown-from-data__checkbox\"\n [indeterminate]=\"isCheckboxIndeterminate()\"\n [checked]=\"allElementsChecked()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAllSelection($event)\"\n >\n {{ selectAllText() }}\n </mat-checkbox>\n } @for (key of
|
|
1576
|
+
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (searchable()) {\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"searchControl\"\n [placeholderLabel]=\"'Search...'\"\n [noEntriesFoundLabel]=\"'No matches found'\">\n </ngx-mat-select-search>\n </mat-option>\n }\n @if (selectAllText() && multiple() && !disableOptions()) {\n <mat-checkbox\n color=\"accent\"\n class=\"dropdown-from-data__checkbox\"\n [indeterminate]=\"isCheckboxIndeterminate()\"\n [checked]=\"allElementsChecked()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAllSelection($event)\"\n >\n {{ selectAllText() }}\n </mat-checkbox>\n } @for (key of filteredKeys; track key; let i = $index) {\n <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n {{ setDisplayKey(key) || '\u2014' }}\n </mat-option>\n }\n </mat-select>\n @if (prefix()) {\n <span matTextPrefix>{{ prefix() }} </span>\n } @else if (prefixIcon()) {\n <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n }\n @if (suffix()) {\n <span matTextSuffix> {{ suffix() }}</span>\n } @else if (suffixIcon()) {\n <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n }\n @if (errorMessage()) {\n <mat-error>{{ errorMessage() }}</mat-error>\n }\n </mat-form-field>\n</form>\n", dependencies: [{ kind: "component", type: i1$2.MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5.MatSelectSearchComponent, selector: "ngx-mat-select-search", inputs: ["placeholderLabel", "type", "closeIcon", "closeSvgIcon", "noEntriesFoundLabel", "clearSearchInput", "searching", "disableInitialFocus", "enableClearOnEscapePressed", "preventHomeEndKeyPropagation", "disableScrollToActiveOnOptionsChanged", "ariaLabel", "showToggleAllCheckbox", "toggleAllCheckboxChecked", "toggleAllCheckboxIndeterminate", "toggleAllCheckboxTooltipMessage", "toggleAllCheckboxTooltipPosition", "hideClearSearchButton", "alwaysRestoreSelectedOptionsMulti", "recreateValuesArray"], outputs: ["toggleAll"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
1598
1577
|
}
|
|
1599
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1578
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DropdownFromDataComponent, decorators: [{
|
|
1600
1579
|
type: Component,
|
|
1601
1580
|
args: [{ selector: 'kms-dropdown-from-data', providers: [
|
|
1602
1581
|
{
|
|
@@ -1604,17 +1583,17 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
1604
1583
|
useExisting: forwardRef(() => DropdownFromDataComponent),
|
|
1605
1584
|
multi: true,
|
|
1606
1585
|
},
|
|
1607
|
-
], standalone: false, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (selectAllText() && multiple() && !disableOptions()) {\n <mat-checkbox\n color=\"accent\"\n class=\"dropdown-from-data__checkbox\"\n [indeterminate]=\"isCheckboxIndeterminate()\"\n [checked]=\"allElementsChecked()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAllSelection($event)\"\n >\n {{ selectAllText() }}\n </mat-checkbox>\n } @for (key of
|
|
1608
|
-
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { optionsEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsEnum", required: false }] }], optionsPlainArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsPlainArray", required: false }] }], optionsObjArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsObjArray", required: false }] }], mapKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapKey", required: false }] }], mapValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapValue", required: false }] }], hasNullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNullOption", required: false }] }], preselectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselectedKeys", required: false }] }], translation: [{ type: i0.Input, args: [{ isSignal: true, alias: "translation", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], useEnumIndexAsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "useEnumIndexAsValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], disableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOptions", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }] } });
|
|
1586
|
+
], standalone: false, template: "<form [formGroup]=\"form\">\n <mat-form-field\n [attr.required]=\"required()\"\n [floatLabel]=\"placeholder() ? 'always' : 'auto'\"\n >\n <mat-label>{{ label() }}</mat-label>\n <mat-select\n [placeholder]=\"placeholder()\"\n disableOptionCentering\n (selectionChange)=\"valueChanged($event?.value)\"\n [value]=\"value\"\n #child\n [multiple]=\"multiple()\"\n [required]=\"required()\"\n formControlName=\"dropdownData\"\n >\n @if (searchable()) {\n <mat-option>\n <ngx-mat-select-search\n [formControl]=\"searchControl\"\n [placeholderLabel]=\"'Search...'\"\n [noEntriesFoundLabel]=\"'No matches found'\">\n </ngx-mat-select-search>\n </mat-option>\n }\n @if (selectAllText() && multiple() && !disableOptions()) {\n <mat-checkbox\n color=\"accent\"\n class=\"dropdown-from-data__checkbox\"\n [indeterminate]=\"isCheckboxIndeterminate()\"\n [checked]=\"allElementsChecked()\"\n (click)=\"$event.stopPropagation()\"\n (change)=\"toggleAllSelection($event)\"\n >\n {{ selectAllText() }}\n </mat-checkbox>\n } @for (key of filteredKeys; track key; let i = $index) {\n <mat-option [value]=\"filteredValues[i]\" [disabled]=\"disableOptions()\">\n {{ setDisplayKey(key) || '\u2014' }}\n </mat-option>\n }\n </mat-select>\n @if (prefix()) {\n <span matTextPrefix>{{ prefix() }} </span>\n } @else if (prefixIcon()) {\n <kms-icon matPrefix [icon]=\"prefixIcon()\" aria-hidden=\"true\"></kms-icon>\n }\n @if (suffix()) {\n <span matTextSuffix> {{ suffix() }}</span>\n } @else if (suffixIcon()) {\n <kms-icon matSuffix [icon]=\"suffixIcon()\" aria-hidden=\"true\"></kms-icon>\n }\n @if (errorMessage()) {\n <mat-error>{{ errorMessage() }}</mat-error>\n }\n </mat-form-field>\n</form>\n" }]
|
|
1587
|
+
}], ctorParameters: () => [{ type: i0.Renderer2 }], propDecorators: { optionsEnum: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsEnum", required: false }] }], optionsPlainArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsPlainArray", required: false }] }], optionsObjArray: [{ type: i0.Input, args: [{ isSignal: true, alias: "optionsObjArray", required: false }] }], mapKey: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapKey", required: false }] }], mapValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "mapValue", required: false }] }], hasNullOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "hasNullOption", required: false }] }], preselectedKeys: [{ type: i0.Input, args: [{ isSignal: true, alias: "preselectedKeys", required: false }] }], translation: [{ type: i0.Input, args: [{ isSignal: true, alias: "translation", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], useEnumIndexAsValue: [{ type: i0.Input, args: [{ isSignal: true, alias: "useEnumIndexAsValue", required: false }] }], multiple: [{ type: i0.Input, args: [{ isSignal: true, alias: "multiple", required: false }] }], selectAllText: [{ type: i0.Input, args: [{ isSignal: true, alias: "selectAllText", required: false }] }], disableOptions: [{ type: i0.Input, args: [{ isSignal: true, alias: "disableOptions", required: false }] }], searchable: [{ type: i0.Input, args: [{ isSignal: true, alias: "searchable", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }] } });
|
|
1609
1588
|
|
|
1610
1589
|
class LoaderComponent {
|
|
1611
1590
|
constructor() {
|
|
1612
1591
|
this.loading = false;
|
|
1613
1592
|
}
|
|
1614
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1615
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1593
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1594
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: LoaderComponent, isStandalone: false, selector: "kms-loader", inputs: { loading: "loading" }, ngImport: i0, template: "@if (loading) {\n <div class=\"loading-spinner-shade\">\n <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n </div>\n}\n", styles: [""], dependencies: [{ kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }] }); }
|
|
1616
1595
|
}
|
|
1617
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1596
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: LoaderComponent, decorators: [{
|
|
1618
1597
|
type: Component,
|
|
1619
1598
|
args: [{ selector: 'kms-loader', standalone: false, template: "@if (loading) {\n <div class=\"loading-spinner-shade\">\n <mat-spinner class=\"spinnerMargin\" color=\"accent\" diameter=\"44\"></mat-spinner>\n </div>\n}\n" }]
|
|
1620
1599
|
}], propDecorators: { loading: [{
|
|
@@ -1726,10 +1705,10 @@ class MapComponent {
|
|
|
1726
1705
|
this.zoom--;
|
|
1727
1706
|
}
|
|
1728
1707
|
}
|
|
1729
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1730
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1708
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1709
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: MapComponent, isStandalone: false, selector: "kms-map", inputs: { data: "data" }, ngImport: i0, template: "@if (geoDataFoundForAddress) {\n <div>\n <google-map\n height=\"415px\"\n [width]=\"width\"\n [zoom]=\"zoom\"\n [center]=\"center\"\n [options]=\"options\"\n >\n @for (marker of markers; track marker) {\n <map-marker\n [position]=\"marker.position\"\n [label]=\"marker.label\"\n [title]=\"marker.title\"\n [options]=\"marker.options\"\n >\n </map-marker>\n }\n </google-map>\n </div>\n}", styles: [""], dependencies: [{ kind: "component", type: i1$4.GoogleMap, selector: "google-map", inputs: ["height", "width", "mapId", "mapTypeId", "center", "zoom", "options"], outputs: ["mapInitialized", "authFailure", "boundsChanged", "centerChanged", "mapClick", "mapDblclick", "mapDrag", "mapDragend", "mapDragstart", "headingChanged", "idle", "maptypeidChanged", "mapMousemove", "mapMouseout", "mapMouseover", "projectionChanged", "mapRightclick", "tilesloaded", "tiltChanged", "zoomChanged"], exportAs: ["googleMap"] }, { kind: "directive", type: i1$4.MapMarker, selector: "map-marker", inputs: ["title", "position", "label", "clickable", "options", "icon", "visible"], outputs: ["animationChanged", "mapClick", "clickableChanged", "cursorChanged", "mapDblclick", "mapDrag", "mapDragend", "draggableChanged", "mapDragstart", "flatChanged", "iconChanged", "mapMousedown", "mapMouseout", "mapMouseover", "mapMouseup", "positionChanged", "mapRightclick", "shapeChanged", "titleChanged", "visibleChanged", "zindexChanged", "markerInitialized"], exportAs: ["mapMarker"] }] }); }
|
|
1731
1710
|
}
|
|
1732
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1711
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: MapComponent, decorators: [{
|
|
1733
1712
|
type: Component,
|
|
1734
1713
|
args: [{ selector: 'kms-map', standalone: false, template: "@if (geoDataFoundForAddress) {\n <div>\n <google-map\n height=\"415px\"\n [width]=\"width\"\n [zoom]=\"zoom\"\n [center]=\"center\"\n [options]=\"options\"\n >\n @for (marker of markers; track marker) {\n <map-marker\n [position]=\"marker.position\"\n [label]=\"marker.label\"\n [title]=\"marker.title\"\n [options]=\"marker.options\"\n >\n </map-marker>\n }\n </google-map>\n </div>\n}" }]
|
|
1735
1714
|
}], ctorParameters: () => [], propDecorators: { data: [{
|
|
@@ -1771,16 +1750,16 @@ class RadioButtonComponent {
|
|
|
1771
1750
|
setDisabledState(isDisabled) {
|
|
1772
1751
|
this.disabled = isDisabled;
|
|
1773
1752
|
}
|
|
1774
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1775
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1753
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1754
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: RadioButtonComponent, isStandalone: false, selector: "kms-radiobutton", inputs: { label: "label", checked: "checked", disabled: "disabled", value: "value", size: "size", color: "color" }, outputs: { onChange: "onChange" }, providers: [
|
|
1776
1755
|
{
|
|
1777
1756
|
provide: NG_VALUE_ACCESSOR,
|
|
1778
1757
|
useExisting: forwardRef(() => RadioButtonComponent),
|
|
1779
1758
|
multi: true,
|
|
1780
1759
|
},
|
|
1781
|
-
], ngImport: i0, template: "<mat-radio-button\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [ngClass]=\"size\"\n [color]=\"color\"\n [value]=\"value\"\n (change)=\"onChange.emit()\"\n ngDefaultControl\n>\n {{ label }}\n</mat-radio-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$
|
|
1760
|
+
], ngImport: i0, template: "<mat-radio-button\n [disabled]=\"disabled\"\n [checked]=\"checked\"\n [ngClass]=\"size\"\n [color]=\"color\"\n [value]=\"value\"\n (change)=\"onChange.emit()\"\n ngDefaultControl\n>\n {{ label }}\n</mat-radio-button>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i1$5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }] }); }
|
|
1782
1761
|
}
|
|
1783
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1762
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioButtonComponent, decorators: [{
|
|
1784
1763
|
type: Component,
|
|
1785
1764
|
args: [{ selector: 'kms-radiobutton', providers: [
|
|
1786
1765
|
{
|
|
@@ -1840,16 +1819,16 @@ class SlideToggleComponent {
|
|
|
1840
1819
|
setDisabledState(isDisabled) {
|
|
1841
1820
|
this.disabled = isDisabled;
|
|
1842
1821
|
}
|
|
1843
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1844
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1822
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideToggleComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1823
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: SlideToggleComponent, isStandalone: false, selector: "kms-slide-toggle", inputs: { leftLabel: "leftLabel", rightLabel: "rightLabel", checked: "checked", disabled: "disabled", name: "name" }, outputs: { change: "change" }, providers: [
|
|
1845
1824
|
{
|
|
1846
1825
|
provide: NG_VALUE_ACCESSOR,
|
|
1847
1826
|
useExisting: forwardRef(() => SlideToggleComponent),
|
|
1848
1827
|
multi: true,
|
|
1849
1828
|
},
|
|
1850
|
-
], ngImport: i0, template: "<div class=\"kms-slide-toggle\">\n @if (leftLabel) {\n <mat-label\n class=\"kms-slide-toggle__label\"\n [class.kms-slide-toggle__label--bold]=\"rightLabel && !checked\"\n >{{ leftLabel }}</mat-label\n >\n }\n <mat-slide-toggle\n [name]=\"name\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [hideIcon]=\"true\"\n (change)=\"emitOnChange($event)\"\n />\n @if (rightLabel) {\n <mat-label\n class=\"kms-slide-toggle__label\"\n [class.kms-slide-toggle__label--bold]=\"leftLabel && checked\"\n >{{ rightLabel }}</mat-label\n >\n }\n </div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type:
|
|
1829
|
+
], ngImport: i0, template: "<div class=\"kms-slide-toggle\">\n @if (leftLabel) {\n <mat-label\n class=\"kms-slide-toggle__label\"\n [class.kms-slide-toggle__label--bold]=\"rightLabel && !checked\"\n >{{ leftLabel }}</mat-label\n >\n }\n <mat-slide-toggle\n [name]=\"name\"\n [(ngModel)]=\"value\"\n [disabled]=\"disabled\"\n [hideIcon]=\"true\"\n (change)=\"emitOnChange($event)\"\n />\n @if (rightLabel) {\n <mat-label\n class=\"kms-slide-toggle__label\"\n [class.kms-slide-toggle__label--bold]=\"leftLabel && checked\"\n >{{ rightLabel }}</mat-label\n >\n }\n </div>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: i3$1.MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }] }); }
|
|
1851
1830
|
}
|
|
1852
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1831
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SlideToggleComponent, decorators: [{
|
|
1853
1832
|
type: Component,
|
|
1854
1833
|
args: [{ selector: 'kms-slide-toggle', providers: [
|
|
1855
1834
|
{
|
|
@@ -1911,16 +1890,16 @@ class SliderComponent {
|
|
|
1911
1890
|
setDisabledState(isDisabled) {
|
|
1912
1891
|
this.disabled = isDisabled;
|
|
1913
1892
|
}
|
|
1914
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1915
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
1893
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SliderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1894
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SliderComponent, isStandalone: false, selector: "kms-slider", inputs: { disabled: "disabled", options: "options", max: "max" }, outputs: { change: "change" }, host: { properties: { "class.kms-slider": "this.kmsSliderClass", "class.kms-slider--disabled": "this.disabledClass" } }, providers: [
|
|
1916
1895
|
{
|
|
1917
1896
|
provide: NG_VALUE_ACCESSOR,
|
|
1918
1897
|
useExisting: forwardRef(() => SliderComponent),
|
|
1919
1898
|
multi: true,
|
|
1920
1899
|
},
|
|
1921
|
-
], ngImport: i0, template: "<ngx-slider\n [(value)]=\"value\"\n [options]=\"options\"\n [highValue]=\"max\"\n (userChangeEnd)=\"change.emit($event)\"\n></ngx-slider>\n", styles: [""], dependencies: [{ kind: "component", type: i1$
|
|
1900
|
+
], ngImport: i0, template: "<ngx-slider\n [(value)]=\"value\"\n [options]=\"options\"\n [highValue]=\"max\"\n (userChangeEnd)=\"change.emit($event)\"\n></ngx-slider>\n", styles: [""], dependencies: [{ kind: "component", type: i1$6.SliderComponent, selector: "ngx-slider", inputs: ["value", "highValue", "options", "manualRefresh", "triggerFocus", "cancelUserChange"], outputs: ["valueChange", "highValueChange", "userChangeStart", "userChange", "userChangeEnd"] }] }); }
|
|
1922
1901
|
}
|
|
1923
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1902
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SliderComponent, decorators: [{
|
|
1924
1903
|
type: Component,
|
|
1925
1904
|
args: [{ selector: 'kms-slider', providers: [
|
|
1926
1905
|
{
|
|
@@ -1986,10 +1965,10 @@ class ButtonComponent {
|
|
|
1986
1965
|
}
|
|
1987
1966
|
}, ...(ngDevMode ? [{ debugName: "iconColor" }] : []));
|
|
1988
1967
|
}
|
|
1989
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
1990
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1968
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1969
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ButtonComponent, isStandalone: false, selector: "kms-button", inputs: { color: { classPropertyName: "color", publicName: "color", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, rounded: { classPropertyName: "rounded", publicName: "rounded", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "<!-- Basic -->\n@if (appearance() == ButtonAppearance.BASIC) {\n<button\n mat-button\n [color]=\"color()\"\n class=\"kms-button\"\n [ngClass]=\"{\n 'kms-button--loading': loading(),\n 'kms-button--basic-primary': color() === StylingTheme.PRIMARY,\n 'kms-button--basic-accent': color() === StylingTheme.SECONDARY,\n 'kms-button--basic-warn': color() === StylingTheme.WARN,\n 'kms-button--rounded': rounded()\n }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"buttonClick.emit($event)\"\n [type]=\"type()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') &&\n buttonClick.emit($event)\n \"\n>\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Flat -->\n@else if (appearance() == ButtonAppearance.FLAT) {\n<button\n mat-flat-button\n [color]=\"color()\"\n class=\"kms-button\"\n [ngClass]=\"{\n 'kms-button--loading': loading(),\n 'kms-button--flat-primary': color() === StylingTheme.PRIMARY,\n 'kms-button--flat-accent': color() === StylingTheme.SECONDARY,\n 'kms-button--flat-warn': color() === StylingTheme.WARN,\n 'kms-button--rounded': rounded()\n }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"buttonClick.emit($event)\"\n [type]=\"type()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') &&\n buttonClick.emit($event)\n \"\n>\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Raised -->\n@else if (appearance() == ButtonAppearance.RAISED) {\n<button\n mat-raised-button\n [color]=\"color()\"\n class=\"kms-button\"\n [ngClass]=\"{\n 'kms-button--loading': loading(),\n 'kms-button--raised-primary': color() === StylingTheme.PRIMARY,\n 'kms-button--raised-accent': color() === StylingTheme.SECONDARY,\n 'kms-button--raised-warn': color() === StylingTheme.WARN,\n 'kms-button--rounded': rounded()\n }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"buttonClick.emit($event)\"\n [type]=\"type()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') &&\n buttonClick.emit($event)\n \"\n>\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n @if (loading()) {\n <mat-spinner class=\"kms-button__spinner\" diameter=\"22\"></mat-spinner>\n } @if (icon()) {\n <kms-icon\n class=\"kms-button__icon\"\n [color]=\"iconColor()\"\n [size]=\"IconSize.XXS\"\n [icon]=\"icon()\"\n ></kms-icon>\n }\n {{ label() }}\n</ng-template>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "component", type: i2$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: i1$3.MatProgressSpinner, selector: "mat-progress-spinner, mat-spinner", inputs: ["color", "mode", "value", "diameter", "strokeWidth"], exportAs: ["matProgressSpinner"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
1991
1970
|
}
|
|
1992
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1971
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ButtonComponent, decorators: [{
|
|
1993
1972
|
type: Component,
|
|
1994
1973
|
args: [{ selector: 'kms-button', standalone: false, template: "<!-- Basic -->\n@if (appearance() == ButtonAppearance.BASIC) {\n<button\n mat-button\n [color]=\"color()\"\n class=\"kms-button\"\n [ngClass]=\"{\n 'kms-button--loading': loading(),\n 'kms-button--basic-primary': color() === StylingTheme.PRIMARY,\n 'kms-button--basic-accent': color() === StylingTheme.SECONDARY,\n 'kms-button--basic-warn': color() === StylingTheme.WARN,\n 'kms-button--rounded': rounded()\n }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"buttonClick.emit($event)\"\n [type]=\"type()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') &&\n buttonClick.emit($event)\n \"\n>\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Flat -->\n@else if (appearance() == ButtonAppearance.FLAT) {\n<button\n mat-flat-button\n [color]=\"color()\"\n class=\"kms-button\"\n [ngClass]=\"{\n 'kms-button--loading': loading(),\n 'kms-button--flat-primary': color() === StylingTheme.PRIMARY,\n 'kms-button--flat-accent': color() === StylingTheme.SECONDARY,\n 'kms-button--flat-warn': color() === StylingTheme.WARN,\n 'kms-button--rounded': rounded()\n }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"buttonClick.emit($event)\"\n [type]=\"type()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') &&\n buttonClick.emit($event)\n \"\n>\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<!-- Raised -->\n@else if (appearance() == ButtonAppearance.RAISED) {\n<button\n mat-raised-button\n [color]=\"color()\"\n class=\"kms-button\"\n [ngClass]=\"{\n 'kms-button--loading': loading(),\n 'kms-button--raised-primary': color() === StylingTheme.PRIMARY,\n 'kms-button--raised-accent': color() === StylingTheme.SECONDARY,\n 'kms-button--raised-warn': color() === StylingTheme.WARN,\n 'kms-button--rounded': rounded()\n }\"\n [disabled]=\"disabled() || loading()\"\n (click)=\"buttonClick.emit($event)\"\n [type]=\"type()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') &&\n buttonClick.emit($event)\n \"\n>\n <ng-container *ngTemplateOutlet=\"buttonTemplate\"></ng-container>\n</button>\n}\n\n<ng-template #buttonTemplate>\n @if (loading()) {\n <mat-spinner class=\"kms-button__spinner\" diameter=\"22\"></mat-spinner>\n } @if (icon()) {\n <kms-icon\n class=\"kms-button__icon\"\n [color]=\"iconColor()\"\n [size]=\"IconSize.XXS\"\n [icon]=\"icon()\"\n ></kms-icon>\n }\n {{ label() }}\n</ng-template>\n" }]
|
|
1995
1974
|
}], propDecorators: { color: [{ type: i0.Input, args: [{ isSignal: true, alias: "color", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "appearance", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], icon: [{ type: i0.Input, args: [{ isSignal: true, alias: "icon", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], buttonClick: [{ type: i0.Output, args: ["buttonClick"] }], rounded: [{ type: i0.Input, args: [{ isSignal: true, alias: "rounded", required: false }] }] } });
|
|
@@ -2003,10 +1982,10 @@ class TooltipIconComponent {
|
|
|
2003
1982
|
this.tooltipAlwaysVisible = input(false, ...(ngDevMode ? [{ debugName: "tooltipAlwaysVisible" }] : []));
|
|
2004
1983
|
this.icon = input('ic_info', ...(ngDevMode ? [{ debugName: "icon" }] : []));
|
|
2005
1984
|
}
|
|
2006
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2007
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
1985
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipIconComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
1986
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TooltipIconComponent, isStandalone: false, selector: "kms-tooltip-icon", inputs: { tooltipText: { classPropertyName: "tooltipText", publicName: "tooltipText", isSignal: true, isRequired: false, transformFunction: null }, placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, delay: { classPropertyName: "delay", publicName: "delay", isSignal: true, isRequired: false, transformFunction: null }, iconSize: { classPropertyName: "iconSize", publicName: "iconSize", isSignal: true, isRequired: false, transformFunction: null }, tooltipAlwaysVisible: { classPropertyName: "tooltipAlwaysVisible", publicName: "tooltipAlwaysVisible", isSignal: true, isRequired: false, transformFunction: null }, icon: { classPropertyName: "icon", publicName: "icon", isSignal: true, isRequired: false, transformFunction: null } }, viewQueries: [{ propertyName: "button", first: true, predicate: ["button"], descendants: true }, { propertyName: "tooltip", first: true, predicate: ["tooltip"], descendants: true }], ngImport: i0, template: "<div #tooltipContent>\n @if (tooltipText()) {\n {{ tooltipText() }}\n } @else {\n <ng-content></ng-content>\n }\n</div>\n\n<kms-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [kmsTooltip]=\"tooltipContent\"\n [placement]=\"placement()\"\n [delay]=\"delay()\"\n [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n", styles: [""], dependencies: [{ kind: "directive", type: TooltipDirective, selector: "[kmsTooltip]", inputs: ["kmsTooltip", "placement", "delay", "alwaysVisible"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
2008
1987
|
}
|
|
2009
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
1988
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TooltipIconComponent, decorators: [{
|
|
2010
1989
|
type: Component,
|
|
2011
1990
|
args: [{ standalone: false, selector: 'kms-tooltip-icon', template: "<div #tooltipContent>\n @if (tooltipText()) {\n {{ tooltipText() }}\n } @else {\n <ng-content></ng-content>\n }\n</div>\n\n<kms-icon\n [icon]=\"icon()\"\n [size]=\"iconSize()\"\n [kmsTooltip]=\"tooltipContent\"\n [placement]=\"placement()\"\n [delay]=\"delay()\"\n [alwaysVisible]=\"tooltipAlwaysVisible()\"\n></kms-icon>\n" }]
|
|
2012
1991
|
}], propDecorators: { button: [{
|
|
@@ -2057,16 +2036,16 @@ class ColorInputComponent extends FormControlParentComponent {
|
|
|
2057
2036
|
this.internalValue = color;
|
|
2058
2037
|
this.change(color);
|
|
2059
2038
|
}
|
|
2060
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2061
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2039
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorInputComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2040
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ColorInputComponent, isStandalone: false, selector: "kms-color-input", inputs: { label: "label", tooltipText: "tooltipText", placeholder: "placeholder" }, providers: [
|
|
2062
2041
|
{
|
|
2063
2042
|
provide: NG_VALUE_ACCESSOR,
|
|
2064
2043
|
useExisting: forwardRef(() => ColorInputComponent),
|
|
2065
2044
|
multi: true,
|
|
2066
2045
|
},
|
|
2067
|
-
], usesInheritance: true, ngImport: i0, template: "\n@if (formInitialized) {\n <form [formGroup]=\"form\">\n <div>\n <mat-form-field class=\"colorInput\">\n @if (tooltipText) {\n <kms-tooltip-icon [tooltipText]=\"tooltipText\"></kms-tooltip-icon>\n }\n <mat-label>{{ label }}</mat-label>\n <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n </mat-form-field>\n </div>\n </form>\n}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
|
|
2046
|
+
], usesInheritance: true, ngImport: i0, template: "\n@if (formInitialized) {\n <form [formGroup]=\"form\">\n <div>\n <mat-form-field class=\"colorInput\">\n @if (tooltipText) {\n <kms-tooltip-icon [tooltipText]=\"tooltipText\"></kms-tooltip-icon>\n }\n <mat-label>{{ label }}</mat-label>\n <input type=\"text\" [(ngModel)]=\"value\" matInput formControlName=\"color\" [placeholder]=\"placeholder\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n <input type=\"color\" [value]=\"value && matchesHex(value) ? value : '#ffffff'\" (change)=\"updateSelectedColor($event)\" [ngClass]=\"{'my-inValid': !matchesHex(value)}\" />\n </mat-form-field>\n </div>\n </form>\n}", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }] }); }
|
|
2068
2047
|
}
|
|
2069
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2048
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ColorInputComponent, decorators: [{
|
|
2070
2049
|
type: Component,
|
|
2071
2050
|
args: [{ standalone: false, selector: 'kms-color-input', providers: [
|
|
2072
2051
|
{
|
|
@@ -2122,17 +2101,130 @@ class ConfirmationDialogComponent {
|
|
|
2122
2101
|
});
|
|
2123
2102
|
});
|
|
2124
2103
|
}
|
|
2125
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2126
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
2104
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfirmationDialogComponent, deps: [{ token: i1$7.MatDialogRef }, { token: i0.NgZone }, { token: MAT_DIALOG_DATA }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2105
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: ConfirmationDialogComponent, isStandalone: false, selector: "kms-confirmation-dialog", ngImport: i0, template: "<div class=\"dialog-container\">\n <div class=\"dialog-header\">\n <h4>{{ data.title }}</h4>\n </div>\n <div class=\"dialog-content\">\n {{ data.message }}\n </div>\n <div class=\"dialog-footer\">\n <button\n mat-flat-button\n color=\"accent\"\n (click)=\"onClickAction(ButtonDialogType.secondary)\"\n >\n {{ data.buttons.secondary }}\n </button>\n <button\n mat-flat-button\n color=\"primary\"\n (click)=\"onClickAction(ButtonDialogType.primary)\"\n >\n {{ data.buttons.primary }}\n </button>\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }] }); }
|
|
2127
2106
|
}
|
|
2128
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2107
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ConfirmationDialogComponent, decorators: [{
|
|
2129
2108
|
type: Component,
|
|
2130
2109
|
args: [{ standalone: false, selector: 'kms-confirmation-dialog', template: "<div class=\"dialog-container\">\n <div class=\"dialog-header\">\n <h4>{{ data.title }}</h4>\n </div>\n <div class=\"dialog-content\">\n {{ data.message }}\n </div>\n <div class=\"dialog-footer\">\n <button\n mat-flat-button\n color=\"accent\"\n (click)=\"onClickAction(ButtonDialogType.secondary)\"\n >\n {{ data.buttons.secondary }}\n </button>\n <button\n mat-flat-button\n color=\"primary\"\n (click)=\"onClickAction(ButtonDialogType.primary)\"\n >\n {{ data.buttons.primary }}\n </button>\n </div>\n</div>\n" }]
|
|
2131
|
-
}], ctorParameters: () => [{ type: i1$
|
|
2110
|
+
}], ctorParameters: () => [{ type: i1$7.MatDialogRef }, { type: i0.NgZone }, { type: undefined, decorators: [{
|
|
2132
2111
|
type: Inject,
|
|
2133
2112
|
args: [MAT_DIALOG_DATA]
|
|
2134
2113
|
}] }] });
|
|
2135
2114
|
|
|
2115
|
+
let nextId$1 = 0;
|
|
2116
|
+
class DateInputComponent {
|
|
2117
|
+
constructor() {
|
|
2118
|
+
this.Color = Color;
|
|
2119
|
+
this.IconSizePx = IconSizePx;
|
|
2120
|
+
this.dateChange = output();
|
|
2121
|
+
this.rangeChange = output();
|
|
2122
|
+
this.mode = input('date', ...(ngDevMode ? [{ debugName: "mode" }] : []));
|
|
2123
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2124
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
2125
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
2126
|
+
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
2127
|
+
this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
|
|
2128
|
+
this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
2129
|
+
this.minDate = input(null, ...(ngDevMode ? [{ debugName: "minDate" }] : []));
|
|
2130
|
+
this.maxDate = input(null, ...(ngDevMode ? [{ debugName: "maxDate" }] : []));
|
|
2131
|
+
this.monthPicker = input(false, ...(ngDevMode ? [{ debugName: "monthPicker" }] : []));
|
|
2132
|
+
this.startView = input('month', ...(ngDevMode ? [{ debugName: "startView" }] : []));
|
|
2133
|
+
this.value = signal(null, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
2134
|
+
this.disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledByForm" }] : []));
|
|
2135
|
+
this.isDisabled = computed(() => this.disabled() || this.disabledByForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
2136
|
+
this.innerControl = new FormControl(null);
|
|
2137
|
+
this.rangeGroup = new FormGroup({
|
|
2138
|
+
start: new FormControl(null),
|
|
2139
|
+
end: new FormControl(null),
|
|
2140
|
+
});
|
|
2141
|
+
this.computedStartView = computed(() => this.monthPicker() ? 'year' : this.startView(), ...(ngDevMode ? [{ debugName: "computedStartView" }] : []));
|
|
2142
|
+
this.disabledEffect = effect(() => {
|
|
2143
|
+
const disabled = this.isDisabled();
|
|
2144
|
+
if (disabled) {
|
|
2145
|
+
this.innerControl.disable({ emitEvent: false });
|
|
2146
|
+
this.rangeGroup.disable({ emitEvent: false });
|
|
2147
|
+
}
|
|
2148
|
+
else {
|
|
2149
|
+
this.innerControl.enable({ emitEvent: false });
|
|
2150
|
+
this.rangeGroup.enable({ emitEvent: false });
|
|
2151
|
+
}
|
|
2152
|
+
}, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
|
|
2153
|
+
this.inputId = `kms-date-input-${nextId$1++}`;
|
|
2154
|
+
this.hintId = `${this.inputId}-hint`;
|
|
2155
|
+
this.errorId = `${this.inputId}-error`;
|
|
2156
|
+
this.errorStateMatcher = {
|
|
2157
|
+
isErrorState: () => !!this.errorMessage(),
|
|
2158
|
+
};
|
|
2159
|
+
this.onChange = () => { };
|
|
2160
|
+
this.onTouched = () => { };
|
|
2161
|
+
}
|
|
2162
|
+
onDateChanged(date) {
|
|
2163
|
+
this.value.set(date);
|
|
2164
|
+
this.innerControl.setValue(date, { emitEvent: false });
|
|
2165
|
+
this.onChange(date);
|
|
2166
|
+
this.dateChange.emit(date);
|
|
2167
|
+
}
|
|
2168
|
+
onMonthSelected(date, picker) {
|
|
2169
|
+
if (this.monthPicker()) {
|
|
2170
|
+
this.onDateChanged(date);
|
|
2171
|
+
picker.close();
|
|
2172
|
+
}
|
|
2173
|
+
}
|
|
2174
|
+
onRangeChanged() {
|
|
2175
|
+
const rangeValue = {
|
|
2176
|
+
start: this.rangeGroup.value.start ?? null,
|
|
2177
|
+
end: this.rangeGroup.value.end ?? null,
|
|
2178
|
+
};
|
|
2179
|
+
this.onChange(rangeValue);
|
|
2180
|
+
this.rangeChange.emit(rangeValue);
|
|
2181
|
+
}
|
|
2182
|
+
writeValue(value) {
|
|
2183
|
+
if (this.mode() === 'range') {
|
|
2184
|
+
const range = value ?? { start: null, end: null };
|
|
2185
|
+
this.rangeGroup.setValue({ start: range.start, end: range.end }, { emitEvent: false });
|
|
2186
|
+
}
|
|
2187
|
+
else {
|
|
2188
|
+
const date = value ?? null;
|
|
2189
|
+
this.value.set(date);
|
|
2190
|
+
this.innerControl.setValue(date, { emitEvent: false });
|
|
2191
|
+
}
|
|
2192
|
+
}
|
|
2193
|
+
registerOnChange(fn) {
|
|
2194
|
+
this.onChange = fn;
|
|
2195
|
+
}
|
|
2196
|
+
registerOnTouched(fn) {
|
|
2197
|
+
this.onTouched = fn;
|
|
2198
|
+
}
|
|
2199
|
+
setDisabledState(isDisabled) {
|
|
2200
|
+
this.disabledByForm.set(isDisabled);
|
|
2201
|
+
}
|
|
2202
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2203
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: DateInputComponent, isStandalone: true, selector: "kms-date-input", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, minDate: { classPropertyName: "minDate", publicName: "minDate", isSignal: true, isRequired: false, transformFunction: null }, maxDate: { classPropertyName: "maxDate", publicName: "maxDate", isSignal: true, isRequired: false, transformFunction: null }, monthPicker: { classPropertyName: "monthPicker", publicName: "monthPicker", isSignal: true, isRequired: false, transformFunction: null }, startView: { classPropertyName: "startView", publicName: "startView", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { dateChange: "dateChange", rangeChange: "rangeChange" }, providers: [
|
|
2204
|
+
{
|
|
2205
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2206
|
+
useExisting: forwardRef(() => DateInputComponent),
|
|
2207
|
+
multi: true,
|
|
2208
|
+
},
|
|
2209
|
+
], ngImport: i0, template: "@if (mode() === 'date') {\n<mat-form-field class=\"kms-date-input__form-field\">\n <mat-label>{{ label() }}</mat-label>\n <input\n [id]=\"inputId\"\n matInput\n [matDatepicker]=\"picker\"\n [formControl]=\"innerControl\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"\n (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n \"\n (dateChange)=\"onDateChanged($event.value)\"\n (blur)=\"onTouched()\"\n (click)=\"picker.open()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') && picker.open()\n \"\n />\n <mat-datepicker\n #picker\n [startView]=\"computedStartView()\"\n (monthSelected)=\"onMonthSelected($event, picker)\"\n ></mat-datepicker>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <kms-icon\n class=\"kms-date-input__icon\"\n icon=\"calendar\"\n [color]=\"Color.SECONDARY\"\n [size]=\"IconSizePx.XS\"\n matDatepickerToggleIcon\n ></kms-icon>\n </mat-datepicker-toggle>\n @if (hint()) {\n <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n }\n <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n} @if (mode() === 'range') {\n<mat-form-field class=\"kms-date-input__form-field\">\n <mat-label>{{ label() }}</mat-label>\n <mat-date-range-input\n [rangePicker]=\"rangePicker\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n (click)=\"rangePicker.open()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') && rangePicker.open()\n \"\n >\n <input\n matStartDate\n [formControl]=\"rangeGroup.controls.start\"\n [placeholder]=\"placeholder() || 'Start date'\"\n [required]=\"required()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"\n (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n \"\n (dateChange)=\"onRangeChanged()\"\n (blur)=\"onTouched()\"\n />\n <input\n matEndDate\n [formControl]=\"rangeGroup.controls.end\"\n placeholder=\"End date\"\n (dateChange)=\"onRangeChanged()\"\n (blur)=\"onTouched()\"\n />\n </mat-date-range-input>\n <mat-date-range-picker #rangePicker></mat-date-range-picker>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <kms-icon\n class=\"kms-date-input__icon\"\n icon=\"calendar\"\n [color]=\"Color.SECONDARY\"\n [size]=\"IconSizePx.XS\"\n matDatepickerToggleIcon\n ></kms-icon>\n </mat-datepicker-toggle>\n @if (hint()) {\n <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n }\n <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n}\n", styles: [""], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatFormFieldModule }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i4.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i4.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i4.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: i4.MatDatepickerToggleIcon, selector: "[matDatepickerToggleIcon]" }, { kind: "component", type: i4.MatDateRangeInput, selector: "mat-date-range-input", inputs: ["rangePicker", "required", "dateFilter", "min", "max", "disabled", "separator", "comparisonStart", "comparisonEnd"], exportAs: ["matDateRangeInput"] }, { kind: "directive", type: i4.MatStartDate, selector: "input[matStartDate]", outputs: ["dateChange", "dateInput"] }, { kind: "directive", type: i4.MatEndDate, selector: "input[matEndDate]", outputs: ["dateChange", "dateInput"] }, { kind: "component", type: i4.MatDateRangePicker, selector: "mat-date-range-picker", exportAs: ["matDateRangePicker"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
2210
|
+
}
|
|
2211
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DateInputComponent, decorators: [{
|
|
2212
|
+
type: Component,
|
|
2213
|
+
args: [{ selector: 'kms-date-input', changeDetection: ChangeDetectionStrategy.OnPush, imports: [
|
|
2214
|
+
ReactiveFormsModule,
|
|
2215
|
+
MatFormFieldModule,
|
|
2216
|
+
MatInputModule,
|
|
2217
|
+
MatDatepickerModule,
|
|
2218
|
+
IconComponent,
|
|
2219
|
+
], providers: [
|
|
2220
|
+
{
|
|
2221
|
+
provide: NG_VALUE_ACCESSOR,
|
|
2222
|
+
useExisting: forwardRef(() => DateInputComponent),
|
|
2223
|
+
multi: true,
|
|
2224
|
+
},
|
|
2225
|
+
], template: "@if (mode() === 'date') {\n<mat-form-field class=\"kms-date-input__form-field\">\n <mat-label>{{ label() }}</mat-label>\n <input\n [id]=\"inputId\"\n matInput\n [matDatepicker]=\"picker\"\n [formControl]=\"innerControl\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"\n (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n \"\n (dateChange)=\"onDateChanged($event.value)\"\n (blur)=\"onTouched()\"\n (click)=\"picker.open()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') && picker.open()\n \"\n />\n <mat-datepicker\n #picker\n [startView]=\"computedStartView()\"\n (monthSelected)=\"onMonthSelected($event, picker)\"\n ></mat-datepicker>\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\">\n <kms-icon\n class=\"kms-date-input__icon\"\n icon=\"calendar\"\n [color]=\"Color.SECONDARY\"\n [size]=\"IconSizePx.XS\"\n matDatepickerToggleIcon\n ></kms-icon>\n </mat-datepicker-toggle>\n @if (hint()) {\n <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n }\n <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n} @if (mode() === 'range') {\n<mat-form-field class=\"kms-date-input__form-field\">\n <mat-label>{{ label() }}</mat-label>\n <mat-date-range-input\n [rangePicker]=\"rangePicker\"\n [min]=\"minDate()\"\n [max]=\"maxDate()\"\n (click)=\"rangePicker.open()\"\n (keyup)=\"\n ($event.key === 'Enter' || $event.key === 'Space') && rangePicker.open()\n \"\n >\n <input\n matStartDate\n [formControl]=\"rangeGroup.controls.start\"\n [placeholder]=\"placeholder() || 'Start date'\"\n [required]=\"required()\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"\n (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n \"\n (dateChange)=\"onRangeChanged()\"\n (blur)=\"onTouched()\"\n />\n <input\n matEndDate\n [formControl]=\"rangeGroup.controls.end\"\n placeholder=\"End date\"\n (dateChange)=\"onRangeChanged()\"\n (blur)=\"onTouched()\"\n />\n </mat-date-range-input>\n <mat-date-range-picker #rangePicker></mat-date-range-picker>\n <mat-datepicker-toggle matIconSuffix [for]=\"rangePicker\">\n <kms-icon\n class=\"kms-date-input__icon\"\n icon=\"calendar\"\n [color]=\"Color.SECONDARY\"\n [size]=\"IconSizePx.XS\"\n matDatepickerToggleIcon\n ></kms-icon>\n </mat-datepicker-toggle>\n @if (hint()) {\n <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n }\n <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n}\n" }]
|
|
2226
|
+
}], propDecorators: { dateChange: [{ type: i0.Output, args: ["dateChange"] }], rangeChange: [{ type: i0.Output, args: ["rangeChange"] }], mode: [{ type: i0.Input, args: [{ isSignal: true, alias: "mode", required: false }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], minDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "minDate", required: false }] }], maxDate: [{ type: i0.Input, args: [{ isSignal: true, alias: "maxDate", required: false }] }], monthPicker: [{ type: i0.Input, args: [{ isSignal: true, alias: "monthPicker", required: false }] }], startView: [{ type: i0.Input, args: [{ isSignal: true, alias: "startView", required: false }] }] } });
|
|
2227
|
+
|
|
2136
2228
|
class EnumRadiogroupComponent extends FormControlParentComponent {
|
|
2137
2229
|
constructor(renderer) {
|
|
2138
2230
|
super(renderer);
|
|
@@ -2151,16 +2243,16 @@ class EnumRadiogroupComponent extends FormControlParentComponent {
|
|
|
2151
2243
|
});
|
|
2152
2244
|
super.ngOnInit();
|
|
2153
2245
|
}
|
|
2154
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2155
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2246
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnumRadiogroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2247
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: EnumRadiogroupComponent, isStandalone: false, selector: "kms-enum-radiogroup", inputs: { header: "header", optionsEnum: "optionsEnum", translationPrefix: "translationPrefix" }, providers: [
|
|
2156
2248
|
{
|
|
2157
2249
|
provide: NG_VALUE_ACCESSOR,
|
|
2158
2250
|
useExisting: forwardRef(() => EnumRadiogroupComponent),
|
|
2159
2251
|
multi: true,
|
|
2160
2252
|
},
|
|
2161
|
-
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <div>{{ header }}</div>\n <mat-radio-group formControlName=\"enumData\" [disabled]=\"disabled\" #child>\n @for (choice of optionValues; track choice) {\n <mat-radio-button\n [value]=\"choice\"\n [checked]=\"value === choice\"\n >{{ translationPrefix + '.' + choice | translate }}</mat-radio-button\n >\n }\n </mat-radio-group>\n </form>\n", dependencies: [{ kind: "directive", type: i1$
|
|
2253
|
+
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <div>{{ header }}</div>\n <mat-radio-group formControlName=\"enumData\" [disabled]=\"disabled\" #child>\n @for (choice of optionValues; track choice) {\n <mat-radio-button\n [value]=\"choice\"\n [checked]=\"value === choice\"\n >{{ translationPrefix + '.' + choice | translate }}</mat-radio-button\n >\n }\n </mat-radio-group>\n </form>\n", dependencies: [{ kind: "directive", type: i1$5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
2162
2254
|
}
|
|
2163
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2255
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: EnumRadiogroupComponent, decorators: [{
|
|
2164
2256
|
type: Component,
|
|
2165
2257
|
args: [{ standalone: false, selector: 'kms-enum-radiogroup', providers: [
|
|
2166
2258
|
{
|
|
@@ -2361,8 +2453,8 @@ class FileInputComponent {
|
|
|
2361
2453
|
const element = ev.target;
|
|
2362
2454
|
element.value = '';
|
|
2363
2455
|
}
|
|
2364
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2365
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2456
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileInputComponent, deps: [{ token: i0.ApplicationRef }, { token: i0.ChangeDetectorRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2457
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FileInputComponent, isStandalone: false, selector: "kms-file-input", inputs: { label: "label", previewImage: "previewImage", allowRemove: "allowRemove", previewImageText: "previewImageText", maxSizeBytes: "maxSizeBytes", resizePixels: "resizePixels", acceptedFileMimetypes: "acceptedFileMimetypes" }, outputs: { formDataChanged: "formDataChanged" }, providers: [
|
|
2366
2458
|
{
|
|
2367
2459
|
provide: NG_VALUE_ACCESSOR,
|
|
2368
2460
|
useExisting: forwardRef(() => FileInputComponent),
|
|
@@ -2373,9 +2465,9 @@ class FileInputComponent {
|
|
|
2373
2465
|
useExisting: forwardRef(() => FileInputComponent),
|
|
2374
2466
|
multi: true,
|
|
2375
2467
|
},
|
|
2376
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading = true\" class=\"fileInput\">\n @if (form.value.Filename && previewImage) {\n <div>\n @if (newImageLoading) {\n <div>\n {{ 'file-input.loading' | translate }}\n </div>\n }\n @if (!newImageLoading) {\n <div>\n <div class=\"\">\n <div class=\"\">\n @if (\n form.value.ImageLink &&\n form.value.ImageLink !== '' &&\n !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\n ) {\n <img\n [src]=\"form.value.ImageAsDataURL\"\n [src]=\"form.value.ImageLink\"\n style=\"height: 40px; width: fit-content\"\n />\n }\n @if (\n form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\n ) {\n <img\n [src]=\"form.value.ImageAsDataURL\"\n style=\"height: 40px; width: fit-content\"\n />\n }\n </div>\n <div class=\"\">{{ form.value.Filename }}</div>\n <div class=\"\">\n @if (allowRemove) {\n <div (click)=\"removeFromList()\">\n <kms-icon\n icon=\"trash\"\n [size]=\"IconSizePx.XS\"\n iconClass=\"color-black\"\n ></kms-icon>\n {{ 'file-input.remove' }}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n @if (!previewImage) {\n <div>\n <div class=\"\">{{ form.value.Filename }}</div>\n </div>\n }\n\n <button\n (click)=\"selectImageOverlay()\"\n class=\"button-primary-font-color\"\n mat-stroked-button\n >\n <span>{{ label }}</span>\n </button>\n <input\n type=\"file\"\n [accept]=\"acceptedFileMimetypes\"\n style=\"display: none\"\n #fileInput\n (click)=\"clearInputValue($event)\"\n (change)=\"selectImage($event)\"\n />\n\n <input type=\"hidden\" formControlName=\"ImageIdent\" />\n <input type=\"hidden\" formControlName=\"ImageLink\" />\n <input type=\"hidden\" formControlName=\"Filename\" />\n <input type=\"hidden\" formControlName=\"ImageAsDataURL\" />\n <input type=\"hidden\" formControlName=\"Text\" />\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i2$
|
|
2468
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\" (change)=\"newImageLoading = true\" class=\"fileInput\">\n @if (form.value.Filename && previewImage) {\n <div>\n @if (newImageLoading) {\n <div>\n {{ 'file-input.loading' | translate }}\n </div>\n }\n @if (!newImageLoading) {\n <div>\n <div class=\"\">\n <div class=\"\">\n @if (\n form.value.ImageLink &&\n form.value.ImageLink !== '' &&\n !(form.value.ImageAsDataURL && form.value.ImageAsDataURL !== '')\n ) {\n <img\n [src]=\"form.value.ImageAsDataURL\"\n [src]=\"form.value.ImageLink\"\n style=\"height: 40px; width: fit-content\"\n />\n }\n @if (\n form.value.ImageAsDataURL && form.value.ImageAsDataURL !== ''\n ) {\n <img\n [src]=\"form.value.ImageAsDataURL\"\n style=\"height: 40px; width: fit-content\"\n />\n }\n </div>\n <div class=\"\">{{ form.value.Filename }}</div>\n <div class=\"\">\n @if (allowRemove) {\n <div (click)=\"removeFromList()\">\n <kms-icon\n icon=\"trash\"\n [size]=\"IconSizePx.XS\"\n iconClass=\"color-black\"\n ></kms-icon>\n {{ 'file-input.remove' }}\n </div>\n }\n </div>\n </div>\n </div>\n }\n </div>\n }\n @if (!previewImage) {\n <div>\n <div class=\"\">{{ form.value.Filename }}</div>\n </div>\n }\n\n <button\n (click)=\"selectImageOverlay()\"\n class=\"button-primary-font-color\"\n mat-stroked-button\n >\n <span>{{ label }}</span>\n </button>\n <input\n type=\"file\"\n [accept]=\"acceptedFileMimetypes\"\n style=\"display: none\"\n #fileInput\n (click)=\"clearInputValue($event)\"\n (change)=\"selectImage($event)\"\n />\n\n <input type=\"hidden\" formControlName=\"ImageIdent\" />\n <input type=\"hidden\" formControlName=\"ImageLink\" />\n <input type=\"hidden\" formControlName=\"Filename\" />\n <input type=\"hidden\" formControlName=\"ImageAsDataURL\" />\n <input type=\"hidden\" formControlName=\"Text\" />\n</form>\n", styles: [""], dependencies: [{ kind: "component", type: i2$2.MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
2377
2469
|
}
|
|
2378
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2470
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FileInputComponent, decorators: [{
|
|
2379
2471
|
type: Component,
|
|
2380
2472
|
args: [{ standalone: false, selector: 'kms-file-input', providers: [
|
|
2381
2473
|
{
|
|
@@ -2448,8 +2540,8 @@ class FlyoutComponent {
|
|
|
2448
2540
|
setDropdownListHeight(contentHeight) {
|
|
2449
2541
|
this.targetHeight = `${contentHeight}px`;
|
|
2450
2542
|
}
|
|
2451
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2452
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2543
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FlyoutComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2544
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FlyoutComponent, isStandalone: false, selector: "kms-flyout", inputs: { icon: "icon", headerCssClass: "headerCssClass", bodyCssClass: "bodyCssClass", headerTitle: "headerTitle", headerText: "headerText", hasButtonForMore: "hasButtonForMore", moreText: "moreText", lessText: "lessText" }, viewQueries: [{ propertyName: "content", first: true, predicate: ["content"], descendants: true }, { propertyName: "flyoutHeader", first: true, predicate: ["flyoutHeader"], descendants: true }], ngImport: i0, template: "<div class=\"flyout\" [ngClass]=\"{ 'is-active': isDropdownOpened }\">\n <div\n class=\"flyout-header\"\n (click)=\"toggleDropdownHeader()\"\n [ngClass]=\"headerCssClass\"\n >\n <span [innerHtml]=\"headerTitle | kmsSafeHtml\"></span>\n <span [innerHtml]=\"headerText | kmsSafeHtml\"></span>\n\n <ng-content select=\"[header]\"></ng-content>\n\n @if (hasButtonForMore) {\n <div\n (click)=\"toggleDropdown()\"\n class=\"flyout-header-more\"\n >\n @if (!isDropdownOpened) {\n <span>\n {{ moreText }}\n <kms-icon [icon]=\"'chevron-down'\" [size]=\"16\"> </kms-icon>\n </span>\n }\n @if (isDropdownOpened) {\n <span>\n {{ lessText }}\n <kms-icon [icon]=\"'chevron-top'\" [size]=\"16\"> </kms-icon>\n </span>\n }\n </div>\n }\n </div>\n <div\n class=\"flyout-body\"\n [ngClass]=\"bodyCssClass\"\n tabindex=\"0\"\n [@dropdownAnimation]=\"{\n value: isDropdownOpened,\n params: { targetHeight: targetHeight, animationTime: '500' }\n }\"\n getMaxHeight=\"inner\"\n (sumOfHeight)=\"setDropdownListHeight($event)\"\n #flyoutHeader\n >\n @if (isDropdownOpened || !hasButtonForMore) {\n <div class=\"inner\" #content>\n <ng-content></ng-content>\n </div>\n }\n </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: GetMaxHeightDirective, selector: "[getMaxHeight]", inputs: ["getMaxHeight"], outputs: ["maxHeightChanged", "sumOfHeight"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: SafeHtmlPipe, name: "kmsSafeHtml" }], animations: [
|
|
2453
2545
|
trigger('dropdownAnimation', [
|
|
2454
2546
|
state('true', style({
|
|
2455
2547
|
height: '{{targetHeight}}',
|
|
@@ -2473,7 +2565,7 @@ class FlyoutComponent {
|
|
|
2473
2565
|
]),
|
|
2474
2566
|
] }); }
|
|
2475
2567
|
}
|
|
2476
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2568
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FlyoutComponent, decorators: [{
|
|
2477
2569
|
type: Component,
|
|
2478
2570
|
args: [{ standalone: false, selector: 'kms-flyout', animations: [
|
|
2479
2571
|
trigger('dropdownAnimation', [
|
|
@@ -2586,10 +2678,10 @@ class ImageSliderComponent {
|
|
|
2586
2678
|
this.updateSwipers();
|
|
2587
2679
|
}
|
|
2588
2680
|
}
|
|
2589
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2590
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2681
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageSliderComponent, deps: [{ token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2682
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: ImageSliderComponent, isStandalone: false, selector: "kms-image-slider", inputs: { slides: "slides", editMode: "editMode", imagesToSave: "imagesToSave" }, outputs: { deleteImageEvent: "deleteImageEvent", orderChanged: "orderChanged" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"image-slider-container\">\n <swiper-container\n class=\"swiper-main-view-container\"\n thumbs-swiper=\".swiper-carousel-container\"\n >\n @for (slide of slides; track slide) {\n <swiper-slide>\n <img [src]=\"slide\" loading=\"lazy\" />\n </swiper-slide>\n }\n </swiper-container>\n\n <swiper-container\n class=\"swiper-carousel-container\"\n thumbsSlider=\"\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"onOrderChanged($event)\"\n >\n @for (slide of slides; track slide; let index = $index) {\n <swiper-slide\n [class.swiper-slide-default]=\"index === 0 && editMode\"\n >\n @if (editMode) {\n <div>\n <button cdkDrag class=\"drag-button\" mat-menu-item></button>\n <button\n class=\"delete-button\"\n mat-menu-item\n (click)=\"deleteImage(index)\"\n >\n <kms-icon icon=\"trash\" [size]=\"15\"></kms-icon>\n </button>\n </div>\n }\n <img [src]=\"slide\" loading=\"lazy\" />\n @if (index === 0 && editMode) {\n <div class=\"swiper-slide-default-text\">\n {{ 'common.defaultImage' | translate }}\n </div>\n }\n </swiper-slide>\n }\n </swiper-container>\n</div>\n", dependencies: [{ kind: "directive", type: i1$8.CdkDropList, selector: "[cdkDropList], cdk-drop-list", inputs: ["cdkDropListConnectedTo", "cdkDropListData", "cdkDropListOrientation", "id", "cdkDropListLockAxis", "cdkDropListDisabled", "cdkDropListSortingDisabled", "cdkDropListEnterPredicate", "cdkDropListSortPredicate", "cdkDropListAutoScrollDisabled", "cdkDropListAutoScrollStep", "cdkDropListElementContainer", "cdkDropListHasAnchor"], outputs: ["cdkDropListDropped", "cdkDropListEntered", "cdkDropListExited", "cdkDropListSorted"], exportAs: ["cdkDropList"] }, { kind: "directive", type: i1$8.CdkDrag, selector: "[cdkDrag]", inputs: ["cdkDragData", "cdkDragLockAxis", "cdkDragRootElement", "cdkDragBoundary", "cdkDragStartDelay", "cdkDragFreeDragPosition", "cdkDragDisabled", "cdkDragConstrainPosition", "cdkDragPreviewClass", "cdkDragPreviewContainer", "cdkDragScale"], outputs: ["cdkDragStarted", "cdkDragReleased", "cdkDragEnded", "cdkDragEntered", "cdkDragExited", "cdkDragDropped", "cdkDragMoved"], exportAs: ["cdkDrag"] }, { kind: "component", type: i2$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
2591
2683
|
}
|
|
2592
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2684
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: ImageSliderComponent, decorators: [{
|
|
2593
2685
|
type: Component,
|
|
2594
2686
|
args: [{ standalone: false, selector: 'kms-image-slider', template: "<div class=\"image-slider-container\">\n <swiper-container\n class=\"swiper-main-view-container\"\n thumbs-swiper=\".swiper-carousel-container\"\n >\n @for (slide of slides; track slide) {\n <swiper-slide>\n <img [src]=\"slide\" loading=\"lazy\" />\n </swiper-slide>\n }\n </swiper-container>\n\n <swiper-container\n class=\"swiper-carousel-container\"\n thumbsSlider=\"\"\n cdkDropList\n cdkDropListOrientation=\"horizontal\"\n (cdkDropListDropped)=\"onOrderChanged($event)\"\n >\n @for (slide of slides; track slide; let index = $index) {\n <swiper-slide\n [class.swiper-slide-default]=\"index === 0 && editMode\"\n >\n @if (editMode) {\n <div>\n <button cdkDrag class=\"drag-button\" mat-menu-item></button>\n <button\n class=\"delete-button\"\n mat-menu-item\n (click)=\"deleteImage(index)\"\n >\n <kms-icon icon=\"trash\" [size]=\"15\"></kms-icon>\n </button>\n </div>\n }\n <img [src]=\"slide\" loading=\"lazy\" />\n @if (index === 0 && editMode) {\n <div class=\"swiper-slide-default-text\">\n {{ 'common.defaultImage' | translate }}\n </div>\n }\n </swiper-slide>\n }\n </swiper-container>\n</div>\n" }]
|
|
2595
2687
|
}], ctorParameters: () => [{ type: i0.ElementRef }], propDecorators: { slides: [{
|
|
@@ -2623,10 +2715,10 @@ class KMSAccordionItemComponent {
|
|
|
2623
2715
|
this.panelOpenState = false;
|
|
2624
2716
|
}
|
|
2625
2717
|
ngOnInit() { }
|
|
2626
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2627
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2718
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KMSAccordionItemComponent, deps: [{ token: i1$1.DomSanitizer }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2719
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: KMSAccordionItemComponent, isStandalone: false, selector: "kms-accordion-item", inputs: { showAsCard: "showAsCard", isSmall: "isSmall", expanded: "expanded", itemTitle: "itemTitle" }, ngImport: i0, template: "<mat-expansion-panel\n class=\"kms-accordion\"\n [ngClass]=\"{\n 'kms-accordion--flat': !showAsCard,\n 'kms-accordion--small': isSmall\n }\"\n (opened)=\"panelOpenState = true\"\n (closed)=\"panelOpenState = false\"\n [expanded]=\"expanded\"\n hideToggle=\"true\"\n >\n <mat-expansion-panel-header class=\"kms-accordion__header\">\n <mat-panel-title class=\"mat-subheading-2 kms-accordion__title\">\n <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n <ng-content select=\"[itemTitleElement]\"></ng-content>\n </mat-panel-title>\n <div class=\"kms-accordion__header-icon-wrapper\">\n @if (!panelOpenState) {\n <kms-icon\n icon=\"ic_plus\"\n [color]=\"Color.PRIMARY\"\n [size]=\"isSmall ? 16 : 22\"\n ></kms-icon>\n }\n @if (panelOpenState) {\n <kms-icon\n icon=\"ic_minus\"\n [color]=\"Color.PRIMARY\"\n [size]=\"isSmall ? 16 : 22\"\n ></kms-icon>\n }\n </div>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n</mat-expansion-panel>\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i3$3.MatExpansionPanel, selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i3$3.MatExpansionPanelHeader, selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i3$3.MatExpansionPanelTitle, selector: "mat-panel-title" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
2628
2720
|
}
|
|
2629
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2721
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KMSAccordionItemComponent, decorators: [{
|
|
2630
2722
|
type: Component,
|
|
2631
2723
|
args: [{ standalone: false, selector: 'kms-accordion-item', template: "<mat-expansion-panel\n class=\"kms-accordion\"\n [ngClass]=\"{\n 'kms-accordion--flat': !showAsCard,\n 'kms-accordion--small': isSmall\n }\"\n (opened)=\"panelOpenState = true\"\n (closed)=\"panelOpenState = false\"\n [expanded]=\"expanded\"\n hideToggle=\"true\"\n >\n <mat-expansion-panel-header class=\"kms-accordion__header\">\n <mat-panel-title class=\"mat-subheading-2 kms-accordion__title\">\n <div [innerHtml]=\"itemTitleTrustHtml\"></div>\n <ng-content select=\"[itemTitleElement]\"></ng-content>\n </mat-panel-title>\n <div class=\"kms-accordion__header-icon-wrapper\">\n @if (!panelOpenState) {\n <kms-icon\n icon=\"ic_plus\"\n [color]=\"Color.PRIMARY\"\n [size]=\"isSmall ? 16 : 22\"\n ></kms-icon>\n }\n @if (panelOpenState) {\n <kms-icon\n icon=\"ic_minus\"\n [color]=\"Color.PRIMARY\"\n [size]=\"isSmall ? 16 : 22\"\n ></kms-icon>\n }\n </div>\n </mat-expansion-panel-header>\n <ng-content></ng-content>\n</mat-expansion-panel>\n" }]
|
|
2632
2724
|
}], ctorParameters: () => [{ type: i1$1.DomSanitizer }], propDecorators: { showAsCard: [{
|
|
@@ -2646,6 +2738,7 @@ class NumericInputComponent {
|
|
|
2646
2738
|
constructor() {
|
|
2647
2739
|
this.disabled = model(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
2648
2740
|
this.min = input(0, ...(ngDevMode ? [{ debugName: "min" }] : []));
|
|
2741
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
2649
2742
|
this.numericValue = signal(0, ...(ngDevMode ? [{ debugName: "numericValue" }] : []));
|
|
2650
2743
|
this.touched = signal(false, ...(ngDevMode ? [{ debugName: "touched" }] : []));
|
|
2651
2744
|
this.Color = Color;
|
|
@@ -2695,16 +2788,16 @@ class NumericInputComponent {
|
|
|
2695
2788
|
registerOnTouched(onTouched) {
|
|
2696
2789
|
this.onTouched = onTouched;
|
|
2697
2790
|
}
|
|
2698
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2699
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.
|
|
2791
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumericInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2792
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: NumericInputComponent, isStandalone: false, selector: "kms-numeric-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, min: { classPropertyName: "min", publicName: "min", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { disabled: "disabledChange" }, providers: [
|
|
2700
2793
|
{
|
|
2701
2794
|
provide: NG_VALUE_ACCESSOR,
|
|
2702
2795
|
useExisting: forwardRef(() => NumericInputComponent),
|
|
2703
2796
|
multi: true,
|
|
2704
2797
|
},
|
|
2705
|
-
], ngImport: i0, template: "<div class=\"numeric-input\" [ngClass]=\"{ disabled: disabled() }\">\n <kms-icon\n id=\"numeric-input-minus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_minus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"minus()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && minus()\"\n >\n </kms-icon>\n <strong>{{ numericValue() }}</strong>\n <kms-icon\n id=\"numeric-input-plus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_plus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"add()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && add()\"\n >\n </kms-icon>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
2798
|
+
], ngImport: i0, template: "@if (label()) {\n <mat-label>{{ label() }}</mat-label>\n}\n<div class=\"numeric-input\" [ngClass]=\"{ disabled: disabled() }\">\n <kms-icon\n id=\"numeric-input-minus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_minus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"minus()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && minus()\"\n >\n </kms-icon>\n <strong>{{ numericValue() }}</strong>\n <kms-icon\n id=\"numeric-input-plus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_plus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"add()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && add()\"\n >\n </kms-icon>\n</div>\n", dependencies: [{ kind: "directive", type: i1.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
2706
2799
|
}
|
|
2707
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2800
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: NumericInputComponent, decorators: [{
|
|
2708
2801
|
type: Component,
|
|
2709
2802
|
args: [{ standalone: false, selector: 'kms-numeric-input', providers: [
|
|
2710
2803
|
{
|
|
@@ -2712,8 +2805,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
2712
2805
|
useExisting: forwardRef(() => NumericInputComponent),
|
|
2713
2806
|
multi: true,
|
|
2714
2807
|
},
|
|
2715
|
-
], template: "<div class=\"numeric-input\" [ngClass]=\"{ disabled: disabled() }\">\n <kms-icon\n id=\"numeric-input-minus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_minus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"minus()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && minus()\"\n >\n </kms-icon>\n <strong>{{ numericValue() }}</strong>\n <kms-icon\n id=\"numeric-input-plus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_plus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"add()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && add()\"\n >\n </kms-icon>\n</div>\n" }]
|
|
2716
|
-
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }] } });
|
|
2808
|
+
], template: "@if (label()) {\n <mat-label>{{ label() }}</mat-label>\n}\n<div class=\"numeric-input\" [ngClass]=\"{ disabled: disabled() }\">\n <kms-icon\n id=\"numeric-input-minus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_minus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"minus()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && minus()\"\n >\n </kms-icon>\n <strong>{{ numericValue() }}</strong>\n <kms-icon\n id=\"numeric-input-plus\"\n class=\"numeric-input__icon\"\n aria-hidden=\"true\"\n icon=\"ic_plus\"\n [color]=\"disabled() ? Color.DISABLED : Color.SECONDARY\"\n [size]=\"10\"\n (click)=\"add()\"\n (keyup)=\"($event.key === 'Enter' || $event.key === 'Space') && add()\"\n >\n </kms-icon>\n</div>\n" }]
|
|
2809
|
+
}], ctorParameters: () => [], propDecorators: { disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }, { type: i0.Output, args: ["disabledChange"] }], min: [{ type: i0.Input, args: [{ isSignal: true, alias: "min", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }] } });
|
|
2717
2810
|
|
|
2718
2811
|
/**
|
|
2719
2812
|
* @copyright KMS GmbH
|
|
@@ -2817,8 +2910,8 @@ class PasswordComponent {
|
|
|
2817
2910
|
}
|
|
2818
2911
|
return isEmpty(result) ? null : result;
|
|
2819
2912
|
}
|
|
2820
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2821
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2913
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PasswordComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2914
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: PasswordComponent, isStandalone: false, selector: "kms-password", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, withStrength: { classPropertyName: "withStrength", publicName: "withStrength", isSignal: true, isRequired: false, transformFunction: null }, lowerCaseCriteriaMsg: { classPropertyName: "lowerCaseCriteriaMsg", publicName: "lowerCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, upperCaseCriteriaMsg: { classPropertyName: "upperCaseCriteriaMsg", publicName: "upperCaseCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, numberCriteriaMsg: { classPropertyName: "numberCriteriaMsg", publicName: "numberCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, specialCharCriteriaMsg: { classPropertyName: "specialCharCriteriaMsg", publicName: "specialCharCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null }, minCharsCriteriaMsg: { classPropertyName: "minCharsCriteriaMsg", publicName: "minCharsCriteriaMsg", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { change: "change", submit: "submit" }, providers: [
|
|
2822
2915
|
{
|
|
2823
2916
|
provide: NG_VALUE_ACCESSOR,
|
|
2824
2917
|
useExisting: forwardRef(() => PasswordComponent),
|
|
@@ -2829,9 +2922,9 @@ class PasswordComponent {
|
|
|
2829
2922
|
useExisting: forwardRef(() => PasswordComponent),
|
|
2830
2923
|
multi: true,
|
|
2831
2924
|
},
|
|
2832
|
-
], ngImport: i0, template: "<mat-form-field class=\"kms-password__form-field\">\n <mat-label>{{ label() }}</mat-label>\n <input\n [type]=\"showPassword() ? 'text' : 'password'\"\n matInput\n (input)=\"valueChanged($event)\"\n [disabled]=\"disabled()\"\n (keypress)=\"keypress($event)\"\n #password=\"matInput\"\n />\n @if (showPassword()) {\n <kms-icon\n class=\"kms-time-input__suffix\"\n matSuffix\n icon=\"ic_eye\"\n [size]=\"IconSizePx.XS\"\n (click)=\"showPassword.set(false)\"\n (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n ></kms-icon>\n } @else {\n <kms-icon\n class=\"kms-time-input__suffix\"\n matSuffix\n icon=\"ic_eye_active\"\n [size]=\"IconSizePx.XS\"\n (click)=\"showPassword.set(true)\"\n (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n ></kms-icon>\n }\n</mat-form-field>\n\n@if ((eyeIconIsBeingPressed() || password.focused) && withStrength()) {\n<mat-card appearance=\"outlined\">\n <mat-card-content class=\"kms-password__card\">\n <mat-list role=\"list\">\n @for (validation of validations(); track validation) {\n <mat-list-item role=\"listitem\">\n <div class=\"kms-password__strength-item\">\n @if(validation.isValid()) {\n <kms-icon\n [size]=\"IconSizePx.XS\"\n icon=\"ic_check\"\n iconClass=\"color-success\"\n ></kms-icon>\n }@else {\n <kms-icon\n [size]=\"IconSizePx.XS\"\n icon=\"ic_abbrechen\"\n iconClass=\"color-warn\"\n ></kms-icon>\n } {{ validation.text() }}\n </div></mat-list-item\n >\n }\n </mat-list>\n </mat-card-content>\n</mat-card>\n}\n", dependencies: [{ kind: "component", type:
|
|
2925
|
+
], ngImport: i0, template: "<mat-form-field class=\"kms-password__form-field\">\n <mat-label>{{ label() }}</mat-label>\n <input\n [type]=\"showPassword() ? 'text' : 'password'\"\n matInput\n (input)=\"valueChanged($event)\"\n [disabled]=\"disabled()\"\n (keypress)=\"keypress($event)\"\n #password=\"matInput\"\n />\n @if (showPassword()) {\n <kms-icon\n class=\"kms-time-input__suffix\"\n matSuffix\n icon=\"ic_eye\"\n [size]=\"IconSizePx.XS\"\n (click)=\"showPassword.set(false)\"\n (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n ></kms-icon>\n } @else {\n <kms-icon\n class=\"kms-time-input__suffix\"\n matSuffix\n icon=\"ic_eye_active\"\n [size]=\"IconSizePx.XS\"\n (click)=\"showPassword.set(true)\"\n (mousedown)=\"eyeIconIsBeingPressed.set(true)\"\n (mouseup)=\"eyeIconIsBeingPressed.set(false)\"\n ></kms-icon>\n }\n</mat-form-field>\n\n@if ((eyeIconIsBeingPressed() || password.focused) && withStrength()) {\n<mat-card appearance=\"outlined\">\n <mat-card-content class=\"kms-password__card\">\n <mat-list role=\"list\">\n @for (validation of validations(); track validation) {\n <mat-list-item role=\"listitem\">\n <div class=\"kms-password__strength-item\">\n @if(validation.isValid()) {\n <kms-icon\n [size]=\"IconSizePx.XS\"\n icon=\"ic_check\"\n iconClass=\"color-success\"\n ></kms-icon>\n }@else {\n <kms-icon\n [size]=\"IconSizePx.XS\"\n icon=\"ic_abbrechen\"\n iconClass=\"color-warn\"\n ></kms-icon>\n } {{ validation.text() }}\n </div></mat-list-item\n >\n }\n </mat-list>\n </mat-card-content>\n</mat-card>\n}\n", dependencies: [{ kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3$4.MatList, selector: "mat-list", exportAs: ["matList"] }, { kind: "component", type: i3$4.MatListItem, selector: "mat-list-item, a[mat-list-item], button[mat-list-item]", inputs: ["activated"], exportAs: ["matListItem"] }, { kind: "component", type: i4$2.MatCard, selector: "mat-card", inputs: ["appearance"], exportAs: ["matCard"] }, { kind: "directive", type: i4$2.MatCardContent, selector: "mat-card-content" }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
2833
2926
|
}
|
|
2834
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2927
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: PasswordComponent, decorators: [{
|
|
2835
2928
|
type: Component,
|
|
2836
2929
|
args: [{ standalone: false, selector: 'kms-password', providers: [
|
|
2837
2930
|
{
|
|
@@ -2878,16 +2971,16 @@ class RadioGroupComponent {
|
|
|
2878
2971
|
this.onChange(value);
|
|
2879
2972
|
this.onTouched();
|
|
2880
2973
|
}
|
|
2881
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2882
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
2974
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioGroupComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
2975
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: RadioGroupComponent, isStandalone: false, selector: "kms-radiogroup", inputs: { options: "options", disabled: "disabled", value: "value", infoText: "infoText", color: "color", size: "size", direction: "direction" }, providers: [
|
|
2883
2976
|
{
|
|
2884
2977
|
provide: NG_VALUE_ACCESSOR,
|
|
2885
2978
|
useExisting: forwardRef(() => RadioGroupComponent),
|
|
2886
2979
|
multi: true,
|
|
2887
2980
|
},
|
|
2888
|
-
], ngImport: i0, template: "@if (options && options.length > 0) {\n<mat-radio-group\n class=\"radiogroup\"\n [value]=\"value\"\n (change)=\"handleChange($event.value)\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{ 'flex-direction': direction }\"\n>\n @if (infoText) {\n <kms-tooltip-icon\n [class.margin-left]=\"direction == 'column'\"\n [tooltipText]=\"infoText\"\n ></kms-tooltip-icon>\n } @for (option of options; track $index) {\n <div class=\"radiobutton-container\">\n <kms-radiobutton\n [label]=\"option.Text\"\n [value]=\"option.Value\"\n [checked]=\"value === option.Value\"\n [disabled]=\"disabled || option.Disabled\"\n [size]=\"size\"\n [color]=\"color\"\n ></kms-radiobutton>\n @if (option.InfoText) {\n <kms-tooltip-icon [tooltipText]=\"option.InfoText\"></kms-tooltip-icon>\n }\n </div>\n }\n</mat-radio-group>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$
|
|
2981
|
+
], ngImport: i0, template: "@if (options && options.length > 0) {\n<mat-radio-group\n class=\"radiogroup\"\n [value]=\"value\"\n (change)=\"handleChange($event.value)\"\n [disabled]=\"disabled\"\n [ngStyle]=\"{ 'flex-direction': direction }\"\n>\n @if (infoText) {\n <kms-tooltip-icon\n [class.margin-left]=\"direction == 'column'\"\n [tooltipText]=\"infoText\"\n ></kms-tooltip-icon>\n } @for (option of options; track $index) {\n <div class=\"radiobutton-container\">\n <kms-radiobutton\n [label]=\"option.Text\"\n [value]=\"option.Value\"\n [checked]=\"value === option.Value\"\n [disabled]=\"disabled || option.Disabled\"\n [size]=\"size\"\n [color]=\"color\"\n ></kms-radiobutton>\n @if (option.InfoText) {\n <kms-tooltip-icon [tooltipText]=\"option.InfoText\"></kms-tooltip-icon>\n }\n </div>\n }\n</mat-radio-group>\n}\n", styles: [""], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: i1$5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: RadioButtonComponent, selector: "kms-radiobutton", inputs: ["label", "checked", "disabled", "value", "size", "color"], outputs: ["onChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }] }); }
|
|
2889
2982
|
}
|
|
2890
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
2983
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: RadioGroupComponent, decorators: [{
|
|
2891
2984
|
type: Component,
|
|
2892
2985
|
args: [{ standalone: false, selector: 'kms-radiogroup', providers: [
|
|
2893
2986
|
{
|
|
@@ -2941,16 +3034,16 @@ class SalutationDropdownComponent extends FormControlParentComponent {
|
|
|
2941
3034
|
});
|
|
2942
3035
|
super.ngOnInit();
|
|
2943
3036
|
}
|
|
2944
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
2945
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
3037
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SalutationDropdownComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3038
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SalutationDropdownComponent, isStandalone: false, selector: "kms-salutation-dropdown", inputs: { placeholder: "placeholder" }, providers: [
|
|
2946
3039
|
{
|
|
2947
3040
|
provide: NG_VALUE_ACCESSOR,
|
|
2948
3041
|
useExisting: forwardRef(() => SalutationDropdownComponent),
|
|
2949
3042
|
multi: true,
|
|
2950
3043
|
},
|
|
2951
|
-
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n <mat-form-field class=\"col\">\n <mat-select\n disableOptionCentering\n formControlName=\"salut\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n #child\n >\n <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{\n 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n | translate\n }}</mat-option>\n <mat-option [value]=\"SalutationEnum.MALE\">{{\n 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n | translate\n }}</mat-option>\n <mat-option [value]=\"SalutationEnum.FEMALE\">{{\n 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n | translate\n }}</mat-option>\n </mat-select>\n </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type:
|
|
3044
|
+
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\" class=\"row\">\n <mat-form-field class=\"col\">\n <mat-select\n disableOptionCentering\n formControlName=\"salut\"\n [placeholder]=\"placeholder\"\n [value]=\"value\"\n #child\n >\n <mat-option [value]=\"SalutationEnum.NOT_SPECIFIED\">{{\n 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n | translate\n }}</mat-option>\n <mat-option [value]=\"SalutationEnum.MALE\">{{\n 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n | translate\n }}</mat-option>\n <mat-option [value]=\"SalutationEnum.FEMALE\">{{\n 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n | translate\n }}</mat-option>\n </mat-select>\n </mat-form-field>\n</form>\n", dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "component", type: i3.MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
2952
3045
|
}
|
|
2953
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3046
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SalutationDropdownComponent, decorators: [{
|
|
2954
3047
|
type: Component,
|
|
2955
3048
|
args: [{ standalone: false, selector: 'kms-salutation-dropdown', providers: [
|
|
2956
3049
|
{
|
|
@@ -3031,16 +3124,16 @@ class SalutationRadiogroupComponent extends FormControlParentComponent {
|
|
|
3031
3124
|
});
|
|
3032
3125
|
super.ngOnInit();
|
|
3033
3126
|
}
|
|
3034
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3035
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
3127
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SalutationRadiogroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3128
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: SalutationRadiogroupComponent, isStandalone: false, selector: "kms-salutation-radiogroup", providers: [
|
|
3036
3129
|
{
|
|
3037
3130
|
provide: NG_VALUE_ACCESSOR,
|
|
3038
3131
|
useExisting: forwardRef(() => SalutationRadiogroupComponent),
|
|
3039
3132
|
multi: true,
|
|
3040
3133
|
},
|
|
3041
|
-
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-radio-group formControlName=\"salut\" [disabled]=\"disabled\" #radioGroup>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.NOT_SPECIFIED\"\n [checked]=\"value === SalutationEnum.NOT_SPECIFIED\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.MALE\"\n [checked]=\"value === SalutationEnum.MALE\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.FEMALE\"\n [checked]=\"value === SalutationEnum.FEMALE\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i1$
|
|
3134
|
+
], usesInheritance: true, ngImport: i0, template: "<form [formGroup]=\"form\">\n <mat-radio-group formControlName=\"salut\" [disabled]=\"disabled\" #radioGroup>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.NOT_SPECIFIED\"\n [checked]=\"value === SalutationEnum.NOT_SPECIFIED\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.MALE\"\n [checked]=\"value === SalutationEnum.MALE\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.FEMALE\"\n [checked]=\"value === SalutationEnum.FEMALE\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i1$5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "pipe", type: i4$1.TranslatePipe, name: "translate" }] }); }
|
|
3042
3135
|
}
|
|
3043
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3136
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: SalutationRadiogroupComponent, decorators: [{
|
|
3044
3137
|
type: Component,
|
|
3045
3138
|
args: [{ standalone: false, selector: 'kms-salutation-radiogroup', providers: [
|
|
3046
3139
|
{
|
|
@@ -3051,6 +3144,85 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3051
3144
|
], template: "<form [formGroup]=\"form\">\n <mat-radio-group formControlName=\"salut\" [disabled]=\"disabled\" #radioGroup>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.NOT_SPECIFIED\"\n [checked]=\"value === SalutationEnum.NOT_SPECIFIED\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[0]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.MALE\"\n [checked]=\"value === SalutationEnum.MALE\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[1]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n <mat-radio-button\n color=\"primary\"\n [value]=\"SalutationEnum.FEMALE\"\n [checked]=\"value === SalutationEnum.FEMALE\"\n >\n {{\n 'general.salutation.' + Object.keys(SalutationEnum)[2]?.toLowerCase()\n | translate\n }}\n </mat-radio-button>\n </mat-radio-group>\n</form>\n" }]
|
|
3052
3145
|
}], ctorParameters: () => [{ type: i0.Renderer2 }] });
|
|
3053
3146
|
|
|
3147
|
+
let nextId = 0;
|
|
3148
|
+
class TextInputComponent {
|
|
3149
|
+
constructor() {
|
|
3150
|
+
this.valueChange = output();
|
|
3151
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3152
|
+
this.label = input('', ...(ngDevMode ? [{ debugName: "label" }] : []));
|
|
3153
|
+
this.placeholder = input('', ...(ngDevMode ? [{ debugName: "placeholder" }] : []));
|
|
3154
|
+
this.type = input('text', ...(ngDevMode ? [{ debugName: "type" }] : []));
|
|
3155
|
+
this.required = input(false, ...(ngDevMode ? [{ debugName: "required" }] : []));
|
|
3156
|
+
this.hint = input('', ...(ngDevMode ? [{ debugName: "hint" }] : []));
|
|
3157
|
+
this.errorMessage = input('', ...(ngDevMode ? [{ debugName: "errorMessage" }] : []));
|
|
3158
|
+
this.autocomplete = input('', ...(ngDevMode ? [{ debugName: "autocomplete" }] : []));
|
|
3159
|
+
this.prefix = input('', ...(ngDevMode ? [{ debugName: "prefix" }] : []));
|
|
3160
|
+
this.suffix = input('', ...(ngDevMode ? [{ debugName: "suffix" }] : []));
|
|
3161
|
+
this.prefixIcon = input('', ...(ngDevMode ? [{ debugName: "prefixIcon" }] : []));
|
|
3162
|
+
this.suffixIcon = input('', ...(ngDevMode ? [{ debugName: "suffixIcon" }] : []));
|
|
3163
|
+
this.IconSizePx = IconSizePx;
|
|
3164
|
+
this.value = signal('', ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
3165
|
+
this.innerControl = new FormControl('');
|
|
3166
|
+
this.disabledByForm = signal(false, ...(ngDevMode ? [{ debugName: "disabledByForm" }] : []));
|
|
3167
|
+
this.isDisabled = computed(() => this.disabled() || this.disabledByForm(), ...(ngDevMode ? [{ debugName: "isDisabled" }] : []));
|
|
3168
|
+
this.disabledEffect = effect(() => {
|
|
3169
|
+
if (this.isDisabled()) {
|
|
3170
|
+
this.innerControl.disable({ emitEvent: false });
|
|
3171
|
+
}
|
|
3172
|
+
else {
|
|
3173
|
+
this.innerControl.enable({ emitEvent: false });
|
|
3174
|
+
}
|
|
3175
|
+
}, ...(ngDevMode ? [{ debugName: "disabledEffect" }] : []));
|
|
3176
|
+
this.inputId = `kms-text-input-${nextId++}`;
|
|
3177
|
+
this.hintId = `${this.inputId}-hint`;
|
|
3178
|
+
this.errorId = `${this.inputId}-error`;
|
|
3179
|
+
this.errorStateMatcher = {
|
|
3180
|
+
isErrorState: () => !!this.errorMessage(),
|
|
3181
|
+
};
|
|
3182
|
+
this.onChange = () => { };
|
|
3183
|
+
this.onTouched = () => { };
|
|
3184
|
+
}
|
|
3185
|
+
valueChanged(event) {
|
|
3186
|
+
const { value } = event.target;
|
|
3187
|
+
this.value.set(value);
|
|
3188
|
+
this.innerControl.setValue(value, { emitEvent: false });
|
|
3189
|
+
this.onChange(value);
|
|
3190
|
+
this.valueChange.emit(value);
|
|
3191
|
+
}
|
|
3192
|
+
writeValue(value) {
|
|
3193
|
+
const val = value ?? '';
|
|
3194
|
+
this.value.set(val);
|
|
3195
|
+
this.innerControl.setValue(val, { emitEvent: false });
|
|
3196
|
+
}
|
|
3197
|
+
registerOnChange(fn) {
|
|
3198
|
+
this.onChange = fn;
|
|
3199
|
+
}
|
|
3200
|
+
registerOnTouched(fn) {
|
|
3201
|
+
this.onTouched = fn;
|
|
3202
|
+
}
|
|
3203
|
+
setDisabledState(isDisabled) {
|
|
3204
|
+
this.disabledByForm.set(isDisabled);
|
|
3205
|
+
}
|
|
3206
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3207
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TextInputComponent, isStandalone: false, selector: "kms-text-input", inputs: { disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, placeholder: { classPropertyName: "placeholder", publicName: "placeholder", isSignal: true, isRequired: false, transformFunction: null }, type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, required: { classPropertyName: "required", publicName: "required", isSignal: true, isRequired: false, transformFunction: null }, hint: { classPropertyName: "hint", publicName: "hint", isSignal: true, isRequired: false, transformFunction: null }, errorMessage: { classPropertyName: "errorMessage", publicName: "errorMessage", isSignal: true, isRequired: false, transformFunction: null }, autocomplete: { classPropertyName: "autocomplete", publicName: "autocomplete", isSignal: true, isRequired: false, transformFunction: null }, prefix: { classPropertyName: "prefix", publicName: "prefix", isSignal: true, isRequired: false, transformFunction: null }, suffix: { classPropertyName: "suffix", publicName: "suffix", isSignal: true, isRequired: false, transformFunction: null }, prefixIcon: { classPropertyName: "prefixIcon", publicName: "prefixIcon", isSignal: true, isRequired: false, transformFunction: null }, suffixIcon: { classPropertyName: "suffixIcon", publicName: "suffixIcon", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { valueChange: "valueChange" }, providers: [
|
|
3208
|
+
{
|
|
3209
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3210
|
+
useExisting: forwardRef(() => TextInputComponent),
|
|
3211
|
+
multi: true,
|
|
3212
|
+
},
|
|
3213
|
+
], ngImport: i0, template: "<mat-form-field class=\"kms-text-input__form-field\">\n <mat-label>{{ label() }}</mat-label>\n @if (prefixIcon()) {\n <kms-icon\n class=\"kms-text-input__prefix\"\n matIconPrefix\n [icon]=\"prefixIcon()\"\n [size]=\"IconSizePx.XS\"\n ></kms-icon>\n } @else if (prefix()) {\n <span matTextPrefix>{{ prefix() }} </span>\n }\n <input\n [id]=\"inputId\"\n [type]=\"type()\"\n matInput\n [formControl]=\"innerControl\"\n (input)=\"valueChanged($event)\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [attr.autocomplete]=\"autocomplete() || null\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"\n (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n \"\n (blur)=\"onTouched()\"\n />\n @if (suffixIcon()) {\n <kms-icon\n class=\"kms-text-input__suffix\"\n matIconSuffix\n [icon]=\"suffixIcon()\"\n [size]=\"IconSizePx.XS\"\n ></kms-icon>\n } @else if (suffix()) {\n <span matTextSuffix> {{ suffix() }}</span>\n } @if (hint()) {\n <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n }\n <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3214
|
+
}
|
|
3215
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TextInputComponent, decorators: [{
|
|
3216
|
+
type: Component,
|
|
3217
|
+
args: [{ standalone: false, selector: 'kms-text-input', changeDetection: ChangeDetectionStrategy.OnPush, providers: [
|
|
3218
|
+
{
|
|
3219
|
+
provide: NG_VALUE_ACCESSOR,
|
|
3220
|
+
useExisting: forwardRef(() => TextInputComponent),
|
|
3221
|
+
multi: true,
|
|
3222
|
+
},
|
|
3223
|
+
], template: "<mat-form-field class=\"kms-text-input__form-field\">\n <mat-label>{{ label() }}</mat-label>\n @if (prefixIcon()) {\n <kms-icon\n class=\"kms-text-input__prefix\"\n matIconPrefix\n [icon]=\"prefixIcon()\"\n [size]=\"IconSizePx.XS\"\n ></kms-icon>\n } @else if (prefix()) {\n <span matTextPrefix>{{ prefix() }} </span>\n }\n <input\n [id]=\"inputId\"\n [type]=\"type()\"\n matInput\n [formControl]=\"innerControl\"\n (input)=\"valueChanged($event)\"\n [placeholder]=\"placeholder()\"\n [required]=\"required()\"\n [attr.autocomplete]=\"autocomplete() || null\"\n [errorStateMatcher]=\"errorStateMatcher\"\n [attr.aria-required]=\"required()\"\n [attr.aria-invalid]=\"errorMessage() ? true : null\"\n [attr.aria-describedby]=\"\n (hint() ? hintId : '') + (errorMessage() ? ' ' + errorId : '') || null\n \"\n (blur)=\"onTouched()\"\n />\n @if (suffixIcon()) {\n <kms-icon\n class=\"kms-text-input__suffix\"\n matIconSuffix\n [icon]=\"suffixIcon()\"\n [size]=\"IconSizePx.XS\"\n ></kms-icon>\n } @else if (suffix()) {\n <span matTextSuffix> {{ suffix() }}</span>\n } @if (hint()) {\n <mat-hint [id]=\"hintId\">{{ hint() }}</mat-hint>\n }\n <mat-error [id]=\"errorId\" role=\"alert\">{{ errorMessage() }}</mat-error>\n</mat-form-field>\n" }]
|
|
3224
|
+
}], propDecorators: { valueChange: [{ type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], placeholder: [{ type: i0.Input, args: [{ isSignal: true, alias: "placeholder", required: false }] }], type: [{ type: i0.Input, args: [{ isSignal: true, alias: "type", required: false }] }], required: [{ type: i0.Input, args: [{ isSignal: true, alias: "required", required: false }] }], hint: [{ type: i0.Input, args: [{ isSignal: true, alias: "hint", required: false }] }], errorMessage: [{ type: i0.Input, args: [{ isSignal: true, alias: "errorMessage", required: false }] }], autocomplete: [{ type: i0.Input, args: [{ isSignal: true, alias: "autocomplete", required: false }] }], prefix: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefix", required: false }] }], suffix: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffix", required: false }] }], prefixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "prefixIcon", required: false }] }], suffixIcon: [{ type: i0.Input, args: [{ isSignal: true, alias: "suffixIcon", required: false }] }] } });
|
|
3225
|
+
|
|
3054
3226
|
class TimeInputComponent {
|
|
3055
3227
|
constructor() {
|
|
3056
3228
|
this.label = '';
|
|
@@ -3119,8 +3291,8 @@ class TimeInputComponent {
|
|
|
3119
3291
|
invalid: true,
|
|
3120
3292
|
};
|
|
3121
3293
|
}
|
|
3122
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3123
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.
|
|
3294
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeInputComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3295
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TimeInputComponent, isStandalone: false, selector: "kms-time-input", inputs: { label: "label", value: "value", interval: "interval", allowEmpty: "allowEmpty" }, providers: [
|
|
3124
3296
|
{
|
|
3125
3297
|
provide: NG_VALUE_ACCESSOR,
|
|
3126
3298
|
useExisting: forwardRef(() => TimeInputComponent),
|
|
@@ -3131,9 +3303,9 @@ class TimeInputComponent {
|
|
|
3131
3303
|
useExisting: TimeInputComponent,
|
|
3132
3304
|
multi: true,
|
|
3133
3305
|
},
|
|
3134
|
-
], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"kms-time-input\">\n <mat-label>{{ label }}</mat-label>\n <input\n type=\"text\"\n aria-label=\"time\"\n matInput\n kmsTime\n [matAutocomplete]=\"auto\"\n [value]=\"_value()\"\n (input)=\"inputValueChanged($event)\"\n />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"valueChanged($event.option.value)\"\n (closed)=\"autocompleteClosed()\"\n >\n @for (option of filteredOptions(); track option) {\n <mat-option [value]=\"option\">\n {{ option }}\n </mat-option>\n }\n </mat-autocomplete>\n <kms-icon\n class=\"kms-time-input__suffix\"\n matSuffix\n icon=\"clock\"\n [size]=\"IconSizePx.XS\"\n ></kms-icon>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "component", type:
|
|
3306
|
+
], usesOnChanges: true, ngImport: i0, template: "<mat-form-field class=\"kms-time-input\">\n <mat-label>{{ label }}</mat-label>\n <input\n type=\"text\"\n aria-label=\"time\"\n matInput\n kmsTime\n [matAutocomplete]=\"auto\"\n [value]=\"_value()\"\n (input)=\"inputValueChanged($event)\"\n />\n <mat-autocomplete\n #auto=\"matAutocomplete\"\n (optionSelected)=\"valueChanged($event.option.value)\"\n (closed)=\"autocompleteClosed()\"\n >\n @for (option of filteredOptions(); track option) {\n <mat-option [value]=\"option\">\n {{ option }}\n </mat-option>\n }\n </mat-autocomplete>\n <kms-icon\n class=\"kms-time-input__suffix\"\n matSuffix\n icon=\"clock\"\n [size]=\"IconSizePx.XS\"\n ></kms-icon>\n</mat-form-field>\n", styles: [""], dependencies: [{ kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: TimeDirective, selector: "[kmsTime]" }, { kind: "component", type: i5$1.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: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }] }); }
|
|
3135
3307
|
}
|
|
3136
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3308
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimeInputComponent, decorators: [{
|
|
3137
3309
|
type: Component,
|
|
3138
3310
|
args: [{ standalone: false, selector: 'kms-time-input', providers: [
|
|
3139
3311
|
{
|
|
@@ -3202,16 +3374,16 @@ class YesNoRadiogroupComponent {
|
|
|
3202
3374
|
this.onChange(value.yesno);
|
|
3203
3375
|
});
|
|
3204
3376
|
}
|
|
3205
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3206
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.
|
|
3377
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: YesNoRadiogroupComponent, deps: [{ token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3378
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.16", type: YesNoRadiogroupComponent, isStandalone: false, selector: "kms-yesno-radiogroup", inputs: { header: "header", disabled: "disabled", textYes: "textYes", textNo: "textNo" }, providers: [
|
|
3207
3379
|
{
|
|
3208
3380
|
provide: NG_VALUE_ACCESSOR,
|
|
3209
3381
|
useExisting: forwardRef(() => YesNoRadiogroupComponent),
|
|
3210
3382
|
multi: true,
|
|
3211
3383
|
},
|
|
3212
|
-
], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n <div>{{ header }}</div>\n <mat-radio-group formControlName=\"yesno\" [disabled]=\"disabled\" #child>\n <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\">\n {{ textYes }}</mat-radio-button\n >\n <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\">\n {{ textNo }}</mat-radio-button\n >\n </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i1$
|
|
3384
|
+
], viewQueries: [{ propertyName: "child", first: true, predicate: ["child"], descendants: true }], ngImport: i0, template: "<form [formGroup]=\"form\">\n <div>{{ header }}</div>\n <mat-radio-group formControlName=\"yesno\" [disabled]=\"disabled\" #child>\n <mat-radio-button [value]=\"true\" [checked]=\"internalValue === true\">\n {{ textYes }}</mat-radio-button\n >\n <mat-radio-button [value]=\"false\" [checked]=\"internalValue === false\">\n {{ textNo }}</mat-radio-button\n >\n </mat-radio-group>\n</form>\n", dependencies: [{ kind: "directive", type: i1$5.MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: i1$5.MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }] }); }
|
|
3213
3385
|
}
|
|
3214
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
3386
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: YesNoRadiogroupComponent, decorators: [{
|
|
3215
3387
|
type: Component,
|
|
3216
3388
|
args: [{ standalone: false, selector: 'kms-yesno-radiogroup', providers: [
|
|
3217
3389
|
{
|
|
@@ -3233,9 +3405,1096 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3233
3405
|
args: ['child']
|
|
3234
3406
|
}] } });
|
|
3235
3407
|
|
|
3408
|
+
class FormActionsComponent {
|
|
3409
|
+
constructor() {
|
|
3410
|
+
this.actionsConfig = input.required(...(ngDevMode ? [{ debugName: "actionsConfig" }] : []));
|
|
3411
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
3412
|
+
this.submitClick = output();
|
|
3413
|
+
this.submitLabel = computed(() => this.actionsConfig().submitLabel ?? 'Submit', ...(ngDevMode ? [{ debugName: "submitLabel" }] : []));
|
|
3414
|
+
}
|
|
3415
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormActionsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
3416
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "20.3.16", type: FormActionsComponent, isStandalone: false, selector: "kms-form-actions", inputs: { actionsConfig: { classPropertyName: "actionsConfig", publicName: "actionsConfig", isSignal: true, isRequired: true, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { submitClick: "submitClick" }, ngImport: i0, template: "<div class=\"kms-form-actions\">\n <kms-button\n [label]=\"submitLabel()\"\n type=\"submit\"\n [disabled]=\"disabled()\"\n (buttonClick)=\"submitClick.emit()\">\n </kms-button>\n</div>\n", styles: [":host{display:block}.kms-form-actions{display:flex;justify-content:flex-end;padding:8px 0}\n"], dependencies: [{ kind: "component", type: ButtonComponent, selector: "kms-button", inputs: ["color", "type", "appearance", "loading", "label", "icon", "disabled", "rounded"], outputs: ["buttonClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
3417
|
+
}
|
|
3418
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormActionsComponent, decorators: [{
|
|
3419
|
+
type: Component,
|
|
3420
|
+
args: [{ selector: 'kms-form-actions', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kms-form-actions\">\n <kms-button\n [label]=\"submitLabel()\"\n type=\"submit\"\n [disabled]=\"disabled()\"\n (buttonClick)=\"submitClick.emit()\">\n </kms-button>\n</div>\n", styles: [":host{display:block}.kms-form-actions{display:flex;justify-content:flex-end;padding:8px 0}\n"] }]
|
|
3421
|
+
}], propDecorators: { actionsConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "actionsConfig", required: true }] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], submitClick: [{ type: i0.Output, args: ["submitClick"] }] } });
|
|
3422
|
+
|
|
3423
|
+
/** Supported field types. Native types render inside `<mat-form-field>`; library types render via DynamicFieldDirective. */
|
|
3424
|
+
var FieldType;
|
|
3425
|
+
(function (FieldType) {
|
|
3426
|
+
FieldType["TEXT"] = "text";
|
|
3427
|
+
FieldType["TEXTAREA"] = "textarea";
|
|
3428
|
+
FieldType["PASSWORD"] = "password";
|
|
3429
|
+
FieldType["NUMBER"] = "number";
|
|
3430
|
+
FieldType["DATE"] = "date";
|
|
3431
|
+
FieldType["DATE_RANGE"] = "dateRange";
|
|
3432
|
+
FieldType["TIME"] = "time";
|
|
3433
|
+
FieldType["SELECT"] = "select";
|
|
3434
|
+
FieldType["AUTOCOMPLETE"] = "autocomplete";
|
|
3435
|
+
FieldType["CHECKBOX"] = "checkbox";
|
|
3436
|
+
FieldType["RADIO"] = "radio";
|
|
3437
|
+
FieldType["RADIO_GROUP"] = "radioGroup";
|
|
3438
|
+
FieldType["SLIDE_TOGGLE"] = "slideToggle";
|
|
3439
|
+
FieldType["MULTI_SELECT"] = "multiSelect";
|
|
3440
|
+
FieldType["COLOR"] = "color";
|
|
3441
|
+
FieldType["MONTH_PICKER"] = "monthPicker";
|
|
3442
|
+
FieldType["TEMPLATE"] = "template";
|
|
3443
|
+
FieldType["OFFSET"] = "offset";
|
|
3444
|
+
})(FieldType || (FieldType = {}));
|
|
3445
|
+
|
|
3446
|
+
/** Component-scoped service managing the full internal form lifecycle. No UI. */
|
|
3447
|
+
class GenericFormService {
|
|
3448
|
+
constructor(translate) {
|
|
3449
|
+
this.translate = translate;
|
|
3450
|
+
this.fieldConfigs = new Map(); // key → FieldConfig
|
|
3451
|
+
this.asyncValidatorMap = new Map(); // key → async validators
|
|
3452
|
+
this.destroy$ = new Subject();
|
|
3453
|
+
this._submitted = false;
|
|
3454
|
+
}
|
|
3455
|
+
// --- Build ---
|
|
3456
|
+
buildForm(config) {
|
|
3457
|
+
this.cleanup();
|
|
3458
|
+
this.config = config;
|
|
3459
|
+
this.fieldConfigs.clear();
|
|
3460
|
+
this.asyncValidatorMap.clear();
|
|
3461
|
+
this._submitted = false;
|
|
3462
|
+
const controls = {};
|
|
3463
|
+
for (const section of config.sections) {
|
|
3464
|
+
for (const field of section.fields) {
|
|
3465
|
+
this.buildFieldControl(field, controls);
|
|
3466
|
+
}
|
|
3467
|
+
}
|
|
3468
|
+
this.form = new FormGroup(controls);
|
|
3469
|
+
return this.form;
|
|
3470
|
+
}
|
|
3471
|
+
buildFieldControl(field, controls) {
|
|
3472
|
+
if (field.type === FieldType.OFFSET || !field.key)
|
|
3473
|
+
return;
|
|
3474
|
+
this.fieldConfigs.set(field.key, field);
|
|
3475
|
+
const asyncFns = (field.asyncValidators ?? []).map((a) => a.validator);
|
|
3476
|
+
if (field.asyncValidators?.length) {
|
|
3477
|
+
this.asyncValidatorMap.set(field.key, field.asyncValidators);
|
|
3478
|
+
}
|
|
3479
|
+
const initial = this.resolveInitialValue(field.type);
|
|
3480
|
+
const control = new FormControl(initial, {
|
|
3481
|
+
validators: field.validators ?? [],
|
|
3482
|
+
asyncValidators: asyncFns.length ? asyncFns : undefined,
|
|
3483
|
+
});
|
|
3484
|
+
if (field.hidden || field.disabled) {
|
|
3485
|
+
control.disable();
|
|
3486
|
+
}
|
|
3487
|
+
controls[field.key] = control;
|
|
3488
|
+
if (field.type === FieldType.DATE_RANGE && field.options) {
|
|
3489
|
+
const opts = field.options;
|
|
3490
|
+
if (opts.startKey && !controls[opts.startKey]) {
|
|
3491
|
+
controls[opts.startKey] = new FormControl(null);
|
|
3492
|
+
}
|
|
3493
|
+
if (opts.endKey && !controls[opts.endKey]) {
|
|
3494
|
+
controls[opts.endKey] = new FormControl(null);
|
|
3495
|
+
}
|
|
3496
|
+
}
|
|
3497
|
+
}
|
|
3498
|
+
resolveInitialValue(type) {
|
|
3499
|
+
switch (type) {
|
|
3500
|
+
case FieldType.TEXT:
|
|
3501
|
+
case FieldType.TEXTAREA:
|
|
3502
|
+
case FieldType.PASSWORD:
|
|
3503
|
+
return '';
|
|
3504
|
+
default:
|
|
3505
|
+
return null;
|
|
3506
|
+
}
|
|
3507
|
+
}
|
|
3508
|
+
// --- Patch ---
|
|
3509
|
+
patchValue(value, options) {
|
|
3510
|
+
if (!this.form)
|
|
3511
|
+
return;
|
|
3512
|
+
const emitEvent = !(options?.silent);
|
|
3513
|
+
this.form.patchValue(value, { emitEvent });
|
|
3514
|
+
}
|
|
3515
|
+
// --- Validate ---
|
|
3516
|
+
validateAll() {
|
|
3517
|
+
if (!this.form)
|
|
3518
|
+
return false;
|
|
3519
|
+
this._submitted = true;
|
|
3520
|
+
this.form.markAllAsTouched();
|
|
3521
|
+
this.form.updateValueAndValidity();
|
|
3522
|
+
return this.form.valid;
|
|
3523
|
+
}
|
|
3524
|
+
get submitted() {
|
|
3525
|
+
return this._submitted;
|
|
3526
|
+
}
|
|
3527
|
+
// --- Values ---
|
|
3528
|
+
getRawValue() {
|
|
3529
|
+
return this.form?.getRawValue() ?? {};
|
|
3530
|
+
}
|
|
3531
|
+
getValue() {
|
|
3532
|
+
return this.form?.value ?? {};
|
|
3533
|
+
}
|
|
3534
|
+
// --- Errors ---
|
|
3535
|
+
getErrors() {
|
|
3536
|
+
if (!this.form)
|
|
3537
|
+
return null;
|
|
3538
|
+
const errors = {};
|
|
3539
|
+
let hasErrors = false;
|
|
3540
|
+
for (const [key, control] of Object.entries(this.form.controls)) {
|
|
3541
|
+
if (control.errors) {
|
|
3542
|
+
errors[key] = control.errors;
|
|
3543
|
+
hasErrors = true;
|
|
3544
|
+
}
|
|
3545
|
+
}
|
|
3546
|
+
return hasErrors ? errors : null;
|
|
3547
|
+
}
|
|
3548
|
+
// --- State ---
|
|
3549
|
+
getState() {
|
|
3550
|
+
return {
|
|
3551
|
+
pristine: this.form?.pristine ?? true,
|
|
3552
|
+
dirty: this.form?.dirty ?? false,
|
|
3553
|
+
touched: this.form?.touched ?? false,
|
|
3554
|
+
untouched: this.form?.untouched ?? true,
|
|
3555
|
+
valid: this.form?.valid ?? false,
|
|
3556
|
+
invalid: this.form?.invalid ?? true,
|
|
3557
|
+
submitted: this._submitted,
|
|
3558
|
+
errors: this.getErrors(),
|
|
3559
|
+
};
|
|
3560
|
+
}
|
|
3561
|
+
// --- Field observables ---
|
|
3562
|
+
fieldValueChanges$(key) {
|
|
3563
|
+
const control = this.form?.get(key);
|
|
3564
|
+
if (!control) {
|
|
3565
|
+
throw new Error(`[GenericFormService] Control "${key}" not found`);
|
|
3566
|
+
}
|
|
3567
|
+
return control.valueChanges.pipe(takeUntil(this.destroy$));
|
|
3568
|
+
}
|
|
3569
|
+
// --- Field operations ---
|
|
3570
|
+
setFieldDisabled(key, disabled) {
|
|
3571
|
+
const control = this.form?.get(key);
|
|
3572
|
+
if (!control)
|
|
3573
|
+
return;
|
|
3574
|
+
if (disabled) {
|
|
3575
|
+
control.disable({ emitEvent: false });
|
|
3576
|
+
}
|
|
3577
|
+
else {
|
|
3578
|
+
control.enable({ emitEvent: false });
|
|
3579
|
+
}
|
|
3580
|
+
}
|
|
3581
|
+
updateFieldOptions(key, options) {
|
|
3582
|
+
const fieldConfig = this.fieldConfigs.get(key);
|
|
3583
|
+
if (!fieldConfig)
|
|
3584
|
+
return;
|
|
3585
|
+
fieldConfig.options = { ...fieldConfig.options, ...options };
|
|
3586
|
+
}
|
|
3587
|
+
getFieldConfig(key) {
|
|
3588
|
+
return this.fieldConfigs.get(key);
|
|
3589
|
+
}
|
|
3590
|
+
getFormGroup() {
|
|
3591
|
+
return this.form;
|
|
3592
|
+
}
|
|
3593
|
+
// --- Visibility engine ---
|
|
3594
|
+
applyVisibility(config) {
|
|
3595
|
+
for (const section of config.sections) {
|
|
3596
|
+
for (const field of section.fields) {
|
|
3597
|
+
if (!field.key)
|
|
3598
|
+
continue;
|
|
3599
|
+
const control = this.form?.get(field.key);
|
|
3600
|
+
if (!control)
|
|
3601
|
+
continue;
|
|
3602
|
+
if (field.hidden || field.disabled) {
|
|
3603
|
+
control.disable({ emitEvent: false });
|
|
3604
|
+
}
|
|
3605
|
+
else {
|
|
3606
|
+
control.enable({ emitEvent: false });
|
|
3607
|
+
}
|
|
3608
|
+
}
|
|
3609
|
+
}
|
|
3610
|
+
}
|
|
3611
|
+
// --- Error message resolution ---
|
|
3612
|
+
resolveErrorMessage(key, validatorName, validatorMeta) {
|
|
3613
|
+
// 1. Custom validator with `message` property
|
|
3614
|
+
if (validatorMeta?.message) {
|
|
3615
|
+
return validatorMeta.message;
|
|
3616
|
+
}
|
|
3617
|
+
// 2. Async validator with pre-translated errorMessage
|
|
3618
|
+
const asyncConfigs = this.asyncValidatorMap.get(key);
|
|
3619
|
+
if (asyncConfigs) {
|
|
3620
|
+
for (const ac of asyncConfigs) {
|
|
3621
|
+
// Match async validator by checking if the validator name is in the error keys
|
|
3622
|
+
// Async validators typically set the error key matching their name
|
|
3623
|
+
if (ac.errorMessage) {
|
|
3624
|
+
// If there's only one async validator, use its message
|
|
3625
|
+
// Otherwise, we can't disambiguate — return the first
|
|
3626
|
+
return ac.errorMessage;
|
|
3627
|
+
}
|
|
3628
|
+
}
|
|
3629
|
+
}
|
|
3630
|
+
// 3. Translate via @ngx-translate
|
|
3631
|
+
const translationKey = `uiPresentational.validatorMessages.${validatorName}`;
|
|
3632
|
+
const translated = this.translate.instant(translationKey, validatorMeta);
|
|
3633
|
+
if (translated !== translationKey) {
|
|
3634
|
+
return translated;
|
|
3635
|
+
}
|
|
3636
|
+
// 4. Fallback — validator key
|
|
3637
|
+
return validatorName;
|
|
3638
|
+
}
|
|
3639
|
+
// --- Cleanup ---
|
|
3640
|
+
cleanup() {
|
|
3641
|
+
this.destroy$.next();
|
|
3642
|
+
this.destroy$.complete();
|
|
3643
|
+
this.destroy$ = new Subject();
|
|
3644
|
+
}
|
|
3645
|
+
ngOnDestroy() {
|
|
3646
|
+
this.destroy$.next();
|
|
3647
|
+
this.destroy$.complete();
|
|
3648
|
+
}
|
|
3649
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormService, deps: [{ token: i4$1.TranslateService }], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3650
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormService }); }
|
|
3651
|
+
}
|
|
3652
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormService, decorators: [{
|
|
3653
|
+
type: Injectable
|
|
3654
|
+
}], ctorParameters: () => [{ type: i4$1.TranslateService }] });
|
|
3655
|
+
|
|
3656
|
+
const DEFAULT_REGISTRY = new Map([
|
|
3657
|
+
[FieldType.PASSWORD, PasswordComponent],
|
|
3658
|
+
[FieldType.NUMBER, NumericInputComponent],
|
|
3659
|
+
[FieldType.TIME, TimeInputComponent],
|
|
3660
|
+
[FieldType.SELECT, DropdownFromDataComponent],
|
|
3661
|
+
[FieldType.MULTI_SELECT, DropdownFromDataComponent],
|
|
3662
|
+
[FieldType.CHECKBOX, CheckboxComponent],
|
|
3663
|
+
[FieldType.RADIO, RadioButtonComponent],
|
|
3664
|
+
[FieldType.RADIO_GROUP, RadioGroupComponent],
|
|
3665
|
+
[FieldType.SLIDE_TOGGLE, SlideToggleComponent],
|
|
3666
|
+
[FieldType.COLOR, ColorInputComponent],
|
|
3667
|
+
]);
|
|
3668
|
+
class FieldRegistryService {
|
|
3669
|
+
constructor() {
|
|
3670
|
+
this.registry = new Map(DEFAULT_REGISTRY);
|
|
3671
|
+
}
|
|
3672
|
+
resolve(type) {
|
|
3673
|
+
return this.registry.get(type) ?? null;
|
|
3674
|
+
}
|
|
3675
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRegistryService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
3676
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRegistryService }); }
|
|
3677
|
+
}
|
|
3678
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FieldRegistryService, decorators: [{
|
|
3679
|
+
type: Injectable
|
|
3680
|
+
}] });
|
|
3681
|
+
|
|
3682
|
+
/** Creates a library component dynamically and bridges ControlValueAccessor to a FormControl. */
|
|
3683
|
+
class DynamicFieldDirective {
|
|
3684
|
+
constructor() {
|
|
3685
|
+
this.fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
|
|
3686
|
+
this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
3687
|
+
this.fieldTouched = output(); // emitted when the library component reports a touch
|
|
3688
|
+
this.vcr = inject(ViewContainerRef);
|
|
3689
|
+
this.registry = inject(FieldRegistryService);
|
|
3690
|
+
this.componentRef = null;
|
|
3691
|
+
this.destroy$ = new Subject();
|
|
3692
|
+
effect(() => {
|
|
3693
|
+
const config = this.fieldConfig();
|
|
3694
|
+
const control = this.control();
|
|
3695
|
+
untracked(() => this.create(config, control));
|
|
3696
|
+
});
|
|
3697
|
+
}
|
|
3698
|
+
create(config, control) {
|
|
3699
|
+
this.teardown();
|
|
3700
|
+
const componentType = this.registry.resolve(config.type);
|
|
3701
|
+
if (!componentType)
|
|
3702
|
+
return;
|
|
3703
|
+
this.vcr.clear();
|
|
3704
|
+
this.componentRef = this.vcr.createComponent(componentType);
|
|
3705
|
+
this.bridgeCVA(control);
|
|
3706
|
+
this.mapInputs(config);
|
|
3707
|
+
}
|
|
3708
|
+
// --- CVA bridge ---
|
|
3709
|
+
bridgeCVA(control) {
|
|
3710
|
+
const ref = this.componentRef;
|
|
3711
|
+
if (!ref)
|
|
3712
|
+
return;
|
|
3713
|
+
const inst = ref.instance;
|
|
3714
|
+
let syncing = false;
|
|
3715
|
+
if (typeof inst.writeValue === 'function') {
|
|
3716
|
+
inst.writeValue(control.value);
|
|
3717
|
+
}
|
|
3718
|
+
if (typeof inst.registerOnChange === 'function') {
|
|
3719
|
+
inst.registerOnChange((val) => {
|
|
3720
|
+
if (syncing)
|
|
3721
|
+
return;
|
|
3722
|
+
syncing = true;
|
|
3723
|
+
control.setValue(val);
|
|
3724
|
+
control.markAsDirty();
|
|
3725
|
+
syncing = false;
|
|
3726
|
+
});
|
|
3727
|
+
}
|
|
3728
|
+
if (typeof inst.registerOnTouched === 'function') {
|
|
3729
|
+
inst.registerOnTouched(() => {
|
|
3730
|
+
control.markAsTouched();
|
|
3731
|
+
this.fieldTouched.emit();
|
|
3732
|
+
});
|
|
3733
|
+
}
|
|
3734
|
+
// Sync control → component on external value changes
|
|
3735
|
+
control.valueChanges.pipe(takeUntil$1(this.destroy$)).subscribe((val) => {
|
|
3736
|
+
if (syncing)
|
|
3737
|
+
return;
|
|
3738
|
+
syncing = true;
|
|
3739
|
+
if (typeof inst.writeValue === 'function')
|
|
3740
|
+
inst.writeValue(val);
|
|
3741
|
+
// Reset after microtask to cover async onChange triggers (e.g. ngModel two-way binding)
|
|
3742
|
+
Promise.resolve().then(() => { syncing = false; });
|
|
3743
|
+
});
|
|
3744
|
+
// Disabled state — defer initial call until after ngOnInit (form may not exist yet)
|
|
3745
|
+
if (typeof inst.setDisabledState === 'function') {
|
|
3746
|
+
control.statusChanges.pipe(takeUntil$1(this.destroy$)).subscribe(() => {
|
|
3747
|
+
inst.setDisabledState(control.disabled);
|
|
3748
|
+
});
|
|
3749
|
+
// Schedule initial sync after ngOnInit has run
|
|
3750
|
+
queueMicrotask(() => {
|
|
3751
|
+
if (typeof inst.setDisabledState === 'function') {
|
|
3752
|
+
inst.setDisabledState(control.disabled);
|
|
3753
|
+
}
|
|
3754
|
+
});
|
|
3755
|
+
}
|
|
3756
|
+
}
|
|
3757
|
+
// --- Input mapping ---
|
|
3758
|
+
mapInputs(config) {
|
|
3759
|
+
const ref = this.componentRef;
|
|
3760
|
+
if (!ref)
|
|
3761
|
+
return;
|
|
3762
|
+
switch (config.type) {
|
|
3763
|
+
case FieldType.CHECKBOX:
|
|
3764
|
+
ref.setInput('infoText', config.label ?? '');
|
|
3765
|
+
break;
|
|
3766
|
+
case FieldType.SLIDE_TOGGLE:
|
|
3767
|
+
ref.setInput('leftLabel', config.label ?? '');
|
|
3768
|
+
break;
|
|
3769
|
+
case FieldType.RADIO:
|
|
3770
|
+
ref.setInput('label', config.label ?? '');
|
|
3771
|
+
break;
|
|
3772
|
+
case FieldType.RADIO_GROUP:
|
|
3773
|
+
this.mapRadioGroup(config, ref);
|
|
3774
|
+
break;
|
|
3775
|
+
case FieldType.SELECT:
|
|
3776
|
+
case FieldType.MULTI_SELECT:
|
|
3777
|
+
this.mapSelect(config, ref);
|
|
3778
|
+
break;
|
|
3779
|
+
case FieldType.NUMBER:
|
|
3780
|
+
this.mapNumber(config, ref);
|
|
3781
|
+
break;
|
|
3782
|
+
case FieldType.PASSWORD:
|
|
3783
|
+
this.mapPassword(config, ref);
|
|
3784
|
+
break;
|
|
3785
|
+
default: // TIME, COLOR
|
|
3786
|
+
this.trySetInput(ref, 'label', config.label ?? '');
|
|
3787
|
+
break;
|
|
3788
|
+
}
|
|
3789
|
+
if (config.placeholder)
|
|
3790
|
+
this.trySetInput(ref, 'placeholder', config.placeholder);
|
|
3791
|
+
}
|
|
3792
|
+
mapRadioGroup(config, ref) {
|
|
3793
|
+
const opts = config.options;
|
|
3794
|
+
if (opts?.items) {
|
|
3795
|
+
ref.setInput('options', opts.items.map((item) => {
|
|
3796
|
+
if (typeof item === 'string')
|
|
3797
|
+
return { Text: item, Value: item };
|
|
3798
|
+
const obj = item;
|
|
3799
|
+
return { Text: obj['Label'] ?? obj['label'], Value: obj['Value'] ?? obj['value'] };
|
|
3800
|
+
}));
|
|
3801
|
+
}
|
|
3802
|
+
if (opts?.layout)
|
|
3803
|
+
ref.setInput('direction', opts.layout === 'horizontal' ? 'row' : 'column');
|
|
3804
|
+
if (opts?.size)
|
|
3805
|
+
ref.setInput('size', opts.size);
|
|
3806
|
+
}
|
|
3807
|
+
mapSelect(config, ref) {
|
|
3808
|
+
ref.setInput('label', config.label ?? '');
|
|
3809
|
+
if (config.type === FieldType.MULTI_SELECT)
|
|
3810
|
+
ref.setInput('multiple', true);
|
|
3811
|
+
const opts = config.options;
|
|
3812
|
+
if (!opts)
|
|
3813
|
+
return;
|
|
3814
|
+
this.mapSelectDataSource(opts, ref);
|
|
3815
|
+
this.mapSelectBehaviour(opts, ref);
|
|
3816
|
+
this.mapPrefixSuffix(config, ref);
|
|
3817
|
+
}
|
|
3818
|
+
mapSelectDataSource(opts, ref) {
|
|
3819
|
+
if (opts.plainItems) {
|
|
3820
|
+
ref.setInput('optionsPlainArray', opts.plainItems);
|
|
3821
|
+
}
|
|
3822
|
+
else if (opts.enumItems) {
|
|
3823
|
+
ref.setInput('optionsEnum', opts.enumItems);
|
|
3824
|
+
if (opts.useEnumIndexAsValue)
|
|
3825
|
+
ref.setInput('useEnumIndexAsValue', true);
|
|
3826
|
+
}
|
|
3827
|
+
else if (opts.objItems) {
|
|
3828
|
+
ref.setInput('optionsObjArray', opts.objItems.data);
|
|
3829
|
+
ref.setInput('mapKey', opts.objItems.mapKey);
|
|
3830
|
+
if (opts.objItems.mapValue)
|
|
3831
|
+
ref.setInput('mapValue', opts.objItems.mapValue);
|
|
3832
|
+
}
|
|
3833
|
+
else if (opts.items) {
|
|
3834
|
+
this.mapSelectItems(opts, ref);
|
|
3835
|
+
}
|
|
3836
|
+
}
|
|
3837
|
+
mapSelectItems(opts, ref) {
|
|
3838
|
+
if (Array.isArray(opts.items)) {
|
|
3839
|
+
ref.setInput('optionsObjArray', opts.items);
|
|
3840
|
+
ref.setInput('mapKey', 'Label');
|
|
3841
|
+
ref.setInput('mapValue', 'Value');
|
|
3842
|
+
}
|
|
3843
|
+
else if (isObservable(opts.items)) {
|
|
3844
|
+
opts.items.pipe(takeUntil$1(this.destroy$)).subscribe((items) => {
|
|
3845
|
+
ref.setInput('optionsObjArray', items);
|
|
3846
|
+
ref.setInput('mapKey', 'Label');
|
|
3847
|
+
ref.setInput('mapValue', 'Value');
|
|
3848
|
+
});
|
|
3849
|
+
}
|
|
3850
|
+
}
|
|
3851
|
+
mapSelectBehaviour(opts, ref) {
|
|
3852
|
+
if (opts.hasNullOption)
|
|
3853
|
+
ref.setInput('hasNullOption', true);
|
|
3854
|
+
if (opts.selectAllText)
|
|
3855
|
+
ref.setInput('selectAllText', opts.selectAllText);
|
|
3856
|
+
if (opts.disableOptions)
|
|
3857
|
+
ref.setInput('disableOptions', true);
|
|
3858
|
+
if (opts.preselectedKeys !== undefined)
|
|
3859
|
+
ref.setInput('preselectedKeys', opts.preselectedKeys);
|
|
3860
|
+
if (opts.searchable)
|
|
3861
|
+
ref.setInput('searchable', true);
|
|
3862
|
+
if (opts.translation)
|
|
3863
|
+
ref.setInput('translation', opts.translation);
|
|
3864
|
+
}
|
|
3865
|
+
mapPrefixSuffix(config, ref) {
|
|
3866
|
+
if (config.prefix?.type === 'text')
|
|
3867
|
+
ref.setInput('prefix', config.prefix.value);
|
|
3868
|
+
if (config.prefix?.type === 'icon')
|
|
3869
|
+
ref.setInput('prefixIcon', config.prefix.value);
|
|
3870
|
+
if (config.suffix?.type === 'text')
|
|
3871
|
+
ref.setInput('suffix', config.suffix.value);
|
|
3872
|
+
if (config.suffix?.type === 'icon')
|
|
3873
|
+
ref.setInput('suffixIcon', config.suffix.value);
|
|
3874
|
+
}
|
|
3875
|
+
mapPassword(config, ref) {
|
|
3876
|
+
this.trySetInput(ref, 'label', config.label ?? '');
|
|
3877
|
+
const opts = config.options;
|
|
3878
|
+
if (opts?.withStrength)
|
|
3879
|
+
ref.setInput('withStrength', true);
|
|
3880
|
+
}
|
|
3881
|
+
mapNumber(config, ref) {
|
|
3882
|
+
this.trySetInput(ref, 'label', config.label ?? '');
|
|
3883
|
+
const opts = config.options;
|
|
3884
|
+
if (opts?.min !== undefined)
|
|
3885
|
+
ref.setInput('min', opts.min);
|
|
3886
|
+
}
|
|
3887
|
+
trySetInput(ref, name, value) {
|
|
3888
|
+
try {
|
|
3889
|
+
ref.setInput(name, value);
|
|
3890
|
+
}
|
|
3891
|
+
catch {
|
|
3892
|
+
// Component may not have this input
|
|
3893
|
+
}
|
|
3894
|
+
}
|
|
3895
|
+
teardown() {
|
|
3896
|
+
this.destroy$.next();
|
|
3897
|
+
this.destroy$.complete();
|
|
3898
|
+
this.destroy$ = new Subject();
|
|
3899
|
+
}
|
|
3900
|
+
ngOnDestroy() {
|
|
3901
|
+
this.destroy$.next();
|
|
3902
|
+
this.destroy$.complete();
|
|
3903
|
+
}
|
|
3904
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFieldDirective, deps: [], target: i0.ɵɵFactoryTarget.Directive }); }
|
|
3905
|
+
static { this.ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "17.1.0", version: "20.3.16", type: DynamicFieldDirective, isStandalone: false, selector: "[kmsDynamicField]", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { fieldTouched: "fieldTouched" }, ngImport: i0 }); }
|
|
3906
|
+
}
|
|
3907
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: DynamicFieldDirective, decorators: [{
|
|
3908
|
+
type: Directive,
|
|
3909
|
+
args: [{ selector: '[kmsDynamicField]', standalone: false }]
|
|
3910
|
+
}], ctorParameters: () => [], propDecorators: { fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], fieldTouched: [{ type: i0.Output, args: ["fieldTouched"] }] } });
|
|
3911
|
+
|
|
3912
|
+
const NATIVE_TYPES = new Set([
|
|
3913
|
+
FieldType.TEXT,
|
|
3914
|
+
FieldType.TEXTAREA,
|
|
3915
|
+
FieldType.DATE,
|
|
3916
|
+
FieldType.DATE_RANGE,
|
|
3917
|
+
FieldType.MONTH_PICKER,
|
|
3918
|
+
FieldType.AUTOCOMPLETE,
|
|
3919
|
+
FieldType.OFFSET,
|
|
3920
|
+
]);
|
|
3921
|
+
const GROUP_TYPES = new Set([FieldType.RADIO_GROUP]);
|
|
3922
|
+
const AUTOCOMPLETE_FALLBACK = {
|
|
3923
|
+
firstname: 'given-name',
|
|
3924
|
+
givenname: 'given-name',
|
|
3925
|
+
lastname: 'family-name',
|
|
3926
|
+
familyname: 'family-name',
|
|
3927
|
+
surname: 'family-name',
|
|
3928
|
+
email: 'email',
|
|
3929
|
+
emailaddress: 'email',
|
|
3930
|
+
phone: 'tel',
|
|
3931
|
+
telephone: 'tel',
|
|
3932
|
+
phonenumber: 'tel',
|
|
3933
|
+
street: 'address-line1',
|
|
3934
|
+
streetaddress: 'address-line1',
|
|
3935
|
+
addressline1: 'address-line1',
|
|
3936
|
+
addressline2: 'address-line2',
|
|
3937
|
+
city: 'address-level2',
|
|
3938
|
+
locality: 'address-level2',
|
|
3939
|
+
state: 'address-level1',
|
|
3940
|
+
region: 'address-level1',
|
|
3941
|
+
province: 'address-level1',
|
|
3942
|
+
zip: 'postal-code',
|
|
3943
|
+
postalcode: 'postal-code',
|
|
3944
|
+
zipcode: 'postal-code',
|
|
3945
|
+
country: 'country',
|
|
3946
|
+
countrycode: 'country',
|
|
3947
|
+
company: 'organization',
|
|
3948
|
+
organization: 'organization',
|
|
3949
|
+
companyname: 'organization',
|
|
3950
|
+
username: 'username',
|
|
3951
|
+
login: 'username',
|
|
3952
|
+
password: 'current-password',
|
|
3953
|
+
newpassword: 'new-password',
|
|
3954
|
+
creditcard: 'cc-number',
|
|
3955
|
+
cardnumber: 'cc-number',
|
|
3956
|
+
birthdate: 'bday',
|
|
3957
|
+
dateofbirth: 'bday',
|
|
3958
|
+
};
|
|
3959
|
+
class FormFieldComponent {
|
|
3960
|
+
constructor() {
|
|
3961
|
+
// --- Inputs ---
|
|
3962
|
+
this.fieldConfig = input.required(...(ngDevMode ? [{ debugName: "fieldConfig" }] : []));
|
|
3963
|
+
this.control = input.required(...(ngDevMode ? [{ debugName: "control" }] : []));
|
|
3964
|
+
this.formId = input('', ...(ngDevMode ? [{ debugName: "formId" }] : []));
|
|
3965
|
+
this.formErrorDisplay = input(...(ngDevMode ? [undefined, { debugName: "formErrorDisplay" }] : []));
|
|
3966
|
+
this.formDisabledConfig = input(...(ngDevMode ? [undefined, { debugName: "formDisabledConfig" }] : []));
|
|
3967
|
+
this.submitted = input(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
|
|
3968
|
+
this.FieldType = FieldType;
|
|
3969
|
+
// --- Injections ---
|
|
3970
|
+
this.formService = inject(GenericFormService);
|
|
3971
|
+
this.destroyRef = inject(DestroyRef);
|
|
3972
|
+
// --- OnPush reactivity for control state ---
|
|
3973
|
+
this.controlTick = signal(0, ...(ngDevMode ? [{ debugName: "controlTick" }] : []));
|
|
3974
|
+
this.dateRangeDestroy$ = new Subject();
|
|
3975
|
+
// --- Computed: type classification ---
|
|
3976
|
+
this.isNativeType = computed(() => NATIVE_TYPES.has(this.fieldConfig().type), ...(ngDevMode ? [{ debugName: "isNativeType" }] : []));
|
|
3977
|
+
this.isGroupType = computed(() => GROUP_TYPES.has(this.fieldConfig().type), ...(ngDevMode ? [{ debugName: "isGroupType" }] : []));
|
|
3978
|
+
this.isTextInputType = computed(() => this.fieldConfig().type === FieldType.TEXT, ...(ngDevMode ? [{ debugName: "isTextInputType" }] : []));
|
|
3979
|
+
this.isDateType = computed(() => {
|
|
3980
|
+
const type = this.fieldConfig().type;
|
|
3981
|
+
return type === FieldType.DATE || type === FieldType.DATE_RANGE || type === FieldType.MONTH_PICKER;
|
|
3982
|
+
}, ...(ngDevMode ? [{ debugName: "isDateType" }] : []));
|
|
3983
|
+
this.dateMode = computed(() => this.fieldConfig().type === FieldType.DATE_RANGE ? 'range' : 'date', ...(ngDevMode ? [{ debugName: "dateMode" }] : []));
|
|
3984
|
+
this.isMonthPicker = computed(() => this.fieldConfig().type === FieldType.MONTH_PICKER, ...(ngDevMode ? [{ debugName: "isMonthPicker" }] : []));
|
|
3985
|
+
// --- Computed: error display ---
|
|
3986
|
+
this.resolvedErrorDisplay = computed(() => ({
|
|
3987
|
+
strategy: 'onTouched',
|
|
3988
|
+
showMultiple: false,
|
|
3989
|
+
showOnSubmit: true,
|
|
3990
|
+
...this.formErrorDisplay(),
|
|
3991
|
+
...this.fieldConfig().errorDisplay,
|
|
3992
|
+
}), ...(ngDevMode ? [{ debugName: "resolvedErrorDisplay" }] : []));
|
|
3993
|
+
this.errorMatcher = computed(() => {
|
|
3994
|
+
const config = this.resolvedErrorDisplay();
|
|
3995
|
+
const submitted = this.submitted;
|
|
3996
|
+
if (config.strategy === 'custom' && config.matcher)
|
|
3997
|
+
return config.matcher;
|
|
3998
|
+
return {
|
|
3999
|
+
isErrorState: (control) => {
|
|
4000
|
+
if (!control?.errors)
|
|
4001
|
+
return false;
|
|
4002
|
+
if (config.showOnSubmit !== false && submitted())
|
|
4003
|
+
return true;
|
|
4004
|
+
switch (config.strategy) {
|
|
4005
|
+
case 'onDirty':
|
|
4006
|
+
return control.dirty;
|
|
4007
|
+
case 'onSubmit':
|
|
4008
|
+
return false;
|
|
4009
|
+
case 'immediate':
|
|
4010
|
+
return true;
|
|
4011
|
+
case 'onTouched':
|
|
4012
|
+
default:
|
|
4013
|
+
return control.touched;
|
|
4014
|
+
}
|
|
4015
|
+
},
|
|
4016
|
+
};
|
|
4017
|
+
}, ...(ngDevMode ? [{ debugName: "errorMatcher" }] : []));
|
|
4018
|
+
this.shouldShowErrors = computed(() => {
|
|
4019
|
+
this.controlTick();
|
|
4020
|
+
const control = this.control();
|
|
4021
|
+
if (!control.errors)
|
|
4022
|
+
return false;
|
|
4023
|
+
const config = this.resolvedErrorDisplay();
|
|
4024
|
+
if (config.showOnSubmit !== false && this.submitted())
|
|
4025
|
+
return true;
|
|
4026
|
+
switch (config.strategy) {
|
|
4027
|
+
case 'onDirty':
|
|
4028
|
+
return control.dirty;
|
|
4029
|
+
case 'onSubmit':
|
|
4030
|
+
return false;
|
|
4031
|
+
case 'immediate':
|
|
4032
|
+
return true;
|
|
4033
|
+
case 'onTouched':
|
|
4034
|
+
default:
|
|
4035
|
+
return control.touched;
|
|
4036
|
+
}
|
|
4037
|
+
}, ...(ngDevMode ? [{ debugName: "shouldShowErrors" }] : []));
|
|
4038
|
+
this.errorMessages = computed(() => {
|
|
4039
|
+
this.controlTick();
|
|
4040
|
+
const control = this.control();
|
|
4041
|
+
if (!control.errors)
|
|
4042
|
+
return [];
|
|
4043
|
+
const config = this.resolvedErrorDisplay();
|
|
4044
|
+
const messages = [];
|
|
4045
|
+
for (const [validatorName, meta] of Object.entries(control.errors)) {
|
|
4046
|
+
messages.push(this.formService.resolveErrorMessage(this.fieldConfig().key, validatorName, meta));
|
|
4047
|
+
if (!config.showMultiple)
|
|
4048
|
+
break;
|
|
4049
|
+
}
|
|
4050
|
+
return messages;
|
|
4051
|
+
}, ...(ngDevMode ? [{ debugName: "errorMessages" }] : []));
|
|
4052
|
+
this.displayErrorMessage = computed(() => this.shouldShowErrors() ? this.errorMessages().join(', ') : '', ...(ngDevMode ? [{ debugName: "displayErrorMessage" }] : []));
|
|
4053
|
+
// --- Computed: autocomplete ---
|
|
4054
|
+
this.resolvedAutocomplete = computed(() => {
|
|
4055
|
+
const config = this.fieldConfig();
|
|
4056
|
+
if (config.autocomplete)
|
|
4057
|
+
return config.autocomplete;
|
|
4058
|
+
return AUTOCOMPLETE_FALLBACK[config.key.toLowerCase()] ?? null;
|
|
4059
|
+
}, ...(ngDevMode ? [{ debugName: "resolvedAutocomplete" }] : []));
|
|
4060
|
+
// --- Computed: disabled background ---
|
|
4061
|
+
this.disabledBackground = computed(() => {
|
|
4062
|
+
const enabled = this.fieldConfig().disabledConfig?.showDisabledBackground ?? this.formDisabledConfig()?.showDisabledBackground ?? false;
|
|
4063
|
+
return enabled ? 'rgba(0, 0, 0, 0.04)' : 'transparent';
|
|
4064
|
+
}, ...(ngDevMode ? [{ debugName: "disabledBackground" }] : []));
|
|
4065
|
+
this.disabledLine = computed(() => {
|
|
4066
|
+
const enabled = this.fieldConfig().disabledConfig?.showDisabledBackground ?? this.formDisabledConfig()?.showDisabledBackground ?? false;
|
|
4067
|
+
return enabled ? 'block' : 'none';
|
|
4068
|
+
}, ...(ngDevMode ? [{ debugName: "disabledLine" }] : []));
|
|
4069
|
+
// --- Computed: textarea ---
|
|
4070
|
+
this.textareaRows = computed(() => {
|
|
4071
|
+
return this.fieldConfig().options?.rows ?? 3;
|
|
4072
|
+
}, ...(ngDevMode ? [{ debugName: "textareaRows" }] : []));
|
|
4073
|
+
// --- Computed: date / date-range ---
|
|
4074
|
+
this.dateMin = computed(() => {
|
|
4075
|
+
const min = this.fieldConfig().options?.min;
|
|
4076
|
+
if (!min)
|
|
4077
|
+
return null;
|
|
4078
|
+
return min instanceof Date ? min : new Date(min);
|
|
4079
|
+
}, ...(ngDevMode ? [{ debugName: "dateMin" }] : []));
|
|
4080
|
+
this.dateMax = computed(() => {
|
|
4081
|
+
const max = this.fieldConfig().options?.max;
|
|
4082
|
+
if (!max)
|
|
4083
|
+
return null;
|
|
4084
|
+
return max instanceof Date ? max : new Date(max);
|
|
4085
|
+
}, ...(ngDevMode ? [{ debugName: "dateMax" }] : []));
|
|
4086
|
+
// --- Computed: autocomplete options ---
|
|
4087
|
+
this.autocompleteSelectFirst = computed(() => {
|
|
4088
|
+
return this.fieldConfig().options?.selectFirst ?? false;
|
|
4089
|
+
}, ...(ngDevMode ? [{ debugName: "autocompleteSelectFirst" }] : []));
|
|
4090
|
+
this.filteredAutoOptions = computed(() => {
|
|
4091
|
+
this.controlTick();
|
|
4092
|
+
if (this.fieldConfig().type !== FieldType.AUTOCOMPLETE)
|
|
4093
|
+
return [];
|
|
4094
|
+
const opts = this.fieldConfig().options;
|
|
4095
|
+
if (!opts?.items || !Array.isArray(opts.items))
|
|
4096
|
+
return [];
|
|
4097
|
+
const value = (this.control().value ?? '').toString().toLowerCase();
|
|
4098
|
+
if (!value || value.length < (opts.minChars ?? 0))
|
|
4099
|
+
return opts.items;
|
|
4100
|
+
return opts.items.filter((item) => item.Label?.toLowerCase().includes(value));
|
|
4101
|
+
}, ...(ngDevMode ? [{ debugName: "filteredAutoOptions" }] : []));
|
|
4102
|
+
// --- Computed: required ---
|
|
4103
|
+
this.isRequired = computed(() => {
|
|
4104
|
+
const validator = this.control().validator;
|
|
4105
|
+
if (!validator)
|
|
4106
|
+
return false;
|
|
4107
|
+
const result = validator({ value: null });
|
|
4108
|
+
return !!result?.['required'];
|
|
4109
|
+
}, ...(ngDevMode ? [{ debugName: "isRequired" }] : []));
|
|
4110
|
+
// --- Computed: a11y IDs ---
|
|
4111
|
+
this.idPrefix = computed(() => {
|
|
4112
|
+
const fid = this.formId();
|
|
4113
|
+
return fid ? `${fid}-field` : 'field';
|
|
4114
|
+
}, ...(ngDevMode ? [{ debugName: "idPrefix" }] : []));
|
|
4115
|
+
this.tooltipId = computed(() => {
|
|
4116
|
+
return this.fieldConfig().tooltip ? `${this.idPrefix()}-${this.fieldConfig().key}-tooltip` : null;
|
|
4117
|
+
}, ...(ngDevMode ? [{ debugName: "tooltipId" }] : []));
|
|
4118
|
+
this.errorsId = computed(() => {
|
|
4119
|
+
return `${this.idPrefix()}-${this.fieldConfig().key}-errors`;
|
|
4120
|
+
}, ...(ngDevMode ? [{ debugName: "errorsId" }] : []));
|
|
4121
|
+
this.groupLabelId = computed(() => {
|
|
4122
|
+
return `${this.idPrefix()}-${this.fieldConfig().key}-label`;
|
|
4123
|
+
}, ...(ngDevMode ? [{ debugName: "groupLabelId" }] : []));
|
|
4124
|
+
this.ariaDescribedBy = computed(() => {
|
|
4125
|
+
const parts = [];
|
|
4126
|
+
const tipId = this.tooltipId();
|
|
4127
|
+
if (tipId)
|
|
4128
|
+
parts.push(tipId);
|
|
4129
|
+
if (this.shouldShowErrors() && this.errorMessages().length)
|
|
4130
|
+
parts.push(this.errorsId());
|
|
4131
|
+
return parts.length ? parts.join(' ') : null;
|
|
4132
|
+
}, ...(ngDevMode ? [{ debugName: "ariaDescribedBy" }] : []));
|
|
4133
|
+
effect(() => {
|
|
4134
|
+
const control = this.control();
|
|
4135
|
+
untracked(() => this.subscribeToControl(control));
|
|
4136
|
+
});
|
|
4137
|
+
// DATE_RANGE: bidirectional sync between main control and start/end controls
|
|
4138
|
+
effect(() => {
|
|
4139
|
+
const config = this.fieldConfig();
|
|
4140
|
+
const control = this.control();
|
|
4141
|
+
untracked(() => {
|
|
4142
|
+
this.dateRangeDestroy$.next();
|
|
4143
|
+
if (config.type !== FieldType.DATE_RANGE)
|
|
4144
|
+
return;
|
|
4145
|
+
const opts = config.options;
|
|
4146
|
+
if (!opts?.startKey || !opts?.endKey)
|
|
4147
|
+
return;
|
|
4148
|
+
const fg = this.formService.getFormGroup();
|
|
4149
|
+
if (!fg)
|
|
4150
|
+
return;
|
|
4151
|
+
const startCtrl = fg.get(opts.startKey);
|
|
4152
|
+
const endCtrl = fg.get(opts.endKey);
|
|
4153
|
+
if (!startCtrl || !endCtrl)
|
|
4154
|
+
return;
|
|
4155
|
+
// main control → start/end controls (when user picks from date picker)
|
|
4156
|
+
control.valueChanges.pipe(takeUntil$1(this.dateRangeDestroy$)).subscribe((val) => {
|
|
4157
|
+
startCtrl.setValue(val?.start ?? null, { emitEvent: false });
|
|
4158
|
+
endCtrl.setValue(val?.end ?? null, { emitEvent: false });
|
|
4159
|
+
});
|
|
4160
|
+
// start/end controls → main control (when consumer patches values)
|
|
4161
|
+
merge(startCtrl.valueChanges, endCtrl.valueChanges)
|
|
4162
|
+
.pipe(takeUntil$1(this.dateRangeDestroy$))
|
|
4163
|
+
.subscribe(() => {
|
|
4164
|
+
control.setValue({ start: startCtrl.value, end: endCtrl.value }, { emitEvent: false });
|
|
4165
|
+
});
|
|
4166
|
+
});
|
|
4167
|
+
});
|
|
4168
|
+
this.destroyRef.onDestroy(() => {
|
|
4169
|
+
this.controlSub?.unsubscribe();
|
|
4170
|
+
this.dateRangeDestroy$.next();
|
|
4171
|
+
this.dateRangeDestroy$.complete();
|
|
4172
|
+
});
|
|
4173
|
+
}
|
|
4174
|
+
onFieldTouched() {
|
|
4175
|
+
this.controlTick.update((v) => v + 1);
|
|
4176
|
+
}
|
|
4177
|
+
subscribeToControl(control) {
|
|
4178
|
+
this.controlSub?.unsubscribe();
|
|
4179
|
+
this.controlSub = merge(control.statusChanges, control.valueChanges).subscribe(() => {
|
|
4180
|
+
this.controlTick.update((v) => v + 1);
|
|
4181
|
+
});
|
|
4182
|
+
}
|
|
4183
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4184
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormFieldComponent, isStandalone: false, selector: "kms-form-field", inputs: { fieldConfig: { classPropertyName: "fieldConfig", publicName: "fieldConfig", isSignal: true, isRequired: true, transformFunction: null }, control: { classPropertyName: "control", publicName: "control", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, formErrorDisplay: { classPropertyName: "formErrorDisplay", publicName: "formErrorDisplay", isSignal: true, isRequired: false, transformFunction: null }, formDisabledConfig: { classPropertyName: "formDisabledConfig", publicName: "formDisabledConfig", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "<div class=\"kms-form-field\"\n [attr.data-field-key]=\"fieldConfig().key\"\n [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n @if (fieldConfig().type === FieldType.OFFSET) {\n <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n } @else if (isNativeType()) {\n <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n <div class=\"kms-form-field__row\">\n <div class=\"kms-form-field__control\">\n @if (isTextInputType()) {\n <!-- TEXT \u2014 delegates to kms-text-input CVA -->\n <kms-text-input\n [formControl]=\"control()\"\n [label]=\"fieldConfig().label ?? ''\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [required]=\"isRequired()\"\n [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n [errorMessage]=\"displayErrorMessage()\">\n </kms-text-input>\n } @else if (isDateType()) {\n <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n <kms-date-input\n [formControl]=\"control()\"\n [mode]=\"dateMode()\"\n [label]=\"fieldConfig().label ?? ''\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [required]=\"isRequired()\"\n [minDate]=\"dateMin()\"\n [maxDate]=\"dateMax()\"\n [monthPicker]=\"isMonthPicker()\"\n [errorMessage]=\"displayErrorMessage()\">\n </kms-date-input>\n } @else {\n <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n <mat-form-field class=\"kms-form-field__mat-field\">\n @if (fieldConfig().label) {\n <mat-label>{{ fieldConfig().label }}</mat-label>\n }\n\n @switch (fieldConfig().type) {\n @case (FieldType.TEXTAREA) {\n <textarea matInput\n [formControl]=\"control()\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [rows]=\"textareaRows()\"\n [attr.autocomplete]=\"resolvedAutocomplete()\"\n [attr.aria-required]=\"isRequired() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [errorStateMatcher]=\"errorMatcher()\">\n </textarea>\n }\n @case (FieldType.AUTOCOMPLETE) {\n <input matInput\n [formControl]=\"control()\"\n [matAutocomplete]=\"autoPanel\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [attr.autocomplete]=\"resolvedAutocomplete()\"\n [attr.aria-required]=\"isRequired() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [errorStateMatcher]=\"errorMatcher()\">\n <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n @for (opt of filteredAutoOptions(); track opt.Value) {\n <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n }\n </mat-autocomplete>\n }\n }\n\n <!-- Prefix -->\n @if (fieldConfig().prefix) {\n @if (fieldConfig().prefix!.type === 'text') {\n <span matTextPrefix>{{ fieldConfig().prefix!.value }} </span>\n } @else {\n <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n }\n }\n\n <!-- Suffix -->\n @if (fieldConfig().suffix) {\n @if (fieldConfig().suffix!.type === 'text') {\n <span matTextSuffix> {{ fieldConfig().suffix!.value }}</span>\n } @else {\n <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n }\n }\n\n <!-- Errors -->\n @for (msg of errorMessages(); track msg) {\n <mat-error>{{ msg }}</mat-error>\n }\n </mat-form-field>\n }\n </div>\n\n @if (fieldConfig().tooltip) {\n <kms-tooltip-icon\n class=\"kms-form-field__tooltip\"\n [tooltipText]=\"fieldConfig().tooltip!\"\n [attr.id]=\"tooltipId()\">\n </kms-tooltip-icon>\n }\n </div>\n\n } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n <div class=\"kms-form-field__row\">\n <div class=\"kms-form-field__control\">\n <ng-container\n *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n </ng-container>\n </div>\n @if (fieldConfig().tooltip) {\n <kms-tooltip-icon\n class=\"kms-form-field__tooltip\"\n [tooltipText]=\"fieldConfig().tooltip!\"\n [attr.id]=\"tooltipId()\">\n </kms-tooltip-icon>\n }\n </div>\n @if (shouldShowErrors() && errorMessages().length) {\n <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n @for (msg of errorMessages(); track msg) {\n <div class=\"kms-form-field__error\">{{ msg }}</div>\n }\n </div>\n }\n } @else {\n <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n @if (isGroupType()) {\n <div class=\"kms-form-field__label-row\">\n <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n @if (fieldConfig().tooltip) {\n <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n }\n </div>\n }\n\n <div class=\"kms-form-field__row\">\n <div class=\"kms-form-field__control\">\n <ng-container kmsDynamicField\n [fieldConfig]=\"fieldConfig()\"\n [control]=\"control()\"\n (fieldTouched)=\"onFieldTouched()\">\n </ng-container>\n </div>\n\n @if (!isGroupType() && fieldConfig().tooltip) {\n <kms-tooltip-icon\n class=\"kms-form-field__tooltip\"\n [tooltipText]=\"fieldConfig().tooltip!\"\n [attr.id]=\"tooltipId()\">\n </kms-tooltip-icon>\n }\n </div>\n\n @if (shouldShowErrors() && errorMessages().length) {\n <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n @for (msg of errorMessages(); track msg) {\n <div class=\"kms-form-field__error\">{{ msg }}</div>\n }\n </div>\n }\n }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"], dependencies: [{ kind: "directive", type: i1.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i2.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: i2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i2.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: i2$1.MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: i2$1.MatLabel, selector: "mat-label" }, { kind: "directive", type: i2$1.MatError, selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i2$1.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "directive", type: i3$2.MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "component", type: i3.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i5$1.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: "directive", type: i5$1.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: IconComponent, selector: "kms-icon", inputs: ["icon", "iconClass", "size", "dontUseSprite", "color"] }, { kind: "component", type: DateInputComponent, selector: "kms-date-input", inputs: ["mode", "disabled", "label", "placeholder", "required", "hint", "errorMessage", "minDate", "maxDate", "monthPicker", "startView"], outputs: ["dateChange", "rangeChange"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }, { kind: "directive", type: DynamicFieldDirective, selector: "[kmsDynamicField]", inputs: ["fieldConfig", "control"], outputs: ["fieldTouched"] }, { kind: "component", type: TextInputComponent, selector: "kms-text-input", inputs: ["disabled", "label", "placeholder", "type", "required", "hint", "errorMessage", "autocomplete", "prefix", "suffix", "prefixIcon", "suffixIcon"], outputs: ["valueChange"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4185
|
+
}
|
|
4186
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormFieldComponent, decorators: [{
|
|
4187
|
+
type: Component,
|
|
4188
|
+
args: [{ selector: 'kms-form-field', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "<div class=\"kms-form-field\"\n [attr.data-field-key]=\"fieldConfig().key\"\n [style.--kms-field-disabled-bg]=\"disabledBackground()\"\n [style.--kms-field-disabled-line]=\"disabledLine()\">\n\n @if (fieldConfig().type === FieldType.OFFSET) {\n <!-- \u2550\u2550\u2550 OFFSET \u2014 empty spacer \u2550\u2550\u2550 -->\n } @else if (isNativeType()) {\n <!-- \u2550\u2550\u2550 NATIVE TYPES \u2550\u2550\u2550 -->\n <div class=\"kms-form-field__row\">\n <div class=\"kms-form-field__control\">\n @if (isTextInputType()) {\n <!-- TEXT \u2014 delegates to kms-text-input CVA -->\n <kms-text-input\n [formControl]=\"control()\"\n [label]=\"fieldConfig().label ?? ''\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [required]=\"isRequired()\"\n [autocomplete]=\"resolvedAutocomplete() ?? ''\"\n [prefix]=\"fieldConfig().prefix?.type === 'text' ? fieldConfig().prefix!.value : ''\"\n [prefixIcon]=\"fieldConfig().prefix?.type === 'icon' ? fieldConfig().prefix!.value : ''\"\n [suffix]=\"fieldConfig().suffix?.type === 'text' ? fieldConfig().suffix!.value : ''\"\n [suffixIcon]=\"fieldConfig().suffix?.type === 'icon' ? fieldConfig().suffix!.value : ''\"\n [errorMessage]=\"displayErrorMessage()\">\n </kms-text-input>\n } @else if (isDateType()) {\n <!-- DATE / DATE_RANGE / MONTH_PICKER \u2014 delegates to kms-date-input CVA -->\n <kms-date-input\n [formControl]=\"control()\"\n [mode]=\"dateMode()\"\n [label]=\"fieldConfig().label ?? ''\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [required]=\"isRequired()\"\n [minDate]=\"dateMin()\"\n [maxDate]=\"dateMax()\"\n [monthPicker]=\"isMonthPicker()\"\n [errorMessage]=\"displayErrorMessage()\">\n </kms-date-input>\n } @else {\n <!-- TEXTAREA, AUTOCOMPLETE \u2014 keep existing mat-form-field -->\n <mat-form-field class=\"kms-form-field__mat-field\">\n @if (fieldConfig().label) {\n <mat-label>{{ fieldConfig().label }}</mat-label>\n }\n\n @switch (fieldConfig().type) {\n @case (FieldType.TEXTAREA) {\n <textarea matInput\n [formControl]=\"control()\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [rows]=\"textareaRows()\"\n [attr.autocomplete]=\"resolvedAutocomplete()\"\n [attr.aria-required]=\"isRequired() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [errorStateMatcher]=\"errorMatcher()\">\n </textarea>\n }\n @case (FieldType.AUTOCOMPLETE) {\n <input matInput\n [formControl]=\"control()\"\n [matAutocomplete]=\"autoPanel\"\n [placeholder]=\"fieldConfig().placeholder ?? ''\"\n [attr.autocomplete]=\"resolvedAutocomplete()\"\n [attr.aria-required]=\"isRequired() ? true : null\"\n [attr.aria-describedby]=\"ariaDescribedBy()\"\n [errorStateMatcher]=\"errorMatcher()\">\n <mat-autocomplete #autoPanel=\"matAutocomplete\" [autoActiveFirstOption]=\"autocompleteSelectFirst()\">\n @for (opt of filteredAutoOptions(); track opt.Value) {\n <mat-option [value]=\"opt.Value\">{{ opt.Label }}</mat-option>\n }\n </mat-autocomplete>\n }\n }\n\n <!-- Prefix -->\n @if (fieldConfig().prefix) {\n @if (fieldConfig().prefix!.type === 'text') {\n <span matTextPrefix>{{ fieldConfig().prefix!.value }} </span>\n } @else {\n <kms-icon matPrefix [icon]=\"fieldConfig().prefix!.value\" aria-hidden=\"true\"></kms-icon>\n }\n }\n\n <!-- Suffix -->\n @if (fieldConfig().suffix) {\n @if (fieldConfig().suffix!.type === 'text') {\n <span matTextSuffix> {{ fieldConfig().suffix!.value }}</span>\n } @else {\n <kms-icon matSuffix [icon]=\"fieldConfig().suffix!.value\" aria-hidden=\"true\"></kms-icon>\n }\n }\n\n <!-- Errors -->\n @for (msg of errorMessages(); track msg) {\n <mat-error>{{ msg }}</mat-error>\n }\n </mat-form-field>\n }\n </div>\n\n @if (fieldConfig().tooltip) {\n <kms-tooltip-icon\n class=\"kms-form-field__tooltip\"\n [tooltipText]=\"fieldConfig().tooltip!\"\n [attr.id]=\"tooltipId()\">\n </kms-tooltip-icon>\n }\n </div>\n\n } @else if (fieldConfig().type === FieldType.TEMPLATE && fieldConfig().templateRef) {\n <!-- \u2550\u2550\u2550 TEMPLATE \u2014 consumer-provided template \u2550\u2550\u2550 -->\n <div class=\"kms-form-field__row\">\n <div class=\"kms-form-field__control\">\n <ng-container\n *ngTemplateOutlet=\"fieldConfig().templateRef!; context: { control: control(), $implicit: control() }\">\n </ng-container>\n </div>\n @if (fieldConfig().tooltip) {\n <kms-tooltip-icon\n class=\"kms-form-field__tooltip\"\n [tooltipText]=\"fieldConfig().tooltip!\"\n [attr.id]=\"tooltipId()\">\n </kms-tooltip-icon>\n }\n </div>\n @if (shouldShowErrors() && errorMessages().length) {\n <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n @for (msg of errorMessages(); track msg) {\n <div class=\"kms-form-field__error\">{{ msg }}</div>\n }\n </div>\n }\n } @else {\n <!-- \u2550\u2550\u2550 LIBRARY TYPES \u2014 dynamic component \u2550\u2550\u2550 -->\n @if (isGroupType()) {\n <div class=\"kms-form-field__label-row\">\n <span class=\"kms-form-field__group-label\" [attr.id]=\"groupLabelId()\">{{ fieldConfig().label }}</span>\n @if (fieldConfig().tooltip) {\n <kms-tooltip-icon [tooltipText]=\"fieldConfig().tooltip!\" [attr.id]=\"tooltipId()\"></kms-tooltip-icon>\n }\n </div>\n }\n\n <div class=\"kms-form-field__row\">\n <div class=\"kms-form-field__control\">\n <ng-container kmsDynamicField\n [fieldConfig]=\"fieldConfig()\"\n [control]=\"control()\"\n (fieldTouched)=\"onFieldTouched()\">\n </ng-container>\n </div>\n\n @if (!isGroupType() && fieldConfig().tooltip) {\n <kms-tooltip-icon\n class=\"kms-form-field__tooltip\"\n [tooltipText]=\"fieldConfig().tooltip!\"\n [attr.id]=\"tooltipId()\">\n </kms-tooltip-icon>\n }\n </div>\n\n @if (shouldShowErrors() && errorMessages().length) {\n <div class=\"kms-form-field__errors\" role=\"alert\" [attr.id]=\"errorsId()\">\n @for (msg of errorMessages(); track msg) {\n <div class=\"kms-form-field__error\">{{ msg }}</div>\n }\n </div>\n }\n }\n</div>\n", styles: [":host{display:block}.kms-form-field__mat-field{width:100%}.kms-form-field__label-row{display:flex;align-items:center;gap:4px;margin-bottom:4px}.kms-form-field__group-label{font-size:14px;font-weight:500;color:var(--mat-form-field-label-text-color, rgba(0, 0, 0, .6))}.kms-form-field__row{display:flex;align-items:flex-start;gap:4px}.kms-form-field__control{flex:1;min-width:0}.kms-form-field__tooltip{flex-shrink:0;cursor:help;padding-top:16px}.kms-form-field__errors{padding:0 16px;margin-top:4px}.kms-form-field__error{font-size:12px;line-height:1.2;color:var(--mat-form-field-error-text-color, #f44336)}:host ::ng-deep kms-dropdown-from-data,:host ::ng-deep kms-date-input,:host ::ng-deep kms-time-input,:host ::ng-deep kms-color-input{display:block;width:100%}:host ::ng-deep kms-dropdown-from-data .mat-mdc-form-field,:host ::ng-deep kms-date-input .mat-mdc-form-field,:host ::ng-deep kms-time-input .mat-mdc-form-field,:host ::ng-deep kms-color-input .mat-mdc-form-field{width:100%}:host ::ng-deep kms-numeric-input{display:flex;align-items:center;gap:12px}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-text-field{background-color:var(--kms-field-disabled-bg, transparent)}:host ::ng-deep .mat-mdc-form-field.mat-form-field-disabled .mdc-line-ripple{display:var(--kms-field-disabled-line, none)}\n"] }]
|
|
4189
|
+
}], ctorParameters: () => [], propDecorators: { fieldConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "fieldConfig", required: true }] }], control: [{ type: i0.Input, args: [{ isSignal: true, alias: "control", required: true }] }], formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], formErrorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorDisplay", required: false }] }], formDisabledConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDisabledConfig", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }] } });
|
|
4190
|
+
|
|
4191
|
+
const ALIGN_MAP = { left: 'start', center: 'center', right: 'end', stretch: 'stretch' };
|
|
4192
|
+
const VALIGN_MAP = { top: 'start', center: 'center', bottom: 'end', stretch: 'stretch' };
|
|
4193
|
+
class FormSectionComponent {
|
|
4194
|
+
constructor() {
|
|
4195
|
+
this.sectionConfig = input.required(...(ngDevMode ? [{ debugName: "sectionConfig" }] : []));
|
|
4196
|
+
this.formGroup = input.required(...(ngDevMode ? [{ debugName: "formGroup" }] : []));
|
|
4197
|
+
this.formId = input('', ...(ngDevMode ? [{ debugName: "formId" }] : []));
|
|
4198
|
+
this.formErrorDisplay = input(...(ngDevMode ? [undefined, { debugName: "formErrorDisplay" }] : []));
|
|
4199
|
+
this.formDisabledConfig = input(...(ngDevMode ? [undefined, { debugName: "formDisabledConfig" }] : []));
|
|
4200
|
+
this.submitted = input(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
|
|
4201
|
+
this.viewportService = inject(ViewportService);
|
|
4202
|
+
this.destroyRef = inject(DestroyRef);
|
|
4203
|
+
this.viewportWidth = signal(this.viewportService.getCurrentViewPortWidth(), ...(ngDevMode ? [{ debugName: "viewportWidth" }] : []));
|
|
4204
|
+
// --- Responsive columns ---
|
|
4205
|
+
this.activeColumns = computed(() => {
|
|
4206
|
+
const c = this.sectionConfig();
|
|
4207
|
+
const w = this.viewportWidth();
|
|
4208
|
+
if (w <= 768)
|
|
4209
|
+
return c.gridColumnsSm ?? 1;
|
|
4210
|
+
if (w <= 1024)
|
|
4211
|
+
return c.gridColumnsMd ?? c.gridColumns ?? 1;
|
|
4212
|
+
return c.gridColumns ?? 1;
|
|
4213
|
+
}, ...(ngDevMode ? [{ debugName: "activeColumns" }] : []));
|
|
4214
|
+
// --- Visible fields ---
|
|
4215
|
+
this.visibleFields = computed(() => {
|
|
4216
|
+
return this.sectionConfig().fields.filter((f) => !f.hidden);
|
|
4217
|
+
}, ...(ngDevMode ? [{ debugName: "visibleFields" }] : []));
|
|
4218
|
+
this.isVisible = computed(() => {
|
|
4219
|
+
if (this.sectionConfig().hidden)
|
|
4220
|
+
return false;
|
|
4221
|
+
return this.visibleFields().length > 0;
|
|
4222
|
+
}, ...(ngDevMode ? [{ debugName: "isVisible" }] : []));
|
|
4223
|
+
// --- Grid styles ---
|
|
4224
|
+
this.gridStyles = computed(() => {
|
|
4225
|
+
const c = this.sectionConfig();
|
|
4226
|
+
return {
|
|
4227
|
+
'grid-template-columns': `repeat(${this.activeColumns()}, 1fr)`,
|
|
4228
|
+
gap: c.gap ?? '16px',
|
|
4229
|
+
padding: c.padding ?? '0',
|
|
4230
|
+
'justify-items': ALIGN_MAP[c.align ?? 'stretch'],
|
|
4231
|
+
'align-items': VALIGN_MAP[c.verticalAlign ?? 'top'],
|
|
4232
|
+
};
|
|
4233
|
+
}, ...(ngDevMode ? [{ debugName: "gridStyles" }] : []));
|
|
4234
|
+
const sub = this.viewportService.getViewportResizedObserver().subscribe((w) => this.viewportWidth.set(w));
|
|
4235
|
+
this.destroyRef.onDestroy(() => sub.unsubscribe());
|
|
4236
|
+
}
|
|
4237
|
+
// --- Per-field cell styles ---
|
|
4238
|
+
cellStyles(field) {
|
|
4239
|
+
const cols = this.activeColumns();
|
|
4240
|
+
const span = Math.min(field.columnSize ?? 1, cols);
|
|
4241
|
+
const styles = { 'grid-column': `span ${span}` };
|
|
4242
|
+
if (field.align) {
|
|
4243
|
+
styles['justify-self'] = ALIGN_MAP[field.align];
|
|
4244
|
+
}
|
|
4245
|
+
return styles;
|
|
4246
|
+
}
|
|
4247
|
+
// --- Control accessor ---
|
|
4248
|
+
static { this.DUMMY_CONTROL = new FormControl(); }
|
|
4249
|
+
getControl(key) {
|
|
4250
|
+
if (!key)
|
|
4251
|
+
return FormSectionComponent.DUMMY_CONTROL;
|
|
4252
|
+
return this.formGroup().get(key) ?? FormSectionComponent.DUMMY_CONTROL;
|
|
4253
|
+
}
|
|
4254
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormSectionComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4255
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: FormSectionComponent, isStandalone: false, selector: "kms-form-section", inputs: { sectionConfig: { classPropertyName: "sectionConfig", publicName: "sectionConfig", isSignal: true, isRequired: true, transformFunction: null }, formGroup: { classPropertyName: "formGroup", publicName: "formGroup", isSignal: true, isRequired: true, transformFunction: null }, formId: { classPropertyName: "formId", publicName: "formId", isSignal: true, isRequired: false, transformFunction: null }, formErrorDisplay: { classPropertyName: "formErrorDisplay", publicName: "formErrorDisplay", isSignal: true, isRequired: false, transformFunction: null }, formDisabledConfig: { classPropertyName: "formDisabledConfig", publicName: "formDisabledConfig", isSignal: true, isRequired: false, transformFunction: null }, submitted: { classPropertyName: "submitted", publicName: "submitted", isSignal: true, isRequired: false, transformFunction: null } }, ngImport: i0, template: "@if (isVisible()) {\n <fieldset class=\"kms-form-section\">\n @if (sectionConfig().title) {\n <legend class=\"kms-form-section__legend\">\n {{ sectionConfig().title }}\n @if (sectionConfig().tooltip) {\n <kms-tooltip-icon [tooltipText]=\"sectionConfig().tooltip!\"></kms-tooltip-icon>\n }\n </legend>\n }\n\n <div class=\"kms-form-section__grid\" [ngStyle]=\"gridStyles()\">\n @for (field of visibleFields(); track field.key ?? $index) {\n <div class=\"kms-form-section__cell\" [ngStyle]=\"cellStyles(field)\">\n <kms-form-field\n [fieldConfig]=\"field\"\n [control]=\"getControl(field.key)\"\n [formId]=\"formId()\"\n [formErrorDisplay]=\"formErrorDisplay()\"\n [formDisabledConfig]=\"formDisabledConfig()\"\n [submitted]=\"submitted()\">\n </kms-form-field>\n </div>\n }\n </div>\n </fieldset>\n}\n", styles: [":host{display:block}.kms-form-section{border:none;margin:0;padding:0;min-inline-size:auto}.kms-form-section__legend{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:500;padding:0 0 8px;width:100%}.kms-form-section__grid{display:grid}.kms-form-section__cell{min-width:0}\n"], dependencies: [{ kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "component", type: TooltipIconComponent, selector: "kms-tooltip-icon", inputs: ["tooltipText", "placement", "delay", "iconSize", "tooltipAlwaysVisible", "icon"] }, { kind: "component", type: FormFieldComponent, selector: "kms-form-field", inputs: ["fieldConfig", "control", "formId", "formErrorDisplay", "formDisabledConfig", "submitted"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4256
|
+
}
|
|
4257
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: FormSectionComponent, decorators: [{
|
|
4258
|
+
type: Component,
|
|
4259
|
+
args: [{ selector: 'kms-form-section', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, template: "@if (isVisible()) {\n <fieldset class=\"kms-form-section\">\n @if (sectionConfig().title) {\n <legend class=\"kms-form-section__legend\">\n {{ sectionConfig().title }}\n @if (sectionConfig().tooltip) {\n <kms-tooltip-icon [tooltipText]=\"sectionConfig().tooltip!\"></kms-tooltip-icon>\n }\n </legend>\n }\n\n <div class=\"kms-form-section__grid\" [ngStyle]=\"gridStyles()\">\n @for (field of visibleFields(); track field.key ?? $index) {\n <div class=\"kms-form-section__cell\" [ngStyle]=\"cellStyles(field)\">\n <kms-form-field\n [fieldConfig]=\"field\"\n [control]=\"getControl(field.key)\"\n [formId]=\"formId()\"\n [formErrorDisplay]=\"formErrorDisplay()\"\n [formDisabledConfig]=\"formDisabledConfig()\"\n [submitted]=\"submitted()\">\n </kms-form-field>\n </div>\n }\n </div>\n </fieldset>\n}\n", styles: [":host{display:block}.kms-form-section{border:none;margin:0;padding:0;min-inline-size:auto}.kms-form-section__legend{display:flex;align-items:center;gap:4px;font-size:16px;font-weight:500;padding:0 0 8px;width:100%}.kms-form-section__grid{display:grid}.kms-form-section__cell{min-width:0}\n"] }]
|
|
4260
|
+
}], ctorParameters: () => [], propDecorators: { sectionConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "sectionConfig", required: true }] }], formGroup: [{ type: i0.Input, args: [{ isSignal: true, alias: "formGroup", required: true }] }], formId: [{ type: i0.Input, args: [{ isSignal: true, alias: "formId", required: false }] }], formErrorDisplay: [{ type: i0.Input, args: [{ isSignal: true, alias: "formErrorDisplay", required: false }] }], formDisabledConfig: [{ type: i0.Input, args: [{ isSignal: true, alias: "formDisabledConfig", required: false }] }], submitted: [{ type: i0.Input, args: [{ isSignal: true, alias: "submitted", required: false }] }] } });
|
|
4261
|
+
|
|
4262
|
+
class GenericFormComponent {
|
|
4263
|
+
constructor() {
|
|
4264
|
+
// --- Signal inputs ---
|
|
4265
|
+
this.config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
4266
|
+
this.value = model({}, ...(ngDevMode ? [{ debugName: "value" }] : []));
|
|
4267
|
+
this.disabled = input(false, ...(ngDevMode ? [{ debugName: "disabled" }] : []));
|
|
4268
|
+
this.loading = input(false, ...(ngDevMode ? [{ debugName: "loading" }] : []));
|
|
4269
|
+
// --- Signal outputs ---
|
|
4270
|
+
this.formSubmit = output();
|
|
4271
|
+
this.formStateChange = output();
|
|
4272
|
+
this.formReady = output();
|
|
4273
|
+
this.fieldValueChange = output();
|
|
4274
|
+
// --- Internal state ---
|
|
4275
|
+
this.formService = inject(GenericFormService);
|
|
4276
|
+
this.elementRef = inject(ElementRef);
|
|
4277
|
+
this.destroyRef = inject(DestroyRef);
|
|
4278
|
+
this.formSub$ = new Subject();
|
|
4279
|
+
this.lastEmittedValue = {};
|
|
4280
|
+
this.form = signal(new FormGroup({}), ...(ngDevMode ? [{ debugName: "form" }] : []));
|
|
4281
|
+
this.submitted = signal(false, ...(ngDevMode ? [{ debugName: "submitted" }] : []));
|
|
4282
|
+
this.errorAnnouncement = signal('', ...(ngDevMode ? [{ debugName: "errorAnnouncement" }] : []));
|
|
4283
|
+
// --- Computed ---
|
|
4284
|
+
this.visibleSections = computed(() => {
|
|
4285
|
+
return this.config().sections.filter((s) => {
|
|
4286
|
+
if (s.hidden)
|
|
4287
|
+
return false;
|
|
4288
|
+
return s.fields.some((f) => !f.hidden);
|
|
4289
|
+
});
|
|
4290
|
+
}, ...(ngDevMode ? [{ debugName: "visibleSections" }] : []));
|
|
4291
|
+
this.showActionsTop = computed(() => {
|
|
4292
|
+
const actions = this.config().submitAction;
|
|
4293
|
+
if (!actions)
|
|
4294
|
+
return false;
|
|
4295
|
+
const pos = actions.position ?? 'bottom';
|
|
4296
|
+
return pos === 'top' || pos === 'both';
|
|
4297
|
+
}, ...(ngDevMode ? [{ debugName: "showActionsTop" }] : []));
|
|
4298
|
+
this.showActionsBottom = computed(() => {
|
|
4299
|
+
const actions = this.config().submitAction;
|
|
4300
|
+
if (!actions)
|
|
4301
|
+
return false;
|
|
4302
|
+
const pos = actions.position ?? 'bottom';
|
|
4303
|
+
return pos === 'bottom' || pos === 'both';
|
|
4304
|
+
}, ...(ngDevMode ? [{ debugName: "showActionsBottom" }] : []));
|
|
4305
|
+
// Config effect — build form when config changes
|
|
4306
|
+
effect(() => {
|
|
4307
|
+
const config = this.config();
|
|
4308
|
+
untracked(() => this.onConfigChange(config));
|
|
4309
|
+
});
|
|
4310
|
+
// Value effect — patch form when external value changes
|
|
4311
|
+
effect(() => {
|
|
4312
|
+
const val = this.value();
|
|
4313
|
+
untracked(() => {
|
|
4314
|
+
if (val !== this.lastEmittedValue) {
|
|
4315
|
+
const fg = this.formService.getFormGroup();
|
|
4316
|
+
if (fg) {
|
|
4317
|
+
this.formService.patchValue(val, { silent: true });
|
|
4318
|
+
}
|
|
4319
|
+
}
|
|
4320
|
+
});
|
|
4321
|
+
});
|
|
4322
|
+
// Disabled effect — enable/disable entire form
|
|
4323
|
+
effect(() => {
|
|
4324
|
+
const disabled = this.disabled();
|
|
4325
|
+
untracked(() => {
|
|
4326
|
+
const fg = this.formService.getFormGroup();
|
|
4327
|
+
if (!fg)
|
|
4328
|
+
return;
|
|
4329
|
+
// Disable/enable individual controls (not the group) so that statusChanges
|
|
4330
|
+
// fires on each — DynamicFieldDirective listens to statusChanges to sync
|
|
4331
|
+
// the disabled state to the child CVA component.
|
|
4332
|
+
const controls = Object.values(fg.controls);
|
|
4333
|
+
if (disabled) {
|
|
4334
|
+
controls.forEach((c) => c.disable({ onlySelf: true }));
|
|
4335
|
+
}
|
|
4336
|
+
else {
|
|
4337
|
+
controls.forEach((c) => c.enable({ onlySelf: true }));
|
|
4338
|
+
this.formService.applyVisibility(this.config());
|
|
4339
|
+
}
|
|
4340
|
+
});
|
|
4341
|
+
});
|
|
4342
|
+
this.destroyRef.onDestroy(() => {
|
|
4343
|
+
this.formSub$.next();
|
|
4344
|
+
this.formSub$.complete();
|
|
4345
|
+
});
|
|
4346
|
+
}
|
|
4347
|
+
onConfigChange(config) {
|
|
4348
|
+
this.formSub$.next();
|
|
4349
|
+
this.submitted.set(false);
|
|
4350
|
+
const fg = this.formService.buildForm(config);
|
|
4351
|
+
this.form.set(fg);
|
|
4352
|
+
// Apply initial value if present
|
|
4353
|
+
const initialValue = this.value();
|
|
4354
|
+
if (Object.keys(initialValue).length > 0) {
|
|
4355
|
+
this.formService.patchValue(initialValue, { silent: true });
|
|
4356
|
+
}
|
|
4357
|
+
// Apply overall disabled state
|
|
4358
|
+
if (this.disabled()) {
|
|
4359
|
+
fg.disable({ emitEvent: false });
|
|
4360
|
+
}
|
|
4361
|
+
// Form value changes → update model, emit state, CVA
|
|
4362
|
+
fg.valueChanges.pipe(takeUntil(this.formSub$)).subscribe(() => {
|
|
4363
|
+
const rawValue = this.formService.getRawValue();
|
|
4364
|
+
this.lastEmittedValue = rawValue;
|
|
4365
|
+
this.value.set(rawValue);
|
|
4366
|
+
this.formStateChange.emit(this.formService.getState());
|
|
4367
|
+
this.cvaOnChange?.(rawValue);
|
|
4368
|
+
});
|
|
4369
|
+
// Field-level value changes
|
|
4370
|
+
for (const section of config.sections) {
|
|
4371
|
+
for (const field of section.fields) {
|
|
4372
|
+
if (!field.key)
|
|
4373
|
+
continue;
|
|
4374
|
+
this.formService
|
|
4375
|
+
.fieldValueChanges$(field.key)
|
|
4376
|
+
.pipe(takeUntil(this.formSub$))
|
|
4377
|
+
.subscribe((fieldValue) => {
|
|
4378
|
+
this.fieldValueChange.emit({ key: field.key, value: fieldValue });
|
|
4379
|
+
});
|
|
4380
|
+
}
|
|
4381
|
+
}
|
|
4382
|
+
this.formReady.emit(fg);
|
|
4383
|
+
this.formStateChange.emit(this.formService.getState());
|
|
4384
|
+
}
|
|
4385
|
+
// --- Public methods ---
|
|
4386
|
+
onFormSubmit(event) {
|
|
4387
|
+
event.preventDefault();
|
|
4388
|
+
}
|
|
4389
|
+
onEnterKey(event) {
|
|
4390
|
+
const target = event.target;
|
|
4391
|
+
if (target.tagName === 'TEXTAREA')
|
|
4392
|
+
return;
|
|
4393
|
+
event.preventDefault();
|
|
4394
|
+
this.submit();
|
|
4395
|
+
}
|
|
4396
|
+
submit() {
|
|
4397
|
+
const valid = this.formService.validateAll();
|
|
4398
|
+
this.submitted.set(true);
|
|
4399
|
+
if (valid) {
|
|
4400
|
+
this.formSubmit.emit(this.formService.getRawValue());
|
|
4401
|
+
this.errorAnnouncement.set('');
|
|
4402
|
+
}
|
|
4403
|
+
else {
|
|
4404
|
+
this.announceErrors();
|
|
4405
|
+
this.focusFirstInvalidField();
|
|
4406
|
+
}
|
|
4407
|
+
this.formStateChange.emit(this.formService.getState());
|
|
4408
|
+
return valid;
|
|
4409
|
+
}
|
|
4410
|
+
validate() {
|
|
4411
|
+
const valid = this.formService.validateAll();
|
|
4412
|
+
this.submitted.set(true);
|
|
4413
|
+
this.formStateChange.emit(this.formService.getState());
|
|
4414
|
+
return valid;
|
|
4415
|
+
}
|
|
4416
|
+
getFormGroup() {
|
|
4417
|
+
return this.formService.getFormGroup();
|
|
4418
|
+
}
|
|
4419
|
+
// --- A11y ---
|
|
4420
|
+
announceErrors() {
|
|
4421
|
+
const errors = this.formService.getErrors();
|
|
4422
|
+
if (!errors)
|
|
4423
|
+
return;
|
|
4424
|
+
const count = Object.keys(errors).length;
|
|
4425
|
+
this.errorAnnouncement.set(count === 1
|
|
4426
|
+
? '1 field has a validation error.'
|
|
4427
|
+
: `${count} fields have validation errors.`);
|
|
4428
|
+
}
|
|
4429
|
+
focusFirstInvalidField() {
|
|
4430
|
+
const fg = this.formService.getFormGroup();
|
|
4431
|
+
for (const section of this.config().sections) {
|
|
4432
|
+
for (const field of section.fields) {
|
|
4433
|
+
if (!field.key || field.hidden)
|
|
4434
|
+
continue;
|
|
4435
|
+
const control = fg.get(field.key);
|
|
4436
|
+
if (control?.invalid && control.enabled) {
|
|
4437
|
+
const escapedKey = field.key.replace(/["\\]/g, '\\$&');
|
|
4438
|
+
const fieldEl = this.elementRef.nativeElement.querySelector(`[data-field-key="${escapedKey}"]`);
|
|
4439
|
+
const focusable = fieldEl?.querySelector('input, textarea, select, [tabindex]');
|
|
4440
|
+
if (focusable) {
|
|
4441
|
+
focusable.focus();
|
|
4442
|
+
return;
|
|
4443
|
+
}
|
|
4444
|
+
}
|
|
4445
|
+
}
|
|
4446
|
+
}
|
|
4447
|
+
}
|
|
4448
|
+
// --- CVA ---
|
|
4449
|
+
writeValue(value) {
|
|
4450
|
+
if (value) {
|
|
4451
|
+
this.formService.patchValue(value, { silent: true });
|
|
4452
|
+
}
|
|
4453
|
+
}
|
|
4454
|
+
registerOnChange(fn) {
|
|
4455
|
+
this.cvaOnChange = fn;
|
|
4456
|
+
}
|
|
4457
|
+
registerOnTouched(fn) {
|
|
4458
|
+
this.cvaOnTouched = fn;
|
|
4459
|
+
}
|
|
4460
|
+
setDisabledState(isDisabled) {
|
|
4461
|
+
const fg = this.formService.getFormGroup();
|
|
4462
|
+
if (!fg)
|
|
4463
|
+
return;
|
|
4464
|
+
const controls = Object.values(fg.controls);
|
|
4465
|
+
if (isDisabled) {
|
|
4466
|
+
controls.forEach((c) => c.disable({ onlySelf: true }));
|
|
4467
|
+
}
|
|
4468
|
+
else {
|
|
4469
|
+
controls.forEach((c) => c.enable({ onlySelf: true }));
|
|
4470
|
+
this.formService.applyVisibility(this.config());
|
|
4471
|
+
}
|
|
4472
|
+
}
|
|
4473
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
4474
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: GenericFormComponent, isStandalone: false, selector: "kms-generic-form", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, value: { classPropertyName: "value", publicName: "value", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, loading: { classPropertyName: "loading", publicName: "loading", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { value: "valueChange", formSubmit: "formSubmit", formStateChange: "formStateChange", formReady: "formReady", fieldValueChange: "fieldValueChange" }, providers: [
|
|
4475
|
+
GenericFormService,
|
|
4476
|
+
{
|
|
4477
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4478
|
+
useExisting: forwardRef(() => GenericFormComponent),
|
|
4479
|
+
multi: true,
|
|
4480
|
+
},
|
|
4481
|
+
], ngImport: i0, template: "<form class=\"kms-generic-form\"\n [class.kms-generic-form--loading]=\"loading()\"\n [class.kms-generic-form--disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (submit)=\"onFormSubmit($event)\"\n (keydown.enter)=\"onEnterKey($event)\">\n\n @if (showActionsTop()) {\n <kms-form-actions\n [actionsConfig]=\"config().submitAction!\"\n [disabled]=\"loading()\"\n (submitClick)=\"submit()\">\n </kms-form-actions>\n }\n\n @for (section of visibleSections(); track section.key) {\n <kms-form-section\n [sectionConfig]=\"section\"\n [formGroup]=\"form()\"\n [formId]=\"config().formId\"\n [formErrorDisplay]=\"config().errorDisplay\"\n [formDisabledConfig]=\"config().disabledConfig\"\n [submitted]=\"submitted()\">\n </kms-form-section>\n }\n\n @if (showActionsBottom()) {\n <kms-form-actions\n [actionsConfig]=\"config().submitAction!\"\n [disabled]=\"loading()\"\n (submitClick)=\"submit()\">\n </kms-form-actions>\n }\n\n @if (loading()) {\n <div class=\"kms-generic-form__loading-overlay\"></div>\n }\n\n <output class=\"kms-generic-form__sr-only\" aria-live=\"polite\">\n {{ errorAnnouncement() }}\n </output>\n</form>\n", styles: [":host{display:block}.kms-generic-form{position:relative}.kms-generic-form--loading{pointer-events:none}.kms-generic-form__loading-overlay{position:absolute;inset:0;background:#fff9;z-index:1}.kms-generic-form__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"], dependencies: [{ kind: "directive", type: i2.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i2.NgForm, selector: "form:not([ngNoForm]):not([formGroup]),ng-form,[ngForm]", inputs: ["ngFormOptions"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "component", type: FormSectionComponent, selector: "kms-form-section", inputs: ["sectionConfig", "formGroup", "formId", "formErrorDisplay", "formDisabledConfig", "submitted"] }, { kind: "component", type: FormActionsComponent, selector: "kms-form-actions", inputs: ["actionsConfig", "disabled"], outputs: ["submitClick"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
4482
|
+
}
|
|
4483
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormComponent, decorators: [{
|
|
4484
|
+
type: Component,
|
|
4485
|
+
args: [{ selector: 'kms-generic-form', changeDetection: ChangeDetectionStrategy.OnPush, standalone: false, providers: [
|
|
4486
|
+
GenericFormService,
|
|
4487
|
+
{
|
|
4488
|
+
provide: NG_VALUE_ACCESSOR,
|
|
4489
|
+
useExisting: forwardRef(() => GenericFormComponent),
|
|
4490
|
+
multi: true,
|
|
4491
|
+
},
|
|
4492
|
+
], template: "<form class=\"kms-generic-form\"\n [class.kms-generic-form--loading]=\"loading()\"\n [class.kms-generic-form--disabled]=\"disabled()\"\n [attr.aria-busy]=\"loading() || null\"\n [attr.aria-disabled]=\"disabled() || null\"\n (submit)=\"onFormSubmit($event)\"\n (keydown.enter)=\"onEnterKey($event)\">\n\n @if (showActionsTop()) {\n <kms-form-actions\n [actionsConfig]=\"config().submitAction!\"\n [disabled]=\"loading()\"\n (submitClick)=\"submit()\">\n </kms-form-actions>\n }\n\n @for (section of visibleSections(); track section.key) {\n <kms-form-section\n [sectionConfig]=\"section\"\n [formGroup]=\"form()\"\n [formId]=\"config().formId\"\n [formErrorDisplay]=\"config().errorDisplay\"\n [formDisabledConfig]=\"config().disabledConfig\"\n [submitted]=\"submitted()\">\n </kms-form-section>\n }\n\n @if (showActionsBottom()) {\n <kms-form-actions\n [actionsConfig]=\"config().submitAction!\"\n [disabled]=\"loading()\"\n (submitClick)=\"submit()\">\n </kms-form-actions>\n }\n\n @if (loading()) {\n <div class=\"kms-generic-form__loading-overlay\"></div>\n }\n\n <output class=\"kms-generic-form__sr-only\" aria-live=\"polite\">\n {{ errorAnnouncement() }}\n </output>\n</form>\n", styles: [":host{display:block}.kms-generic-form{position:relative}.kms-generic-form--loading{pointer-events:none}.kms-generic-form__loading-overlay{position:absolute;inset:0;background:#fff9;z-index:1}.kms-generic-form__sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}\n"] }]
|
|
4493
|
+
}], ctorParameters: () => [], propDecorators: { config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], value: [{ type: i0.Input, args: [{ isSignal: true, alias: "value", required: false }] }, { type: i0.Output, args: ["valueChange"] }], disabled: [{ type: i0.Input, args: [{ isSignal: true, alias: "disabled", required: false }] }], loading: [{ type: i0.Input, args: [{ isSignal: true, alias: "loading", required: false }] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formStateChange: [{ type: i0.Output, args: ["formStateChange"] }], formReady: [{ type: i0.Output, args: ["formReady"] }], fieldValueChange: [{ type: i0.Output, args: ["fieldValueChange"] }] } });
|
|
4494
|
+
|
|
3236
4495
|
class KmsUiPresentationalModule {
|
|
3237
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3238
|
-
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.
|
|
4496
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4497
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalModule, declarations: [BackToTopComponent,
|
|
3239
4498
|
CheckboxComponent,
|
|
3240
4499
|
ColorInputComponent,
|
|
3241
4500
|
DropdownFromDataComponent,
|
|
@@ -3243,7 +4502,6 @@ class KmsUiPresentationalModule {
|
|
|
3243
4502
|
FileInputComponent,
|
|
3244
4503
|
FlyoutComponent,
|
|
3245
4504
|
ConfirmationDialogComponent,
|
|
3246
|
-
IconComponent,
|
|
3247
4505
|
ImageSliderComponent,
|
|
3248
4506
|
KMSAccordionItemComponent,
|
|
3249
4507
|
KmsUiPresentationalComponent,
|
|
@@ -3261,7 +4519,13 @@ class KmsUiPresentationalModule {
|
|
|
3261
4519
|
SliderComponent,
|
|
3262
4520
|
CardComponent,
|
|
3263
4521
|
ButtonComponent,
|
|
3264
|
-
NumericInputComponent
|
|
4522
|
+
NumericInputComponent,
|
|
4523
|
+
GenericFormComponent,
|
|
4524
|
+
FormSectionComponent,
|
|
4525
|
+
FormFieldComponent,
|
|
4526
|
+
FormActionsComponent,
|
|
4527
|
+
DynamicFieldDirective,
|
|
4528
|
+
TextInputComponent], imports: [CommonModule,
|
|
3265
4529
|
DragDropModule,
|
|
3266
4530
|
MatCheckboxModule,
|
|
3267
4531
|
MatButtonModule,
|
|
@@ -3276,6 +4540,7 @@ class KmsUiPresentationalModule {
|
|
|
3276
4540
|
GoogleMapsModule,
|
|
3277
4541
|
MatExpansionModule,
|
|
3278
4542
|
MatSelectModule,
|
|
4543
|
+
NgxMatSelectSearchModule,
|
|
3279
4544
|
MatProgressSpinnerModule,
|
|
3280
4545
|
DirectivesModule,
|
|
3281
4546
|
MatSlideToggleModule,
|
|
@@ -3284,7 +4549,11 @@ class KmsUiPresentationalModule {
|
|
|
3284
4549
|
NgxSliderModule,
|
|
3285
4550
|
MatAutocompleteModule,
|
|
3286
4551
|
MatListModule,
|
|
3287
|
-
MatCardModule
|
|
4552
|
+
MatCardModule,
|
|
4553
|
+
MatDatepickerModule,
|
|
4554
|
+
MatNativeDateModule,
|
|
4555
|
+
IconComponent,
|
|
4556
|
+
DateInputComponent], exports: [BackToTopComponent,
|
|
3288
4557
|
CheckboxComponent,
|
|
3289
4558
|
ColorInputComponent,
|
|
3290
4559
|
DropdownFromDataComponent,
|
|
@@ -3310,8 +4579,14 @@ class KmsUiPresentationalModule {
|
|
|
3310
4579
|
SliderComponent,
|
|
3311
4580
|
CardComponent,
|
|
3312
4581
|
ButtonComponent,
|
|
3313
|
-
NumericInputComponent
|
|
3314
|
-
|
|
4582
|
+
NumericInputComponent,
|
|
4583
|
+
GenericFormComponent,
|
|
4584
|
+
FormSectionComponent,
|
|
4585
|
+
FormActionsComponent,
|
|
4586
|
+
DynamicFieldDirective,
|
|
4587
|
+
DateInputComponent,
|
|
4588
|
+
TextInputComponent] }); }
|
|
4589
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalModule, providers: [ViewportService], imports: [CommonModule,
|
|
3315
4590
|
DragDropModule,
|
|
3316
4591
|
MatCheckboxModule,
|
|
3317
4592
|
MatButtonModule,
|
|
@@ -3326,6 +4601,7 @@ class KmsUiPresentationalModule {
|
|
|
3326
4601
|
GoogleMapsModule,
|
|
3327
4602
|
MatExpansionModule,
|
|
3328
4603
|
MatSelectModule,
|
|
4604
|
+
NgxMatSelectSearchModule,
|
|
3329
4605
|
MatProgressSpinnerModule,
|
|
3330
4606
|
DirectivesModule,
|
|
3331
4607
|
MatSlideToggleModule,
|
|
@@ -3334,9 +4610,12 @@ class KmsUiPresentationalModule {
|
|
|
3334
4610
|
NgxSliderModule,
|
|
3335
4611
|
MatAutocompleteModule,
|
|
3336
4612
|
MatListModule,
|
|
3337
|
-
MatCardModule
|
|
4613
|
+
MatCardModule,
|
|
4614
|
+
MatDatepickerModule,
|
|
4615
|
+
MatNativeDateModule,
|
|
4616
|
+
DateInputComponent] }); }
|
|
3338
4617
|
}
|
|
3339
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4618
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalModule, decorators: [{
|
|
3340
4619
|
type: NgModule,
|
|
3341
4620
|
args: [{
|
|
3342
4621
|
declarations: [
|
|
@@ -3348,7 +4627,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3348
4627
|
FileInputComponent,
|
|
3349
4628
|
FlyoutComponent,
|
|
3350
4629
|
ConfirmationDialogComponent,
|
|
3351
|
-
IconComponent,
|
|
3352
4630
|
ImageSliderComponent,
|
|
3353
4631
|
KMSAccordionItemComponent,
|
|
3354
4632
|
KmsUiPresentationalComponent,
|
|
@@ -3367,6 +4645,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3367
4645
|
CardComponent,
|
|
3368
4646
|
ButtonComponent,
|
|
3369
4647
|
NumericInputComponent,
|
|
4648
|
+
GenericFormComponent,
|
|
4649
|
+
FormSectionComponent,
|
|
4650
|
+
FormFieldComponent,
|
|
4651
|
+
FormActionsComponent,
|
|
4652
|
+
DynamicFieldDirective,
|
|
4653
|
+
TextInputComponent,
|
|
3370
4654
|
],
|
|
3371
4655
|
imports: [
|
|
3372
4656
|
CommonModule,
|
|
@@ -3384,6 +4668,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3384
4668
|
GoogleMapsModule,
|
|
3385
4669
|
MatExpansionModule,
|
|
3386
4670
|
MatSelectModule,
|
|
4671
|
+
NgxMatSelectSearchModule,
|
|
3387
4672
|
MatProgressSpinnerModule,
|
|
3388
4673
|
DirectivesModule,
|
|
3389
4674
|
MatSlideToggleModule,
|
|
@@ -3393,6 +4678,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3393
4678
|
MatAutocompleteModule,
|
|
3394
4679
|
MatListModule,
|
|
3395
4680
|
MatCardModule,
|
|
4681
|
+
MatDatepickerModule,
|
|
4682
|
+
MatNativeDateModule,
|
|
4683
|
+
IconComponent,
|
|
4684
|
+
DateInputComponent,
|
|
3396
4685
|
],
|
|
3397
4686
|
exports: [
|
|
3398
4687
|
BackToTopComponent,
|
|
@@ -3422,6 +4711,12 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3422
4711
|
CardComponent,
|
|
3423
4712
|
ButtonComponent,
|
|
3424
4713
|
NumericInputComponent,
|
|
4714
|
+
GenericFormComponent,
|
|
4715
|
+
FormSectionComponent,
|
|
4716
|
+
FormActionsComponent,
|
|
4717
|
+
DynamicFieldDirective,
|
|
4718
|
+
DateInputComponent,
|
|
4719
|
+
TextInputComponent,
|
|
3425
4720
|
],
|
|
3426
4721
|
providers: [ViewportService],
|
|
3427
4722
|
schemas: [CUSTOM_ELEMENTS_SCHEMA],
|
|
@@ -3430,10 +4725,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.15", ngImpo
|
|
|
3430
4725
|
|
|
3431
4726
|
class KmsUiPresentationalService {
|
|
3432
4727
|
constructor() { }
|
|
3433
|
-
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.
|
|
3434
|
-
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.
|
|
4728
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
|
|
4729
|
+
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalService, providedIn: 'root' }); }
|
|
3435
4730
|
}
|
|
3436
|
-
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.
|
|
4731
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: KmsUiPresentationalService, decorators: [{
|
|
3437
4732
|
type: Injectable,
|
|
3438
4733
|
args: [{
|
|
3439
4734
|
providedIn: 'root'
|
|
@@ -3467,14 +4762,49 @@ function noSpecialCharsOnly() {
|
|
|
3467
4762
|
};
|
|
3468
4763
|
}
|
|
3469
4764
|
|
|
4765
|
+
/**
|
|
4766
|
+
* Lightweight facade module for the generic-form feature.
|
|
4767
|
+
*
|
|
4768
|
+
* - Provides `FieldRegistryService` (maps FieldType → library component classes).
|
|
4769
|
+
* - Merges pre-translated validation error messages into `@ngx-translate`
|
|
4770
|
+
* so that `GenericFormService.resolveErrorMessage()` can look them up.
|
|
4771
|
+
*
|
|
4772
|
+
* **Does NOT declare any components** — those live in `KmsUiPresentationalModule`
|
|
4773
|
+
* to avoid circular AOT imports.
|
|
4774
|
+
*
|
|
4775
|
+
* Consuming apps import both modules:
|
|
4776
|
+
* ```ts
|
|
4777
|
+
* imports: [KmsUiPresentationalModule, GenericFormModule]
|
|
4778
|
+
* ```
|
|
4779
|
+
*/
|
|
4780
|
+
class GenericFormModule {
|
|
4781
|
+
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule }); }
|
|
4782
|
+
static { this.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "20.3.16", ngImport: i0, type: GenericFormModule, imports: [TranslateModule] }); }
|
|
4783
|
+
static { this.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormModule, providers: [FieldRegistryService], imports: [TranslateModule] }); }
|
|
4784
|
+
}
|
|
4785
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: GenericFormModule, decorators: [{
|
|
4786
|
+
type: NgModule,
|
|
4787
|
+
args: [{
|
|
4788
|
+
imports: [TranslateModule],
|
|
4789
|
+
providers: [FieldRegistryService],
|
|
4790
|
+
}]
|
|
4791
|
+
}] });
|
|
4792
|
+
|
|
4793
|
+
/** Form layout mode. Currently only GRID is implemented. */
|
|
4794
|
+
var FormLayout;
|
|
4795
|
+
(function (FormLayout) {
|
|
4796
|
+
FormLayout["VERTICAL"] = "vertical";
|
|
4797
|
+
FormLayout["GRID"] = "grid";
|
|
4798
|
+
FormLayout["INLINE"] = "inline";
|
|
4799
|
+
})(FormLayout || (FormLayout = {}));
|
|
4800
|
+
|
|
3470
4801
|
/*
|
|
3471
4802
|
* Public API Surface of kms-ngx-ui-presentational
|
|
3472
4803
|
*/
|
|
3473
|
-
// Organisms
|
|
3474
4804
|
|
|
3475
4805
|
/**
|
|
3476
4806
|
* Generated bundle index. Do not edit.
|
|
3477
4807
|
*/
|
|
3478
4808
|
|
|
3479
|
-
export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DirectivesModule, DropdownFromDataComponent, EnumRadiogroupComponent, FileInputComponent, FlyoutComponent, FormParentComponent, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
|
|
4809
|
+
export { BackToTopComponent, Breakpoint, ButtonAppearance, ButtonComponent, ButtonResponseType, CardComponent, CheckboxComponent, Color, ColorInputComponent, ConfirmationDialogComponent, CustomPipesModule, DateInputComponent, DirectivesModule, DropdownFromDataComponent, DynamicFieldDirective, EnumRadiogroupComponent, FieldRegistryService, FieldType, FileInputComponent, FlyoutComponent, FormActionsComponent, FormFieldComponent, FormLayout, FormParentComponent, FormSectionComponent, GenericFormComponent, GenericFormModule, GenericFormService, GetMaxHeightDirective, IconComponent, IconSizePx, IconSizesArr, ImageSliderComponent, ImageSnippet, ImageSourceType, IntegerCurrency, KMSAccordionItemComponent, KeyValuePair, KmsUiPresentationalComponent, KmsUiPresentationalModule, KmsUiPresentationalService, LabelValuePair, LoaderComponent, MapComponent, Marker, MarkerLabel, MarkerOptions, NumericInputComponent, PasswordComponent, RadioButtonComponent, RadioButtonSize, RadioGroupComponent, SafeHtmlPipe, SafeResourceUrlPipe, SafeUrlPipe, SalutationDropdownComponent, SalutationEnum, SalutationRadiogroupComponent, SanitizeNullPipe, SimpleBreakpoint, SlideToggleComponent, SliderComponent, StylingTheme, SwipeDirective, TextInputComponent, TextValuePair, TextValuePairArray, TimeDirective, TimeInputComponent, TooltipDirective, TooltipIconComponent, TrimPipe, TypeofPipe, ViewportService, WindowDimensions, YesNoRadiogroupComponent, noSpecialCharsOnly, noWhitespaceOnly };
|
|
3480
4810
|
//# sourceMappingURL=kms-ngx-ui-presentational.mjs.map
|