@sotoa-ui/dynamic-form 0.0.12 → 0.0.13
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import * as i0 from '@angular/core';
|
|
2
2
|
import { Injectable, inject, DestroyRef, Component, forwardRef, ChangeDetectorRef, ViewContainerRef, EnvironmentInjector, input, EventEmitter, Output, Optional, Host, SkipSelf, Directive, computed, output, ViewChild, model, signal, effect } from '@angular/core';
|
|
3
|
-
import { distinctUntilChanged, isObservable, take } from 'rxjs';
|
|
3
|
+
import { distinctUntilChanged, isObservable, take, BehaviorSubject, map } from 'rxjs';
|
|
4
4
|
import * as i1 from '@angular/forms';
|
|
5
5
|
import { FormBuilder, Validators, ReactiveFormsModule, NgControl, NG_VALUE_ACCESSOR, FormsModule } from '@angular/forms';
|
|
6
6
|
import * as _ from 'lodash-es';
|
|
7
7
|
import { isArray } from 'lodash-es';
|
|
8
8
|
import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
|
|
9
9
|
import { debounceTime } from 'rxjs/operators';
|
|
10
|
-
import { NgClass, NgTemplateOutlet } from '@angular/common';
|
|
10
|
+
import { NgClass, NgTemplateOutlet, AsyncPipe } from '@angular/common';
|
|
11
11
|
import * as i2 from '@angular/material/checkbox';
|
|
12
12
|
import { MatCheckboxModule } from '@angular/material/checkbox';
|
|
13
13
|
import * as i2$1 from '@angular/material/form-field';
|
|
@@ -31,7 +31,8 @@ import { MatSlideToggleModule } from '@angular/material/slide-toggle';
|
|
|
31
31
|
import * as i1$2 from '@angular/material/dialog';
|
|
32
32
|
import { MAT_DIALOG_DATA, MatDialogModule, MatDialog, MatDialogRef } from '@angular/material/dialog';
|
|
33
33
|
import { MatBadge } from '@angular/material/badge';
|
|
34
|
-
import
|
|
34
|
+
import * as i1$3 from '@angular/material/menu';
|
|
35
|
+
import { MatMenuModule } from '@angular/material/menu';
|
|
35
36
|
import * as i5 from '@angular/material/chips';
|
|
36
37
|
import { MatChipsModule } from '@angular/material/chips';
|
|
37
38
|
import * as i6 from '@angular/material/autocomplete';
|
|
@@ -42,73 +43,178 @@ import * as i3$3 from '@angular/material/datepicker';
|
|
|
42
43
|
import { MatDatepickerIntl, MatDatepickerModule } from '@angular/material/datepicker';
|
|
43
44
|
import { DateAdapter } from '@angular/material/core';
|
|
44
45
|
import { provideLuxonDateAdapter } from '@angular/material-luxon-adapter';
|
|
46
|
+
import { MatSidenavModule } from '@angular/material/sidenav';
|
|
47
|
+
import { MatListModule } from '@angular/material/list';
|
|
48
|
+
import { MatTab, MatTabLabel } from '@angular/material/tabs';
|
|
49
|
+
import * as i4$1 from '@angular/material/stepper';
|
|
50
|
+
import { MatStepperModule, MatStepperPrevious, MatStepperNext } from '@angular/material/stepper';
|
|
51
|
+
import { STEPPER_GLOBAL_OPTIONS } from '@angular/cdk/stepper';
|
|
52
|
+
import { BreakpointObserver } from '@angular/cdk/layout';
|
|
53
|
+
|
|
54
|
+
var AcLogicOperatorEnum;
|
|
55
|
+
(function (AcLogicOperatorEnum) {
|
|
56
|
+
AcLogicOperatorEnum["OR"] = "OR";
|
|
57
|
+
AcLogicOperatorEnum["AND"] = "AND";
|
|
58
|
+
})(AcLogicOperatorEnum || (AcLogicOperatorEnum = {}));
|
|
59
|
+
var AcExpressionOperatorEnum;
|
|
60
|
+
(function (AcExpressionOperatorEnum) {
|
|
61
|
+
AcExpressionOperatorEnum["EQUALS"] = "EQUALS";
|
|
62
|
+
AcExpressionOperatorEnum["NOT_EQUALS"] = "NOT_EQUALS";
|
|
63
|
+
AcExpressionOperatorEnum["CHECKED"] = "CHECKED";
|
|
64
|
+
AcExpressionOperatorEnum["NOT_CHECKED"] = "NOT_CHECKED";
|
|
65
|
+
AcExpressionOperatorEnum["NOT_EMPTY"] = "NOT_EMPTY";
|
|
66
|
+
AcExpressionOperatorEnum["EMPTY"] = "EMPTY";
|
|
67
|
+
AcExpressionOperatorEnum["CONTAINS"] = "CONTAINS";
|
|
68
|
+
AcExpressionOperatorEnum["START_WITH"] = "START_WITH";
|
|
69
|
+
AcExpressionOperatorEnum["NOT_START_WITH"] = "NOT_START_WITH";
|
|
70
|
+
AcExpressionOperatorEnum["NOT_CONTAINS"] = "NOT_CONTAINS";
|
|
71
|
+
AcExpressionOperatorEnum["GREATER_THAN"] = "GREATER_THAN";
|
|
72
|
+
AcExpressionOperatorEnum["GREATER_EQUAL_THAN"] = "GREATER_EQUAL_THAN";
|
|
73
|
+
AcExpressionOperatorEnum["LESS_THAN"] = "LESS_THAN";
|
|
74
|
+
AcExpressionOperatorEnum["LESS_EQUAL_THAN"] = "LESS_EQUAL_THAN";
|
|
75
|
+
})(AcExpressionOperatorEnum || (AcExpressionOperatorEnum = {}));
|
|
45
76
|
|
|
46
77
|
class ConditionsService {
|
|
47
78
|
constructor() {
|
|
48
79
|
}
|
|
49
80
|
checkValidationConditions(validationConditions, dynamicFormDatas) {
|
|
50
81
|
for (const cond of validationConditions) {
|
|
51
|
-
const
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
if (field) {
|
|
59
|
-
const isConditionOk = this.checkCondition(cond.validation.condition!, pathFieldMap, idPathMap, instance.arrayCode, instance.arrayInstance);
|
|
60
|
-
this.setValidation(field, cond.validation, isConditionOk);
|
|
82
|
+
const fieldPaths = dynamicFormDatas.idPathMap.get(cond.fieldId);
|
|
83
|
+
if (fieldPaths) {
|
|
84
|
+
for (let path of fieldPaths) {
|
|
85
|
+
const formField = dynamicFormDatas.pathFieldMap.get(path.path);
|
|
86
|
+
if (formField) {
|
|
87
|
+
const isConditionKo = !this.checkCondition(cond.validation.condition, dynamicFormDatas, path.instance);
|
|
88
|
+
this.setValidation(formField, cond.validation, isConditionKo);
|
|
61
89
|
}
|
|
62
|
-
|
|
63
|
-
*/
|
|
64
90
|
}
|
|
65
91
|
}
|
|
66
|
-
/*
|
|
67
|
-
else if (fieldPath) {
|
|
68
|
-
const field = pathFieldMap.get(fieldPath);
|
|
69
|
-
if (field && field.control) {
|
|
70
|
-
const isConditionOk = this.checkCondition(cond.validation.condition!, pathFieldMap, idPathMap, null, null);
|
|
71
|
-
this.setValidation(field, cond.validation, isConditionOk);
|
|
72
|
-
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
*/
|
|
76
92
|
}
|
|
77
93
|
}
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
}
|
|
87
|
-
*/
|
|
94
|
+
setValidation(field, validation, isConditionOk) {
|
|
95
|
+
if (isConditionOk) {
|
|
96
|
+
field.control.addValidators(validation.validator);
|
|
97
|
+
}
|
|
98
|
+
else {
|
|
99
|
+
field.control.removeValidators(validation.validator);
|
|
100
|
+
}
|
|
101
|
+
field.control.updateValueAndValidity({ emitEvent: false });
|
|
102
|
+
}
|
|
88
103
|
checkDisplayConditions(displayConditions, dynamicFormDatas) {
|
|
89
104
|
for (const cond of displayConditions) {
|
|
90
|
-
const
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
this.setHidden(field, isConditionKo);
|
|
105
|
+
const fieldPaths = dynamicFormDatas.idPathMap.get(cond.fieldId);
|
|
106
|
+
if (fieldPaths) {
|
|
107
|
+
for (let path of fieldPaths) {
|
|
108
|
+
const formField = dynamicFormDatas.pathFieldMap.get(path.path);
|
|
109
|
+
if (formField) {
|
|
110
|
+
const isConditionKo = !this.checkCondition(cond.condition, dynamicFormDatas, path.instance);
|
|
111
|
+
this.setHidden(formField, isConditionKo);
|
|
112
|
+
}
|
|
99
113
|
}
|
|
100
|
-
}
|
|
101
|
-
} else if (fieldPath) {
|
|
102
|
-
const field = pathFieldMap.get(fieldPath);
|
|
103
|
-
if (field) {
|
|
104
|
-
const isConditionKo = !this.checkCondition(cond.condition, pathFieldMap, idPathMap, null, null);
|
|
105
|
-
this.setHidden(field, isConditionKo);
|
|
106
|
-
}
|
|
107
114
|
}
|
|
108
|
-
|
|
109
|
-
*/
|
|
110
115
|
}
|
|
111
116
|
}
|
|
117
|
+
setHidden(field, isConditionKo) {
|
|
118
|
+
if (isConditionKo != field.config.hidden) {
|
|
119
|
+
field.config.hidden = isConditionKo;
|
|
120
|
+
if (isConditionKo) {
|
|
121
|
+
field.control?.reset();
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
checkCondition(item, dynamicFormDatas, instance) {
|
|
126
|
+
let isOk = false;
|
|
127
|
+
if (item.type === 'expression') {
|
|
128
|
+
isOk = this.checkExpression(item, dynamicFormDatas, instance);
|
|
129
|
+
}
|
|
130
|
+
else {
|
|
131
|
+
for (const i of item.items) {
|
|
132
|
+
isOk = this.checkCondition(i, dynamicFormDatas, instance);
|
|
133
|
+
if ((item.logicOperator === AcLogicOperatorEnum.OR && isOk)
|
|
134
|
+
|| (item.logicOperator === AcLogicOperatorEnum.AND && !isOk)) {
|
|
135
|
+
break;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
}
|
|
139
|
+
return isOk;
|
|
140
|
+
}
|
|
141
|
+
checkExpression(item, dynamicFormDatas, instance) {
|
|
142
|
+
let isOk = false;
|
|
143
|
+
const fieldPath = dynamicFormDatas.idPathMap.get(item.fieldId)?.filter(x => x.instance === instance)[0];
|
|
144
|
+
if (fieldPath) {
|
|
145
|
+
isOk = this.evalExpression(dynamicFormDatas.pathFieldMap.get(fieldPath.path), item.operator, item.value);
|
|
146
|
+
}
|
|
147
|
+
return isOk;
|
|
148
|
+
}
|
|
149
|
+
evalExpression(field, operator, refValue) {
|
|
150
|
+
let isOk = false;
|
|
151
|
+
const fieldValue = field.control?.value;
|
|
152
|
+
switch (operator) {
|
|
153
|
+
case AcExpressionOperatorEnum.EQUALS:
|
|
154
|
+
isOk = refValue === fieldValue;
|
|
155
|
+
break;
|
|
156
|
+
case AcExpressionOperatorEnum.NOT_EQUALS:
|
|
157
|
+
isOk = refValue !== fieldValue;
|
|
158
|
+
break;
|
|
159
|
+
case AcExpressionOperatorEnum.CHECKED:
|
|
160
|
+
isOk = fieldValue === true;
|
|
161
|
+
break;
|
|
162
|
+
case AcExpressionOperatorEnum.NOT_CHECKED:
|
|
163
|
+
isOk = fieldValue !== true;
|
|
164
|
+
break;
|
|
165
|
+
case AcExpressionOperatorEnum.NOT_EMPTY:
|
|
166
|
+
isOk = fieldValue?.length > 0;
|
|
167
|
+
break;
|
|
168
|
+
case AcExpressionOperatorEnum.EMPTY:
|
|
169
|
+
isOk = !fieldValue || fieldValue.length == 0;
|
|
170
|
+
break;
|
|
171
|
+
case AcExpressionOperatorEnum.START_WITH:
|
|
172
|
+
isOk = !!fieldValue && !!refValue && !fieldValue.startsWith(refValue);
|
|
173
|
+
break;
|
|
174
|
+
case AcExpressionOperatorEnum.NOT_START_WITH:
|
|
175
|
+
isOk = !!fieldValue && !!refValue && !fieldValue.startsWith(refValue);
|
|
176
|
+
break;
|
|
177
|
+
case AcExpressionOperatorEnum.CONTAINS:
|
|
178
|
+
isOk = !!fieldValue && !!refValue && fieldValue.includes(refValue);
|
|
179
|
+
break;
|
|
180
|
+
case AcExpressionOperatorEnum.NOT_CONTAINS:
|
|
181
|
+
isOk = !!fieldValue && !!refValue && !fieldValue.includes(refValue);
|
|
182
|
+
break;
|
|
183
|
+
case AcExpressionOperatorEnum.GREATER_THAN:
|
|
184
|
+
if (field.config.type === 'input' && field.config.inputType === 'number') {
|
|
185
|
+
isOk = !!fieldValue && !!refValue && Number(fieldValue) > Number(refValue);
|
|
186
|
+
}
|
|
187
|
+
else {
|
|
188
|
+
isOk = !!fieldValue && !!refValue && fieldValue > refValue;
|
|
189
|
+
}
|
|
190
|
+
break;
|
|
191
|
+
case AcExpressionOperatorEnum.GREATER_EQUAL_THAN:
|
|
192
|
+
if (field.config.type === 'input' && field.config.inputType === 'number') {
|
|
193
|
+
isOk = !!fieldValue && !!refValue && Number(fieldValue) >= Number(refValue);
|
|
194
|
+
}
|
|
195
|
+
else {
|
|
196
|
+
isOk = !!fieldValue && !!refValue && fieldValue >= refValue;
|
|
197
|
+
}
|
|
198
|
+
break;
|
|
199
|
+
case AcExpressionOperatorEnum.LESS_THAN:
|
|
200
|
+
if (field.config.type === 'input' && field.config.inputType === 'number') {
|
|
201
|
+
isOk = !!fieldValue && !!refValue && Number(fieldValue) < Number(refValue);
|
|
202
|
+
}
|
|
203
|
+
else {
|
|
204
|
+
isOk = !!fieldValue && !!refValue && fieldValue < refValue;
|
|
205
|
+
}
|
|
206
|
+
break;
|
|
207
|
+
case AcExpressionOperatorEnum.LESS_EQUAL_THAN:
|
|
208
|
+
if (field.config.type === 'input' && field.config.inputType === 'number') {
|
|
209
|
+
isOk = !!fieldValue && !!refValue && Number(fieldValue) <= Number(refValue);
|
|
210
|
+
}
|
|
211
|
+
else {
|
|
212
|
+
isOk = !!fieldValue && !!refValue && fieldValue <= refValue;
|
|
213
|
+
}
|
|
214
|
+
break;
|
|
215
|
+
}
|
|
216
|
+
return isOk;
|
|
217
|
+
}
|
|
112
218
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
|
|
113
219
|
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConditionsService, providedIn: 'root' });
|
|
114
220
|
}
|
|
@@ -133,10 +239,9 @@ class DynamicFormService {
|
|
|
133
239
|
fields,
|
|
134
240
|
updateOn,
|
|
135
241
|
idPathMap: new Map(),
|
|
136
|
-
|
|
137
|
-
pathControlMap: new Map(),
|
|
242
|
+
pathFieldMap: new Map(),
|
|
138
243
|
};
|
|
139
|
-
this.form = this.createGroup(fields, null, initialValues);
|
|
244
|
+
this.form = this.createGroup(fields, null, null, initialValues);
|
|
140
245
|
if (validations) {
|
|
141
246
|
for (const valid of validations) {
|
|
142
247
|
if (valid.validator) {
|
|
@@ -151,13 +256,12 @@ class DynamicFormService {
|
|
|
151
256
|
fields: steps,
|
|
152
257
|
updateOn,
|
|
153
258
|
idPathMap: new Map(),
|
|
154
|
-
|
|
155
|
-
pathControlMap: new Map(),
|
|
259
|
+
pathFieldMap: new Map(),
|
|
156
260
|
};
|
|
157
261
|
const config = updateOn ? { updateOn } : { updateOn: "change" };
|
|
158
262
|
this.form = this.fb.group({}, config);
|
|
159
263
|
steps.forEach((step) => {
|
|
160
|
-
this.form.addControl(step.name, this.createGroup(step.fields, null, initialValues));
|
|
264
|
+
this.form.addControl(step.name, this.createGroup(step.fields, null, null, initialValues));
|
|
161
265
|
});
|
|
162
266
|
if (validations) {
|
|
163
267
|
for (const valid of validations) {
|
|
@@ -182,15 +286,15 @@ class DynamicFormService {
|
|
|
182
286
|
});
|
|
183
287
|
}
|
|
184
288
|
}
|
|
185
|
-
createGroup(fields, parentPath, initialValues) {
|
|
289
|
+
createGroup(fields, parentPath, instance, initialValues) {
|
|
186
290
|
const config = { updateOn: this.data?.updateOn ?? "change" };
|
|
187
291
|
const group = this.fb.group({}, config);
|
|
188
292
|
fields.forEach((config) => {
|
|
189
|
-
this.treatField(config, group, parentPath, initialValues);
|
|
293
|
+
this.treatField(config, group, parentPath, instance, initialValues);
|
|
190
294
|
});
|
|
191
295
|
return group;
|
|
192
296
|
}
|
|
193
|
-
treatField(config, group, parentPath, initialValues) {
|
|
297
|
+
treatField(config, group, parentPath, instance, initialValues) {
|
|
194
298
|
const path = (parentPath ? parentPath + this.separator : "") + config.name;
|
|
195
299
|
if (!config.id) {
|
|
196
300
|
config.id = config.name;
|
|
@@ -201,7 +305,7 @@ class DynamicFormService {
|
|
|
201
305
|
condition: config.displayCondition
|
|
202
306
|
});
|
|
203
307
|
}
|
|
204
|
-
if (config.type !== "text" && config.type !== "row" && config.
|
|
308
|
+
if (config.type !== "text" && config.type !== "row" && config.validations) {
|
|
205
309
|
config.validations.forEach(val => {
|
|
206
310
|
if (val.condition) {
|
|
207
311
|
this.validationConditions.push({
|
|
@@ -212,34 +316,29 @@ class DynamicFormService {
|
|
|
212
316
|
});
|
|
213
317
|
}
|
|
214
318
|
if (config.type === "text") {
|
|
215
|
-
this.setFormFieldMapItem(path, config, null);
|
|
319
|
+
this.setFormFieldMapItem(instance, path, config, null);
|
|
216
320
|
}
|
|
217
321
|
else if (config.type === "group") {
|
|
218
|
-
group.addControl(config.name, this.createGroupField(config, parentPath, initialValues));
|
|
322
|
+
group.addControl(config.name, this.createGroupField(config, parentPath, instance, initialValues));
|
|
219
323
|
}
|
|
220
324
|
else if (config.type === "array") {
|
|
221
|
-
group.addControl(config.name, this.createArray(config, parentPath, initialValues));
|
|
325
|
+
group.addControl(config.name, this.createArray(config, parentPath, instance, initialValues));
|
|
222
326
|
}
|
|
223
327
|
else if (config.type === "row") {
|
|
224
|
-
this.setFormFieldMapItem(path, config, null);
|
|
328
|
+
this.setFormFieldMapItem(instance, path, config, null);
|
|
225
329
|
config.fields.forEach((child) => {
|
|
226
|
-
this.treatField(child, group, parentPath, initialValues);
|
|
330
|
+
this.treatField(child, group, parentPath, instance, initialValues);
|
|
227
331
|
});
|
|
228
332
|
}
|
|
229
|
-
else if (config.type === "tabs") {
|
|
230
|
-
const control = this.createGroup(config.tabs.map((x) => x.field), parentPath, initialValues ? initialValues[config.name] : null);
|
|
231
|
-
group.addControl(config.name, control);
|
|
232
|
-
this.setFormFieldMapItem(path, config, control);
|
|
233
|
-
}
|
|
234
333
|
else {
|
|
235
334
|
const control = this.createControl(config, initialValues);
|
|
236
|
-
this.setFormFieldMapItem(path, config, control);
|
|
335
|
+
this.setFormFieldMapItem(instance, path, config, control);
|
|
237
336
|
group.addControl(config.name, control);
|
|
238
337
|
}
|
|
239
338
|
}
|
|
240
|
-
createGroupField(groupConfig, parentPath, initialValues) {
|
|
339
|
+
createGroupField(groupConfig, parentPath, instance, initialValues) {
|
|
241
340
|
const path = (parentPath ? parentPath + this.separator : "") + groupConfig.name;
|
|
242
|
-
const g = this.createGroup(groupConfig.fields, path, initialValues ? initialValues[groupConfig.name] : null);
|
|
341
|
+
const g = this.createGroup(groupConfig.fields, path, instance, initialValues ? initialValues[groupConfig.name] : null);
|
|
243
342
|
if (groupConfig.validations) {
|
|
244
343
|
const val = groupConfig.validations.filter((x) => x.validator).map((x) => x.validator);
|
|
245
344
|
if (val) {
|
|
@@ -252,12 +351,12 @@ class DynamicFormService {
|
|
|
252
351
|
g.addAsyncValidators(asyncVal);
|
|
253
352
|
}
|
|
254
353
|
}
|
|
255
|
-
this.setFormFieldMapItem(path, groupConfig, g);
|
|
354
|
+
this.setFormFieldMapItem(instance, path, groupConfig, g);
|
|
256
355
|
return g;
|
|
257
356
|
}
|
|
258
357
|
createArrayInstance(arrayConfig, arrayPath, instanceNumber, initialValues) {
|
|
259
358
|
const fields = _.cloneDeep(arrayConfig.field.fields);
|
|
260
|
-
const grp = this.createGroup(fields, `${arrayPath}[${instanceNumber}]`, initialValues);
|
|
359
|
+
const grp = this.createGroup(fields, `${arrayPath}[${instanceNumber}]`, `${arrayPath}[${instanceNumber}]`, initialValues);
|
|
261
360
|
if (!arrayConfig.instances) {
|
|
262
361
|
arrayConfig.instances = [];
|
|
263
362
|
}
|
|
@@ -268,7 +367,7 @@ class DynamicFormService {
|
|
|
268
367
|
});
|
|
269
368
|
return grp;
|
|
270
369
|
}
|
|
271
|
-
createArray(arrayConfig, parentPath, initialValues) {
|
|
370
|
+
createArray(arrayConfig, parentPath, instance, initialValues) {
|
|
272
371
|
const path = (parentPath ? parentPath + this.separator : "") + arrayConfig.name;
|
|
273
372
|
arrayConfig.instances = [];
|
|
274
373
|
const list = [];
|
|
@@ -302,18 +401,15 @@ class DynamicFormService {
|
|
|
302
401
|
formArray.addAsyncValidators(asyncVal);
|
|
303
402
|
}
|
|
304
403
|
}
|
|
305
|
-
this.setFormFieldMapItem(path, arrayConfig, formArray);
|
|
404
|
+
this.setFormFieldMapItem(instance, path, arrayConfig, formArray);
|
|
306
405
|
return formArray;
|
|
307
406
|
}
|
|
308
|
-
setFormFieldMapItem(path, config, control) {
|
|
309
|
-
if (control) {
|
|
310
|
-
this.data.pathControlMap.set(path, control);
|
|
311
|
-
}
|
|
312
|
-
this.data.pathFieldConfigMap.set(path, config);
|
|
407
|
+
setFormFieldMapItem(instance, path, config, control) {
|
|
313
408
|
if (!this.data.idPathMap.get(config.id)) {
|
|
314
409
|
this.data.idPathMap.set(config.id, []);
|
|
315
410
|
}
|
|
316
|
-
this.data.idPathMap.get(config.id)?.push(path);
|
|
411
|
+
this.data.idPathMap.get(config.id)?.push({ instance, path });
|
|
412
|
+
this.data.pathFieldMap.set(path, { config, control });
|
|
317
413
|
}
|
|
318
414
|
createControl(config, initialValues) {
|
|
319
415
|
let { disabled, validations, value } = config;
|
|
@@ -586,11 +682,11 @@ class MatFieldInputComponent extends AbstractControlFieldComponent {
|
|
|
586
682
|
}
|
|
587
683
|
}
|
|
588
684
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
589
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldInputComponent, isStandalone: true, selector: "sot-mat-field-input", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [maxlength]=\"field.maxlength ?? 100000000\"\r\n >\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
|
|
685
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldInputComponent, isStandalone: true, selector: "sot-mat-field-input", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [maxlength]=\"field.maxlength ?? 100000000\"\r\n >\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
|
|
590
686
|
}
|
|
591
687
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldInputComponent, decorators: [{
|
|
592
688
|
type: Component,
|
|
593
|
-
args: [{ selector: 'sot-mat-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [maxlength]=\"field.maxlength ?? 100000000\"\r\n >\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
|
|
689
|
+
args: [{ selector: 'sot-mat-field-input', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [maxlength]=\"field.maxlength ?? 100000000\"\r\n >\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
|
|
594
690
|
}] });
|
|
595
691
|
|
|
596
692
|
class MatGroupComponent extends AbstractControlFieldComponent {
|
|
@@ -628,7 +724,7 @@ class MatArrayComponent extends AbstractControlFieldComponent {
|
|
|
628
724
|
}
|
|
629
725
|
const i = this.field.instances.length > 0 ? this.field.instances[this.field.instances.length - 1].number + 1 : 0;
|
|
630
726
|
const fields = _.cloneDeep(this.field.field.fields);
|
|
631
|
-
const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null);
|
|
727
|
+
const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null, null);
|
|
632
728
|
this.field.instances.push({
|
|
633
729
|
number: i,
|
|
634
730
|
group: grp,
|
|
@@ -639,9 +735,9 @@ class MatArrayComponent extends AbstractControlFieldComponent {
|
|
|
639
735
|
}
|
|
640
736
|
deleteItem(index, inst) {
|
|
641
737
|
this.field.instances.splice(index, 1);
|
|
642
|
-
for (const key of this.dynamicService.data.
|
|
738
|
+
for (const key of this.dynamicService.data.pathFieldMap.keys()) {
|
|
643
739
|
if (key.startsWith(`${this.path}[${inst.number}]`)) {
|
|
644
|
-
this.dynamicFormService.data.
|
|
740
|
+
this.dynamicFormService.data.pathFieldMap.delete(key);
|
|
645
741
|
}
|
|
646
742
|
}
|
|
647
743
|
;
|
|
@@ -649,7 +745,7 @@ class MatArrayComponent extends AbstractControlFieldComponent {
|
|
|
649
745
|
this.ref.detectChanges();
|
|
650
746
|
}
|
|
651
747
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
652
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n
|
|
748
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatArrayComponent, isStandalone: true, selector: "sot-mat-array", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n type=\"button\"\n (click)=\"addItem()\"\n >\n @if (field.addButton && field.addButton.matIcon) {\n <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n {{ field.addButton!.matIcon }}\n </mat-icon>\n }\n {{ field.addButton ? field.addButton!.label : 'Ajouter' }}\n </button>\n </div>\n }\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (array && !array.untouched && array.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n </div>\n </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: i0.forwardRef(() => AcDynamicFieldDirective), selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "ngmodule", type: i0.forwardRef(() => MatExpansionModule) }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatAccordion), selector: "mat-accordion", inputs: ["hideToggle", "displayMode", "togglePosition"], exportAs: ["matAccordion"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanel), selector: "mat-expansion-panel", inputs: ["hideToggle", "togglePosition"], outputs: ["afterExpand", "afterCollapse"], exportAs: ["matExpansionPanel"] }, { kind: "component", type: i0.forwardRef(() => i1$1.MatExpansionPanelHeader), selector: "mat-expansion-panel-header", inputs: ["expandedHeight", "collapsedHeight", "tabIndex"] }, { kind: "directive", type: i0.forwardRef(() => i1$1.MatExpansionPanelTitle), selector: "mat-panel-title" }, { kind: "directive", type: i0.forwardRef(() => NgClass), selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: i0.forwardRef(() => MatIcon), selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: i0.forwardRef(() => 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: "ngmodule", type: i0.forwardRef(() => MatCardModule) }, { kind: "ngmodule", type: i0.forwardRef(() => ReactiveFormsModule) }, { kind: "directive", type: i0.forwardRef(() => i1.NgControlStatusGroup), selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i0.forwardRef(() => i1.FormGroupDirective), selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i0.forwardRef(() => i1.FormArrayName), selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: i0.forwardRef(() => MatError), selector: "mat-error, [matError]", inputs: ["id"] }, { kind: "directive", type: i0.forwardRef(() => NgTemplateOutlet), selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
653
749
|
}
|
|
654
750
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatArrayComponent, decorators: [{
|
|
655
751
|
type: Component,
|
|
@@ -663,7 +759,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
663
759
|
ReactiveFormsModule,
|
|
664
760
|
MatError,
|
|
665
761
|
NgTemplateOutlet
|
|
666
|
-
], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n
|
|
762
|
+
], template: "<div class=\"sot-formfield sot-formfield-array\" [ngClass]=\"field.className\">\n <fieldset class=\"sot-formfield-wrapper sot-fieldset\">\n @if (field.accordion) {\n <mat-accordion class=\"sot-formfield-array-accordion\" multi>\n <mat-expansion-panel [expanded]=\"field.opened\">\n <mat-expansion-panel-header>\n <mat-panel-title>\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n </mat-panel-title>\n </mat-expansion-panel-header>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </mat-expansion-panel>\n </mat-accordion>\n } @else {\n <legend class=\"sot-formfield-array-label\">{{ field.label }}</legend>\n @if (field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n <div class=\"sot-formfield-array-content\">\n <div *ngTemplateOutlet=\"groupFields\"></div>\n </div>\n }\n </fieldset>\n</div>\n\n<ng-template #groupFields>\n <div class=\"sot-formfield-array\" [formGroup]=\"group\">\n <div [formArrayName]=\"field.name\">\n @for (inst of field.instances; track inst; let i = $index) {\n <fieldset class=\"sot-formfield-array-element\"\n [ngClass]=\"field.elementClassName\">\n <legend class=\"sot-formfield-array-element-label\">\n {{ field.itemLabel ?? 'Item' }} {{ inst.number + 1 }}\n </legend>\n <div class=\"sot-formfield-array-element-content\"\n [ngClass]=\"field.elementContentClassName\">\n @for (f of inst.fields; track f.name + f.type) {\n <div [hidden]=\"f.hidden\" [ngClass]=\"f.hostClassName\">\n <ng-container matDynamicField\n [type]=\"f.type\"\n [path]=\"path + '.' + f.name\"\n [field]=\"f\"\n [group]=\"inst.group\"\n [instancePath]=\"path + '[' + inst.number + ']'\"\n ></ng-container>\n </div>\n }\n </div>\n <div class=\"sot-formfield-array-element-action\">\n @if (!field.disabled && (!field.minNbRow || field.minNbRow < array.controls.length)) {\n <button type=\"button\" mat-raised-button (click)=\"deleteItem(i, inst)\">\n @if (field.deleteButton && field.deleteButton.matIcon) {\n <mat-icon [title]=\"field.deleteButton!.title ? field.deleteButton!.title : ''\">\n {{ field.deleteButton!.matIcon }}\n </mat-icon>\n }\n {{ field.deleteButton ? field.deleteButton!.label : 'Supprimer' }}\n </button>\n }\n </div>\n </fieldset>\n }\n @if (!field.disabled && (!field.maxNbRow || field.maxNbRow > array.controls.length)) {\n <div class=\"sot-formfield-array-add-button\">\n <button mat-raised-button\n type=\"button\"\n (click)=\"addItem()\"\n >\n @if (field.addButton && field.addButton.matIcon) {\n <mat-icon [title]=\"field.addButton!.title ? field.addButton!.title : ''\">\n {{ field.addButton!.matIcon }}\n </mat-icon>\n }\n {{ field.addButton ? field.addButton!.label : 'Ajouter' }}\n </button>\n </div>\n }\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (array && !array.untouched && array.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n </div>\n </div>\n</ng-template>\n", styles: ["fieldset.dynamic-field-array{border:none;padding:0;margin:0}.dynamic-field-array-add-button{padding:2rem 0}.dynamic-field-array{margin-bottom:2rem}\n"] }]
|
|
667
763
|
}], ctorParameters: () => [] });
|
|
668
764
|
|
|
669
765
|
class MatRowComponent extends AbstractFieldComponent {
|
|
@@ -770,11 +866,11 @@ class MatFieldPasswordComponent extends AbstractControlFieldComponent {
|
|
|
770
866
|
}
|
|
771
867
|
}
|
|
772
868
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
773
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldPasswordComponent, isStandalone: true, selector: "sot-mat-field-password", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-password\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [aria-describedby]=\"uuid + '-description'\"\r\n >\r\n <button type=\"button\"
|
|
869
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldPasswordComponent, isStandalone: true, selector: "sot-mat-field-password", usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-password\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [aria-describedby]=\"uuid + '-description'\"\r\n >\r\n <button type=\"button\" matIconButton matSuffix (click)=\"tooglePassword()\"\r\n [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n [attr.aria-pressed]=\"inputType === 'password'\">\r\n <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n </button>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n\r\n <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n @if (field.minlength) {\r\n <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.maxlength) {\r\n <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.requiresDigit) {\r\n <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n </li>\r\n }\r\n @if (field.requiresUppercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresLowercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresSpecialChars) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }] });
|
|
774
870
|
}
|
|
775
871
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldPasswordComponent, decorators: [{
|
|
776
872
|
type: Component,
|
|
777
|
-
args: [{ selector: 'sot-mat-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule], template: "<div\r\n class=\"sot-formfield sot-formfield-password\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [aria-describedby]=\"uuid + '-description'\"\r\n >\r\n <button type=\"button\"
|
|
873
|
+
args: [{ selector: 'sot-mat-field-password', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatInputModule, MatButtonModule, MatIconButton], template: "<div\r\n class=\"sot-formfield sot-formfield-password\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <input matInput\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [aria-describedby]=\"uuid + '-description'\"\r\n >\r\n <button type=\"button\" matIconButton matSuffix (click)=\"tooglePassword()\"\r\n [attr.aria-label]=\"inputType === 'password' ? showPasswordLabel : hidePasswordLabel\"\r\n [attr.aria-pressed]=\"inputType === 'password'\">\r\n <mat-icon>{{ inputType === 'password' ? 'visibility_off' : 'visibility' }}</mat-icon>\r\n </button>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{prefix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{suffix.label}}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n\r\n <ul class=\"password-description\" [id]=\"uuid + '-description'\">\r\n @if (field.minlength) {\r\n <li [ngClass]=\"{ 'text-success': minLengthValid, 'text-error': !minLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"minLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.minlength ?? \"Must be at least 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.maxlength) {\r\n <li [ngClass]=\"{ 'text-success': maxLengthValid, 'text-error': !maxLengthValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"maxLengthValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.maxlength ?? \"Must be at most 8 characters long\" }}\r\n </li>\r\n }\r\n @if (field.requiresDigit) {\r\n <li [ngClass]=\"{ 'text-success': requiresDigitValid, 'text-error': !requiresDigitValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresDigitValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresDigit ?? \"Must contain at least 1 digit\" }}\r\n </li>\r\n }\r\n @if (field.requiresUppercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresUppercaseValid, 'text-error': !requiresUppercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresUppercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresUppercase ?? \"Must contain at least 1 uppercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresLowercase) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresLowercaseValid, 'text-error': !requiresLowercaseValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresLowercaseValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresLowercase ?? \"Must contain at least 1 lowercase character\" }}\r\n </li>\r\n }\r\n @if (field.requiresSpecialChars) {\r\n <li\r\n [ngClass]=\"{ 'text-success': requiresSpecialCharsValid, 'text-error': !requiresSpecialCharsValid }\">\r\n <mat-icon [attr.aria-label]=\"minLengthValid ? iconSuccessLabel : iconErrorLabel\"\r\n [fontIcon]=\"requiresSpecialCharsValid ? 'check' : 'error'\"></mat-icon>\r\n {{ field.labels?.requiresSpecialChars ?? \"Must contain at least 1 special character\" }}\r\n </li>\r\n }\r\n </ul>\r\n</div>\r\n\r\n", styles: [".sot-formfield-password mat-form-field{width:100%}.sot-formfield-password mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}.password-description{list-style-type:none;margin-block-start:0}.password-description li{display:flex;flex-direction:row;align-items:center}.password-description li mat-icon{margin-right:.5rem}.password-description li.text-error{color:var(--mat-form-field-error-text-color, var(--mat-app-error))}\n"] }]
|
|
778
874
|
}] });
|
|
779
875
|
|
|
780
876
|
class MatFieldRadioButtonComponent extends AbstractControlFieldComponent {
|
|
@@ -805,11 +901,11 @@ class MatFieldSelectComponent extends AbstractControlFieldComponent {
|
|
|
805
901
|
}
|
|
806
902
|
}
|
|
807
903
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldSelectComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
808
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldSelectComponent, isStandalone: true, selector: "sot-mat-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [multiple]=\"field.multiple\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }] });
|
|
904
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldSelectComponent, isStandalone: true, selector: "sot-mat-field-select", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [multiple]=\"field.multiple\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatSelectModule }, { kind: "component", type: i3$2.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$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "component", type: i3$2.MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }] });
|
|
809
905
|
}
|
|
810
906
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldSelectComponent, decorators: [{
|
|
811
907
|
type: Component,
|
|
812
|
-
args: [{ selector: 'sot-mat-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [multiple]=\"field.multiple\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
|
|
908
|
+
args: [{ selector: 'sot-mat-field-select', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatSelectModule], template: "<div class=\"sot-formfield sot-formfield-select\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\">\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n <mat-select\r\n [id]=\"uuid\"\r\n [formControlName]=\"field.name\"\r\n [multiple]=\"field.multiple\"\r\n panelClass=\"sot-formfield-select-panel\">\r\n @if (field.resetOption) {\r\n <mat-option [value]=\"undefined\">\r\n {{ field.resetOptionLabel }}\r\n </mat-option>\r\n }\r\n @if (field.options) {\r\n @if (field.groupLabelKey) {\r\n @for (group of options; track group) {\r\n <mat-optgroup [label]=\"field.groupLabelKey ? group[field.groupLabelKey] : ''\">\r\n @if (field.groupOptionsKey && group[field.groupOptionsKey]) {\r\n @for (item of group[field.groupOptionsKey]; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n </mat-optgroup>\r\n }\r\n } @else {\r\n @for (item of options; track item) {\r\n <mat-option [value]=\"field.valueKey ? item[field.valueKey] : item\"\r\n [disabled]=\"field.disabledKey ? item[field.disabledKey] : false\">\r\n {{ field.labelKey ? item[field.labelKey!] : item }}\r\n </mat-option>\r\n }\r\n }\r\n }\r\n </mat-select>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n <mat-error>\r\n @if (control && !control.untouched && control.invalid) {\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n }\r\n </mat-error>\r\n </mat-form-field>\r\n</div>\r\n", styles: [".sot-formfield-select mat-form-field{width:100%}.sot-formfield-select mat-form-field[hidden]{display:none}::ng-deep .sot-formfield-select-panel .mdc-list-item__primary-text{width:100%}.sot-formfield-select-prefix,.sot-formfield-select-suffix{padding:0 .5rem}\n"] }]
|
|
813
909
|
}] });
|
|
814
910
|
|
|
815
911
|
class MatFieldTextareaComponent extends AbstractControlFieldComponent {
|
|
@@ -819,11 +915,11 @@ class MatFieldTextareaComponent extends AbstractControlFieldComponent {
|
|
|
819
915
|
}
|
|
820
916
|
}
|
|
821
917
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldTextareaComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
822
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldTextareaComponent, isStandalone: true, selector: "sot-mat-field-textarea", usesInheritance: true, ngImport: i0, template: "<div\n class=\"sot-formfield sot-formfield-textarea\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field>\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\n <textarea matInput\n [id]=\"uuid\"\n [formControlName]=\"field.name\"\n [readonly]=\"field.readonly\"\n [required]=\"!!required\"\n [rows]=\"field.rows\"\n ></textarea>\n\n @for (b of field.prefixes; track b) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (b.action) {\n <button type=\"button\"\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @for (b of field.suffixes; track b) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (b.action) {\n <button type=\"button\"\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }] });
|
|
918
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldTextareaComponent, isStandalone: true, selector: "sot-mat-field-textarea", usesInheritance: true, ngImport: i0, template: "<div\n class=\"sot-formfield sot-formfield-textarea\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\n <textarea matInput\n [id]=\"uuid\"\n [formControlName]=\"field.name\"\n [readonly]=\"field.readonly\"\n [required]=\"!!required\"\n [rows]=\"field.rows\"\n ></textarea>\n\n @for (b of field.prefixes; track b) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (b.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @for (b of field.suffixes; track b) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (b.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
|
|
823
919
|
}
|
|
824
920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldTextareaComponent, decorators: [{
|
|
825
921
|
type: Component,
|
|
826
|
-
args: [{ selector: 'sot-mat-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div\n class=\"sot-formfield sot-formfield-textarea\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field>\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\n <textarea matInput\n [id]=\"uuid\"\n [formControlName]=\"field.name\"\n [readonly]=\"field.readonly\"\n [required]=\"!!required\"\n [rows]=\"field.rows\"\n ></textarea>\n\n @for (b of field.prefixes; track b) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (b.action) {\n <button type=\"button\"\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @for (b of field.suffixes; track b) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (b.action) {\n <button type=\"button\"\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"] }]
|
|
922
|
+
args: [{ selector: 'sot-mat-field-textarea', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatInputModule, MatButtonModule], template: "<div\n class=\"sot-formfield sot-formfield-textarea\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\n <textarea matInput\n [id]=\"uuid\"\n [formControlName]=\"field.name\"\n [readonly]=\"field.readonly\"\n [required]=\"!!required\"\n [rows]=\"field.rows\"\n ></textarea>\n\n @for (b of field.prefixes; track b) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (b.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @for (b of field.suffixes; track b) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (b.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"b.actionAriaLabel\"\n (click)=\"buttonAction(b)\"\n >{{b.label}}</button>\n } @else {\n <span [innerHTML]=\"b.label\"></span>\n }\n </span>\n }\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".sot-formfield-textarea mat-form-field{width:100%}.sot-formfield-textarea mat-form-field[hidden]{display:none}.sot-formfield-textarea .sot-formfield-textarea-prefix,.sot-formfield-textarea .sot-formfield-textarea-suffix{padding:0 .5rem}\n"] }]
|
|
827
923
|
}] });
|
|
828
924
|
|
|
829
925
|
class MatFieldToggleComponent extends AbstractControlFieldComponent {
|
|
@@ -942,11 +1038,11 @@ class ConfirmDialogComponent {
|
|
|
942
1038
|
this.cancelLabel = this.data.cancelLabel ? this.data.cancelLabel : "No";
|
|
943
1039
|
}
|
|
944
1040
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
945
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ConfirmDialogComponent, isStandalone: true, selector: "sot-confirm-dialog", ngImport: i0, template: "<div class=\"modal-close-button\">\n <button
|
|
1041
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "21.0.6", type: ConfirmDialogComponent, isStandalone: true, selector: "sot-confirm-dialog", ngImport: i0, template: "<div class=\"modal-close-button\">\n <button matButton=\"outlined\" mat-dialog-close>\n <mat-icon title=\"Fermer\">close</mat-icon>\n Fermer\n </button>\n</div>\n\n<h2 class=\"modal-title\" matDialogTitle>{{ title }}</h2>\n\n<div matDialogContent>\n <div [innerHtml]=\"message\"></div>\n</div>\n\n<div matDialogActions>\n <div class=\"modal-action-buttons\">\n <button matButton=\"outlined\" mat-dialog-close>\n {{ cancelLabel }}\n </button>\n <button matButton=\"filled\" [mat-dialog-close]=\"true\">\n {{ confirmLabel }}\n </button>\n </div>\n</div>\n", styles: [".modal-close-button{display:flex;flex-direction:row;justify-content:flex-end}\n"], dependencies: [{ kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: 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: "ngmodule", type: MatDialogModule }, { kind: "directive", type: i1$2.MatDialogClose, selector: "[mat-dialog-close], [matDialogClose]", inputs: ["aria-label", "type", "mat-dialog-close", "matDialogClose"], exportAs: ["matDialogClose"] }, { kind: "directive", type: i1$2.MatDialogTitle, selector: "[mat-dialog-title], [matDialogTitle]", inputs: ["id"], exportAs: ["matDialogTitle"] }, { kind: "directive", type: i1$2.MatDialogActions, selector: "[mat-dialog-actions], mat-dialog-actions, [matDialogActions]", inputs: ["align"] }, { kind: "directive", type: i1$2.MatDialogContent, selector: "[mat-dialog-content], mat-dialog-content, [matDialogContent]" }] });
|
|
946
1042
|
}
|
|
947
1043
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: ConfirmDialogComponent, decorators: [{
|
|
948
1044
|
type: Component,
|
|
949
|
-
args: [{ selector: "sot-confirm-dialog", imports: [MatIcon, MatButton, MatDialogModule], template: "<div class=\"modal-close-button\">\n <button
|
|
1045
|
+
args: [{ selector: "sot-confirm-dialog", imports: [MatIcon, MatButton, MatDialogModule, MatButton], template: "<div class=\"modal-close-button\">\n <button matButton=\"outlined\" mat-dialog-close>\n <mat-icon title=\"Fermer\">close</mat-icon>\n Fermer\n </button>\n</div>\n\n<h2 class=\"modal-title\" matDialogTitle>{{ title }}</h2>\n\n<div matDialogContent>\n <div [innerHtml]=\"message\"></div>\n</div>\n\n<div matDialogActions>\n <div class=\"modal-action-buttons\">\n <button matButton=\"outlined\" mat-dialog-close>\n {{ cancelLabel }}\n </button>\n <button matButton=\"filled\" [mat-dialog-close]=\"true\">\n {{ confirmLabel }}\n </button>\n </div>\n</div>\n", styles: [".modal-close-button{display:flex;flex-direction:row;justify-content:flex-end}\n"] }]
|
|
950
1046
|
}], ctorParameters: () => [] });
|
|
951
1047
|
|
|
952
1048
|
class MaterialButton {
|
|
@@ -968,7 +1064,7 @@ class MaterialButton {
|
|
|
968
1064
|
this.buttonClick.emit();
|
|
969
1065
|
}
|
|
970
1066
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
971
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialButton, isStandalone: true, selector: "sot-mat-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matType: { classPropertyName: "matType", publicName: "matType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeOptions: { classPropertyName: "badgeOptions", publicName: "badgeOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@switch (buttonMatType()) {\r\n @case ('button-basic') {\r\n <button matButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-basic') {\r\n <a type=\"link\" matButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-outlined') {\r\n <button matButton=\"outlined\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-outlined') {\r\n <a type=\"link\" matButton=\"outlined\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-elevated') {\r\n <button matButton=\"elevated\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-elevated') {\r\n <a type=\"link\" matButton=\"elevated\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-filled') {\r\n <button matButton=\"filled\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-filled') {\r\n <a type=\"link\" matButton=\"filled\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-tonal') {\r\n <button matButton=\"tonal\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-tonal') {\r\n <a type=\"link\" matButton=\"tonal\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-icon') {\r\n <button matIconButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-icon') {\r\n <a type=\"link\" matIconButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-fab') {\r\n <button matFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-fab') {\r\n <a type=\"link\" matFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-mini-fab') {\r\n <button matMiniFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-mini-fab') {\r\n <a type=\"link\" matMiniFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-menu') {\r\n <button mat-menu-item\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-menu') {\r\n <a type=\"link\" mat-menu-item\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n @if (matIcon()) {\r\n <mat-icon\r\n aria-hidden=\"true\"\r\n [fontIcon]=\"matIcon()!\"\r\n ></mat-icon>\r\n }\r\n <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: 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: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
1067
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MaterialButton, isStandalone: true, selector: "sot-mat-button", inputs: { type: { classPropertyName: "type", publicName: "type", isSignal: true, isRequired: false, transformFunction: null }, matType: { classPropertyName: "matType", publicName: "matType", isSignal: true, isRequired: false, transformFunction: null }, disabled: { classPropertyName: "disabled", publicName: "disabled", isSignal: true, isRequired: false, transformFunction: null }, disableRipple: { classPropertyName: "disableRipple", publicName: "disableRipple", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, className: { classPropertyName: "className", publicName: "className", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, matIcon: { classPropertyName: "matIcon", publicName: "matIcon", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, badgeOptions: { classPropertyName: "badgeOptions", publicName: "badgeOptions", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { buttonClick: "buttonClick" }, ngImport: i0, template: "@switch (buttonMatType()) {\r\n @case ('button-basic') {\r\n <button matButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-basic') {\r\n <a type=\"link\" matButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-outlined') {\r\n <button matButton=\"outlined\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-outlined') {\r\n <a type=\"link\" matButton=\"outlined\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-elevated') {\r\n <button matButton=\"elevated\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-elevated') {\r\n <a type=\"link\" matButton=\"elevated\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-filled') {\r\n <button matButton=\"filled\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-filled') {\r\n <a type=\"link\" matButton=\"filled\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-tonal') {\r\n <button matButton=\"tonal\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-tonal') {\r\n <a type=\"link\" matButton=\"tonal\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-icon') {\r\n <button matIconButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-icon') {\r\n <a type=\"link\" matIconButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-fab') {\r\n <button matFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-fab') {\r\n <a type=\"link\" matFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-mini-fab') {\r\n <button matMiniFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-mini-fab') {\r\n <a type=\"link\" matMiniFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-menu') {\r\n <button mat-menu-item\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-menu') {\r\n <a type=\"link\" mat-menu-item\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n @if (matIcon()) {\r\n <mat-icon\r\n aria-hidden=\"true\"\r\n [fontIcon]=\"matIcon()!\"\r\n ></mat-icon>\r\n }\r\n <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: MatBadge, selector: "[matBadge]", inputs: ["matBadgeColor", "matBadgeOverlap", "matBadgeDisabled", "matBadgePosition", "matBadge", "matBadgeDescription", "matBadgeSize", "matBadgeHidden"] }, { kind: "component", type: 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: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatFabButton, selector: "button[mat-fab], a[mat-fab], button[matFab], a[matFab]", inputs: ["extended"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatMiniFabButton, selector: "button[mat-mini-fab], a[mat-mini-fab], button[matMiniFab], a[matMiniFab]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatMenuModule }, { kind: "component", type: i1$3.MatMenuItem, selector: "[mat-menu-item]", inputs: ["role", "disabled", "disableRipple"], exportAs: ["matMenuItem"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }] });
|
|
972
1068
|
}
|
|
973
1069
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MaterialButton, decorators: [{
|
|
974
1070
|
type: Component,
|
|
@@ -979,7 +1075,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
979
1075
|
MatIconButton,
|
|
980
1076
|
MatFabButton,
|
|
981
1077
|
MatMiniFabButton,
|
|
982
|
-
|
|
1078
|
+
MatMenuModule,
|
|
983
1079
|
MatIcon,
|
|
984
1080
|
NgTemplateOutlet
|
|
985
1081
|
], template: "@switch (buttonMatType()) {\r\n @case ('button-basic') {\r\n <button matButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-basic') {\r\n <a type=\"link\" matButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-outlined') {\r\n <button matButton=\"outlined\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-outlined') {\r\n <a type=\"link\" matButton=\"outlined\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-elevated') {\r\n <button matButton=\"elevated\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-elevated') {\r\n <a type=\"link\" matButton=\"elevated\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-filled') {\r\n <button matButton=\"filled\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-filled') {\r\n <a type=\"link\" matButton=\"filled\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-tonal') {\r\n <button matButton=\"tonal\"\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-tonal') {\r\n <a type=\"link\" matButton=\"tonal\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-icon') {\r\n <button matIconButton\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-icon') {\r\n <a type=\"link\" matIconButton\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-fab') {\r\n <button matFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-fab') {\r\n <a type=\"link\" matFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-mini-fab') {\r\n <button matMiniFab\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-mini-fab') {\r\n <a type=\"link\" matMiniFab\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n @case ('button-menu') {\r\n <button mat-menu-item\r\n [type]=\"type()\"\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </button>\r\n }\r\n @case ('link-menu') {\r\n <a type=\"link\" mat-menu-item\r\n [ngClass]=\"className()\"\r\n [title]=\"title() ?? ''\"\r\n [attr.aria-label]=\"ariaLabel()\"\r\n [disabled]=\"disabled()\"\r\n [disableRipple]=\"disableRipple()\"\r\n [matBadge]=\"badge()\"\r\n [matBadgePosition]=\"badgeOptions()?.position || 'after'\"\r\n [matBadgeDescription]=\"badgeOptions()?.description ?? ''\"\r\n [matBadgeDisabled]=\"badgeOptions()?.disabled\"\r\n [matBadgeHidden]=\"badgeOptions()?.hidden\"\r\n [matBadgeOverlap]=\"!(badgeOptions()?.noOverlap)\"\r\n [matBadgeSize]=\"badgeOptions()?.size ?? 'medium'\"\r\n (click)=\"clickButton($event)\">\r\n <span *ngTemplateOutlet=\"buttonContent\"></span>\r\n </a>\r\n }\r\n\r\n}\r\n\r\n<ng-template #buttonContent>\r\n @if (matIcon()) {\r\n <mat-icon\r\n aria-hidden=\"true\"\r\n [fontIcon]=\"matIcon()!\"\r\n ></mat-icon>\r\n }\r\n <span [innerHTML]=\"label()\"></span>\r\n</ng-template>\r\n\r\n" }]
|
|
@@ -1116,7 +1212,7 @@ class MatInputFileComponent {
|
|
|
1116
1212
|
multi: true,
|
|
1117
1213
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
1118
1214
|
},
|
|
1119
|
-
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"\n [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button
|
|
1215
|
+
], viewQueries: [{ propertyName: "fileInput", first: true, predicate: ["fileInput"], descendants: true }], ngImport: i0, template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"\n [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button matIconButton\n type=\"button\"\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n } @else {\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>\n @if (fichier.srcUrl) {\n <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n } @else {\n {{ fichier.file.name }}\n }\n </div>\n @if (!field().disabled) {\n <sot-mat-button\n type=\"button\"\n [className]=\"field().deleteButton?.className\"\n [matType]=\"field().deleteButton?.matButtonType\"\n [matIcon]=\"field().deleteButton?.matIcon\"\n [label]=\"field().deleteButton?.label ?? 'Delete'\"\n [title]=\"field().deleteButton?.title\"\n [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n (buttonClick)=\"confirmDeleteFile(fichier!)\"\n ></sot-mat-button>\n }\n </div>\n }\n }\n </div>\n <div class=\"sot-file-button\">\n <sot-mat-button\n type=\"button\"\n [className]=\"field().addButton?.className\"\n [matType]=\"field().addButton?.matButtonType\"\n [matIcon]=\"field().addButton?.matIcon\"\n [label]=\"field().addButton?.label ?? 'Select a file'\"\n [title]=\"field().addButton?.title\"\n [ariaLabel]=\"field().addButton?.ariaLabel\"\n [disabled]=\"field().disabled\"\n (buttonClick)=\"fileInput.click()\"\n ></sot-mat-button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n [multiple]=\"field().multiple\"\n />\n </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MaterialButton, selector: "sot-mat-button", inputs: ["type", "matType", "disabled", "disableRipple", "label", "className", "title", "matIcon", "badge", "badgeOptions", "ariaLabel"], outputs: ["buttonClick"] }] });
|
|
1120
1216
|
}
|
|
1121
1217
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatInputFileComponent, decorators: [{
|
|
1122
1218
|
type: Component,
|
|
@@ -1126,7 +1222,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1126
1222
|
multi: true,
|
|
1127
1223
|
useExisting: forwardRef(() => MatInputFileComponent),
|
|
1128
1224
|
},
|
|
1129
|
-
], template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"\n [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button
|
|
1225
|
+
], template: "<div class=\"sot-file-wrapper\">\n <label [ngClass]=\"field()?.labelClassName\"\n [for]=\"'file-upload-' + field().id\">{{ field().label }}</label>\n <div class=\"sot-file-list\">\n @if (field().multiple) {\n <ul>\n @for (item of fileList; track item) {\n <li class=\"file-list-item\">\n <div>\n <div>\n @if (item.srcUrl) {\n <img [src]=\"item.srcUrl\" [alt]=\"item!.file.name\"/>\n } @else {\n {{ item.file.name }}\n }\n </div>\n </div>\n <div>\n @if (!field().disabled) {\n <button matIconButton\n type=\"button\"\n (click)=\"deleteFile(item)\"\n title=\"Supprimer\">\n <mat-icon>delete</mat-icon>\n </button>\n }\n </div>\n </li>\n }\n </ul>\n } @else {\n @if (fichier) {\n <div class=\"file-list-item\">\n <div>\n @if (fichier.srcUrl) {\n <img [src]=\"fichier.srcUrl\" [alt]=\"fichier.file.name\"/>\n } @else {\n {{ fichier.file.name }}\n }\n </div>\n @if (!field().disabled) {\n <sot-mat-button\n type=\"button\"\n [className]=\"field().deleteButton?.className\"\n [matType]=\"field().deleteButton?.matButtonType\"\n [matIcon]=\"field().deleteButton?.matIcon\"\n [label]=\"field().deleteButton?.label ?? 'Delete'\"\n [title]=\"field().deleteButton?.title\"\n [ariaLabel]=\"field().deleteButton?.ariaLabel\"\n (buttonClick)=\"confirmDeleteFile(fichier!)\"\n ></sot-mat-button>\n }\n </div>\n }\n }\n </div>\n <div class=\"sot-file-button\">\n <sot-mat-button\n type=\"button\"\n [className]=\"field().addButton?.className\"\n [matType]=\"field().addButton?.matButtonType\"\n [matIcon]=\"field().addButton?.matIcon\"\n [label]=\"field().addButton?.label ?? 'Select a file'\"\n [title]=\"field().addButton?.title\"\n [ariaLabel]=\"field().addButton?.ariaLabel\"\n [disabled]=\"field().disabled\"\n (buttonClick)=\"fileInput.click()\"\n ></sot-mat-button>\n <input\n #fileInput\n hidden\n type=\"file\"\n [attr.id]=\"'file-upload-' + field().id\"\n name=\"file-upload\"\n (change)=\"onSelectFile($event)\"\n [accept]=\"field().accept ? field().accept : '*/*'\"\n [multiple]=\"field().multiple\"\n />\n </div>\n</div>\n", styles: [".file-list-item{display:flex;flex-direction:row;gap:1rem;align-items:center}\n"] }]
|
|
1130
1226
|
}], ctorParameters: () => [], propDecorators: { field: [{ type: i0.Input, args: [{ isSignal: true, alias: "field", required: true }] }], group: [{ type: i0.Input, args: [{ isSignal: true, alias: "group", required: true }] }], fileInput: [{
|
|
1131
1227
|
type: ViewChild,
|
|
1132
1228
|
args: ['fileInput']
|
|
@@ -1212,11 +1308,11 @@ class MatFieldChipsComponent extends AbstractControlFieldComponent {
|
|
|
1212
1308
|
event.option.deselect();
|
|
1213
1309
|
}
|
|
1214
1310
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldChipsComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1215
|
-
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldChipsComponent, isStandalone: true, selector: "sot-mat-field-chips", inputs: { currentOption: { classPropertyName: "currentOption", publicName: "currentOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentOption: "currentOptionChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n @for (option of values(); track $index) {\r\n <mat-chip-row (removed)=\"remove(option)\">\r\n {{ option }}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n #chipsInput\r\n [id]=\"uuid\"\r\n name=\"option\"\r\n [(ngModel)]=\"currentOption\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n >\r\n <mat-autocomplete #auto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n @for (option of filteredOptions(); track option) {\r\n <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n }\r\n </mat-autocomplete>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1311
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldChipsComponent, isStandalone: true, selector: "sot-mat-field-chips", inputs: { currentOption: { classPropertyName: "currentOption", publicName: "currentOption", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { currentOption: "currentOptionChange" }, usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n @for (option of values(); track $index) {\r\n <mat-chip-row (removed)=\"remove(option)\">\r\n {{ option }}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n #chipsInput\r\n [id]=\"uuid\"\r\n name=\"option\"\r\n [(ngModel)]=\"currentOption\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n >\r\n <mat-autocomplete #auto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n @for (option of filteredOptions(); track option) {\r\n <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n }\r\n </mat-autocomplete>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: "ngmodule", type: MatChipsModule }, { kind: "component", type: i5.MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "directive", type: i5.MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "directive", type: i5.MatChipRemove, selector: "[matChipRemove]" }, { kind: "component", type: i5.MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "ngmodule", type: MatAutocompleteModule }, { kind: "component", type: i6.MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: i3$2.MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: i6.MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
|
|
1216
1312
|
}
|
|
1217
1313
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldChipsComponent, decorators: [{
|
|
1218
1314
|
type: Component,
|
|
1219
|
-
args: [{ selector: 'sot-mat-field-chips', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatButtonModule, MatChipsModule, MatAutocompleteModule, FormsModule], template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field>\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n @for (option of values(); track $index) {\r\n <mat-chip-row (removed)=\"remove(option)\">\r\n {{ option }}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n #chipsInput\r\n [id]=\"uuid\"\r\n name=\"option\"\r\n [(ngModel)]=\"currentOption\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n >\r\n <mat-autocomplete #auto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n @for (option of filteredOptions(); track option) {\r\n <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n }\r\n </mat-autocomplete>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\"\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
|
|
1315
|
+
args: [{ selector: 'sot-mat-field-chips', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatIconModule, MatButtonModule, MatChipsModule, MatAutocompleteModule, FormsModule], template: "<div\r\n class=\"sot-formfield sot-formfield-input\"\r\n [ngClass]=\"field.className\"\r\n [formGroup]=\"group\"\r\n>\r\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\r\n <mat-label><span [innerHTML]=\"field.label\"></span></mat-label>\r\n\r\n <mat-chip-grid #chipGrid aria-label=\"option selection\">\r\n @for (option of values(); track $index) {\r\n <mat-chip-row (removed)=\"remove(option)\">\r\n {{ option }}\r\n <button matChipRemove [attr.aria-label]=\"'remove ' + option\">\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n </mat-chip-grid>\r\n\r\n <input\r\n #chipsInput\r\n [id]=\"uuid\"\r\n name=\"option\"\r\n [(ngModel)]=\"currentOption\"\r\n [ngModelOptions]=\"{standalone: true}\"\r\n [required]=\"!!required\"\r\n [autocomplete]=\"field.autocomplete ?? 'off'\"\r\n [type]=\"inputType\"\r\n [readonly]=\"field.readonly\"\r\n [matChipInputFor]=\"chipGrid\"\r\n [matAutocomplete]=\"auto\"\r\n [matChipInputSeparatorKeyCodes]=\"field.separatorKeysCodes ?? separatorKeysCodes\"\r\n (matChipInputTokenEnd)=\"add($event); chipsInput.value = ''\"\r\n >\r\n <mat-autocomplete #auto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event); chipsInput.value = ''\">\r\n @for (option of filteredOptions(); track option) {\r\n <mat-option [value]=\"option\">{{ option }}</mat-option>\r\n }\r\n </mat-autocomplete>\r\n @for (prefix of field.prefixes; track prefix) {\r\n <span class=\"sot-formfield-prefix\" matPrefix>\r\n @if (prefix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"prefix.actionAriaLabel\"\r\n (click)=\"buttonAction(prefix)\"\r\n >{{ prefix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"prefix.label\"></span>\r\n }\r\n </span>\r\n }\r\n @for (suffix of field.suffixes; track suffix) {\r\n <span class=\"sot-formfield-suffix\" matSuffix>\r\n @if (suffix.action) {\r\n <button type=\"button\" matButton\r\n [attr.aria-label]=\"suffix.actionAriaLabel\"\r\n (click)=\"buttonAction(suffix)\"\r\n >{{ suffix.label }}</button>\r\n } @else {\r\n <span [innerHTML]=\"suffix.label\"></span>\r\n }\r\n </span>\r\n }\r\n\r\n @if (field.description) {\r\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\r\n }\r\n\r\n @if (control && !control.untouched && control.invalid) {\r\n <mat-error>\r\n @for (validation of field.validations; track validation) {\r\n @if (control.hasError(validation.name)) {\r\n {{ validation.message }}\r\n }\r\n }\r\n </mat-error>\r\n }\r\n </mat-form-field>\r\n</div>\r\n\r\n", styles: [".sot-formfield-input mat-form-field{width:100%}.sot-formfield-input mat-form-field[hidden]{display:none}.sot-formfield-prefix,.sot-formfield-suffix{padding:0 .5rem}\n"] }]
|
|
1220
1316
|
}], ctorParameters: () => [], propDecorators: { currentOption: [{ type: i0.Input, args: [{ isSignal: true, alias: "currentOption", required: false }] }, { type: i0.Output, args: ["currentOptionChange"] }] } });
|
|
1221
1317
|
|
|
1222
1318
|
class MatFieldDateComponent extends AbstractControlFieldComponent {
|
|
@@ -1254,13 +1350,13 @@ class MatFieldDateComponent extends AbstractControlFieldComponent {
|
|
|
1254
1350
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldDateComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1255
1351
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: MatFieldDateComponent, isStandalone: true, selector: "sot-field-date", providers: [
|
|
1256
1352
|
provideLuxonDateAdapter(),
|
|
1257
|
-
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ac-form-field ac-form-field-date\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field>\n <mat-label>\n {{ field.label }}\n </mat-label>\n <input matInput\n type=\"text\"\n [id]=\"uuid\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"field.name\"\n [required]=\"!!required\"\n [readonly]=\"field.readonly\"\n [min]=\"field.minDate ? field.minDate : null\"\n [max]=\"field.maxDate ? field.maxDate : null\"\n [matDatepickerFilter]=\"filterDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n @for (prefix of field.prefixes; track prefix) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (prefix.action) {\n <button type=\"button\"\n [attr.aria-label]=\"prefix.actionAriaLabel\"\n (click)=\"buttonAction(prefix)\"\n >{{prefix.label}}</button>\n } @else {\n <span [innerHTML]=\"prefix.label\"></span>\n }\n </span>\n }\n @for (suffix of field.suffixes; track suffix) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (suffix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"suffix.actionAriaLabel\"\n (click)=\"buttonAction(suffix)\"\n >{{suffix.label}}</button>\n } @else {\n <span [innerHTML]=\"suffix.label\"></span>\n }\n </span>\n }\n\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
|
|
1353
|
+
], usesInheritance: true, ngImport: i0, template: "<div\n class=\"ac-form-field ac-form-field-date\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n <mat-label>\n {{ field.label }}\n </mat-label>\n <input matInput\n type=\"text\"\n [id]=\"uuid\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"field.name\"\n [required]=\"!!required\"\n [readonly]=\"field.readonly\"\n [min]=\"field.minDate ? field.minDate : null\"\n [max]=\"field.maxDate ? field.maxDate : null\"\n [matDatepickerFilter]=\"filterDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n @for (prefix of field.prefixes; track prefix) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (prefix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"prefix.actionAriaLabel\"\n (click)=\"buttonAction(prefix)\"\n >{{prefix.label}}</button>\n } @else {\n <span [innerHTML]=\"prefix.label\"></span>\n }\n </span>\n }\n @for (suffix of field.suffixes; track suffix) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (suffix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"suffix.actionAriaLabel\"\n (click)=\"buttonAction(suffix)\"\n >{{suffix.label}}</button>\n } @else {\n <span [innerHTML]=\"suffix.label\"></span>\n }\n </span>\n }\n\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"], dependencies: [{ kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.RequiredValidator, selector: ":not([type=checkbox])[required][formControlName],:not([type=checkbox])[required][formControl],:not([type=checkbox])[required][ngModel]", inputs: ["required"] }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { 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.MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "directive", type: i2$1.MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "ngmodule", type: MatDatepickerModule }, { kind: "component", type: i3$3.MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: i3$3.MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: i3$3.MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "ngmodule", type: MatInputModule }, { kind: "directive", type: i3.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: MatButtonModule }, { kind: "component", type: i4.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"] }] });
|
|
1258
1354
|
}
|
|
1259
1355
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: MatFieldDateComponent, decorators: [{
|
|
1260
1356
|
type: Component,
|
|
1261
1357
|
args: [{ selector: 'sot-field-date', standalone: true, imports: [ReactiveFormsModule, NgClass, MatFormFieldModule, MatDatepickerModule, MatInputModule, MatButtonModule], providers: [
|
|
1262
1358
|
provideLuxonDateAdapter(),
|
|
1263
|
-
], template: "<div\n class=\"ac-form-field ac-form-field-date\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field>\n <mat-label>\n {{ field.label }}\n </mat-label>\n <input matInput\n type=\"text\"\n [id]=\"uuid\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"field.name\"\n [required]=\"!!required\"\n [readonly]=\"field.readonly\"\n [min]=\"field.minDate ? field.minDate : null\"\n [max]=\"field.maxDate ? field.maxDate : null\"\n [matDatepickerFilter]=\"filterDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n @for (prefix of field.prefixes; track prefix) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (prefix.action) {\n <button type=\"button\"\n [attr.aria-label]=\"prefix.actionAriaLabel\"\n (click)=\"buttonAction(prefix)\"\n >{{prefix.label}}</button>\n } @else {\n <span [innerHTML]=\"prefix.label\"></span>\n }\n </span>\n }\n @for (suffix of field.suffixes; track suffix) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (suffix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"suffix.actionAriaLabel\"\n (click)=\"buttonAction(suffix)\"\n >{{suffix.label}}</button>\n } @else {\n <span [innerHTML]=\"suffix.label\"></span>\n }\n </span>\n }\n\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"] }]
|
|
1359
|
+
], template: "<div\n class=\"ac-form-field ac-form-field-date\"\n [ngClass]=\"field.className\"\n [formGroup]=\"group\"\n>\n <mat-form-field [appearance]=\"field.appearance ?? 'fill'\">\n <mat-label>\n {{ field.label }}\n </mat-label>\n <input matInput\n type=\"text\"\n [id]=\"uuid\"\n [matDatepicker]=\"picker\"\n [formControlName]=\"field.name\"\n [required]=\"!!required\"\n [readonly]=\"field.readonly\"\n [min]=\"field.minDate ? field.minDate : null\"\n [max]=\"field.maxDate ? field.maxDate : null\"\n [matDatepickerFilter]=\"filterDate\"\n />\n <mat-datepicker-toggle matIconSuffix [for]=\"picker\"></mat-datepicker-toggle>\n <mat-datepicker #picker [touchUi]=\"!!field.touchUi\"></mat-datepicker>\n\n @for (prefix of field.prefixes; track prefix) {\n <span class=\"sot-formfield-prefix\" matPrefix>\n @if (prefix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"prefix.actionAriaLabel\"\n (click)=\"buttonAction(prefix)\"\n >{{prefix.label}}</button>\n } @else {\n <span [innerHTML]=\"prefix.label\"></span>\n }\n </span>\n }\n @for (suffix of field.suffixes; track suffix) {\n <span class=\"sot-formfield-suffix\" matSuffix>\n @if (suffix.action) {\n <button type=\"button\" matButton\n [attr.aria-label]=\"suffix.actionAriaLabel\"\n (click)=\"buttonAction(suffix)\"\n >{{suffix.label}}</button>\n } @else {\n <span [innerHTML]=\"suffix.label\"></span>\n }\n </span>\n }\n\n @if (field.description) {\n <mat-hint align=\"start\"> {{ field.description }}</mat-hint>\n }\n @if (control && !control.untouched && control.invalid) {\n <mat-error>\n @for (validation of field.validations; track validation) {\n @if (control.hasError(validation.name)) {\n {{ validation.message }}\n }\n }\n </mat-error>\n }\n </mat-form-field>\n</div>\n", styles: [".ac-form-field-date mat-form-field{width:100%}.ac-form-field-date mat-form-field[hidden]{display:none}.ac-form-field-date-prefix,.ac-form-field-date-suffix{padding:0 .5rem}\n"] }]
|
|
1264
1360
|
}] });
|
|
1265
1361
|
|
|
1266
1362
|
const components$2 = {
|
|
@@ -1447,6 +1543,110 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
1447
1543
|
args: [{ selector: "ac-dynamic-form-modal", standalone: true, imports: [NgClass, ReactiveFormsModule, MatIconModule, MatButtonModule, MatDialogModule, AcDynamicFieldDirective, MaterialButton], providers: [DynamicFormService], template: "<h2 class=\"modal-title\" matDialogTitle> {{ data.title }}</h2>\r\n\r\n<div matDialogContent>\r\n @if (data.description) {\r\n <p [innerHTML]=\"data.description\"></p>\r\n }\r\n @if (form) {\r\n <form class=\"dynamic-form\"\r\n [formGroup]=\"form\"\r\n [ngClass]=\"data.className?.form\">\r\n <div class=\"dynamic-form-content\"\r\n [ngClass]=\"data.className?.formContent\">\r\n @for (field of data.fields; track field) {\r\n <div\r\n [hidden]=\"!!field.hidden\"\r\n [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"form\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n </form>\r\n }\r\n @if (message) {\r\n <div [innerHTML]=\"message\"\r\n [ngClass]=\"{'message-success': status === 'OK', 'message-error': status === 'ERROR'}\"\r\n ></div>\r\n }\r\n</div>\r\n\r\n<div matDialogActions>\r\n <div class=\"modal-action-buttons\" [ngClass]=\"data.className?.formButtons\">\r\n @for (button of data.buttons; track $index) {\r\n <sot-mat-button\r\n [className]=\"button.className\"\r\n [matType]=\"button.matButtonType\"\r\n [disabled]=\"button.disabledIfFormNoValid && form?.invalid\"\r\n [matIcon]=\"button.matIcon\"\r\n [label]=\"button.label\"\r\n [title]=\"button.title\"\r\n [ariaLabel]=\"button.ariaLabel\"\r\n (buttonClick)=\"onClickButton(button)\"\r\n ></sot-mat-button>\r\n }\r\n </div>\r\n</div>\r\n" }]
|
|
1448
1544
|
}], ctorParameters: () => [] });
|
|
1449
1545
|
|
|
1546
|
+
class AcDynamicFormStepperComponent {
|
|
1547
|
+
dynamicFormService = inject(DynamicFormService);
|
|
1548
|
+
destroyRef = inject(DestroyRef);
|
|
1549
|
+
cdr = inject(ChangeDetectorRef);
|
|
1550
|
+
breakpointObserver = inject(BreakpointObserver);
|
|
1551
|
+
stepper;
|
|
1552
|
+
config = input.required(...(ngDevMode ? [{ debugName: "config" }] : []));
|
|
1553
|
+
initialValues = input(...(ngDevMode ? [undefined, { debugName: "initialValues" }] : []));
|
|
1554
|
+
formCancel = output();
|
|
1555
|
+
formSubmit = output();
|
|
1556
|
+
formChange = output();
|
|
1557
|
+
stepperOrientation = new BehaviorSubject('horizontal');
|
|
1558
|
+
get form() {
|
|
1559
|
+
return this.dynamicFormService.form;
|
|
1560
|
+
}
|
|
1561
|
+
get controls() {
|
|
1562
|
+
return this.form ? this.form.controls : null;
|
|
1563
|
+
}
|
|
1564
|
+
get changes() {
|
|
1565
|
+
return this.form ? this.form.valueChanges : null;
|
|
1566
|
+
}
|
|
1567
|
+
get valid() {
|
|
1568
|
+
return this.form ? this.form.valid : null;
|
|
1569
|
+
}
|
|
1570
|
+
get value() {
|
|
1571
|
+
return this.form ? this.form.value : null;
|
|
1572
|
+
}
|
|
1573
|
+
ngOnInit() {
|
|
1574
|
+
this.dynamicFormService.createFormStepper(this.config().steps, this.config().validations, this.config().updateOn, this.initialValues);
|
|
1575
|
+
this.onValueChanges();
|
|
1576
|
+
this.form.valueChanges
|
|
1577
|
+
.pipe(distinctUntilChanged(), debounceTime(this.config().debounceTime ?? 0), takeUntilDestroyed(this.destroyRef))
|
|
1578
|
+
.subscribe(() => {
|
|
1579
|
+
this.onValueChanges();
|
|
1580
|
+
});
|
|
1581
|
+
if (this.config().orientation === 'responsive') {
|
|
1582
|
+
const breakpoint = this.config().responsiveBreakpoint ?? '800px';
|
|
1583
|
+
this.breakpointObserver
|
|
1584
|
+
.observe('(min-width: ' + breakpoint + ')')
|
|
1585
|
+
.pipe(map(({ matches }) => (matches ? 'horizontal' : 'vertical')))
|
|
1586
|
+
.subscribe(this.stepperOrientation);
|
|
1587
|
+
}
|
|
1588
|
+
else if (this.config().orientation) {
|
|
1589
|
+
this.stepperOrientation.next(this.config().orientation);
|
|
1590
|
+
}
|
|
1591
|
+
}
|
|
1592
|
+
getSubGroup(stepName) {
|
|
1593
|
+
return this.form.controls[stepName];
|
|
1594
|
+
}
|
|
1595
|
+
onValueChanges() {
|
|
1596
|
+
this.formChange.emit(this.form);
|
|
1597
|
+
if (this.config().onValueChanges) {
|
|
1598
|
+
this.config().onValueChanges(this.form, this.config().steps);
|
|
1599
|
+
this.cdr.detectChanges();
|
|
1600
|
+
}
|
|
1601
|
+
}
|
|
1602
|
+
ngOnChanges(changes) {
|
|
1603
|
+
if (changes["initialValues"] && this.form) {
|
|
1604
|
+
this.setValue(this.initialValues);
|
|
1605
|
+
}
|
|
1606
|
+
}
|
|
1607
|
+
setValue(values) {
|
|
1608
|
+
this.form.setValue(values);
|
|
1609
|
+
this.form.updateValueAndValidity();
|
|
1610
|
+
}
|
|
1611
|
+
onClickButton(button) {
|
|
1612
|
+
if (button.type === 'reset') {
|
|
1613
|
+
this.reset();
|
|
1614
|
+
}
|
|
1615
|
+
else if (button.type === 'submit') {
|
|
1616
|
+
this.formSubmit.emit(this.form);
|
|
1617
|
+
}
|
|
1618
|
+
if (button.action) {
|
|
1619
|
+
button.action(this.form);
|
|
1620
|
+
}
|
|
1621
|
+
}
|
|
1622
|
+
reset() {
|
|
1623
|
+
this.form.reset();
|
|
1624
|
+
this.stepper.reset();
|
|
1625
|
+
this.formCancel.emit();
|
|
1626
|
+
}
|
|
1627
|
+
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFormStepperComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
|
|
1628
|
+
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: AcDynamicFormStepperComponent, isStandalone: true, selector: "sot-material-dynamic-form-stepper", inputs: { config: { classPropertyName: "config", publicName: "config", isSignal: true, isRequired: true, transformFunction: null }, initialValues: { classPropertyName: "initialValues", publicName: "initialValues", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { formCancel: "formCancel", formSubmit: "formSubmit", formChange: "formChange" }, providers: [
|
|
1629
|
+
DynamicFormService, {
|
|
1630
|
+
provide: STEPPER_GLOBAL_OPTIONS,
|
|
1631
|
+
useValue: { showError: true, displayDefaultIndicatorType: false },
|
|
1632
|
+
}
|
|
1633
|
+
], viewQueries: [{ propertyName: "stepper", first: true, predicate: ["stepper"], descendants: true }], exportAs: ["dynamicFormStepper"], usesOnChanges: true, ngImport: i0, template: "@if (form) {\r\n <form [formGroup]=\"form\"\r\n class=\"dynamic-form-stepper\"\r\n [ngClass]=\"config().className\"\r\n >\r\n <mat-stepper #stepper\r\n [linear]=\"config().linear\"\r\n [orientation]=\"(stepperOrientation | async)!\">\r\n @for (step of config().steps; track step.name; let stepFirst = $first; let stepLast = $last) {\r\n <mat-step [stepControl]=\"form.controls[step.name]\"\r\n [formGroup]=\"getSubGroup(step.name)\"\r\n [errorMessage]=\"step.errorMessage ?? ''\">\r\n <ng-template matStepLabel>{{ step.label }}</ng-template>\r\n <ng-template matStepContent>\r\n <div class=\"dynamic-form-stepper-content\"\r\n [ngClass]=\"config().className?.formContent\">\r\n @for (field of step.fields; track field.name) {\r\n <div [hidden]=\"!!field.hidden\" [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"getSubGroup(step.name)\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-stepper-buttons\" [ngClass]=\"config().className?.formButtons\">\r\n @for (button of config().buttons; track $index) {\r\n\r\n @if (button.type === 'previous' && !stepFirst) {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n matStepperPrevious\r\n type=\"button\"\r\n [ngClass]=\"button.className\"\r\n [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else if (button.type === 'next' && !stepLast) {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n matStepperNext\r\n type=\"button\"\r\n [ngClass]=\"button.className\"\r\n [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n [attr.aria-label]=\"button.ariaLabel\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else if ((button.type === 'submit' || button.type === 'reset') && stepLast) {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n [type]=\"button.type\"\r\n [ngClass]=\"button.className\"\r\n [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n [attr.aria-label]=\"button.ariaLabel\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else if (button.type === 'button') {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n [type]=\"button.type\"\r\n [ngClass]=\"button.className\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n [attr.aria-label]=\"button.ariaLabel\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n </mat-step>\r\n }\r\n </mat-stepper>\r\n </form>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;flex:1}.dynamic-form-stepper-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}\n"], dependencies: [{ kind: "directive", type: AcDynamicFieldDirective, selector: "[matDynamicField]", inputs: ["type", "path", "field", "group", "instancePath"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1.ɵNgNoValidate, selector: "form:not([ngNoForm]):not([ngNativeValidate])" }, { kind: "directive", type: i1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "ngmodule", type: MatIconModule }, { kind: "component", type: i3$1.MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "ngmodule", type: MatButtonModule }, { kind: "component", type: i4.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: "ngmodule", type: MatSidenavModule }, { kind: "ngmodule", type: MatListModule }, { kind: "ngmodule", type: MatStepperModule }, { kind: "component", type: i4$1.MatStep, selector: "mat-step", inputs: ["color"], exportAs: ["matStep"] }, { kind: "directive", type: i4$1.MatStepLabel, selector: "[matStepLabel]" }, { kind: "component", type: i4$1.MatStepper, selector: "mat-stepper, mat-vertical-stepper, mat-horizontal-stepper, [matStepper]", inputs: ["disableRipple", "color", "labelPosition", "headerPosition", "animationDuration"], outputs: ["animationDone"], exportAs: ["matStepper", "matVerticalStepper", "matHorizontalStepper"] }, { kind: "directive", type: i4$1.MatStepperNext, selector: "button[matStepperNext]" }, { kind: "directive", type: i4$1.MatStepperPrevious, selector: "button[matStepperPrevious]" }, { kind: "directive", type: i4$1.MatStepContent, selector: "ng-template[matStepContent]" }, { kind: "pipe", type: AsyncPipe, name: "async" }] });
|
|
1634
|
+
}
|
|
1635
|
+
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: AcDynamicFormStepperComponent, decorators: [{
|
|
1636
|
+
type: Component,
|
|
1637
|
+
args: [{ exportAs: "dynamicFormStepper", selector: "sot-material-dynamic-form-stepper", standalone: true, imports: [AcDynamicFieldDirective, NgClass, ReactiveFormsModule, MatError,
|
|
1638
|
+
MatIconModule, MatButtonModule, MatSidenavModule, MatListModule, MatTab, MatTabLabel,
|
|
1639
|
+
MatStepperModule, AsyncPipe, MatStepperPrevious, MatStepperNext, MatIcon], providers: [
|
|
1640
|
+
DynamicFormService, {
|
|
1641
|
+
provide: STEPPER_GLOBAL_OPTIONS,
|
|
1642
|
+
useValue: { showError: true, displayDefaultIndicatorType: false },
|
|
1643
|
+
}
|
|
1644
|
+
], template: "@if (form) {\r\n <form [formGroup]=\"form\"\r\n class=\"dynamic-form-stepper\"\r\n [ngClass]=\"config().className\"\r\n >\r\n <mat-stepper #stepper\r\n [linear]=\"config().linear\"\r\n [orientation]=\"(stepperOrientation | async)!\">\r\n @for (step of config().steps; track step.name; let stepFirst = $first; let stepLast = $last) {\r\n <mat-step [stepControl]=\"form.controls[step.name]\"\r\n [formGroup]=\"getSubGroup(step.name)\"\r\n [errorMessage]=\"step.errorMessage ?? ''\">\r\n <ng-template matStepLabel>{{ step.label }}</ng-template>\r\n <ng-template matStepContent>\r\n <div class=\"dynamic-form-stepper-content\"\r\n [ngClass]=\"config().className?.formContent\">\r\n @for (field of step.fields; track field.name) {\r\n <div [hidden]=\"!!field.hidden\" [ngClass]=\"field.hostClassName\">\r\n <ng-container\r\n matDynamicField\r\n [path]=\"field.name\"\r\n [type]=\"field.type\"\r\n [field]=\"field\"\r\n [group]=\"getSubGroup(step.name)\"\r\n >\r\n </ng-container>\r\n </div>\r\n }\r\n </div>\r\n @if (config()!.buttons) {\r\n <div class=\"dynamic-form-stepper-buttons\" [ngClass]=\"config().className?.formButtons\">\r\n @for (button of config().buttons; track $index) {\r\n\r\n @if (button.type === 'previous' && !stepFirst) {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n matStepperPrevious\r\n type=\"button\"\r\n [ngClass]=\"button.className\"\r\n [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else if (button.type === 'next' && !stepLast) {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n matStepperNext\r\n type=\"button\"\r\n [ngClass]=\"button.className\"\r\n [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n [attr.aria-label]=\"button.ariaLabel\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else if ((button.type === 'submit' || button.type === 'reset') && stepLast) {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n [type]=\"button.type\"\r\n [ngClass]=\"button.className\"\r\n [disabled]=\"button.disabledIfFormNoValid && getSubGroup(step.name).invalid\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n [attr.aria-label]=\"button.ariaLabel\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n } @else if (button.type === 'button') {\r\n <button [matButton]=\"button.matButtonAppearance ?? 'text'\"\r\n [type]=\"button.type\"\r\n [ngClass]=\"button.className\"\r\n (click)=\"onClickButton(button)\"\r\n [title]=\"button.title ? button.title : ''\"\r\n [attr.aria-label]=\"button.ariaLabel\"\r\n >\r\n @if (button.matIcon) {\r\n <mat-icon>\r\n {{ button.matIcon }}\r\n </mat-icon>\r\n }\r\n {{ button.label }}\r\n </button>\r\n }\r\n }\r\n </div>\r\n }\r\n </ng-template>\r\n </mat-step>\r\n }\r\n </mat-stepper>\r\n </form>\r\n}\r\n", styles: [":host{display:flex;flex-direction:column;flex:1}.dynamic-form-stepper-buttons{display:flex;flex-direction:row;gap:2rem;margin-bottom:2rem}\n"] }]
|
|
1645
|
+
}], propDecorators: { stepper: [{
|
|
1646
|
+
type: ViewChild,
|
|
1647
|
+
args: ['stepper']
|
|
1648
|
+
}], config: [{ type: i0.Input, args: [{ isSignal: true, alias: "config", required: true }] }], initialValues: [{ type: i0.Input, args: [{ isSignal: true, alias: "initialValues", required: false }] }], formCancel: [{ type: i0.Output, args: ["formCancel"] }], formSubmit: [{ type: i0.Output, args: ["formSubmit"] }], formChange: [{ type: i0.Output, args: ["formChange"] }] } });
|
|
1649
|
+
|
|
1450
1650
|
class DsfrDivTextComponent extends AbstractFieldComponent {
|
|
1451
1651
|
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.0.6", ngImport: i0, type: DsfrDivTextComponent, deps: null, target: i0.ɵɵFactoryTarget.Component });
|
|
1452
1652
|
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.0.6", type: DsfrDivTextComponent, isStandalone: true, selector: "sot-dsfr-div-text", usesInheritance: true, ngImport: i0, template: "<div class=\"sot-formfield sot-formfield-text\" [ngClass]=\"field.className\">\n <div [innerHTML]=\"field.label\"></div>\n @if(field.description) {\n <p [innerHTML]=\"field.description\"></p>\n }\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] });
|
|
@@ -1524,7 +1724,7 @@ class DsfrArrayComponent extends AbstractControlFieldComponent {
|
|
|
1524
1724
|
addItem() {
|
|
1525
1725
|
const i = this.field.instances.length > 0 ? this.field.instances[this.field.instances.length - 1].number + 1 : 0;
|
|
1526
1726
|
const fields = _.cloneDeep(this.field.field.fields);
|
|
1527
|
-
const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null);
|
|
1727
|
+
const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null, null);
|
|
1528
1728
|
this.field.instances.push({
|
|
1529
1729
|
number: i,
|
|
1530
1730
|
group: grp,
|
|
@@ -1947,7 +2147,7 @@ class ClassicArrayComponent extends AbstractControlFieldComponent {
|
|
|
1947
2147
|
addItem() {
|
|
1948
2148
|
const i = this.field.instances.length > 0 ? this.field.instances[this.field.instances.length - 1].number + 1 : 0;
|
|
1949
2149
|
const fields = _.cloneDeep(this.field.field.fields);
|
|
1950
|
-
const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null);
|
|
2150
|
+
const grp = this.dynamicService.createGroup(fields, `${this.path}[${i}]`, null, null);
|
|
1951
2151
|
this.field.instances.push({
|
|
1952
2152
|
number: i,
|
|
1953
2153
|
group: grp,
|
|
@@ -2299,5 +2499,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.0.6", ngImpor
|
|
|
2299
2499
|
* Generated bundle index. Do not edit.
|
|
2300
2500
|
*/
|
|
2301
2501
|
|
|
2302
|
-
export { AbstractControlFieldComponent, AbstractFieldComponent, AcCustomComponentField, AutocompleteAttribute, ClassicDynamicFormComponent, ConditionsService, DsfrDynamicFormComponent, DynamicFormService, MaterialDynamicFormComponent, MaterialDynamicFormModalComponent };
|
|
2502
|
+
export { AbstractControlFieldComponent, AbstractFieldComponent, AcCustomComponentField, AcDynamicFormStepperComponent, AutocompleteAttribute, ClassicDynamicFormComponent, ConditionsService, DsfrDynamicFormComponent, DynamicFormService, MaterialDynamicFormComponent, MaterialDynamicFormModalComponent };
|
|
2303
2503
|
//# sourceMappingURL=sotoa-ui-dynamic-form.mjs.map
|