@wemake4u/form-player-se 1.0.37 → 1.0.38
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +21 -0
- package/esm2022/lib/dynamic-fields/dynamic-fields.component.mjs +3 -3
- package/esm2022/lib/dynamic-form/dynamic-form.component.mjs +31 -7
- package/esm2022/lib/dynamic-host/dynamic-host.component.mjs +2 -1
- package/esm2022/lib/services/compute.service.mjs +6 -2
- package/esm2022/lib/services/disable.service.mjs +7 -5
- package/esm2022/lib/services/feel.service.mjs +24 -1
- package/esm2022/lib/services/programmability.service.mjs +8 -1
- package/esm2022/lib/services/sanitize.service.mjs +2 -2
- package/esm2022/lib/services/validation.service.mjs +9 -2
- package/esm2022/lib/utils/string.mjs +6 -0
- package/fesm2022/wemake4u-form-player-se.mjs +88 -15
- package/fesm2022/wemake4u-form-player-se.mjs.map +1 -1
- package/lib/dynamic-form/dynamic-form.component.d.ts +4 -0
- package/lib/services/compute.service.d.ts +1 -0
- package/lib/services/disable.service.d.ts +1 -1
- package/lib/services/feel.service.d.ts +2 -0
- package/lib/services/programmability.service.d.ts +1 -0
- package/lib/services/validation.service.d.ts +1 -0
- package/lib/utils/string.d.ts +1 -0
- package/package.json +1 -1
|
@@ -115,6 +115,12 @@ function stringifyPath(path) {
|
|
|
115
115
|
return String(path);
|
|
116
116
|
}
|
|
117
117
|
|
|
118
|
+
function isNullOrEmpty(value) {
|
|
119
|
+
return value === null
|
|
120
|
+
|| value === undefined
|
|
121
|
+
|| (typeof value === 'string' && value.trim() === '');
|
|
122
|
+
}
|
|
123
|
+
|
|
118
124
|
const PathExpression = "PathExpression";
|
|
119
125
|
const VariableName = "VariableName";
|
|
120
126
|
const FunctionInvocation = "FunctionInvocation";
|
|
@@ -145,6 +151,28 @@ class FeelService {
|
|
|
145
151
|
}
|
|
146
152
|
}
|
|
147
153
|
;
|
|
154
|
+
isValidExpression(expression) {
|
|
155
|
+
if (isNullOrEmpty(expression))
|
|
156
|
+
return true;
|
|
157
|
+
try {
|
|
158
|
+
evaluate$1(expression);
|
|
159
|
+
return true;
|
|
160
|
+
}
|
|
161
|
+
catch {
|
|
162
|
+
return false;
|
|
163
|
+
}
|
|
164
|
+
}
|
|
165
|
+
isValidUnaryTest(expression) {
|
|
166
|
+
if (isNullOrEmpty(expression))
|
|
167
|
+
return true;
|
|
168
|
+
try {
|
|
169
|
+
unaryTest(expression);
|
|
170
|
+
return true;
|
|
171
|
+
}
|
|
172
|
+
catch {
|
|
173
|
+
return false;
|
|
174
|
+
}
|
|
175
|
+
}
|
|
148
176
|
getDependencies(expression, context = {}) {
|
|
149
177
|
const dependencies = [];
|
|
150
178
|
const uniqueSet = new Set();
|
|
@@ -2136,6 +2164,12 @@ class ProgrammabilityService {
|
|
|
2136
2164
|
};
|
|
2137
2165
|
}, {});
|
|
2138
2166
|
}
|
|
2167
|
+
getFeelFunctions() {
|
|
2168
|
+
return {
|
|
2169
|
+
isValidExpression: this.feelService.isValidExpression,
|
|
2170
|
+
isValidUnaryTest: this.feelService.isValidUnaryTest
|
|
2171
|
+
};
|
|
2172
|
+
}
|
|
2139
2173
|
getFormFunctions(formGroup) {
|
|
2140
2174
|
return this.formService.getContext(formGroup);
|
|
2141
2175
|
}
|
|
@@ -2185,6 +2219,7 @@ class ProgrammabilityService {
|
|
|
2185
2219
|
fn: {
|
|
2186
2220
|
...this.predefinedFunctions,
|
|
2187
2221
|
...this.getFormFunctions(formGroup),
|
|
2222
|
+
...this.getFeelFunctions()
|
|
2188
2223
|
}
|
|
2189
2224
|
};
|
|
2190
2225
|
if (options.extendContext) {
|
|
@@ -2376,7 +2411,9 @@ class ValidationService {
|
|
|
2376
2411
|
return new Map();
|
|
2377
2412
|
}
|
|
2378
2413
|
addToCollection(collection, control, formGroup, component) {
|
|
2379
|
-
collection.
|
|
2414
|
+
if (!collection.has(control) && this.canAddToCollection(component)) {
|
|
2415
|
+
collection.set(control, { component, formGroup });
|
|
2416
|
+
}
|
|
2380
2417
|
}
|
|
2381
2418
|
setupCollection(collection) {
|
|
2382
2419
|
collection.forEach((componentValidation, control) => {
|
|
@@ -2390,6 +2427,11 @@ class ValidationService {
|
|
|
2390
2427
|
watching(control);
|
|
2391
2428
|
});
|
|
2392
2429
|
}
|
|
2430
|
+
canAddToCollection(component) {
|
|
2431
|
+
const required = component?.validate?.required;
|
|
2432
|
+
const hasRules = Array.isArray(component?.validations) && component.validations.length > 0;
|
|
2433
|
+
return required === true || hasRules;
|
|
2434
|
+
}
|
|
2393
2435
|
getRules(component) {
|
|
2394
2436
|
if (!Array.isArray(component.validations))
|
|
2395
2437
|
return [];
|
|
@@ -2571,8 +2613,9 @@ class DisableService {
|
|
|
2571
2613
|
return new Map();
|
|
2572
2614
|
}
|
|
2573
2615
|
addToCollection(collection, control, parentGroup, component) {
|
|
2574
|
-
if (this.
|
|
2616
|
+
if (!collection.has(control) && this.canAddToCollection(component)) {
|
|
2575
2617
|
collection.set(control, { parentGroup, component });
|
|
2618
|
+
}
|
|
2576
2619
|
}
|
|
2577
2620
|
setupCollection(collection) {
|
|
2578
2621
|
collection.forEach((disableContext, control) => {
|
|
@@ -2623,9 +2666,10 @@ class DisableService {
|
|
|
2623
2666
|
}
|
|
2624
2667
|
}
|
|
2625
2668
|
}
|
|
2626
|
-
|
|
2627
|
-
|
|
2628
|
-
|
|
2669
|
+
canAddToCollection(component) {
|
|
2670
|
+
const disabled = component?.disabled;
|
|
2671
|
+
return typeof disabled === 'boolean'
|
|
2672
|
+
|| typeof disabled === 'string';
|
|
2629
2673
|
}
|
|
2630
2674
|
getPath(control) {
|
|
2631
2675
|
return this.formService.getPath(control).join(".");
|
|
@@ -2729,7 +2773,7 @@ class ComputeService {
|
|
|
2729
2773
|
return new Map();
|
|
2730
2774
|
}
|
|
2731
2775
|
addToCollection(collection, control, parentGroup, component) {
|
|
2732
|
-
if (this.
|
|
2776
|
+
if (!collection.has(control) && this.canAddToCollection(component)) {
|
|
2733
2777
|
collection.set(control, { component, parentGroup });
|
|
2734
2778
|
}
|
|
2735
2779
|
}
|
|
@@ -2738,6 +2782,10 @@ class ComputeService {
|
|
|
2738
2782
|
this.applyExpression(control, computeContext);
|
|
2739
2783
|
});
|
|
2740
2784
|
}
|
|
2785
|
+
canAddToCollection(component) {
|
|
2786
|
+
const expression = component?.expression;
|
|
2787
|
+
return this.programmability.isExpression(expression);
|
|
2788
|
+
}
|
|
2741
2789
|
applyExpression(control, context) {
|
|
2742
2790
|
const formGroup = context.parentGroup;
|
|
2743
2791
|
const { key, expression, conditional } = context.component ?? {};
|
|
@@ -7143,6 +7191,7 @@ class DynamicHostComponent {
|
|
|
7143
7191
|
.subscribe(isDisabled => {
|
|
7144
7192
|
invoke(isDisabled);
|
|
7145
7193
|
});
|
|
7194
|
+
invoke(formControl.disabled);
|
|
7146
7195
|
}
|
|
7147
7196
|
}
|
|
7148
7197
|
setProperties() {
|
|
@@ -7219,7 +7268,7 @@ class SanitizeService {
|
|
|
7219
7268
|
allowedTags: sanitizeHtml.defaults.allowedTags.concat(['img']),
|
|
7220
7269
|
allowedAttributes: {
|
|
7221
7270
|
...sanitizeHtml.defaults.allowedAttributes,
|
|
7222
|
-
'*': ['style']
|
|
7271
|
+
'*': ['style', 'align', 'class', 'id']
|
|
7223
7272
|
}
|
|
7224
7273
|
};
|
|
7225
7274
|
}
|
|
@@ -7824,7 +7873,7 @@ class DynamicFieldsComponent {
|
|
|
7824
7873
|
ProgrammabilityService,
|
|
7825
7874
|
GridService,
|
|
7826
7875
|
ChartService
|
|
7827
|
-
], ngImport: i0, template: "<div [ngClass]=\"getFormAlignment()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [class]=\"getClass(component)\"\r\n [ngClass]=\"getComponentAlignment(component)\">\r\n <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n dropdown\r\n [valueSync]=\"component.valueSync\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [isMultiple]=\"true\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"number\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n [formControlName]=\"component.key\"\r\n number\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [minimum]=\"evaluateNumber(component.minimum)\"\r\n [maximum]=\"evaluateNumber(component.maximum)\"\r\n [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n isoDate\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </ngx-sirio-datepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </ngx-sirio-timepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <div [formControlName]=\"component.key\"\r\n dateTimeCoordinator\r\n dateTimeValidator\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [datePicker]=\"date\"\r\n [timePicker]=\"time\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [valueSync]=\"component.valueSync\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\"\r\n class=\"datetime-container\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n isoDate\r\n #date>\r\n </ngx-sirio-datepicker>\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n #time>\r\n </ngx-sirio-timepicker>\r\n </div>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region toggle -->\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #toggle\r\n [register]=\"component\"\r\n [componentRef]=\"toggle\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-toggle>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-checkbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipradio\r\n [register]=\"component\"\r\n [componentRef]=\"chipradio\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"radio\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-radio-button>\r\n </ngx-sirio-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipcheckbox\r\n [register]=\"component\"\r\n [componentRef]=\"chipcheckbox\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"checkbox\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-checkbox>\r\n </ngx-sirio-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"textarea\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n (fileUploadedEvent)=\"fileUploaded($event)\"\r\n [showFilelist]=\"!component.showDetails\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n {{ locale(Texts, 'Upload') }}\r\n </ngx-sirio-file-upload>\r\n </div>\r\n <ng-container *ngIf=\"component.showDetails\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [rows]=\"createUploadTables(component)\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </ngx-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"sirio-control\"\r\n [ngClass]=\"[getTextAlignment(component), getLightView(component) ]\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <button *ngIf=\"component.tooltip\"\r\n sirioTooltip\r\n [content]=\"component.tooltip\"\r\n [hasPopover]=\"true\"\r\n [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n </div>\r\n <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container *ngIf=\"component.fieldtype === 'checkbox'; else defaultTemplate\">\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-container>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [formArrayName]=\"component.key\" \r\n [recursion]=\"component\"\r\n #recursion=\"recursion\"\r\n [repeat]=\"evaluateNumber(component.repetitions)\"\r\n [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclisttab\">\r\n <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [tabCount]=\"formArray.controls.length\"\r\n #dynamiclisttab>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\">\r\n <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-accordion-panel #panel accordionPanel>\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <ng-container *ngIf=\"panel.panelIsOpen\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n </div>\r\n <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n <ng-container *ngIf=\"!collapse.isOpen\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <ngx-sirio-collapse #collapseTemplate\r\n #collapse=\"collapseExtension\"\r\n collapseExtension\r\n [isOpen]=\"true\">\r\n <div *ngIf=\"collapse.isOpen\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ngx-sirio-collapse>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container> \r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"upLabel\"\r\n [title]=\"upLabel\"\r\n [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ upLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"downLabel\"\r\n [title]=\"downLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-arrow-down\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ downLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <ngx-sirio-button (click)=\"removeItem(formArray, i, true)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"removeLabel\"\r\n [title]=\"removeLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-trash\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ removeLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <ngx-sirio-button (click)=\"addItem(formArray)\"\r\n class=\"add-item\"\r\n [ariaLabel]=\"addLabel\"\r\n [title]=\"addLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-plus\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ addLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div [ngClass]=\"getGroupOutline(component)\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ngx-sirio-tab #tab\r\n [register]=\"component\"\r\n [componentRef]=\"tab\"\r\n [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [isNavLine]=\"component.navigation\"\r\n [isVertical]=\"component.vertical\"\r\n tabControl>\r\n <ng-container *ngFor=\"let panel of component.panels; let i = index;\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n #tabPanel\r\n tabItem\r\n [componentRef]=\"tab\"\r\n *ngIf=\"evaluateConditional(panel.conditional)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <div *ngIf=\"tabPanel.isActive\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template?.rows\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ngx-sirio-accordion #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of component.panels\">\r\n <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(panel, 'label'))\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <div>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </div>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt'))\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columnDefs]=\"component.columns || evaluate(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"evaluateHeight(component.height)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n [color]=\"evaluateColor(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">\r\n <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n </ng-container>\r\n <ng-template #noIcon>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ng-template>\r\n </ngx-sirio-button>\r\n </div> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <ngx-sirio-alert [type]=\"component.role\"\r\n [labelClose]=\"locale(Texts, 'Close')\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <ngx-sirio-alert-message>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-alert-message>\r\n </ngx-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <ngx-sirio-notify #notice\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-notify-body>\r\n </ngx-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n {{ evaluateString(locale(component, 'title')) }}\r\n </p>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.ag-cell-value .btn-small .sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}\n", ".sirio-control.ng-invalid .sirio-form-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\n", ":root{--dynamiclist-border: 1px solid #ccc}.dynamiclist-no-data{text-align:center;padding:20px;font-style:italic;border:var(--dynamiclist-border)}.dynamiclist-table{width:100%;border-collapse:collapse;border:none}.dynamiclist-table.main{border:var(--dynamiclist-border)}.dynamiclist-table.main .dynamiclist-table{border-left:var(--dynamiclist-border);border-bottom:var(--dynamiclist-border)}.dynamiclist-table td{border:var(--dynamiclist-border)}.dynamiclist-table tr:first-child td{border-top:none}.dynamiclist-table tr:last-child td{border-bottom:none}.dynamiclist-table tr td:first-child{border-left:none}.dynamiclist-table tr td:last-child{border-right:none}.dynamiclist-table td.content-cell{width:100%;padding-left:8px;padding-right:8px;border-left:var(--dynamiclist-border)}.dynamiclist-table td.content-cell .group-outline-repeat{margin-bottom:0}.dynamiclist-table td.command-cell{vertical-align:middle}.dynamiclist-table td.command-cell>div{display:flex;justify-content:right}.dynamiclist-table td.recursion-cell .layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%;height:100%}.dynamiclist-table td.recursion-cell .recursion-toggle{grid-row:1 / span 2;grid-column:1;background-color:#f5f5f5;align-items:center}.dynamiclist-table td.recursion-cell .recursion-title{grid-row:1;grid-column:2;background:#f5f5f5;display:flex;align-items:center;min-height:34px}.dynamiclist-table td.recursion-cell .recursion-title .recursion-text{flex:1;text-align:center}.dynamiclist-table td.recursion-cell .recursion-title .recursion-add{margin-left:auto}.dynamiclist-table td.recursion-cell .recursion-content{grid-row:2;grid-column:2}.dynamiclist-table td.recursion-cell .recursion-content .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n"], dependencies: [{ kind: "component", type: DynamicFieldsComponent, selector: "app-dynamic-fields", inputs: ["form", "rows", "formGroup", "alignment", "readOnly", "recursionLevel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i15.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i15.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i15.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i15.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: AdornerDirective, selector: "[prefixAdorner], [suffixAdorner]", inputs: ["prefixAdorner", "suffixAdorner"] }, { kind: "directive", type: ReadOnlyDirective, selector: "[readonly]", inputs: ["readonly", "placeholder", "componentRef", "properties"] }, { kind: "directive", type: DisplayDirective, selector: "[hide], [show]", inputs: ["hide", "show"] }, { kind: "directive", type: FrameSecurityDirective, selector: "[frameSecurity]", inputs: ["frameSecurity"] }, { kind: "directive", type: ValidationPatchDirective, selector: "[validation]" }, { kind: "directive", type: DropdownDirective, selector: "[dropdown]" }, { kind: "directive", type: UpdateBlurDirective, selector: "[updateBlur]" }, { kind: "directive", type: RepeatDirective, selector: "[repeat], [allowAddRemove]", inputs: ["repeat", "allowAddRemove"] }, { kind: "directive", type: RecursionDirective, selector: "[recursion]", inputs: ["formGroup", "recursion"], exportAs: ["recursion"] }, { kind: "directive", type: TabDirective, selector: "[tabCount]", inputs: ["tabCount"] }, { kind: "directive", type: GridDirective, selector: "[rowSource], [columnDefs], [selectable], [multiSelect], [suppressActions]", inputs: ["rowSource", "columnDefs", "selectable", "multiSelect", "suppressActions", "formGroup", "register"] }, { kind: "directive", type: ChangeDirective, selector: "[observe]", inputs: ["observe", "callback"] }, { kind: "directive", type: RegisterDirective, selector: "[register]", inputs: ["register", "componentRef"] }, { kind: "directive", type: RefreshDirective, selector: "[refresh]", inputs: ["refresh", "componentRef"] }, { kind: "directive", type: AccordionDirective, selector: "[accordionCount]", inputs: ["accordionCount"] }, { kind: "directive", type: DateDirective, selector: "[isoDate]" }, { kind: "directive", type: NumberDirective, selector: "[number]", inputs: ["defaultValue", "minimum", "maximum", "decimalDigits"] }, { kind: "directive", type: TextDirective, selector: "[textcase], [maxlength]", inputs: ["textcase", "maxlength"] }, { kind: "directive", type: ValueSyncDirective, selector: "[valueSync]", inputs: ["valueSync"] }, { kind: "directive", type: TabControlDirective, selector: "[tabControl]" }, { kind: "directive", type: TabItemDirective, selector: "[tabItem]", inputs: ["componentRef", "disabled"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["collapse"] }, { kind: "directive", type: AccordionPanelDirective, selector: "[accordionPanel]" }, { kind: "directive", type: CollapsePatchDirective, selector: "[collapseExtension]", exportAs: ["collapseExtension"] }, { kind: "directive", type: DateTimeCoordinatorDirective, selector: "[dateTimeCoordinator]", inputs: ["datePicker", "timePicker"] }, { kind: "directive", type: DateTimeValidationDirective, selector: "[dateTimeValidator]", inputs: ["isWarning", "showWhenValid"] }, { kind: "component", type: SirioInputComponent, selector: "ngx-sirio-input", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "type", "name", "placeholder", "textHelp", "textFeedback", "rows", "cols", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "role"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectComponent, selector: "ngx-sirio-select", inputs: ["placeholder", "disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "isMultiple", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy"], outputs: ["focusEvent", "blurEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectOptionComponent, selector: "ngx-sirio-select-option", inputs: ["value"], outputs: ["optionSelected", "blurEvent"] }, { kind: "component", type: SirioSelectPanelComponent, selector: "ngx-sirio-select-panel", outputs: ["optionSelected", "panelOpened", "panelClosed"] }, { kind: "component", type: SirioCheckboxGroupComponent, selector: "ngx-sirio-checkbox-group", inputs: ["textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioCheckboxComponent, selector: "ngx-sirio-checkbox", inputs: ["disabled", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "disabledState", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioDatepickerComponent, selector: "ngx-sirio-datepicker", inputs: ["name", "placeholder", "textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "value", "disabledState"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent", "datechangeEvent"] }, { kind: "component", type: SirioTimepickerComponent, selector: "ngx-sirio-timepicker", inputs: ["name", "label", "labelPopover", "ariaLabelPopoverButton", "placeholder", "textHelp", "textFeedback", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioRadioGroupComponent, selector: "ngx-sirio-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioRadioButtonComponent, selector: "ngx-sirio-radio-button", inputs: ["disabledState", "label", "name", "textHelp", "textFeedback", "ariaInvalid", "ariaDescribedBy", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioTabComponent, selector: "ngx-sirio-tab", inputs: ["isVertical", "isNavLine", "leftArrowLabel", "rightArrowLabel", "tabActive"], outputs: ["tabChange"] }, { kind: "component", type: SirioTabItemComponent, selector: "ngx-sirio-tab-item", inputs: ["label", "disabled", "icon"] }, { kind: "component", type: SirioAccordionComponent, selector: "ngx-sirio-accordion", inputs: ["dark"] }, { kind: "component", type: SirioAccordionPanelComponent, selector: "ngx-sirio-accordion-panel", inputs: ["active", "disabled"], outputs: ["opened", "closed"] }, { kind: "component", type: SirioAccordionHeaderComponent, selector: "ngx-sirio-accordion-header" }, { kind: "component", type: SirioAccordionBodyComponent, selector: "ngx-sirio-accordion-body" }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioFileUploadComponent, selector: "ngx-sirio-file-upload", inputs: ["multiple", "color", "accept", "maxFiles", "showFilelist", "label", "labelPopover", "ariaLabelPopoverButton", "name", "textHelp", "textFeedback", "ariaLabel", "ariaLabelDeleteFileButton", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "fileUploadedEvent", "fileDeletedEvent", "uploadErrorEvent", "blurEvent"] }, { kind: "component", type: SirioToggleComponent, selector: "ngx-sirio-toggle", inputs: ["name", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipCheckboxGroupComponent, selector: "ngx-sirio-chip-checkbox-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipRadioGroupComponent, selector: "ngx-sirio-chip-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioInputChipComponent, selector: "ngx-sirio-input-chip", inputs: ["disabledState", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "type", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioAlertComponent, selector: "ngx-sirio-alert", inputs: ["type", "labelClose", "isVisible"], outputs: ["closeEvent"] }, { kind: "component", type: SirioAlertMessageComponent, selector: "ngx-sirio-alert-message" }, { kind: "component", type: SirioSliderComponent, selector: "ngx-sirio-slider", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "description", "min", "max", "ariaInvalid", "ariaDescribedBy", "textHelp", "textFeedback"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioNotifyComponent, selector: "ngx-sirio-notify", inputs: ["isDark"] }, { kind: "component", type: SirioNotifyBodyComponent, selector: "ngx-sirio-notify-body", inputs: ["title"] }, { kind: "directive", type: SirioTooltipDirective, selector: "[sirioTooltip]", inputs: ["sirioTooltip", "content", "hasAction", "hasPopover", "actionLabel", "actionIconClass", "clickOutside", "position", "customTemplate"], outputs: ["clickEvent"] }, { kind: "component", type: SirioCollapseComponent, selector: "ngx-sirio-collapse", inputs: ["isOpen"], outputs: ["opened", "closed"] }, { kind: "directive", type: SirioCollapseTriggerDirective, selector: "[ngxSirioCollapseTrigger]", inputs: ["id", "ngxSirioCollapseTrigger"] }, { kind: "component", type: TemplateWrapperComponent, selector: "app-template-wrapper", inputs: ["template", "context"] }, { kind: "component", type: DynamicHostComponent, selector: "app-dynamic-host", inputs: ["register", "properties", "formGroup"] }, { kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: AgCharts, selector: "ag-charts", inputs: ["options"], outputs: ["onChartReady"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
7876
|
+
], ngImport: i0, template: "<div [ngClass]=\"getFormAlignment()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [class]=\"getClass(component)\"\r\n [ngClass]=\"getComponentAlignment(component)\">\r\n <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n dropdown\r\n [valueSync]=\"component.valueSync\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [isMultiple]=\"true\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"number\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n [formControlName]=\"component.key\"\r\n number\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [minimum]=\"evaluateNumber(component.minimum)\"\r\n [maximum]=\"evaluateNumber(component.maximum)\"\r\n [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n isoDate\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </ngx-sirio-datepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </ngx-sirio-timepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <div [formControlName]=\"component.key\"\r\n dateTimeCoordinator\r\n dateTimeValidator\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [datePicker]=\"date\"\r\n [timePicker]=\"time\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [valueSync]=\"component.valueSync\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\"\r\n class=\"datetime-container\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n isoDate\r\n #date>\r\n </ngx-sirio-datepicker>\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n #time>\r\n </ngx-sirio-timepicker>\r\n </div>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region toggle -->\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #toggle\r\n [register]=\"component\"\r\n [componentRef]=\"toggle\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-toggle>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-checkbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipradio\r\n [register]=\"component\"\r\n [componentRef]=\"chipradio\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"radio\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-radio-button>\r\n </ngx-sirio-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipcheckbox\r\n [register]=\"component\"\r\n [componentRef]=\"chipcheckbox\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"checkbox\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-checkbox>\r\n </ngx-sirio-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"textarea\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n (fileUploadedEvent)=\"fileUploaded($event)\"\r\n [showFilelist]=\"!component.showDetails\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n {{ locale(Texts, 'Upload') }}\r\n </ngx-sirio-file-upload>\r\n </div>\r\n <ng-container *ngIf=\"component.showDetails\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [rows]=\"createUploadTables(component)\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </ngx-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"sirio-control\"\r\n [ngClass]=\"[getTextAlignment(component), getLightView(component) ]\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <button *ngIf=\"component.tooltip\"\r\n sirioTooltip\r\n [content]=\"component.tooltip\"\r\n [hasPopover]=\"true\"\r\n [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n </div>\r\n <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container *ngIf=\"component.fieldtype === 'checkbox'; else defaultTemplate\">\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-container>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [formArrayName]=\"component.key\" \r\n [recursion]=\"component\"\r\n #recursion=\"recursion\"\r\n [repeat]=\"evaluateNumber(component.repetitions)\"\r\n [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclisttab\">\r\n <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [tabCount]=\"formArray.controls.length\"\r\n #dynamiclisttab>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\">\r\n <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-accordion-panel #panel accordionPanel>\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <ng-container *ngIf=\"panel.panelIsOpen\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n </div>\r\n <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n <ng-container *ngIf=\"!collapse.isOpen\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <ngx-sirio-collapse #collapseTemplate\r\n #collapse=\"collapseExtension\"\r\n collapseExtension\r\n [isOpen]=\"true\">\r\n <div *ngIf=\"collapse.isOpen\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ngx-sirio-collapse>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container> \r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"upLabel\"\r\n [title]=\"upLabel\"\r\n [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ upLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"downLabel\"\r\n [title]=\"downLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-arrow-down\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ downLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <ngx-sirio-button (click)=\"removeItem(formArray, i, true)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"removeLabel\"\r\n [title]=\"removeLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-trash\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ removeLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <ngx-sirio-button (click)=\"addItem(formArray)\"\r\n class=\"add-item\"\r\n [ariaLabel]=\"addLabel\"\r\n [title]=\"addLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-plus\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ addLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div [ngClass]=\"getGroupOutline(component)\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ngx-sirio-tab #tab\r\n [register]=\"component\"\r\n [componentRef]=\"tab\"\r\n [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [isNavLine]=\"component.navigation\"\r\n [isVertical]=\"component.vertical\"\r\n tabControl>\r\n <ng-container *ngFor=\"let panel of component.panels; let i = index;\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n #tabPanel\r\n tabItem\r\n [componentRef]=\"tab\"\r\n *ngIf=\"evaluateConditional(panel.conditional)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <div *ngIf=\"tabPanel.isActive\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template?.rows\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ngx-sirio-accordion #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of component.panels\">\r\n <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(panel, 'label'))\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <div>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </div>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt'))\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columnDefs]=\"component.columns || evaluate(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"evaluateHeight(component.height)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n [color]=\"evaluateColor(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">\r\n <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n </ng-container>\r\n <ng-template #noIcon>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ng-template>\r\n </ngx-sirio-button>\r\n </div> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <ngx-sirio-alert [type]=\"component.role\"\r\n [labelClose]=\"locale(Texts, 'Close')\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <ngx-sirio-alert-message>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-alert-message>\r\n </ngx-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <ngx-sirio-notify #notice\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-notify-body>\r\n </ngx-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n {{ evaluateString(locale(component, 'title')) }}\r\n </p>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback sirio-display-feedback\">{{textFeedback}}</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.ag-cell-value .btn-small .sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}\n", ".sirio-control.ng-invalid .sirio-form-feedback,.sirio-display-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\n", ":root{--dynamiclist-border: 1px solid #ccc}.dynamiclist-no-data{text-align:center;padding:20px;font-style:italic;border:var(--dynamiclist-border)}.dynamiclist-table{width:100%;border-collapse:collapse;border:none}.dynamiclist-table.main{border:var(--dynamiclist-border)}.dynamiclist-table.main .dynamiclist-table{border-left:var(--dynamiclist-border);border-bottom:var(--dynamiclist-border)}.dynamiclist-table td{border:var(--dynamiclist-border)}.dynamiclist-table tr:first-child td{border-top:none}.dynamiclist-table tr:last-child td{border-bottom:none}.dynamiclist-table tr td:first-child{border-left:none}.dynamiclist-table tr td:last-child{border-right:none}.dynamiclist-table td.content-cell{width:100%;padding-left:8px;padding-right:8px;border-left:var(--dynamiclist-border)}.dynamiclist-table td.content-cell .group-outline-repeat{margin-bottom:0}.dynamiclist-table td.command-cell{vertical-align:middle}.dynamiclist-table td.command-cell>div{display:flex;justify-content:right}.dynamiclist-table td.recursion-cell .layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%;height:100%}.dynamiclist-table td.recursion-cell .recursion-toggle{grid-row:1 / span 2;grid-column:1;background-color:#f5f5f5;align-items:center}.dynamiclist-table td.recursion-cell .recursion-title{grid-row:1;grid-column:2;background:#f5f5f5;display:flex;align-items:center;min-height:34px}.dynamiclist-table td.recursion-cell .recursion-title .recursion-text{flex:1;text-align:center}.dynamiclist-table td.recursion-cell .recursion-title .recursion-add{margin-left:auto}.dynamiclist-table td.recursion-cell .recursion-content{grid-row:2;grid-column:2}.dynamiclist-table td.recursion-cell .recursion-content .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".datetime-container{display:flex;gap:8px;align-items:flex-end}.datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n", ".sirio-tooltip .sirio-tooltip-body{white-space:pre-line}\n"], dependencies: [{ kind: "component", type: DynamicFieldsComponent, selector: "app-dynamic-fields", inputs: ["form", "rows", "formGroup", "alignment", "readOnly", "recursionLevel"] }, { kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i15.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i15.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i15.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i15.NgTemplateOutlet, selector: "[ngTemplateOutlet]", inputs: ["ngTemplateOutletContext", "ngTemplateOutlet", "ngTemplateOutletInjector"] }, { kind: "directive", type: i15.NgSwitch, selector: "[ngSwitch]", inputs: ["ngSwitch"] }, { kind: "directive", type: i15.NgSwitchCase, selector: "[ngSwitchCase]", inputs: ["ngSwitchCase"] }, { kind: "directive", type: i15.NgSwitchDefault, selector: "[ngSwitchDefault]" }, { kind: "pipe", type: i15.AsyncPipe, name: "async" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$2.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$2.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$2.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$2.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: i1$2.FormGroupName, selector: "[formGroupName]", inputs: ["formGroupName"] }, { kind: "directive", type: i1$2.FormArrayName, selector: "[formArrayName]", inputs: ["formArrayName"] }, { kind: "directive", type: AdornerDirective, selector: "[prefixAdorner], [suffixAdorner]", inputs: ["prefixAdorner", "suffixAdorner"] }, { kind: "directive", type: ReadOnlyDirective, selector: "[readonly]", inputs: ["readonly", "placeholder", "componentRef", "properties"] }, { kind: "directive", type: DisplayDirective, selector: "[hide], [show]", inputs: ["hide", "show"] }, { kind: "directive", type: FrameSecurityDirective, selector: "[frameSecurity]", inputs: ["frameSecurity"] }, { kind: "directive", type: ValidationPatchDirective, selector: "[validation]" }, { kind: "directive", type: DropdownDirective, selector: "[dropdown]" }, { kind: "directive", type: UpdateBlurDirective, selector: "[updateBlur]" }, { kind: "directive", type: RepeatDirective, selector: "[repeat], [allowAddRemove]", inputs: ["repeat", "allowAddRemove"] }, { kind: "directive", type: RecursionDirective, selector: "[recursion]", inputs: ["formGroup", "recursion"], exportAs: ["recursion"] }, { kind: "directive", type: TabDirective, selector: "[tabCount]", inputs: ["tabCount"] }, { kind: "directive", type: GridDirective, selector: "[rowSource], [columnDefs], [selectable], [multiSelect], [suppressActions]", inputs: ["rowSource", "columnDefs", "selectable", "multiSelect", "suppressActions", "formGroup", "register"] }, { kind: "directive", type: ChangeDirective, selector: "[observe]", inputs: ["observe", "callback"] }, { kind: "directive", type: RegisterDirective, selector: "[register]", inputs: ["register", "componentRef"] }, { kind: "directive", type: RefreshDirective, selector: "[refresh]", inputs: ["refresh", "componentRef"] }, { kind: "directive", type: AccordionDirective, selector: "[accordionCount]", inputs: ["accordionCount"] }, { kind: "directive", type: DateDirective, selector: "[isoDate]" }, { kind: "directive", type: NumberDirective, selector: "[number]", inputs: ["defaultValue", "minimum", "maximum", "decimalDigits"] }, { kind: "directive", type: TextDirective, selector: "[textcase], [maxlength]", inputs: ["textcase", "maxlength"] }, { kind: "directive", type: ValueSyncDirective, selector: "[valueSync]", inputs: ["valueSync"] }, { kind: "directive", type: TabControlDirective, selector: "[tabControl]" }, { kind: "directive", type: TabItemDirective, selector: "[tabItem]", inputs: ["componentRef", "disabled"] }, { kind: "directive", type: CollapseDirective, selector: "[collapse]", inputs: ["collapse"] }, { kind: "directive", type: AccordionPanelDirective, selector: "[accordionPanel]" }, { kind: "directive", type: CollapsePatchDirective, selector: "[collapseExtension]", exportAs: ["collapseExtension"] }, { kind: "directive", type: DateTimeCoordinatorDirective, selector: "[dateTimeCoordinator]", inputs: ["datePicker", "timePicker"] }, { kind: "directive", type: DateTimeValidationDirective, selector: "[dateTimeValidator]", inputs: ["isWarning", "showWhenValid"] }, { kind: "component", type: SirioInputComponent, selector: "ngx-sirio-input", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "type", "name", "placeholder", "textHelp", "textFeedback", "rows", "cols", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "role"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectComponent, selector: "ngx-sirio-select", inputs: ["placeholder", "disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "isMultiple", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy"], outputs: ["focusEvent", "blurEvent", "keydownEvent"] }, { kind: "component", type: SirioSelectOptionComponent, selector: "ngx-sirio-select-option", inputs: ["value"], outputs: ["optionSelected", "blurEvent"] }, { kind: "component", type: SirioSelectPanelComponent, selector: "ngx-sirio-select-panel", outputs: ["optionSelected", "panelOpened", "panelClosed"] }, { kind: "component", type: SirioCheckboxGroupComponent, selector: "ngx-sirio-checkbox-group", inputs: ["textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioCheckboxComponent, selector: "ngx-sirio-checkbox", inputs: ["disabled", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "disabledState", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioDatepickerComponent, selector: "ngx-sirio-datepicker", inputs: ["name", "placeholder", "textHelp", "textFeedback", "label", "labelPopover", "ariaLabelPopoverButton", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "value", "disabledState"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent", "datechangeEvent"] }, { kind: "component", type: SirioTimepickerComponent, selector: "ngx-sirio-timepicker", inputs: ["name", "label", "labelPopover", "ariaLabelPopoverButton", "placeholder", "textHelp", "textFeedback", "ariaLabel", "ariaAutocomplete", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioRadioGroupComponent, selector: "ngx-sirio-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioRadioButtonComponent, selector: "ngx-sirio-radio-button", inputs: ["disabledState", "label", "name", "textHelp", "textFeedback", "ariaInvalid", "ariaDescribedBy", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioTabComponent, selector: "ngx-sirio-tab", inputs: ["isVertical", "isNavLine", "leftArrowLabel", "rightArrowLabel", "tabActive"], outputs: ["tabChange"] }, { kind: "component", type: SirioTabItemComponent, selector: "ngx-sirio-tab-item", inputs: ["label", "disabled", "icon"] }, { kind: "component", type: SirioAccordionComponent, selector: "ngx-sirio-accordion", inputs: ["dark"] }, { kind: "component", type: SirioAccordionPanelComponent, selector: "ngx-sirio-accordion-panel", inputs: ["active", "disabled"], outputs: ["opened", "closed"] }, { kind: "component", type: SirioAccordionHeaderComponent, selector: "ngx-sirio-accordion-header" }, { kind: "component", type: SirioAccordionBodyComponent, selector: "ngx-sirio-accordion-body" }, { kind: "component", type: SirioButtonComponent, selector: "ngx-sirio-button", inputs: ["ariaExpanded", "ariaControls", "ariaActivedescendant", "ariaHaspopup", "ariaLabel", "ariaRequired", "ariaInvalid", "ariaDescribedby", "icon", "title", "role", "color", "isFloating", "isExtended", "isLight", "isSmall", "disabled", "isDropdown", "type", "dismissType", "isBtnBlock"], outputs: ["clickEvent", "focusEvent", "blurEvent"] }, { kind: "component", type: SirioFileUploadComponent, selector: "ngx-sirio-file-upload", inputs: ["multiple", "color", "accept", "maxFiles", "showFilelist", "label", "labelPopover", "ariaLabelPopoverButton", "name", "textHelp", "textFeedback", "ariaLabel", "ariaLabelDeleteFileButton", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "fileUploadedEvent", "fileDeletedEvent", "uploadErrorEvent", "blurEvent"] }, { kind: "component", type: SirioToggleComponent, selector: "ngx-sirio-toggle", inputs: ["name", "textHelp", "textFeedback", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipCheckboxGroupComponent, selector: "ngx-sirio-chip-checkbox-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioChipRadioGroupComponent, selector: "ngx-sirio-chip-radio-group", inputs: ["label", "labelPopover", "ariaLabelPopoverButton", "textHelp", "textFeedback", "items", "ariaLabel", "ariaInvalid", "ariaDescribedBy", "disabledState", "value"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioInputChipComponent, selector: "ngx-sirio-input-chip", inputs: ["disabledState", "name", "textHelp", "textFeedback", "value", "ariaInvalid", "ariaDescribedBy", "type", "checked"], outputs: ["focusEvent", "blurEvent", "changeEvent"] }, { kind: "component", type: SirioAlertComponent, selector: "ngx-sirio-alert", inputs: ["type", "labelClose", "isVisible"], outputs: ["closeEvent"] }, { kind: "component", type: SirioAlertMessageComponent, selector: "ngx-sirio-alert-message" }, { kind: "component", type: SirioSliderComponent, selector: "ngx-sirio-slider", inputs: ["disabledState", "value", "label", "labelPopover", "ariaLabelPopoverButton", "description", "min", "max", "ariaInvalid", "ariaDescribedBy", "textHelp", "textFeedback"], outputs: ["focusEvent", "inputEvent", "blurEvent", "keyupEvent", "keydownEvent"] }, { kind: "component", type: SirioNotifyComponent, selector: "ngx-sirio-notify", inputs: ["isDark"] }, { kind: "component", type: SirioNotifyBodyComponent, selector: "ngx-sirio-notify-body", inputs: ["title"] }, { kind: "directive", type: SirioTooltipDirective, selector: "[sirioTooltip]", inputs: ["sirioTooltip", "content", "hasAction", "hasPopover", "actionLabel", "actionIconClass", "clickOutside", "position", "customTemplate"], outputs: ["clickEvent"] }, { kind: "component", type: SirioCollapseComponent, selector: "ngx-sirio-collapse", inputs: ["isOpen"], outputs: ["opened", "closed"] }, { kind: "directive", type: SirioCollapseTriggerDirective, selector: "[ngxSirioCollapseTrigger]", inputs: ["id", "ngxSirioCollapseTrigger"] }, { kind: "component", type: TemplateWrapperComponent, selector: "app-template-wrapper", inputs: ["template", "context"] }, { kind: "component", type: DynamicHostComponent, selector: "app-dynamic-host", inputs: ["register", "properties", "formGroup"] }, { kind: "component", type: AgGridAngular, selector: "ag-grid-angular", inputs: ["gridOptions", "modules", "statusBar", "sideBar", "suppressContextMenu", "preventDefaultOnContextMenu", "allowContextMenuWithControlKey", "columnMenu", "suppressMenuHide", "enableBrowserTooltips", "tooltipTrigger", "tooltipShowDelay", "tooltipHideDelay", "tooltipMouseTrack", "tooltipShowMode", "tooltipInteraction", "popupParent", "copyHeadersToClipboard", "copyGroupHeadersToClipboard", "clipboardDelimiter", "suppressCopyRowsToClipboard", "suppressCopySingleCellRanges", "suppressLastEmptyLineOnPaste", "suppressClipboardPaste", "suppressClipboardApi", "suppressCutToClipboard", "columnDefs", "defaultColDef", "defaultColGroupDef", "columnTypes", "dataTypeDefinitions", "maintainColumnOrder", "enableStrictPivotColumnOrder", "suppressFieldDotNotation", "headerHeight", "groupHeaderHeight", "floatingFiltersHeight", "pivotHeaderHeight", "pivotGroupHeaderHeight", "allowDragFromColumnsToolPanel", "suppressMovableColumns", "suppressColumnMoveAnimation", "suppressMoveWhenColumnDragging", "suppressDragLeaveHidesColumns", "suppressGroupChangesColumnVisibility", "suppressMakeColumnVisibleAfterUnGroup", "suppressRowGroupHidesColumns", "colResizeDefault", "suppressAutoSize", "autoSizePadding", "skipHeaderOnAutoSize", "autoSizeStrategy", "components", "editType", "singleClickEdit", "suppressClickEdit", "readOnlyEdit", "stopEditingWhenCellsLoseFocus", "enterNavigatesVertically", "enterNavigatesVerticallyAfterEdit", "enableCellEditingOnBackspace", "undoRedoCellEditing", "undoRedoCellEditingLimit", "defaultCsvExportParams", "suppressCsvExport", "defaultExcelExportParams", "suppressExcelExport", "excelStyles", "findSearchValue", "findOptions", "quickFilterText", "cacheQuickFilter", "includeHiddenColumnsInQuickFilter", "quickFilterParser", "quickFilterMatcher", "applyQuickFilterBeforePivotOrAgg", "excludeChildrenWhenTreeDataFiltering", "enableAdvancedFilter", "alwaysPassFilter", "includeHiddenColumnsInAdvancedFilter", "advancedFilterParent", "advancedFilterBuilderParams", "suppressAdvancedFilterEval", "suppressSetFilterByDefault", "enableCharts", "chartThemes", "customChartThemes", "chartThemeOverrides", "chartToolPanelsDef", "chartMenuItems", "loadingCellRenderer", "loadingCellRendererParams", "loadingCellRendererSelector", "localeText", "masterDetail", "keepDetailRows", "keepDetailRowsCount", "detailCellRenderer", "detailCellRendererParams", "detailRowHeight", "detailRowAutoHeight", "context", "alignedGrids", "tabIndex", "rowBuffer", "valueCache", "valueCacheNeverExpires", "enableCellExpressions", "suppressTouch", "suppressFocusAfterRefresh", "suppressBrowserResizeObserver", "suppressPropertyNamesCheck", "suppressChangeDetection", "debug", "loading", "overlayLoadingTemplate", "loadingOverlayComponent", "loadingOverlayComponentParams", "suppressLoadingOverlay", "overlayNoRowsTemplate", "noRowsOverlayComponent", "noRowsOverlayComponentParams", "suppressNoRowsOverlay", "pagination", "paginationPageSize", "paginationPageSizeSelector", "paginationAutoPageSize", "paginateChildRows", "suppressPaginationPanel", "pivotMode", "pivotPanelShow", "pivotMaxGeneratedColumns", "pivotDefaultExpanded", "pivotColumnGroupTotals", "pivotRowTotals", "pivotSuppressAutoColumn", "suppressExpandablePivotGroups", "functionsReadOnly", "aggFuncs", "suppressAggFuncInHeader", "alwaysAggregateAtRootLevel", "aggregateOnlyChangedColumns", "suppressAggFilteredOnly", "removePivotHeaderRowWhenSingleValueColumn", "animateRows", "cellFlashDuration", "cellFadeDuration", "allowShowChangeAfterFilter", "domLayout", "ensureDomOrder", "enableCellSpan", "enableRtl", "suppressColumnVirtualisation", "suppressMaxRenderedRowRestriction", "suppressRowVirtualisation", "rowDragManaged", "suppressRowDrag", "suppressMoveWhenRowDragging", "rowDragEntireRow", "rowDragMultiRow", "rowDragText", "dragAndDropImageComponent", "dragAndDropImageComponentParams", "fullWidthCellRenderer", "fullWidthCellRendererParams", "embedFullWidthRows", "groupDisplayType", "groupDefaultExpanded", "autoGroupColumnDef", "groupMaintainOrder", "groupSelectsChildren", "groupLockGroupColumns", "groupAggFiltering", "groupTotalRow", "grandTotalRow", "suppressStickyTotalRow", "groupSuppressBlankHeader", "groupSelectsFiltered", "showOpenedGroup", "groupHideParentOfSingleChild", "groupRemoveSingleChildren", "groupRemoveLowestSingleChildren", "groupHideOpenParents", "groupAllowUnbalanced", "rowGroupPanelShow", "groupRowRenderer", "groupRowRendererParams", "treeData", "treeDataChildrenField", "treeDataParentIdField", "rowGroupPanelSuppressSort", "suppressGroupRowsSticky", "pinnedTopRowData", "pinnedBottomRowData", "enableRowPinning", "isRowPinnable", "isRowPinned", "rowModelType", "rowData", "asyncTransactionWaitMillis", "suppressModelUpdateAfterUpdateTransaction", "datasource", "cacheOverflowSize", "infiniteInitialRowCount", "serverSideInitialRowCount", "suppressServerSideFullWidthLoadingRow", "cacheBlockSize", "maxBlocksInCache", "maxConcurrentDatasourceRequests", "blockLoadDebounceMillis", "purgeClosedRowNodes", "serverSideDatasource", "serverSideSortAllLevels", "serverSideEnableClientSideSort", "serverSideOnlyRefreshFilteredGroups", "serverSidePivotResultFieldSeparator", "viewportDatasource", "viewportRowModelPageSize", "viewportRowModelBufferSize", "alwaysShowHorizontalScroll", "alwaysShowVerticalScroll", "debounceVerticalScrollbar", "suppressHorizontalScroll", "suppressScrollOnNewData", "suppressScrollWhenPopupsAreOpen", "suppressAnimationFrame", "suppressMiddleClickScrolls", "suppressPreventDefaultOnMouseWheel", "scrollbarWidth", "rowSelection", "cellSelection", "rowMultiSelectWithClick", "suppressRowDeselection", "suppressRowClickSelection", "suppressCellFocus", "suppressHeaderFocus", "selectionColumnDef", "rowNumbers", "suppressMultiRangeSelection", "enableCellTextSelection", "enableRangeSelection", "enableRangeHandle", "enableFillHandle", "fillHandleDirection", "suppressClearOnFillReduction", "sortingOrder", "accentedSort", "unSortIcon", "suppressMultiSort", "alwaysMultiSort", "multiSortKey", "suppressMaintainUnsortedOrder", "icons", "rowHeight", "rowStyle", "rowClass", "rowClassRules", "suppressRowHoverHighlight", "suppressRowTransform", "columnHoverHighlight", "gridId", "deltaSort", "treeDataDisplayType", "enableGroupEdit", "initialState", "theme", "loadThemeGoogleFonts", "themeCssLayer", "styleNonce", "themeStyleContainer", "getContextMenuItems", "getMainMenuItems", "postProcessPopup", "processUnpinnedColumns", "processCellForClipboard", "processHeaderForClipboard", "processGroupHeaderForClipboard", "processCellFromClipboard", "sendToClipboard", "processDataFromClipboard", "isExternalFilterPresent", "doesExternalFilterPass", "getChartToolbarItems", "createChartContainer", "focusGridInnerElement", "navigateToNextHeader", "tabToNextHeader", "navigateToNextCell", "tabToNextCell", "getLocaleText", "getDocument", "paginationNumberFormatter", "getGroupRowAgg", "isGroupOpenByDefault", "initialGroupOrderComparator", "processPivotResultColDef", "processPivotResultColGroupDef", "getDataPath", "getChildCount", "getServerSideGroupLevelParams", "isServerSideGroupOpenByDefault", "isApplyServerSideTransaction", "isServerSideGroup", "getServerSideGroupKey", "getBusinessKeyForNode", "getRowId", "resetRowDataOnUpdate", "processRowPostCreate", "isRowSelectable", "isRowMaster", "fillOperation", "postSortRows", "getRowStyle", "getRowClass", "getRowHeight", "isFullWidthRow"], outputs: ["toolPanelVisibleChanged", "toolPanelSizeChanged", "columnMenuVisibleChanged", "contextMenuVisibleChanged", "cutStart", "cutEnd", "pasteStart", "pasteEnd", "columnVisible", "columnPinned", "columnResized", "columnMoved", "columnValueChanged", "columnPivotModeChanged", "columnPivotChanged", "columnGroupOpened", "newColumnsLoaded", "gridColumnsChanged", "displayedColumnsChanged", "virtualColumnsChanged", "columnEverythingChanged", "columnHeaderMouseOver", "columnHeaderMouseLeave", "columnHeaderClicked", "columnHeaderContextMenu", "componentStateChanged", "cellValueChanged", "cellEditRequest", "rowValueChanged", "cellEditingStarted", "cellEditingStopped", "rowEditingStarted", "rowEditingStopped", "undoStarted", "undoEnded", "redoStarted", "redoEnded", "cellSelectionDeleteStart", "cellSelectionDeleteEnd", "rangeDeleteStart", "rangeDeleteEnd", "fillStart", "fillEnd", "filterOpened", "filterChanged", "filterModified", "advancedFilterBuilderVisibleChanged", "findChanged", "chartCreated", "chartRangeSelectionChanged", "chartOptionsChanged", "chartDestroyed", "cellKeyDown", "gridReady", "firstDataRendered", "gridSizeChanged", "modelUpdated", "virtualRowRemoved", "viewportChanged", "bodyScroll", "bodyScrollEnd", "dragStarted", "dragStopped", "dragCancelled", "stateUpdated", "paginationChanged", "rowDragEnter", "rowDragMove", "rowDragLeave", "rowDragEnd", "rowDragCancel", "rowResizeStarted", "rowResizeEnded", "columnRowGroupChanged", "rowGroupOpened", "expandOrCollapseAll", "pivotMaxColumnsExceeded", "pinnedRowDataChanged", "pinnedRowsChanged", "rowDataUpdated", "asyncTransactionsFlushed", "storeRefreshed", "headerFocused", "cellClicked", "cellDoubleClicked", "cellFocused", "cellMouseOver", "cellMouseOut", "cellMouseDown", "rowClicked", "rowDoubleClicked", "rowSelected", "selectionChanged", "cellContextMenu", "rangeSelectionChanged", "cellSelectionChanged", "tooltipShow", "tooltipHide", "sortChanged"] }, { kind: "component", type: AgCharts, selector: "ag-charts", inputs: ["options"], outputs: ["onChartReady"] }], encapsulation: i0.ViewEncapsulation.None });
|
|
7828
7877
|
}
|
|
7829
7878
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImport: i0, type: DynamicFieldsComponent, decorators: [{
|
|
7830
7879
|
type: Component,
|
|
@@ -7850,7 +7899,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.14", ngImpo
|
|
|
7850
7899
|
ProgrammabilityService,
|
|
7851
7900
|
GridService,
|
|
7852
7901
|
ChartService
|
|
7853
|
-
], encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"getFormAlignment()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [class]=\"getClass(component)\"\r\n [ngClass]=\"getComponentAlignment(component)\">\r\n <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n dropdown\r\n [valueSync]=\"component.valueSync\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [isMultiple]=\"true\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"number\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n [formControlName]=\"component.key\"\r\n number\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [minimum]=\"evaluateNumber(component.minimum)\"\r\n [maximum]=\"evaluateNumber(component.maximum)\"\r\n [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n isoDate\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </ngx-sirio-datepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </ngx-sirio-timepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <div [formControlName]=\"component.key\"\r\n dateTimeCoordinator\r\n dateTimeValidator\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [datePicker]=\"date\"\r\n [timePicker]=\"time\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [valueSync]=\"component.valueSync\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\"\r\n class=\"datetime-container\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n isoDate\r\n #date>\r\n </ngx-sirio-datepicker>\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n #time>\r\n </ngx-sirio-timepicker>\r\n </div>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region toggle -->\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #toggle\r\n [register]=\"component\"\r\n [componentRef]=\"toggle\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-toggle>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-checkbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipradio\r\n [register]=\"component\"\r\n [componentRef]=\"chipradio\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"radio\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-radio-button>\r\n </ngx-sirio-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipcheckbox\r\n [register]=\"component\"\r\n [componentRef]=\"chipcheckbox\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"checkbox\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-checkbox>\r\n </ngx-sirio-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"textarea\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n (fileUploadedEvent)=\"fileUploaded($event)\"\r\n [showFilelist]=\"!component.showDetails\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n {{ locale(Texts, 'Upload') }}\r\n </ngx-sirio-file-upload>\r\n </div>\r\n <ng-container *ngIf=\"component.showDetails\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [rows]=\"createUploadTables(component)\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </ngx-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"sirio-control\"\r\n [ngClass]=\"[getTextAlignment(component), getLightView(component) ]\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <button *ngIf=\"component.tooltip\"\r\n sirioTooltip\r\n [content]=\"component.tooltip\"\r\n [hasPopover]=\"true\"\r\n [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n </div>\r\n <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container *ngIf=\"component.fieldtype === 'checkbox'; else defaultTemplate\">\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-container>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [formArrayName]=\"component.key\" \r\n [recursion]=\"component\"\r\n #recursion=\"recursion\"\r\n [repeat]=\"evaluateNumber(component.repetitions)\"\r\n [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclisttab\">\r\n <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [tabCount]=\"formArray.controls.length\"\r\n #dynamiclisttab>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\">\r\n <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-accordion-panel #panel accordionPanel>\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <ng-container *ngIf=\"panel.panelIsOpen\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n </div>\r\n <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n <ng-container *ngIf=\"!collapse.isOpen\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <ngx-sirio-collapse #collapseTemplate\r\n #collapse=\"collapseExtension\"\r\n collapseExtension\r\n [isOpen]=\"true\">\r\n <div *ngIf=\"collapse.isOpen\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ngx-sirio-collapse>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container> \r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"upLabel\"\r\n [title]=\"upLabel\"\r\n [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ upLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"downLabel\"\r\n [title]=\"downLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-arrow-down\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ downLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <ngx-sirio-button (click)=\"removeItem(formArray, i, true)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"removeLabel\"\r\n [title]=\"removeLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-trash\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ removeLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <ngx-sirio-button (click)=\"addItem(formArray)\"\r\n class=\"add-item\"\r\n [ariaLabel]=\"addLabel\"\r\n [title]=\"addLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-plus\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ addLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div [ngClass]=\"getGroupOutline(component)\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ngx-sirio-tab #tab\r\n [register]=\"component\"\r\n [componentRef]=\"tab\"\r\n [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [isNavLine]=\"component.navigation\"\r\n [isVertical]=\"component.vertical\"\r\n tabControl>\r\n <ng-container *ngFor=\"let panel of component.panels; let i = index;\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n #tabPanel\r\n tabItem\r\n [componentRef]=\"tab\"\r\n *ngIf=\"evaluateConditional(panel.conditional)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <div *ngIf=\"tabPanel.isActive\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template?.rows\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ngx-sirio-accordion #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of component.panels\">\r\n <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(panel, 'label'))\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <div>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </div>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt'))\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columnDefs]=\"component.columns || evaluate(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"evaluateHeight(component.height)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n [color]=\"evaluateColor(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">\r\n <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n </ng-container>\r\n <ng-template #noIcon>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ng-template>\r\n </ngx-sirio-button>\r\n </div> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <ngx-sirio-alert [type]=\"component.role\"\r\n [labelClose]=\"locale(Texts, 'Close')\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <ngx-sirio-alert-message>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-alert-message>\r\n </ngx-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <ngx-sirio-notify #notice\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-notify-body>\r\n </ngx-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n {{ evaluateString(locale(component, 'title')) }}\r\n </p>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.ag-cell-value .btn-small .sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}\n", ".sirio-control.ng-invalid .sirio-form-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\n", ":root{--dynamiclist-border: 1px solid #ccc}.dynamiclist-no-data{text-align:center;padding:20px;font-style:italic;border:var(--dynamiclist-border)}.dynamiclist-table{width:100%;border-collapse:collapse;border:none}.dynamiclist-table.main{border:var(--dynamiclist-border)}.dynamiclist-table.main .dynamiclist-table{border-left:var(--dynamiclist-border);border-bottom:var(--dynamiclist-border)}.dynamiclist-table td{border:var(--dynamiclist-border)}.dynamiclist-table tr:first-child td{border-top:none}.dynamiclist-table tr:last-child td{border-bottom:none}.dynamiclist-table tr td:first-child{border-left:none}.dynamiclist-table tr td:last-child{border-right:none}.dynamiclist-table td.content-cell{width:100%;padding-left:8px;padding-right:8px;border-left:var(--dynamiclist-border)}.dynamiclist-table td.content-cell .group-outline-repeat{margin-bottom:0}.dynamiclist-table td.command-cell{vertical-align:middle}.dynamiclist-table td.command-cell>div{display:flex;justify-content:right}.dynamiclist-table td.recursion-cell .layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%;height:100%}.dynamiclist-table td.recursion-cell .recursion-toggle{grid-row:1 / span 2;grid-column:1;background-color:#f5f5f5;align-items:center}.dynamiclist-table td.recursion-cell .recursion-title{grid-row:1;grid-column:2;background:#f5f5f5;display:flex;align-items:center;min-height:34px}.dynamiclist-table td.recursion-cell .recursion-title .recursion-text{flex:1;text-align:center}.dynamiclist-table td.recursion-cell .recursion-title .recursion-add{margin-left:auto}.dynamiclist-table td.recursion-cell .recursion-content{grid-row:2;grid-column:2}.dynamiclist-table td.recursion-cell .recursion-content .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n"] }]
|
|
7902
|
+
], encapsulation: ViewEncapsulation.None, template: "<div [ngClass]=\"getFormAlignment()\">\r\n <ng-container *ngFor=\"let row of rows\" [formGroup]=\"formGroup\">\r\n <div class=\"row field-set\">\r\n <ng-container *ngFor=\"let component of row.components\">\r\n <ng-container [ngSwitch]=\"component.type\">\r\n <div [class]=\"getClass(component)\"\r\n [ngClass]=\"getComponentAlignment(component)\">\r\n <div [hide]=\"evaluateBoolean(component.conditional?.hide)\"\r\n [show]=\"evaluateBoolean(component.conditional?.show)\">\r\n <!-- #region textfield -->\r\n <ng-container *ngSwitchCase=\"'textfield'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"text\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textfield\r\n [register]=\"component\"\r\n [componentRef]=\"textfield\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region select -->\r\n <ng-container *ngSwitchCase=\"'select'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n dropdown\r\n [valueSync]=\"component.valueSync\"\r\n #select\r\n [register]=\"component\"\r\n [componentRef]=\"select\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-input *ngIf=\"component.searchable\" class=\"searchable\" type=\"text\" [placeholder]=\"locale(Texts, 'TypeToSearch')\"></ngx-sirio-input>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region taglist -->\r\n <ng-container *ngSwitchCase=\"'taglist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-select [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [isMultiple]=\"true\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #taglist\r\n [register]=\"component\"\r\n [componentRef]=\"taglist\">\r\n <ngx-sirio-select-panel>\r\n <ngx-sirio-select-option *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">{{ locale(option, 'label') }}</ngx-sirio-select-option>\r\n </ngx-sirio-select-panel>\r\n </ngx-sirio-select>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region number -->\r\n <ng-container *ngSwitchCase=\"'number'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"number\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [prefixAdorner]=\"evaluateString(component.appearance?.prefixAdorner)\"\r\n [suffixAdorner]=\"evaluateString(component.appearance?.suffixAdorner)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n [formControlName]=\"component.key\"\r\n number\r\n [defaultValue]=\"evaluateNumber(component.defaultValue)\"\r\n [minimum]=\"evaluateNumber(component.minimum)\"\r\n [maximum]=\"evaluateNumber(component.maximum)\"\r\n [decimalDigits]=\"evaluateNumber(component.decimalDigits)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #number\r\n [register]=\"component\"\r\n [componentRef]=\"number\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region date -->\r\n <ng-container *ngSwitchCase=\"'date'\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n isoDate\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #date\r\n [register]=\"component\"\r\n [componentRef]=\"date\">\r\n </ngx-sirio-datepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region time -->\r\n <ng-container *ngSwitchCase=\"'time'\">\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #time\r\n [register]=\"component\"\r\n [componentRef]=\"time\">\r\n </ngx-sirio-timepicker>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region datetime -->\r\n <ng-container *ngSwitchCase=\"'datetime'\">\r\n <div [formControlName]=\"component.key\"\r\n dateTimeCoordinator\r\n dateTimeValidator\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [datePicker]=\"date\"\r\n [timePicker]=\"time\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [valueSync]=\"component.valueSync\"\r\n #datetime\r\n [register]=\"component\"\r\n [componentRef]=\"datetime\"\r\n class=\"datetime-container\">\r\n <ngx-sirio-datepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaDateLabel') || locale(component, 'dateLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'dateLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n isoDate\r\n #date>\r\n </ngx-sirio-datepicker>\r\n <ngx-sirio-timepicker [ariaLabel]=\"evaluateString(locale(component, 'ariaTimeLabel') || locale(component, 'timeLabel'))\"\r\n [label]=\"evaluateString(locale(component, 'timeLabel'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n #time>\r\n </ngx-sirio-timepicker>\r\n </div>\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback\">{{textFeedback}}</span>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checkbox -->\r\n <ng-container *ngSwitchCase=\"'checkbox'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region toggle -->\r\n <ng-container *ngSwitchCase=\"'toggle'\">\r\n <ngx-sirio-toggle [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #toggle\r\n [register]=\"component\"\r\n [componentRef]=\"toggle\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-toggle>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ngx-sirio-checkbox>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region radio -->\r\n <ng-container *ngSwitchCase=\"'radio'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipradio\r\n [register]=\"component\"\r\n [componentRef]=\"chipradio\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"radio\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-radio-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #radio\r\n [register]=\"component\"\r\n [componentRef]=\"radio\">\r\n <ngx-sirio-radio-button *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-radio-button>\r\n </ngx-sirio-radio-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region checklist -->\r\n <ng-container *ngSwitchCase=\"'checklist'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region chip -->\r\n <ng-container *ngSwitchCase=\"'chip'\">\r\n <ngx-sirio-chip-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #chipcheckbox\r\n [register]=\"component\"\r\n [componentRef]=\"chipcheckbox\">\r\n <ngx-sirio-input-chip *ngFor=\"let option of (getValues(component) | async) || []\"\r\n type=\"checkbox\"\r\n [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-input-chip>\r\n </ngx-sirio-chip-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <ngx-sirio-checkbox-group [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [refresh]=\"refreshValues(component)\"\r\n [valueSync]=\"component.valueSync\"\r\n #checkbox\r\n [register]=\"component\"\r\n [componentRef]=\"checkbox\">\r\n <ngx-sirio-checkbox *ngFor=\"let option of (getValues(component) | async) || []\" [value]=\"option.value\">\r\n {{ locale(option, 'label') }}\r\n </ngx-sirio-checkbox>\r\n </ngx-sirio-checkbox-group>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region textarea -->\r\n <ng-container *ngSwitchCase=\"'textarea'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-input type=\"textarea\"\r\n [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [placeholder]=\"locale(component, 'placeholder') || ''\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [formControlName]=\"component.key\"\r\n [textcase]=\"component.textCase\"\r\n [maxlength]=\"evaluateNumber(component.maxLength)\"\r\n [ngClass]=\"getTextAlignment(component)\"\r\n updateBlur\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #textarea\r\n [register]=\"component\"\r\n [componentRef]=\"textarea\">\r\n </ngx-sirio-input>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region filepicker -->\r\n <ng-container *ngSwitchCase=\"'filepicker'\" [formGroup]=\"resolvePath(component.path)\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-file-upload [ariaLabel]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [accept]=\"getMimeTypes(component.accept)\"\r\n [multiple]=\"evaluateBoolean(component.multiple)\"\r\n (fileUploadedEvent)=\"fileUploaded($event)\"\r\n [showFilelist]=\"!component.showDetails\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [valueSync]=\"component.valueSync\"\r\n #filepicker\r\n [register]=\"component\"\r\n [componentRef]=\"filepicker\">\r\n <span class=\"fas fa-arrow-up\" aria-hidden=\"true\"></span>\r\n {{ locale(Texts, 'Upload') }}\r\n </ngx-sirio-file-upload>\r\n </div>\r\n <ng-container *ngIf=\"component.showDetails\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formGroup\"\r\n [rows]=\"createUploadTables(component)\"></app-dynamic-fields>\r\n </ng-container>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region range -->\r\n <ng-container *ngSwitchCase=\"'range'\" [formGroup]=\"resolvePath(component.path)\">\r\n <ngx-sirio-slider [label]=\"evaluateString(locale(component, 'label'))\"\r\n [labelPopover]=\"evaluateString(locale(component, 'tooltip'))\"\r\n [textHelp]=\"evaluateString(locale(component, 'description'))\"\r\n [textFeedback]=\"getTextFeedback(component)\"\r\n [readonly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [properties]=\"component.properties\"\r\n [formControlName]=\"component.key\"\r\n validation\r\n [canValidate]=\"true\"\r\n [isWarning]=\"isWarning(component)\"\r\n [showWhenValid]=\"false\"\r\n [min]=\"evaluateNumber(component.range?.min) ?? 0\"\r\n [max]=\"evaluateNumber(component.range?.max) ?? 0\"\r\n [valueSync]=\"component.valueSync\"\r\n #range\r\n [register]=\"component\"\r\n [componentRef]=\"range\">\r\n </ngx-sirio-slider>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region displayfield -->\r\n <ng-container *ngSwitchCase=\"'displayfield'\">\r\n <div class=\"sirio-control\"\r\n [ngClass]=\"[getTextAlignment(component), getLightView(component) ]\"\r\n #displayfield\r\n [register]=\"component\"\r\n [componentRef]=\"displayfield\">\r\n <div *ngIf=\"component.label\" class=\"sirio-label\">\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <button *ngIf=\"component.tooltip\"\r\n sirioTooltip\r\n [content]=\"component.tooltip\"\r\n [hasPopover]=\"true\"\r\n [attr.aria-label]=\"evaluateString(locale(component, 'ariaLabel') || locale(component, 'label'))\"\r\n class=\"sirio-label-popover fas fa-info-circle\"></button>\r\n </div>\r\n <div class=\"sirio-form-control data-display\" [ngClass]=\"component.fieldtype\">\r\n <ng-container *ngIf=\"component.fieldtype === 'checkbox'; else defaultTemplate\">\r\n <i *ngIf=\"evaluate(component.expression)\" class=\"fas fa-check\"></i>\r\n </ng-container>\r\n <ng-template #defaultTemplate>\r\n <ng-container *ngIf=\"supportValues(component) && hasValues(component); else simpleTemplate\">\r\n <ng-container *ngIf=\"getValues(component) | async as values\">\r\n {{ toLabel(evaluate(component.expression), values) }}\r\n </ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #simpleTemplate>\r\n {{ evaluate(component.expression) }}\r\n </ng-template>\r\n </div>\r\n <p *ngIf=\"component.description\" class=\"sirio-helper-text\">\r\n {{ evaluateString(locale(component, 'description')) }}\r\n </p>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region dynamiclist -->\r\n <ng-container *ngSwitchCase=\"'dynamiclist'\">\r\n <ng-container [formGroup]=\"resolvePath(component.path)\">\r\n <ng-container [formArrayName]=\"component.key\" \r\n [recursion]=\"component\"\r\n #recursion=\"recursion\"\r\n [repeat]=\"evaluateNumber(component.repetitions)\"\r\n [allowAddRemove]=\"evaluateBoolean(component.allowAddRemove)\">\r\n <p *ngIf=\"component.description\">{{ evaluateString(locale(component, 'description')) }}</p>\r\n <ng-container *ngIf=\"getFormArray(resolvePath(component.path).get(component.key)) as formArray\">\r\n <ng-container *ngIf=\"formArray.controls.length > 0\">\r\n <ng-container [ngSwitch]=\"component.subtype\">\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclisttab\">\r\n <ngx-sirio-tab [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [tabCount]=\"formArray.controls.length\"\r\n #dynamiclisttab>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\">\r\n <ng-container *ngIf=\"i === dynamiclisttab.activeIndex\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <div [register]=\"component\"\r\n [componentRef]=\"dynamiclistaccordion\">\r\n <ngx-sirio-accordion [accordionCount]=\"formArray.controls.length\"\r\n #dynamiclistaccordion>\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ngx-sirio-accordion-panel #panel accordionPanel>\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(component, 'label')) + ' ' + (i + 1)\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <ng-container *ngIf=\"panel.panelIsOpen\">\r\n <div>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <table class=\"dynamiclist-table\" [ngClass]=\"{ 'main': recursionLevel == 0 }\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <ng-container *ngIf=\"getFormGroup(item) as formItem\">\r\n <ng-container *ngIf=\"{ itemsArray: recursion.getItemsArray(formItem) } as recursionData\">\r\n <tr>\r\n <td class=\"content-cell\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true && component.subtype !== 'table', 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"formItem\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </div>\r\n </td>\r\n <td class=\"command-cell\">\r\n <div>\r\n <ng-container *ngIf=\"recursionData.itemsArray\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: recursionData.itemsArray, compact: true }\"></ng-container>\r\n </ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i, compact: true }\"></ng-container>\r\n </div>\r\n </td>\r\n </tr>\r\n <tr *ngIf=\"recursionData.itemsArray && recursionData.itemsArray.length > 0\">\r\n <td colspan=\"2\" class=\"recursion-cell\">\r\n <div class=\"layout\">\r\n <div class=\"recursion-toggle\">\r\n <ngx-sirio-button [ngxSirioCollapseTrigger]=\"collapseTemplate\"\r\n [color]=\"null\" [icon]=\"collapse.isOpen ? 'fas fa-chevron-down' : 'fas fa-chevron-right' \" />\r\n </div>\r\n <div *ngIf=\"!collapse.isOpen\" class=\"recursion-title\">\r\n <div class=\"recursion-text\">\r\n <ng-container *ngIf=\"!collapse.isOpen\">\r\n {{ recursionData.itemsArray.length }} elementi presenti\r\n </ng-container>\r\n </div>\r\n </div>\r\n <div class=\"recursion-content\">\r\n <ngx-sirio-collapse #collapseTemplate\r\n #collapse=\"collapseExtension\"\r\n collapseExtension\r\n [isOpen]=\"true\">\r\n <div *ngIf=\"collapse.isOpen\" style=\"margin-bottom: -11px;\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"recursion.getFormGroup(formItem)\"\r\n [readOnly]=\"readOnly\"\r\n [recursionLevel]=\"recursionLevel+1\"\r\n [rows]=\"recursion.getComponentRows()\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ngx-sirio-collapse>\r\n </div>\r\n </div>\r\n </td>\r\n </tr>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </table>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region default -->\r\n <ng-container *ngSwitchDefault>\r\n <div #dynamiclist\r\n [register]=\"component\"\r\n [componentRef]=\"dynamiclist\">\r\n <ng-container *ngFor=\"let item of formArray.controls; let i = index;\" [formGroupName]=\"i\">\r\n <div [ngClass]=\"{'group-outline': component.showOutline === true, 'group-outline-repeat': true }\">\r\n <div>\r\n <label *ngIf=\"component.label\">{{ evaluateString(locale(component, 'label')) + ' ' + (i + 1) }}</label>\r\n <div>\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"getFormGroup(item)\"\r\n [readOnly]=\"readOnly\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n <ng-container *ngIf=\"component.allowAddRemove || component.allowReorder\">\r\n <div style=\"text-align:right\">\r\n <ng-container *ngTemplateOutlet=\"buttonsReorder; context: { formArray: formArray, i: i }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"buttonsRemove; context: { formArray: formArray, i: i }\"></ng-container>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"formArray.controls.length == 0\">\r\n <div class=\"dynamiclist-no-data\">{{ evaluateString(locale(component, 'noDataText')) || locale(Texts, 'NoData') }}</div>\r\n </ng-container>\r\n <ng-container *ngIf=\"recursionLevel == 0\">\r\n <ng-container *ngTemplateOutlet=\"buttonsAdd; context: { formArray: formArray }\"></ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container>\r\n </ng-container> \r\n <!-- #region templates -->\r\n <ng-template #btnMoveUp let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveUp') as upLabel\">\r\n <ngx-sirio-button (click)=\"moveUpItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"upLabel\"\r\n [title]=\"upLabel\"\r\n [color]=\"null\" icon=\"fas fa-arrow-up\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ upLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnMoveDown let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"locale(Texts, 'MoveDown') as downLabel\">\r\n <ngx-sirio-button (click)=\"moveDownItem(formArray, i)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"downLabel\"\r\n [title]=\"downLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-arrow-down\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ downLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'removeLabel') || locale(Texts, 'RemoveItem')) as removeLabel\">\r\n <ngx-sirio-button (click)=\"removeItem(formArray, i, true)\"\r\n class=\"remove-item\"\r\n [ariaLabel]=\"removeLabel\"\r\n [title]=\"removeLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-trash\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ removeLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #btnAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'addLabel') || locale(Texts, 'AddItem')) as addLabel\">\r\n <ngx-sirio-button (click)=\"addItem(formArray)\"\r\n class=\"add-item\"\r\n [ariaLabel]=\"addLabel\"\r\n [title]=\"addLabel\"\r\n [color]=\"null\"\r\n icon=\"fas fa-plus\">\r\n <ng-container *ngIf=\"!compact\">\r\n {{ addLabel }}\r\n </ng-container>\r\n </ngx-sirio-button>\r\n </ng-container> \r\n </ng-template>\r\n <ng-template #buttonsReorder let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowReorder\">\r\n <ng-container *ngTemplateOutlet=\"btnMoveUp; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n <ng-container *ngTemplateOutlet=\"btnMoveDown; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsRemove let-formArray=\"formArray\" let-i=\"i\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnRemove; context: { formArray: formArray, i: i, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <ng-template #buttonsAdd let-formArray=\"formArray\" let-compact=\"compact\">\r\n <ng-container *ngIf=\"!readOnly && component.allowAddRemove\">\r\n <ng-container *ngTemplateOutlet=\"btnAdd; context: { formArray: formArray, compact: compact }\"></ng-container>\r\n </ng-container>\r\n </ng-template>\r\n <!-- #endregion -->\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region group -->\r\n <ng-container *ngSwitchCase=\"'group'\">\r\n <div [ngClass]=\"getGroupOutline(component)\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <div #group\r\n [register]=\"component\"\r\n [componentRef]=\"group\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(component.readonly)\"\r\n [rows]=\"component.rows\"\r\n [alignment]=\"component.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tab -->\r\n <ng-container *ngSwitchCase=\"'tab'\">\r\n <ngx-sirio-tab #tab\r\n [register]=\"component\"\r\n [componentRef]=\"tab\"\r\n [leftArrowLabel]=\"locale(Texts, 'ScrollLeft')\"\r\n [rightArrowLabel]=\"locale(Texts, 'ScrollRight')\"\r\n [isNavLine]=\"component.navigation\"\r\n [isVertical]=\"component.vertical\"\r\n tabControl>\r\n <ng-container *ngFor=\"let panel of component.panels; let i = index;\">\r\n <ngx-sirio-tab-item [label]=\"evaluateString(locale(panel, 'label'))\"\r\n [icon]=\"evaluateString(panel.icon)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled) ?? false\"\r\n #tabPanel\r\n tabItem\r\n [componentRef]=\"tab\"\r\n *ngIf=\"evaluateConditional(panel.conditional)\">\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <div *ngIf=\"tabPanel.isActive\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [rows]=\"template?.rows\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </div>\r\n </ng-container>\r\n </ngx-sirio-tab-item>\r\n </ng-container>\r\n </ngx-sirio-tab>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region accordion -->\r\n <ng-container *ngSwitchCase=\"'accordion'\">\r\n <ngx-sirio-accordion #accordion\r\n [register]=\"component\"\r\n [componentRef]=\"accordion\">\r\n <ng-container *ngFor=\"let panel of component.panels\">\r\n <ngx-sirio-accordion-panel *ngIf=\"evaluateConditional(panel.conditional)\"\r\n [disabled]=\"evaluateBoolean(panel.disabled)\">\r\n <ngx-sirio-accordion-header>\r\n <span [innerText]=\"evaluateString(locale(panel, 'label'))\"></span>\r\n </ngx-sirio-accordion-header>\r\n <ngx-sirio-accordion-body>\r\n <div>\r\n <ng-container *ngIf=\"getTemplate(panel.template) as template\">\r\n <app-dynamic-fields [form]=\"form\"\r\n [formGroup]=\"resolvePath(panel.path)\"\r\n [readOnly]=\"readOnly || evaluateBoolean(panel.readonly)\"\r\n [rows]=\"template?.rows\"\r\n [alignment]=\"template?.verticalAlignment\"></app-dynamic-fields>\r\n </ng-container>\r\n </div>\r\n </ngx-sirio-accordion-body>\r\n </ngx-sirio-accordion-panel>\r\n </ng-container>\r\n </ngx-sirio-accordion>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region text -->\r\n <ng-container *ngSwitchCase=\"'text'\">\r\n <div [collapse]=\"component.collapseTo\"\r\n #text\r\n [register]=\"component\"\r\n [componentRef]=\"text\">\r\n <!--Reset View Context-->\r\n <div tabindex=\"0\" style=\"display:none\"></div>\r\n <div class=\"flex\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n <ng-container *ngIf=\"component.tooltip\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [attr.aria-label]=\"locale(Texts, 'Information')\"\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'tooltip')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n </div>\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region html -->\r\n <ng-container *ngSwitchCase=\"'html'\">\r\n <div class=\"html-paragraph\"\r\n [innerHTML]=\"sanitize(evaluateTemplate(locale(component, 'content')))\"\r\n #html\r\n [register]=\"component\"\r\n [componentRef]=\"html\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region image -->\r\n <ng-container *ngSwitchCase=\"'image'\">\r\n <img [src]=\"evaluateString(component.source)\"\r\n [alt]=\"evaluateString(locale(component, 'alt'))\"\r\n style=\"width: 100%;height: 100%;\"\r\n #image\r\n [register]=\"component\"\r\n [componentRef]=\"image\">\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region table -->\r\n <ng-container *ngSwitchCase=\"'table'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-grid-angular [modules]=\"getGridModules(component)\"\r\n [gridOptions]=\"getGridOptions(component)\"\r\n [selectable]=\"evaluateBoolean(component.selectable)\"\r\n [multiSelect]=\"evaluateBoolean(component.multiSelect)\"\r\n (selectionChanged)=\"onGridSelectionChanged(component, $event)\"\r\n [suppressActions]=\"evaluateBoolean(component.suppressActions)\"\r\n [columnDefs]=\"component.columns || evaluate(component.columnsExpression) || []\"\r\n [rowSource]=\"getRowSource(component)\"\r\n [refresh]=\"refreshRowSource(component)\"\r\n [style.height]=\"evaluateHeight(component.height)\"\r\n [formGroup]=\"formGroup\"\r\n #table\r\n [register]=\"component\"\r\n [componentRef]=\"table\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region button -->\r\n <ng-container *ngSwitchCase=\"'button'\">\r\n <div [ngClass]=\"getHorizontalAlignment(component)\">\r\n <ngx-sirio-button (clickEvent)=\"clickButton(component, $event)\"\r\n [color]=\"evaluateColor(component.color)\"\r\n [disabled]=\"evaluateBoolean(component.disabled)\"\r\n #button\r\n [register]=\"component\"\r\n [componentRef]=\"button\">\r\n <ng-container *ngIf=\"evaluateString(component.icon) as icon; else noIcon\">\r\n <span *ngIf=\"component.iconPosition!='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n <span *ngIf=\"component.iconPosition=='right'\" [class]=\"icon\" aria-hidden=\"true\"></span>\r\n </ng-container>\r\n <ng-template #noIcon>\r\n {{ evaluateString(locale(component, 'label')) }}\r\n </ng-template>\r\n </ngx-sirio-button>\r\n </div> \r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region separator -->\r\n <ng-container *ngSwitchCase=\"'separator'\">\r\n <div class=\"separator\"\r\n #separator\r\n [register]=\"component\"\r\n [componentRef]=\"separator\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region spacer -->\r\n <ng-container *ngSwitchCase=\"'spacer'\">\r\n <div style=\"width: 100%\"\r\n [style.height.px]=\"component.height\"\r\n #spacer\r\n [register]=\"component\"\r\n [componentRef]=\"spacer\">\r\n </div>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region iframe -->\r\n <ng-container *ngSwitchCase=\"'iframe'\">\r\n <label [for]=\"component.id\">{{ evaluateString(locale(component, 'label')) }}</label>\r\n <iframe [src]=\"evaluateUrl(component.url)\"\r\n [title]=\"evaluateString(locale(component, 'label'))\"\r\n [style.width]=\"'100%'\"\r\n [style.height.px]=\"component.height\"\r\n [frameSecurity]=\"component.security\"\r\n #iframe\r\n [register]=\"component\"\r\n [componentRef]=\"iframe\">\r\n </iframe>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region alert -->\r\n <ng-container *ngSwitchCase=\"'alert'\">\r\n <ngx-sirio-alert [type]=\"component.role\"\r\n [labelClose]=\"locale(Texts, 'Close')\"\r\n #alert\r\n [register]=\"component\"\r\n [componentRef]=\"alert\">\r\n <ngx-sirio-alert-message>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-alert-message>\r\n </ngx-sirio-alert>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region notice -->\r\n <ng-container *ngSwitchCase=\"'notice'\">\r\n <ngx-sirio-notify #notice\r\n [register]=\"component\"\r\n [componentRef]=\"notice\">\r\n <ngx-sirio-notify-body [title]=\"evaluateString(locale(component, 'title'))\">\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </ngx-sirio-notify-body>\r\n </ngx-sirio-notify>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region tooltip -->\r\n <ng-container *ngSwitchCase=\"'tooltip'\">\r\n <app-template-wrapper #tooltipWrapper [template]=\"tooltipTemplate\" [context]=\"{ component: component }\"></app-template-wrapper>\r\n <button class=\"sirio-label-popover fas fa-info-circle\"\r\n sirioTooltip\r\n [hasPopover]=\"true\"\r\n [customTemplate]=\"tooltipWrapper.getTemplateRef()\"\r\n #tooltip\r\n [register]=\"component\"\r\n [componentRef]=\"tooltip\"></button>\r\n <ng-template #tooltipTemplate let-component=\"component\">\r\n <div class=\"sirio-tooltip-body\">\r\n <p *ngIf=\"component.title\" class=\"sirio-tooltip-heading sirio-space-down\">\r\n {{ evaluateString(locale(component, 'title')) }}\r\n </p>\r\n <div class=\"text-paragraph\"\r\n [innerHTML]=\"toHTML(evaluateTemplate(locale(component, 'text')))\">\r\n </div>\r\n </div>\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region chart -->\r\n <ng-container *ngSwitchCase=\"'chart'\">\r\n <label>{{ evaluateString(locale(component, 'label')) }}</label>\r\n <ag-charts [options]=\"(getChartOptions(component) | async) ?? {}\"\r\n [observe]=\"getChartData(component)\"\r\n [callback]=\"invalidateChart(component)\"\r\n [style.height.px]=\"component.height\"\r\n #chart\r\n [register]=\"component\"\r\n [componentRef]=\"chart\" />\r\n </ng-container>\r\n <!-- #endregion -->\r\n <!-- #region component -->\r\n <ng-container *ngSwitchCase=\"'component'\">\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'label')) as labelText\">\r\n <label>{{ labelText }}</label>\r\n </ng-container>\r\n <ng-container *ngIf=\"component.isInput; else noInputTemplate\">\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n [formGroup]=\"resolvePath(component.path)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n <ng-container *ngIf=\"getTextFeedback(component) as textFeedback\">\r\n <span class=\"sirio-form-feedback sirio-display-feedback\">{{textFeedback}}</span>\r\n </ng-container>\r\n </ng-container>\r\n <ng-container *ngIf=\"evaluateString(locale(component, 'description')) as textHelp\">\r\n <p class=\"sirio-helper-text\">{{textHelp}}</p>\r\n </ng-container>\r\n <ng-template #noInputTemplate>\r\n <app-dynamic-host [properties]=\"getFeelableProperties(component)\"\r\n #componentHost\r\n [register]=\"component\"\r\n [componentRef]=\"componentHost\" />\r\n </ng-template>\r\n </ng-container>\r\n <!-- #endregion -->\r\n </div>\r\n </div>\r\n </ng-container>\r\n </ng-container>\r\n </div>\r\n </ng-container>\r\n</div>\r\n\r\n", styles: [".flex{display:flex}.field-set{align-items:start}.field-set>.col-host>*{margin-bottom:10px}.separator{border-bottom:2px solid #d9e4f7;width:100%;margin:10px 0}.group-outline{border:1px solid #d9e4f7;padding:15px;margin-top:2px;margin-bottom:2px}.group-outline-repeat{margin-top:8px;margin-bottom:8px}.valign-start>.row{align-items:start}.valign-center>.row{align-items:center}.valign-end>.row{align-items:end}.component-start{align-self:start}.component-center{align-self:center}.component-end{align-self:end}.text-paragraph p{margin-bottom:0!important}.sirio-tab.sirio-tab-vertical .sirio-tab-body{margin-left:10px;margin-right:10px}.sirio-tab:not(.sirio-tab-vertical) .sirio-tab-body{margin-top:10px;margin-bottom:10px}.sirio-label{cursor:default}.sirio-control.is-disabled .sirio-input-group .sirio-input-group-text,.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{border:0px}.sirio-control.is-readonly .sirio-form-control{background-color:#fff!important;color:#454d56}.sirio-form-control[type=number]:disabled{background-image:none}.col-host .sirio-accordion .sirio-accordion-body .sirio-accordion-content{padding:16px}.col-host .sirio-accordion-body{overflow:unset!important}.sirio-dialog-title{display:flex;margin-top:0}.sirio-dialog-title span{margin-right:10px;margin-bottom:0!important}.ag-header-cell.hide-filter .ag-header-cell-filter-button{display:none}.sirio-tab.sirio-tab-scroll{display:block}.sirio-dropdown .searchable{position:absolute;width:100%;display:none;left:0}.ag-cell-value .btn-small-group{width:100%;height:100%;display:flex;justify-content:center;align-items:center}.ag-cell-value .btn-small .sirio-btn{padding:.25rem .0625rem;margin:2px}.ag-selection-checkbox .ag-checkbox-input-wrapper.ag-disabled{display:none}ag-charts{display:block;height:100%;border-radius:8px;background-color:var(--chart-bg);border:1px solid var(--chart-border);overflow:hidden}.ag-cell.cell-component{padding:1px}.ag-cell.row-numbers-cell{text-align:center;background:#f2f6fc}.ag-header-cell.row-numbers-header .ag-header-cell-label{justify-content:center;text-align:center}\n", ".sirio-control.ng-invalid .sirio-form-feedback,.sirio-display-feedback{color:#aa224f;display:inline-block}.sirio-control.ng-invalid .sirio-input-group-text{color:#aa224f;border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label{color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]~label:before,.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-is-invalid input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label{color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:before,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:before{border-color:#aa224f}.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid~label:after,.sirio-form-check.sirio-form-toggle input[type=checkbox].sirio-is-invalid:checked~label:after{background-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=checkbox]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=checkbox]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label{color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]~label:before,.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:before{border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-form-check input[type=radio]:checked~label:after{background-image:url(\"data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='512' height='512' viewBox='0 0 512 512'%3e%3cpath fill='%23AA224F' d='M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z'/%3e%3c/svg%3e\");background-size:12px}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]+label{color:#aa224f;border-color:#aa224f}.sirio-control.sirio-is-invalid fieldset .sirio-chip-selection input[type=radio]:checked+label{color:#fff;background-color:#aa224f;border-color:#aa224f}.sirio-upload.sirio-is-invalid button{background-color:#aa224f;border-color:#aa224f}\n", ".sirio-control.text-left input.sirio-form-control,.sirio-control.text-left textarea.sirio-form-control,.sirio-control.text-left div.sirio-form-control{text-align:left}.sirio-control.text-center input.sirio-form-control,.sirio-control.text-center textarea.sirio-form-control,.sirio-control.text-center div.sirio-form-control{text-align:center}.sirio-control.text-right input.sirio-form-control,.sirio-control.text-right textarea.sirio-form-control,.sirio-control.text-right div.sirio-form-control{text-align:right}.horizontal-left{display:flex;justify-content:left}.horizontal-center{display:flex;justify-content:center}.horizontal-right{display:flex;justify-content:right}.horizontal-fill button{width:100%}.horizontal-left legend,.horizontal-center legend,.horizontal-right legend,.horizontal-fill legend{float:none}.col-host.component-center ngx-sirio-toggle .sirio-form-toggle label{margin-bottom:0}\n", ".sirio-control .sirio-form-control.data-display{border-color:#e3e5e8}.sirio-control .sirio-form-control.data-display.textarea{white-space:pre;overflow:auto;height:auto;line-height:140%;min-height:3rem;padding:1rem}.sirio-control .sirio-form-control.data-display.number{font-family:Roboto Mono,monospace}.sirio-control .sirio-form-control.data-display.checkbox{display:flex;justify-content:center;align-items:center}\n", ".sirio-control.light-readonly label:hover,.sirio-control.light-view div.sirio-label:hover{color:#454d56}.sirio-control.light-readonly input.sirio-form-control,.sirio-control.light-readonly .sirio-dropdown .sirio-dropdown-select,.sirio-control.light-readonly textarea.sirio-form-control,.sirio-control.light-view div.sirio-form-control{background:none!important;border:0px;padding-left:0}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text{background:none}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text span{color:#5b6571}.sirio-control.light-readonly .sirio-input-group .sirio-input-group-text.prefix{padding-left:0}.sirio-upload.sirio-control.light-readonly label,.sirio-upload.sirio-control.is-disabled label{pointer-events:none}\n", ":root{--sirio-spinner-blue: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='%2300368F' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\");--sirio-spinner-white: url(\"data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Ccircle cx='50' cy='50' r='40' stroke='white' stroke-width='10' fill='none' stroke-linecap='round' stroke-dasharray='62.8 62.8' transform='rotate(-90 50 50)'%3E%3CanimateTransform attributeName='transform' type='rotate' from='0 50 50' to='360 50 50' dur='1s' repeatCount='indefinite'/%3E%3C/circle%3E%3C/svg%3E\")}.sirio-control .sirio-is-pending,.sirio-control.sirio-is-pending input.sirio-form-control,.sirio-control.sirio-is-pending .sirio-dropdown .sirio-form-control,.sirio-form-check.sirio-control.sirio-is-pending{background-image:var(--sirio-spinner-blue);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}textarea.sirio-form-control.sirio-is-pending{background-position:top .9375rem right .9375rem}.sirio-control.sirio-is-pending input.sirio-form-control{background-position:right .9375rem top 50%}.sirio-upload.sirio-control.sirio-is-pending ngx-sirio-button .sirio-btn-primary{background-image:var(--sirio-spinner-white);background-position:right .9375rem center;background-repeat:no-repeat;background-size:1rem;padding-right:2.25rem}.sirio-control.sirio-is-pending fieldset{background-image:var(--sirio-spinner-blue);background-repeat:no-repeat;background-position:right .9375rem top 1rem;background-size:1rem;padding-right:2.25rem}\n", ":root{--dynamiclist-border: 1px solid #ccc}.dynamiclist-no-data{text-align:center;padding:20px;font-style:italic;border:var(--dynamiclist-border)}.dynamiclist-table{width:100%;border-collapse:collapse;border:none}.dynamiclist-table.main{border:var(--dynamiclist-border)}.dynamiclist-table.main .dynamiclist-table{border-left:var(--dynamiclist-border);border-bottom:var(--dynamiclist-border)}.dynamiclist-table td{border:var(--dynamiclist-border)}.dynamiclist-table tr:first-child td{border-top:none}.dynamiclist-table tr:last-child td{border-bottom:none}.dynamiclist-table tr td:first-child{border-left:none}.dynamiclist-table tr td:last-child{border-right:none}.dynamiclist-table td.content-cell{width:100%;padding-left:8px;padding-right:8px;border-left:var(--dynamiclist-border)}.dynamiclist-table td.content-cell .group-outline-repeat{margin-bottom:0}.dynamiclist-table td.command-cell{vertical-align:middle}.dynamiclist-table td.command-cell>div{display:flex;justify-content:right}.dynamiclist-table td.recursion-cell .layout{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr;width:100%;height:100%}.dynamiclist-table td.recursion-cell .recursion-toggle{grid-row:1 / span 2;grid-column:1;background-color:#f5f5f5;align-items:center}.dynamiclist-table td.recursion-cell .recursion-title{grid-row:1;grid-column:2;background:#f5f5f5;display:flex;align-items:center;min-height:34px}.dynamiclist-table td.recursion-cell .recursion-title .recursion-text{flex:1;text-align:center}.dynamiclist-table td.recursion-cell .recursion-title .recursion-add{margin-left:auto}.dynamiclist-table td.recursion-cell .recursion-content{grid-row:2;grid-column:2}.dynamiclist-table td.recursion-cell .recursion-content .is-open{overflow:visible!important}.dynamiclist-table ngx-sirio-button button{padding:7px}\n", ".datetime-container{display:flex;gap:8px;align-items:flex-end}.datetime-container{display:flex;gap:8px}.datetime-container ngx-sirio-datepicker{flex:1}.datetime-container ngx-sirio-timepicker{flex:1}.datetime-container+.sirio-form-feedback{color:#aa224f;display:inline-block}\n", ".sirio-tooltip .sirio-tooltip-body{white-space:pre-line}\n"] }]
|
|
7854
7903
|
}], ctorParameters: () => [{ type: SanitizeService }, { type: MarkdownService }, { type: MimeService }, { type: ProgrammabilityService }, { type: WeakService }, { type: RegisterService }, { type: MetadataService }, { type: i1$1.LanguageService }, { type: GlobalService }, { type: FormService }, { type: GridService }, { type: ChartService }, { type: DialogService }, { type: AutoFocusService }, { type: i0.ElementRef }], propDecorators: { form: [{
|
|
7855
7904
|
type: Input
|
|
7856
7905
|
}], rows: [{
|
|
@@ -8077,6 +8126,7 @@ class DynamicFormComponent {
|
|
|
8077
8126
|
if (this.initialized)
|
|
8078
8127
|
this.initialized.emit(this.formGroup);
|
|
8079
8128
|
this.registerHandlers();
|
|
8129
|
+
this.assignActivaNav();
|
|
8080
8130
|
}
|
|
8081
8131
|
onChangeValue() {
|
|
8082
8132
|
try {
|
|
@@ -8096,6 +8146,12 @@ class DynamicFormComponent {
|
|
|
8096
8146
|
this.suspendValueChanges = false;
|
|
8097
8147
|
this.emitValueChange();
|
|
8098
8148
|
}
|
|
8149
|
+
this.assignActivaNav();
|
|
8150
|
+
}
|
|
8151
|
+
assignActivaNav() {
|
|
8152
|
+
if (!this.isFormActivable(this._activeNav)) {
|
|
8153
|
+
this._activeNav = this.getNextFrom(-1);
|
|
8154
|
+
}
|
|
8099
8155
|
}
|
|
8100
8156
|
suspendValueChanges = false;
|
|
8101
8157
|
registerHandlers() {
|
|
@@ -8138,10 +8194,13 @@ class DynamicFormComponent {
|
|
|
8138
8194
|
}
|
|
8139
8195
|
}
|
|
8140
8196
|
getNext() {
|
|
8141
|
-
|
|
8197
|
+
return this.getNextFrom(this.activeNav);
|
|
8198
|
+
}
|
|
8199
|
+
getNextFrom(from) {
|
|
8200
|
+
let index = from + 1;
|
|
8142
8201
|
const max = this.getMaxNav();
|
|
8143
8202
|
while (index < max) {
|
|
8144
|
-
if (
|
|
8203
|
+
if (this.isFormActivable(index)) {
|
|
8145
8204
|
return index;
|
|
8146
8205
|
}
|
|
8147
8206
|
index++;
|
|
@@ -8149,9 +8208,12 @@ class DynamicFormComponent {
|
|
|
8149
8208
|
return -1;
|
|
8150
8209
|
}
|
|
8151
8210
|
getPrevious() {
|
|
8152
|
-
|
|
8211
|
+
return this.getPreviousFrom(this.activeNav);
|
|
8212
|
+
}
|
|
8213
|
+
getPreviousFrom(from) {
|
|
8214
|
+
let index = from - 1;
|
|
8153
8215
|
while (index >= 0) {
|
|
8154
|
-
if (
|
|
8216
|
+
if (this.isFormActivable(index)) {
|
|
8155
8217
|
return index;
|
|
8156
8218
|
}
|
|
8157
8219
|
index--;
|
|
@@ -8162,6 +8224,12 @@ class DynamicFormComponent {
|
|
|
8162
8224
|
return this._forms.length ?? 0;
|
|
8163
8225
|
}
|
|
8164
8226
|
;
|
|
8227
|
+
isFormActivable(index) {
|
|
8228
|
+
return index >= 0
|
|
8229
|
+
&& index < this.getMaxNav()
|
|
8230
|
+
&& !this.isDisabled(index)
|
|
8231
|
+
&& !this.isInactive(index);
|
|
8232
|
+
}
|
|
8165
8233
|
isDisabled(index) {
|
|
8166
8234
|
var form = this._forms[index];
|
|
8167
8235
|
if (!form)
|
|
@@ -8229,10 +8297,10 @@ class DynamicFormComponent {
|
|
|
8229
8297
|
};
|
|
8230
8298
|
const control = formBuilder.control(defaultValue, options);
|
|
8231
8299
|
currentGroup.addControl(component.key, control);
|
|
8300
|
+
this.validationService.addToCollection(validationCollection, control, currentGroup, component);
|
|
8232
8301
|
this.statusService.addToCollection(statusCollection, control);
|
|
8233
8302
|
this.disableService.addToCollection(disableCollection, control, formGroup, component);
|
|
8234
8303
|
this.computeService.addToCollection(computeCollection, control, formGroup, component);
|
|
8235
|
-
this.validationService.addToCollection(validationCollection, control, currentGroup, component);
|
|
8236
8304
|
this.eventService.addToCollection(eventCollection, control, currentGroup, component);
|
|
8237
8305
|
}
|
|
8238
8306
|
}
|
|
@@ -8259,13 +8327,18 @@ class DynamicFormComponent {
|
|
|
8259
8327
|
else if (this.isComponentWithInput(component)) {
|
|
8260
8328
|
const currentGroup = this.applyPath(this.fb, formGroup, component.path);
|
|
8261
8329
|
if (currentGroup.contains(component.key)) {
|
|
8262
|
-
|
|
8330
|
+
const control = currentGroup.get(component.key);
|
|
8331
|
+
this.validationService.addToCollection(validationCollection, control, currentGroup, component);
|
|
8332
|
+
this.statusService.addToCollection(statusCollection, control);
|
|
8333
|
+
this.disableService.addToCollection(disableCollection, control, currentGroup, component);
|
|
8263
8334
|
return;
|
|
8264
8335
|
}
|
|
8265
8336
|
else {
|
|
8266
8337
|
const control = formBuilder.control(null);
|
|
8267
8338
|
currentGroup.addControl(component.key, control);
|
|
8339
|
+
this.validationService.addToCollection(validationCollection, control, currentGroup, component);
|
|
8268
8340
|
this.statusService.addToCollection(statusCollection, control);
|
|
8341
|
+
this.disableService.addToCollection(disableCollection, control, currentGroup, component);
|
|
8269
8342
|
}
|
|
8270
8343
|
}
|
|
8271
8344
|
});
|