@smartbit4all/ng-client 7.3.7 → 7.3.9
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.
|
@@ -9778,6 +9778,17 @@ class SmartMonthPickerComponent {
|
|
|
9778
9778
|
constructor() {
|
|
9779
9779
|
this.valueChange = output();
|
|
9780
9780
|
this.SmartWidgetHintPosition = SmartWidgetHintPositionEnum;
|
|
9781
|
+
this.errorMatcher = {
|
|
9782
|
+
isErrorState: () => {
|
|
9783
|
+
const outer = this.control;
|
|
9784
|
+
const outerError = !!outer && outer.invalid && (outer.touched || outer.dirty);
|
|
9785
|
+
const innerError = this.date.invalid && this.date.touched;
|
|
9786
|
+
return outerError || innerError;
|
|
9787
|
+
},
|
|
9788
|
+
};
|
|
9789
|
+
}
|
|
9790
|
+
onBlur() {
|
|
9791
|
+
this.control?.markAsTouched();
|
|
9781
9792
|
}
|
|
9782
9793
|
ngOnInit() {
|
|
9783
9794
|
this.date = new UntypedFormControl(null);
|
|
@@ -9802,12 +9813,12 @@ class SmartMonthPickerComponent {
|
|
|
9802
9813
|
datepicker.close();
|
|
9803
9814
|
}
|
|
9804
9815
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMonthPickerComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
9805
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartMonthPickerComponent, isStandalone: true, selector: "lib-smart-month-picker", inputs: { widgetInstance: "widgetInstance" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
9816
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartMonthPickerComponent, isStandalone: true, selector: "lib-smart-month-picker", inputs: { widgetInstance: "widgetInstance", control: "control" }, outputs: { valueChange: "valueChange" }, providers: [
|
|
9806
9817
|
// A component-level adapter so only this picker gets the MM/yyyy formats. No `deps`:
|
|
9807
9818
|
// SmartDateFnsAdapter resolves MAT_DATE_LOCALE with `inject()`.
|
|
9808
9819
|
{ provide: DateAdapter, useClass: SmartDateFnsAdapter },
|
|
9809
9820
|
{ provide: MAT_DATE_FORMATS, useValue: YEARH_MONTH_FORMAT },
|
|
9810
|
-
], ngImport: i0, template: "<div class=\"smart-month-picker-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input
|
|
9821
|
+
], ngImport: i0, template: "<div class=\"smart-month-picker-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [matDatepicker]=\"dp\"\r\n [formControl]=\"date\"\r\n [errorStateMatcher]=\"errorMatcher\"\r\n (input)=\"handleChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #dp\r\n startView=\"multi-year\"\r\n (monthSelected)=\"chosenMonthHandler($event, dp)\"\r\n panelClass=\"example-month-picker\"\r\n >\r\n </mat-datepicker>\r\n </mat-form-field>\r\n @if (widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT) {\r\n <div class=\"smart-month-picker-hint\">\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".smart-month-picker-container{display:flex}.smart-month-picker-container mat-form-field{flex:1}\n"], dependencies: [{ kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormControlDirective, selector: "[formControl]", inputs: ["formControl", "disabled", "ngModel"], outputs: ["ngModelChange"], exportAs: ["ngForm"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }] }); }
|
|
9811
9822
|
}
|
|
9812
9823
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartMonthPickerComponent, decorators: [{
|
|
9813
9824
|
type: Component,
|
|
@@ -9826,9 +9837,11 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
9826
9837
|
MatSuffix,
|
|
9827
9838
|
MatDatepicker,
|
|
9828
9839
|
MatHint,
|
|
9829
|
-
], template: "<div class=\"smart-month-picker-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input
|
|
9840
|
+
], template: "<div class=\"smart-month-picker-container\">\r\n <mat-form-field appearance=\"outline\">\r\n <input\r\n matInput\r\n [matDatepicker]=\"dp\"\r\n [formControl]=\"date\"\r\n [errorStateMatcher]=\"errorMatcher\"\r\n (input)=\"handleChange($event)\"\r\n (blur)=\"onBlur()\"\r\n />\r\n <mat-datepicker-toggle matSuffix [for]=\"dp\"></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #dp\r\n startView=\"multi-year\"\r\n (monthSelected)=\"chosenMonthHandler($event, dp)\"\r\n panelClass=\"example-month-picker\"\r\n >\r\n </mat-datepicker>\r\n </mat-form-field>\r\n @if (widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT) {\r\n <div class=\"smart-month-picker-hint\">\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n </div>\r\n }\r\n</div>\r\n", styles: [".smart-month-picker-container{display:flex}.smart-month-picker-container mat-form-field{flex:1}\n"] }]
|
|
9830
9841
|
}], propDecorators: { widgetInstance: [{
|
|
9831
9842
|
type: Input
|
|
9843
|
+
}], control: [{
|
|
9844
|
+
type: Input
|
|
9832
9845
|
}], valueChange: [{ type: i0.Output, args: ["valueChange"] }] } });
|
|
9833
9846
|
|
|
9834
9847
|
class SmartVoiceRecorderComponent {
|
|
@@ -10919,7 +10932,7 @@ class SmartformwidgetComponent {
|
|
|
10919
10932
|
}
|
|
10920
10933
|
}
|
|
10921
10934
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
|
|
10922
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformwidgetComponent, isStandalone: true, selector: "smartformwidget", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, widgetInstance: { classPropertyName: "widgetInstance", publicName: "widgetInstance", isSignal: false, isRequired: false, transformFunction: null }, onBlur: { classPropertyName: "onBlur", publicName: "onBlur", isSignal: true, isRequired: false, transformFunction: null }, onValueChange: { classPropertyName: "onValueChange", publicName: "onValueChange", isSignal: false, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, sophisticatedValueChange: { classPropertyName: "sophisticatedValueChange", publicName: "sophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null }, blurSophisticatedValueChange: { classPropertyName: "blurSophisticatedValueChange", publicName: "blurSophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueCleared: "valueCleared" }, viewQueries: [{ propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "quill", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "sb4Textarea", first: true, predicate: ["sb4Textarea"], descendants: true }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container material\" [formGroup]=\"form()\">\r\n @if (\r\n widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\r\n ) {\r\n <div\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [class.sb4-widget-required]=\"isRequired()\"\r\n class=\"container\"\r\n >\r\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\r\n @for (widget of visibleChildren; track widget) {\r\n <smartformwidget\r\n [form]=\"form()\"\r\n [widgetInstance]=\"widget\"\r\n class=\"container-item\"\r\n [ngClass]=\"widget.cssClass ?? ''\"\r\n [onBlur]=\"onBlur()\"\r\n [onValueChange]=\"onValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"labelColor()\"\r\n ></smartformwidget>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\r\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n @if (!widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [attr.inputmode]=\"\r\n widgetInstance.inputMode\r\n ? widgetInstance.inputMode.toLocaleLowerCase()\r\n : 'text'\r\n \"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n type=\"{{\r\n widgetInstance.isPassword\r\n ? hidePassword\r\n ? 'password'\r\n : 'text'\r\n : ''\r\n }}\"\r\n (keydown.enter)=\"onKeydown()\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n [mask]=\"widgetInstance.mask\"\r\n />\r\n }\r\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\r\n @if (widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n (click)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n [matAutocomplete]=\"textFieldAuto\"\r\n (keydown.enter)=\"onKeydown()\"\r\n />\r\n }\r\n @if (widgetInstance.isPassword) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n (click)=\"togglePasswordVisibility($event)\"\r\n >\r\n <mat-icon>{{\r\n hidePassword ? \"visibility_off\" : \"visibility\"\r\n }}</mat-icon>\r\n </button>\r\n }\r\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n @for (option of filteredOptions | async; track option) {\r\n <mat-option [value]=\"option.label\">\r\n <span\r\n [innerHTML]=\"option.label | highlight: toHighlight\"\r\n ></span>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.capsLockWarning }}\r\n </span>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <smart-icon\r\n [icon]=\"\r\n widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\r\n \"\r\n color=\"warn\"\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.icon && widgetInstance.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <div class=\"textFieldButtons\">\r\n @if (widgetInstance.textFieldProperties?.clearable) {\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearField(widgetInstance.key)\"\r\n />\r\n }\r\n </div>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.textFieldButton.icon\"\r\n [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n >\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [type]=\"'number'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [min]=\"widgetInstance.minValues ?? null\"\r\n [max]=\"widgetInstance.maxValues ?? null\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (widgetInstance.icon) {\r\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip-row\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n <input\r\n #chipInput\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [matAutocomplete]=\"chipAuto\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n <mat-autocomplete\r\n #chipAuto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event, widgetInstance)\"\r\n >\r\n @for (item of widgetInstance.valueList; track item) {\r\n <mat-option\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n [value]=\"item.value\"\r\n >\r\n {{ item.label }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n </mat-chip-grid>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid\r\n #chipListLookup\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n >\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ getChipsValue(value) }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <input\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipListLookup\"\r\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"false\"\r\n [readonly]=\"true\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n </mat-chip-grid>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <textarea\r\n class=\"sb4-textarea\"\r\n #sb4Textarea\r\n cols=\"30\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"\r\n widgetInstance.textBoxProperties?.minRows ?? 1\r\n \"\r\n [cdkAutosizeMaxRows]=\"\r\n widgetInstance.textBoxProperties?.maxRows ?? undefined\r\n \"\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n ></textarea>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance.hint ||\r\n widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n <div class=\"checkbox-item-container\">\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n (change)=\"onValueChange?.next(widgetInstance)\"\r\n (change)=\"onBlur()?.next(widgetInstance)\"\r\n >\r\n {{ widgetInstance.label }}\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n @for (\r\n checkbox of widgetInstance.valueList;\r\n track checkbox;\r\n let i = $index\r\n ) {\r\n <div class=\"checkbox-item-container\">\r\n @if (checkbox.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"checkbox-item-image\"\r\n [src]=\"checkbox.imageUrl\"\r\n />\r\n }\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{\r\n widgetInstance.key + '.' + checkbox.key\r\n }}\"\r\n [value]=\"checkbox.value\"\r\n (change)=\"onValueChange?.next(checkbox)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n >\r\n {{ checkbox.label }}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-radio-group\r\n class=\"input radio-section widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n appearance=\"outline\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <div [ngClass]=\"getDirection()\">\r\n @for (radio of widgetInstance.valueList; track radio) {\r\n <div class=\"radio-item-container\">\r\n @if (radio.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"radio-item-image\"\r\n [src]=\"radio.imageUrl\"\r\n />\r\n }\r\n <mat-radio-button\r\n class=\"selecatbleObject\"\r\n value=\"{{ radio.value }}\"\r\n [ngClass]=\"getDirection()\"\r\n (change)=\"onValueChange?.next(radio.value)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n >\r\n {{ radio.label }}\r\n </mat-radio-button>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n <div class=\"radio-icon\">\r\n @if (widgetInstance.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\r\n <div class=\"datePicker widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <lib-smart-month-picker\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (valueChange)=\"handleYearMonthPicked($event)\"\r\n ></lib-smart-month-picker>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div class=\"dateTimePickerContainer\">\r\n <mat-form-field\r\n class=\"input widgetContent date {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n #dateInput\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n [id]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onDatePickerBlur($event)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n @if (hasCreated) {\r\n <mat-form-field\r\n class=\"input widgetContent time\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n appearance=\"outline\"\r\n >\r\n <input\r\n #timeInput\r\n [formControlName]=\"widgetInstance.key + '-time'\"\r\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\r\n [id]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n (blur)=\"onTimePickerBlur($event)\"\r\n matInput\r\n />\r\n </mat-form-field>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}\r\n </mat-option>\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n multiple\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}</mat-option\r\n >\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\r\n <div\r\n class=\"label widgetContainer\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n >\r\n <div\r\n class=\"label-title labelContainer\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n >\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance.widgetDescription) {\r\n <p>{{ widgetInstance.widgetDescription }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <mat-slide-toggle\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (change)=\"onValueChange?.next($event)\"\r\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n >{{\r\n !widgetInstance.showLabel ? widgetInstance.label : \"\"\r\n }}</mat-slide-toggle\r\n ><span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} labelContainer {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"smartIndicator widgetContent\">\r\n <div\r\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n >\r\n @for (item of indicatorItems; track item; let i = $index) {\r\n <div\r\n class=\"indicatorItem\"\r\n [ngClass]=\"getIndicatorItemClass(i)\"\r\n ></div>\r\n }\r\n </div>\r\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n {{ getIndicatorStatusLabel() }}\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"widgetItemContainer\">\r\n <smart-voice-recorder\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-multi-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n (fileEvent)=\"executeUiAction($event.uiAction)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\r\n <div class=\"widgetContainer imageContainer\">\r\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance.imageProperties?.image) {\r\n <smart-icon\r\n [imageResource]=\"\r\n $safeNavigationMigration(widgetInstance.imageProperties?.image)\r\n \"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n } @else if (widgetInstance.value) {\r\n <smart-icon\r\n [(ngModel)]=\"widgetInstance.value\"\r\n [imageResource]=\"widgetInstance.value\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\r\n <div\r\n class=\"smartDiv\"\r\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\r\n [ngClass]=\"getNgClass()\"\r\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\r\n [ngStyle]=\"getStyle()\"\r\n (click)=\"onDivClick()\"\r\n ></div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\r\n <smart-html-widget\r\n [widgetInstance]=\"widgetInstance\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-html-widget>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\r\n <div class=\"widgetContainer\">\r\n <hr\r\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <button\r\n mat-button\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n [color]=\"\r\n $safeNavigationMigration(\r\n widgetInstance.uiActionDescriptor?.color\r\n )\r\n \"\r\n (click)=\"onButtonClicked(widgetInstance)\"\r\n >\r\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\r\n @if (widgetInstance.uiActionDescriptor?.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n } @else {\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.uiActionDescriptor?.title }}\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"POST\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"labelContainer {{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"widgetContent\">\r\n <ng-template #customComponent></ng-template>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <quill-editor\r\n #quillEditor\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [modules]=\"\r\n widgetInstance.isDisabled\r\n ? emptyQuillToolbar\r\n : widgetInstance.quillModules\r\n \"\r\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\r\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\r\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\r\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\r\n ></quill-editor>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint\r\n matSuffix\r\n align=\"end\"\r\n class=\"rich-text-editor-leeway-counter\"\r\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\r\n >\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <lib-sortable-widget\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n ></lib-sortable-widget>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <table class=\"matrixTable widgetContent\">\r\n <tr>\r\n <th></th>\r\n @for (option of widgetInstance.value.columns; track option) {\r\n <th class=\"optionLabel\">\r\n {{ option.displayValue }}\r\n </th>\r\n }\r\n </tr>\r\n @for (\r\n question of widgetInstance.value.rows;\r\n track question;\r\n let i = $index\r\n ) {\r\n <tr>\r\n <th class=\"questionLabel\">\r\n <label>{{ question.displayValue }}</label>\r\n </th>\r\n @for (\r\n option of widgetInstance.value.columns;\r\n track option;\r\n let j = $index\r\n ) {\r\n <td class=\"selectTd\">\r\n @if (!widgetInstance.isMultiple) {\r\n <mat-radio-group\r\n [formControlName]=\"\r\n widgetInstance.key + '.' + question.code\r\n \"\r\n [name]=\"'q' + i\"\r\n >\r\n <mat-radio-button [value]=\"option.code\">\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n @if (widgetInstance.isMultiple) {\r\n <div>\r\n <mat-checkbox\r\n [formControlName]=\"\r\n widgetInstance.key +\r\n '.data.' +\r\n question.code +\r\n '.' +\r\n option.code\r\n \"\r\n [value]=\"\r\n widgetInstance.value['data'][question.code][\r\n option.code\r\n ]\r\n \"\r\n [checked]=\"true\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n </td>\r\n }\r\n <br />\r\n @if (widgetInstance.button) {\r\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\r\n <smart-icon icon=\"close\"></smart-icon>\r\n </button>\r\n }\r\n </tr>\r\n }\r\n </table>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <youtube-player\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n videoId=\"{{ widgetInstance.videoId }}\"\r\n [width]=\"widgetInstance.width\"\r\n [height]=\"widgetInstance.height\"\r\n [startSeconds]=\"widgetInstance.startSeconds\"\r\n [endSeconds]=\"widgetInstance.endSeconds\"\r\n ></youtube-player>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"], dependencies: [{ kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10935
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SmartformwidgetComponent, isStandalone: true, selector: "smartformwidget", inputs: { form: { classPropertyName: "form", publicName: "form", isSignal: true, isRequired: true, transformFunction: null }, widgetInstance: { classPropertyName: "widgetInstance", publicName: "widgetInstance", isSignal: false, isRequired: false, transformFunction: null }, onBlur: { classPropertyName: "onBlur", publicName: "onBlur", isSignal: true, isRequired: false, transformFunction: null }, onValueChange: { classPropertyName: "onValueChange", publicName: "onValueChange", isSignal: false, isRequired: false, transformFunction: null }, labelColor: { classPropertyName: "labelColor", publicName: "labelColor", isSignal: true, isRequired: false, transformFunction: null }, sophisticatedValueChange: { classPropertyName: "sophisticatedValueChange", publicName: "sophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null }, blurSophisticatedValueChange: { classPropertyName: "blurSophisticatedValueChange", publicName: "blurSophisticatedValueChange", isSignal: true, isRequired: true, transformFunction: null } }, outputs: { valueCleared: "valueCleared" }, viewQueries: [{ propertyName: "chipInputChild", first: true, predicate: ["chipInput"], descendants: true }, { propertyName: "customComponentVcRef", first: true, predicate: ["customComponent"], descendants: true, read: ViewContainerRef }, { propertyName: "quill", first: true, predicate: ["quillEditor"], descendants: true }, { propertyName: "sb4Textarea", first: true, predicate: ["sb4Textarea"], descendants: true }, { propertyName: "dateInputChild", first: true, predicate: ["dateInput"], descendants: true }, { propertyName: "timeInputChild", first: true, predicate: ["timeInput"], descendants: true }], ngImport: i0, template: "<div class=\"container material\" [formGroup]=\"form()\">\r\n @if (\r\n widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\r\n ) {\r\n <div\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [class.sb4-widget-required]=\"isRequired()\"\r\n class=\"container\"\r\n >\r\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\r\n @for (widget of visibleChildren; track widget) {\r\n <smartformwidget\r\n [form]=\"form()\"\r\n [widgetInstance]=\"widget\"\r\n class=\"container-item\"\r\n [ngClass]=\"widget.cssClass ?? ''\"\r\n [onBlur]=\"onBlur()\"\r\n [onValueChange]=\"onValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"labelColor()\"\r\n ></smartformwidget>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\r\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n @if (!widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [attr.inputmode]=\"\r\n widgetInstance.inputMode\r\n ? widgetInstance.inputMode.toLocaleLowerCase()\r\n : 'text'\r\n \"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n type=\"{{\r\n widgetInstance.isPassword\r\n ? hidePassword\r\n ? 'password'\r\n : 'text'\r\n : ''\r\n }}\"\r\n (keydown.enter)=\"onKeydown()\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n [mask]=\"widgetInstance.mask\"\r\n />\r\n }\r\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\r\n @if (widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n (click)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n [matAutocomplete]=\"textFieldAuto\"\r\n (keydown.enter)=\"onKeydown()\"\r\n />\r\n }\r\n @if (widgetInstance.isPassword) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n (click)=\"togglePasswordVisibility($event)\"\r\n >\r\n <mat-icon>{{\r\n hidePassword ? \"visibility_off\" : \"visibility\"\r\n }}</mat-icon>\r\n </button>\r\n }\r\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n @for (option of filteredOptions | async; track option) {\r\n <mat-option [value]=\"option.label\">\r\n <span\r\n [innerHTML]=\"option.label | highlight: toHighlight\"\r\n ></span>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.capsLockWarning }}\r\n </span>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <smart-icon\r\n [icon]=\"\r\n widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\r\n \"\r\n color=\"warn\"\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.icon && widgetInstance.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <div class=\"textFieldButtons\">\r\n @if (widgetInstance.textFieldProperties?.clearable) {\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearField(widgetInstance.key)\"\r\n />\r\n }\r\n </div>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.textFieldButton.icon\"\r\n [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n >\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [type]=\"'number'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [min]=\"widgetInstance.minValues ?? null\"\r\n [max]=\"widgetInstance.maxValues ?? null\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (widgetInstance.icon) {\r\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip-row\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n <input\r\n #chipInput\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [matAutocomplete]=\"chipAuto\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n <mat-autocomplete\r\n #chipAuto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event, widgetInstance)\"\r\n >\r\n @for (item of widgetInstance.valueList; track item) {\r\n <mat-option\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n [value]=\"item.value\"\r\n >\r\n {{ item.label }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n </mat-chip-grid>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid\r\n #chipListLookup\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n >\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ getChipsValue(value) }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <input\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipListLookup\"\r\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"false\"\r\n [readonly]=\"true\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n </mat-chip-grid>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <textarea\r\n class=\"sb4-textarea\"\r\n #sb4Textarea\r\n cols=\"30\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"\r\n widgetInstance.textBoxProperties?.minRows ?? 1\r\n \"\r\n [cdkAutosizeMaxRows]=\"\r\n widgetInstance.textBoxProperties?.maxRows ?? undefined\r\n \"\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n ></textarea>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance.hint ||\r\n widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n <div class=\"checkbox-item-container\">\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n (change)=\"onValueChange?.next(widgetInstance)\"\r\n (change)=\"onBlur()?.next(widgetInstance)\"\r\n >\r\n {{ widgetInstance.label }}\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n @for (\r\n checkbox of widgetInstance.valueList;\r\n track checkbox;\r\n let i = $index\r\n ) {\r\n <div class=\"checkbox-item-container\">\r\n @if (checkbox.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"checkbox-item-image\"\r\n [src]=\"checkbox.imageUrl\"\r\n />\r\n }\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{\r\n widgetInstance.key + '.' + checkbox.key\r\n }}\"\r\n [value]=\"checkbox.value\"\r\n (change)=\"onValueChange?.next(checkbox)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n >\r\n {{ checkbox.label }}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-radio-group\r\n class=\"input radio-section widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n appearance=\"outline\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <div [ngClass]=\"getDirection()\">\r\n @for (radio of widgetInstance.valueList; track radio) {\r\n <div class=\"radio-item-container\">\r\n @if (radio.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"radio-item-image\"\r\n [src]=\"radio.imageUrl\"\r\n />\r\n }\r\n <mat-radio-button\r\n class=\"selecatbleObject\"\r\n value=\"{{ radio.value }}\"\r\n [ngClass]=\"getDirection()\"\r\n (change)=\"onValueChange?.next(radio.value)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n >\r\n {{ radio.label }}\r\n </mat-radio-button>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n <div class=\"radio-icon\">\r\n @if (widgetInstance.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\r\n <div class=\"datePicker widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <lib-smart-month-picker\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n [control]=\"form().controls[widgetInstance.key]\"\r\n (valueChange)=\"handleYearMonthPicked($event)\"\r\n ></lib-smart-month-picker>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div class=\"dateTimePickerContainer\">\r\n <mat-form-field\r\n class=\"input widgetContent date {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n #dateInput\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n [id]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onDatePickerBlur($event)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n @if (hasCreated) {\r\n <mat-form-field\r\n class=\"input widgetContent time\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n appearance=\"outline\"\r\n >\r\n <input\r\n #timeInput\r\n [formControlName]=\"widgetInstance.key + '-time'\"\r\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\r\n [id]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n (blur)=\"onTimePickerBlur($event)\"\r\n matInput\r\n />\r\n </mat-form-field>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}\r\n </mat-option>\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n multiple\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}</mat-option\r\n >\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\r\n <div\r\n class=\"label widgetContainer\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n >\r\n <div\r\n class=\"label-title labelContainer\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n >\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance.widgetDescription) {\r\n <p>{{ widgetInstance.widgetDescription }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <mat-slide-toggle\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (change)=\"onValueChange?.next($event)\"\r\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n >{{\r\n !widgetInstance.showLabel ? widgetInstance.label : \"\"\r\n }}</mat-slide-toggle\r\n ><span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} labelContainer {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"smartIndicator widgetContent\">\r\n <div\r\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n >\r\n @for (item of indicatorItems; track item; let i = $index) {\r\n <div\r\n class=\"indicatorItem\"\r\n [ngClass]=\"getIndicatorItemClass(i)\"\r\n ></div>\r\n }\r\n </div>\r\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n {{ getIndicatorStatusLabel() }}\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"widgetItemContainer\">\r\n <smart-voice-recorder\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-multi-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n (fileEvent)=\"executeUiAction($event.uiAction)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\r\n <div class=\"widgetContainer imageContainer\">\r\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance.imageProperties?.image) {\r\n <smart-icon\r\n [imageResource]=\"\r\n $safeNavigationMigration(widgetInstance.imageProperties?.image)\r\n \"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n } @else if (widgetInstance.value) {\r\n <smart-icon\r\n [(ngModel)]=\"widgetInstance.value\"\r\n [imageResource]=\"widgetInstance.value\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\r\n <div\r\n class=\"smartDiv\"\r\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\r\n [ngClass]=\"getNgClass()\"\r\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\r\n [ngStyle]=\"getStyle()\"\r\n (click)=\"onDivClick()\"\r\n ></div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\r\n <smart-html-widget\r\n [widgetInstance]=\"widgetInstance\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-html-widget>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\r\n <div class=\"widgetContainer\">\r\n <hr\r\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <button\r\n mat-button\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n [color]=\"\r\n $safeNavigationMigration(\r\n widgetInstance.uiActionDescriptor?.color\r\n )\r\n \"\r\n (click)=\"onButtonClicked(widgetInstance)\"\r\n >\r\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\r\n @if (widgetInstance.uiActionDescriptor?.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n } @else {\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.uiActionDescriptor?.title }}\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"POST\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"labelContainer {{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"widgetContent\">\r\n <ng-template #customComponent></ng-template>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <quill-editor\r\n #quillEditor\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [modules]=\"\r\n widgetInstance.isDisabled\r\n ? emptyQuillToolbar\r\n : widgetInstance.quillModules\r\n \"\r\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\r\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\r\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\r\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\r\n ></quill-editor>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint\r\n matSuffix\r\n align=\"end\"\r\n class=\"rich-text-editor-leeway-counter\"\r\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\r\n >\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <lib-sortable-widget\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n ></lib-sortable-widget>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <table class=\"matrixTable widgetContent\">\r\n <tr>\r\n <th></th>\r\n @for (option of widgetInstance.value.columns; track option) {\r\n <th class=\"optionLabel\">\r\n {{ option.displayValue }}\r\n </th>\r\n }\r\n </tr>\r\n @for (\r\n question of widgetInstance.value.rows;\r\n track question;\r\n let i = $index\r\n ) {\r\n <tr>\r\n <th class=\"questionLabel\">\r\n <label>{{ question.displayValue }}</label>\r\n </th>\r\n @for (\r\n option of widgetInstance.value.columns;\r\n track option;\r\n let j = $index\r\n ) {\r\n <td class=\"selectTd\">\r\n @if (!widgetInstance.isMultiple) {\r\n <mat-radio-group\r\n [formControlName]=\"\r\n widgetInstance.key + '.' + question.code\r\n \"\r\n [name]=\"'q' + i\"\r\n >\r\n <mat-radio-button [value]=\"option.code\">\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n @if (widgetInstance.isMultiple) {\r\n <div>\r\n <mat-checkbox\r\n [formControlName]=\"\r\n widgetInstance.key +\r\n '.data.' +\r\n question.code +\r\n '.' +\r\n option.code\r\n \"\r\n [value]=\"\r\n widgetInstance.value['data'][question.code][\r\n option.code\r\n ]\r\n \"\r\n [checked]=\"true\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n </td>\r\n }\r\n <br />\r\n @if (widgetInstance.button) {\r\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\r\n <smart-icon icon=\"close\"></smart-icon>\r\n </button>\r\n }\r\n </tr>\r\n }\r\n </table>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <youtube-player\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n videoId=\"{{ widgetInstance.videoId }}\"\r\n [width]=\"widgetInstance.width\"\r\n [height]=\"widgetInstance.height\"\r\n [startSeconds]=\"widgetInstance.startSeconds\"\r\n [endSeconds]=\"widgetInstance.endSeconds\"\r\n ></youtube-player>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"], dependencies: [{ kind: "component", type: SmartformwidgetComponent, selector: "smartformwidget", inputs: ["form", "widgetInstance", "onBlur", "onValueChange", "labelColor", "sophisticatedValueChange", "blurSophisticatedValueChange"], outputs: ["valueCleared"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i1$1.DefaultValueAccessor, selector: "input:not([type=checkbox]):not([ngNoCva])[formControlName],textarea:not([ngNoCva])[formControlName],input:not([type=checkbox]):not([ngNoCva])[formControl],textarea:not([ngNoCva])[formControl],input:not([type=checkbox]):not([ngNoCva])[ngModel],textarea:not([ngNoCva])[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i1$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i1$1.NgControlStatusGroup, selector: "[formGroupName],[formArrayName],[ngModelGroup],[formGroup],[formArray],form:not([ngNoForm]),[ngForm]" }, { kind: "directive", type: i1$1.MaxLengthValidator, selector: "[maxlength][formControlName],[maxlength][formControl],[maxlength][ngModel]", inputs: ["maxlength"] }, { kind: "directive", type: i1$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "ngmodule", type: ReactiveFormsModule }, { kind: "directive", type: i1$1.FormGroupDirective, selector: "[formGroup]", inputs: ["formGroup"], outputs: ["ngSubmit"], exportAs: ["ngForm"] }, { kind: "directive", type: i1$1.FormControlName, selector: "[formControlName]", inputs: ["formControlName", "disabled", "ngModel"], outputs: ["ngModelChange"] }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: TrackCapsDirective, selector: "[capsLock]", outputs: ["capsLock"] }, { kind: "directive", type: NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "directive", type: MatHint, selector: "mat-hint", inputs: ["align", "id"] }, { kind: "component", type: MatFormField, selector: "mat-form-field", inputs: ["hideRequiredMarker", "color", "floatLabel", "appearance", "subscriptSizing", "hintLabel"], exportAs: ["matFormField"] }, { kind: "directive", type: MatLabel, selector: "mat-label" }, { kind: "directive", type: MatInput, selector: "input[matInput], textarea[matInput], select[matNativeControl], input[matNativeControl], textarea[matNativeControl]", inputs: ["disabled", "id", "placeholder", "name", "required", "type", "errorStateMatcher", "aria-describedby", "value", "readonly", "disabledInteractive"], exportAs: ["matInput"] }, { kind: "directive", type: NgxMaskDirective, selector: "input[mask], textarea[mask]", inputs: ["mask", "specialCharacters", "patterns", "prefix", "suffix", "thousandSeparator", "decimalMarker", "dropSpecialCharacters", "hiddenInput", "showMaskTyped", "placeHolderCharacter", "shownMaskExpression", "clearIfNotMatch", "validation", "separatorLimit", "typeFromDecimals", "allowNegativeNumbers", "leadZeroDateTime", "leadZero", "triggerOnMaskChange", "apm", "inputTransformFn", "outputTransformFn", "keepCharacterPositions", "instantPrefix", "defaultValueOnBlur", "value", "disabled", "touched"], outputs: ["valueChange", "touchedChange", "maskFilled"], exportAs: ["mask", "ngxMask"] }, { kind: "directive", type: MatAutocompleteTrigger, selector: "input[matAutocomplete], textarea[matAutocomplete]", inputs: ["matAutocomplete", "matAutocompletePosition", "matAutocompleteConnectedTo", "autocomplete", "matAutocompleteDisabled"], exportAs: ["matAutocompleteTrigger"] }, { kind: "component", type: MatIconButton, selector: "button[mat-icon-button], a[mat-icon-button], button[matIconButton], a[matIconButton]", exportAs: ["matButton", "matAnchor"] }, { kind: "directive", type: MatSuffix, selector: "[matSuffix], [matIconSuffix], [matTextSuffix]", inputs: ["matTextSuffix"] }, { kind: "component", type: MatIcon, selector: "mat-icon", inputs: ["color", "inline", "svgIcon", "fontSet", "fontIcon"], exportAs: ["matIcon"] }, { kind: "component", type: MatAutocomplete, selector: "mat-autocomplete", inputs: ["aria-label", "aria-labelledby", "displayWith", "autoActiveFirstOption", "autoSelectActiveOption", "requireSelection", "panelWidth", "disableRipple", "class", "hideSingleSelectionIndicator"], outputs: ["optionSelected", "opened", "closed", "optionActivated"], exportAs: ["matAutocomplete"] }, { kind: "component", type: MatOption, selector: "mat-option", inputs: ["value", "id", "disabled"], outputs: ["onSelectionChange"], exportAs: ["matOption"] }, { kind: "directive", type: MatPrefix, selector: "[matPrefix], [matIconPrefix], [matTextPrefix]", inputs: ["matTextPrefix"] }, { kind: "component", type: SmartIconComponent, selector: "smart-icon", inputs: ["icon", "color", "imageResource"] }, { kind: "component", type: UiActionButtonComponent, selector: "ui-action-button", inputs: ["disabled", "descriptor", "code", "identifier", "viewActivated", "tab", "rowState", "addedCssClass", "addBasicClasses", "iconPlaceholder", "chords"], outputs: ["actionClick", "actionDoubleClick"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: MatChipGrid, selector: "mat-chip-grid", inputs: ["disabled", "placeholder", "required", "value", "errorStateMatcher"], outputs: ["change", "valueChange"] }, { kind: "component", type: MatChipRow, selector: "mat-chip-row, [mat-chip-row], mat-basic-chip-row, [mat-basic-chip-row]", inputs: ["editable"], outputs: ["edited"] }, { kind: "directive", type: MatChipRemove, selector: "[matChipRemove]" }, { kind: "directive", type: MatChipInput, selector: "input[matChipInputFor]", inputs: ["matChipInputFor", "matChipInputAddOnBlur", "matChipInputSeparatorKeyCodes", "placeholder", "id", "disabled", "readonly", "matChipInputDisabledInteractive"], outputs: ["matChipInputTokenEnd"], exportAs: ["matChipInput", "matChipInputFor"] }, { kind: "component", type: MatChip, selector: "mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]", inputs: ["role", "id", "aria-label", "aria-description", "value", "color", "removable", "highlighted", "disableRipple", "disabled"], outputs: ["removed", "destroyed"], exportAs: ["matChip"] }, { kind: "directive", type: CdkTextareaAutosize, selector: "textarea[cdkTextareaAutosize]", inputs: ["cdkAutosizeMinRows", "cdkAutosizeMaxRows", "cdkTextareaAutosize", "placeholder"], exportAs: ["cdkTextareaAutosize"] }, { kind: "component", type: MatCheckbox, selector: "mat-checkbox", inputs: ["aria-label", "aria-labelledby", "aria-describedby", "aria-expanded", "aria-controls", "aria-owns", "id", "required", "labelPosition", "name", "value", "disableRipple", "tabIndex", "color", "disabledInteractive", "checked", "disabled", "indeterminate"], outputs: ["change", "indeterminateChange"], exportAs: ["matCheckbox"] }, { kind: "directive", type: MatRadioGroup, selector: "mat-radio-group", inputs: ["color", "name", "labelPosition", "value", "selected", "disabled", "required", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioGroup"] }, { kind: "component", type: MatRadioButton, selector: "mat-radio-button", inputs: ["id", "name", "aria-label", "aria-labelledby", "aria-describedby", "disableRipple", "tabIndex", "checked", "value", "labelPosition", "disabled", "required", "color", "disabledInteractive"], outputs: ["change"], exportAs: ["matRadioButton"] }, { kind: "component", type: MatDatepickerToggle, selector: "mat-datepicker-toggle", inputs: ["for", "tabIndex", "aria-label", "disabled", "disableRipple"], exportAs: ["matDatepickerToggle"] }, { kind: "component", type: MatDatepicker, selector: "mat-datepicker", exportAs: ["matDatepicker"] }, { kind: "directive", type: MatDatepickerInput, selector: "input[matDatepicker]", inputs: ["matDatepicker", "min", "max", "matDatepickerFilter"], exportAs: ["matDatepickerInput"] }, { kind: "component", type: SmartMonthPickerComponent, selector: "lib-smart-month-picker", inputs: ["widgetInstance", "control"], outputs: ["valueChange"] }, { kind: "component", type: MatSelect, selector: "mat-select", inputs: ["aria-describedby", "panelClass", "disabled", "disableRipple", "tabIndex", "hideSingleSelectionIndicator", "placeholder", "required", "multiple", "disableOptionCentering", "compareWith", "value", "aria-label", "aria-labelledby", "errorStateMatcher", "typeaheadDebounceInterval", "sortComparator", "id", "panelWidth", "canSelectNullableOptions"], outputs: ["openedChange", "opened", "closed", "selectionChange", "valueChange"], exportAs: ["matSelect"] }, { kind: "component", type: MatOptgroup, selector: "mat-optgroup", inputs: ["label", "disabled"], exportAs: ["matOptgroup"] }, { kind: "component", type: MatSlideToggle, selector: "mat-slide-toggle", inputs: ["name", "id", "labelPosition", "aria-label", "aria-labelledby", "aria-describedby", "required", "color", "disabled", "disableRipple", "tabIndex", "checked", "hideIcon", "disabledInteractive"], outputs: ["change", "toggleChange"], exportAs: ["matSlideToggle"] }, { kind: "component", type: SmartVoiceRecorderComponent, selector: "smart-voice-recorder", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartFileEditorComponent, selector: "smart-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent"] }, { kind: "component", type: SmartMultiFileEditorComponent, selector: "smart-multi-file-editor", inputs: ["widgetInstance"], outputs: ["uploadFilesEvent", "fileEvent"] }, { kind: "component", type: SmartHtmlWidgetComponent, selector: "smart-html-widget", inputs: ["widgetInstance"] }, { kind: "component", type: QuillEditorComponent, selector: "quill-editor" }, { kind: "component", type: SortableWidgetComponent, selector: "lib-sortable-widget", inputs: ["widgetInstance"] }, { kind: "component", type: YouTubePlayer, selector: "youtube-player", inputs: ["videoId", "height", "width", "startSeconds", "endSeconds", "suggestedQuality", "playerVars", "disableCookies", "loadApi", "disablePlaceholder", "showBeforeIframeApiLoads", "placeholderButtonLabel", "placeholderImageQuality"], outputs: ["ready", "stateChange", "error", "apiChange", "playbackQualityChange", "playbackRateChange"] }, { kind: "pipe", type: AsyncPipe, name: "async" }, { kind: "pipe", type: HighlightPipe, name: "highlight" }], changeDetection: i0.ChangeDetectionStrategy.OnPush, encapsulation: i0.ViewEncapsulation.None }); }
|
|
10923
10936
|
}
|
|
10924
10937
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SmartformwidgetComponent, decorators: [{
|
|
10925
10938
|
type: Component,
|
|
@@ -10970,7 +10983,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
10970
10983
|
YouTubePlayer,
|
|
10971
10984
|
AsyncPipe,
|
|
10972
10985
|
HighlightPipe,
|
|
10973
|
-
], template: "<div class=\"container material\" [formGroup]=\"form()\">\r\n @if (\r\n widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\r\n ) {\r\n <div\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [class.sb4-widget-required]=\"isRequired()\"\r\n class=\"container\"\r\n >\r\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\r\n @for (widget of visibleChildren; track widget) {\r\n <smartformwidget\r\n [form]=\"form()\"\r\n [widgetInstance]=\"widget\"\r\n class=\"container-item\"\r\n [ngClass]=\"widget.cssClass ?? ''\"\r\n [onBlur]=\"onBlur()\"\r\n [onValueChange]=\"onValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"labelColor()\"\r\n ></smartformwidget>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\r\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n @if (!widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [attr.inputmode]=\"\r\n widgetInstance.inputMode\r\n ? widgetInstance.inputMode.toLocaleLowerCase()\r\n : 'text'\r\n \"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n type=\"{{\r\n widgetInstance.isPassword\r\n ? hidePassword\r\n ? 'password'\r\n : 'text'\r\n : ''\r\n }}\"\r\n (keydown.enter)=\"onKeydown()\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n [mask]=\"widgetInstance.mask\"\r\n />\r\n }\r\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\r\n @if (widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n (click)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n [matAutocomplete]=\"textFieldAuto\"\r\n (keydown.enter)=\"onKeydown()\"\r\n />\r\n }\r\n @if (widgetInstance.isPassword) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n (click)=\"togglePasswordVisibility($event)\"\r\n >\r\n <mat-icon>{{\r\n hidePassword ? \"visibility_off\" : \"visibility\"\r\n }}</mat-icon>\r\n </button>\r\n }\r\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n @for (option of filteredOptions | async; track option) {\r\n <mat-option [value]=\"option.label\">\r\n <span\r\n [innerHTML]=\"option.label | highlight: toHighlight\"\r\n ></span>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.capsLockWarning }}\r\n </span>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <smart-icon\r\n [icon]=\"\r\n widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\r\n \"\r\n color=\"warn\"\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.icon && widgetInstance.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <div class=\"textFieldButtons\">\r\n @if (widgetInstance.textFieldProperties?.clearable) {\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearField(widgetInstance.key)\"\r\n />\r\n }\r\n </div>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.textFieldButton.icon\"\r\n [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n >\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [type]=\"'number'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [min]=\"widgetInstance.minValues ?? null\"\r\n [max]=\"widgetInstance.maxValues ?? null\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (widgetInstance.icon) {\r\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip-row\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n <input\r\n #chipInput\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [matAutocomplete]=\"chipAuto\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n <mat-autocomplete\r\n #chipAuto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event, widgetInstance)\"\r\n >\r\n @for (item of widgetInstance.valueList; track item) {\r\n <mat-option\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n [value]=\"item.value\"\r\n >\r\n {{ item.label }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n </mat-chip-grid>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid\r\n #chipListLookup\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n >\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ getChipsValue(value) }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <input\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipListLookup\"\r\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"false\"\r\n [readonly]=\"true\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n </mat-chip-grid>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <textarea\r\n class=\"sb4-textarea\"\r\n #sb4Textarea\r\n cols=\"30\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"\r\n widgetInstance.textBoxProperties?.minRows ?? 1\r\n \"\r\n [cdkAutosizeMaxRows]=\"\r\n widgetInstance.textBoxProperties?.maxRows ?? undefined\r\n \"\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n ></textarea>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance.hint ||\r\n widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n <div class=\"checkbox-item-container\">\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n (change)=\"onValueChange?.next(widgetInstance)\"\r\n (change)=\"onBlur()?.next(widgetInstance)\"\r\n >\r\n {{ widgetInstance.label }}\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n @for (\r\n checkbox of widgetInstance.valueList;\r\n track checkbox;\r\n let i = $index\r\n ) {\r\n <div class=\"checkbox-item-container\">\r\n @if (checkbox.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"checkbox-item-image\"\r\n [src]=\"checkbox.imageUrl\"\r\n />\r\n }\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{\r\n widgetInstance.key + '.' + checkbox.key\r\n }}\"\r\n [value]=\"checkbox.value\"\r\n (change)=\"onValueChange?.next(checkbox)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n >\r\n {{ checkbox.label }}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-radio-group\r\n class=\"input radio-section widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n appearance=\"outline\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <div [ngClass]=\"getDirection()\">\r\n @for (radio of widgetInstance.valueList; track radio) {\r\n <div class=\"radio-item-container\">\r\n @if (radio.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"radio-item-image\"\r\n [src]=\"radio.imageUrl\"\r\n />\r\n }\r\n <mat-radio-button\r\n class=\"selecatbleObject\"\r\n value=\"{{ radio.value }}\"\r\n [ngClass]=\"getDirection()\"\r\n (change)=\"onValueChange?.next(radio.value)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n >\r\n {{ radio.label }}\r\n </mat-radio-button>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n <div class=\"radio-icon\">\r\n @if (widgetInstance.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\r\n <div class=\"datePicker widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <lib-smart-month-picker\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (valueChange)=\"handleYearMonthPicked($event)\"\r\n ></lib-smart-month-picker>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div class=\"dateTimePickerContainer\">\r\n <mat-form-field\r\n class=\"input widgetContent date {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n #dateInput\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n [id]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onDatePickerBlur($event)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n @if (hasCreated) {\r\n <mat-form-field\r\n class=\"input widgetContent time\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n appearance=\"outline\"\r\n >\r\n <input\r\n #timeInput\r\n [formControlName]=\"widgetInstance.key + '-time'\"\r\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\r\n [id]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n (blur)=\"onTimePickerBlur($event)\"\r\n matInput\r\n />\r\n </mat-form-field>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}\r\n </mat-option>\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n multiple\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}</mat-option\r\n >\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\r\n <div\r\n class=\"label widgetContainer\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n >\r\n <div\r\n class=\"label-title labelContainer\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n >\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance.widgetDescription) {\r\n <p>{{ widgetInstance.widgetDescription }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <mat-slide-toggle\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (change)=\"onValueChange?.next($event)\"\r\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n >{{\r\n !widgetInstance.showLabel ? widgetInstance.label : \"\"\r\n }}</mat-slide-toggle\r\n ><span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} labelContainer {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"smartIndicator widgetContent\">\r\n <div\r\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n >\r\n @for (item of indicatorItems; track item; let i = $index) {\r\n <div\r\n class=\"indicatorItem\"\r\n [ngClass]=\"getIndicatorItemClass(i)\"\r\n ></div>\r\n }\r\n </div>\r\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n {{ getIndicatorStatusLabel() }}\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"widgetItemContainer\">\r\n <smart-voice-recorder\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-multi-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n (fileEvent)=\"executeUiAction($event.uiAction)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\r\n <div class=\"widgetContainer imageContainer\">\r\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance.imageProperties?.image) {\r\n <smart-icon\r\n [imageResource]=\"\r\n $safeNavigationMigration(widgetInstance.imageProperties?.image)\r\n \"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n } @else if (widgetInstance.value) {\r\n <smart-icon\r\n [(ngModel)]=\"widgetInstance.value\"\r\n [imageResource]=\"widgetInstance.value\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\r\n <div\r\n class=\"smartDiv\"\r\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\r\n [ngClass]=\"getNgClass()\"\r\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\r\n [ngStyle]=\"getStyle()\"\r\n (click)=\"onDivClick()\"\r\n ></div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\r\n <smart-html-widget\r\n [widgetInstance]=\"widgetInstance\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-html-widget>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\r\n <div class=\"widgetContainer\">\r\n <hr\r\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <button\r\n mat-button\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n [color]=\"\r\n $safeNavigationMigration(\r\n widgetInstance.uiActionDescriptor?.color\r\n )\r\n \"\r\n (click)=\"onButtonClicked(widgetInstance)\"\r\n >\r\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\r\n @if (widgetInstance.uiActionDescriptor?.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n } @else {\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.uiActionDescriptor?.title }}\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"POST\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"labelContainer {{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"widgetContent\">\r\n <ng-template #customComponent></ng-template>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <quill-editor\r\n #quillEditor\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [modules]=\"\r\n widgetInstance.isDisabled\r\n ? emptyQuillToolbar\r\n : widgetInstance.quillModules\r\n \"\r\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\r\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\r\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\r\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\r\n ></quill-editor>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint\r\n matSuffix\r\n align=\"end\"\r\n class=\"rich-text-editor-leeway-counter\"\r\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\r\n >\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <lib-sortable-widget\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n ></lib-sortable-widget>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <table class=\"matrixTable widgetContent\">\r\n <tr>\r\n <th></th>\r\n @for (option of widgetInstance.value.columns; track option) {\r\n <th class=\"optionLabel\">\r\n {{ option.displayValue }}\r\n </th>\r\n }\r\n </tr>\r\n @for (\r\n question of widgetInstance.value.rows;\r\n track question;\r\n let i = $index\r\n ) {\r\n <tr>\r\n <th class=\"questionLabel\">\r\n <label>{{ question.displayValue }}</label>\r\n </th>\r\n @for (\r\n option of widgetInstance.value.columns;\r\n track option;\r\n let j = $index\r\n ) {\r\n <td class=\"selectTd\">\r\n @if (!widgetInstance.isMultiple) {\r\n <mat-radio-group\r\n [formControlName]=\"\r\n widgetInstance.key + '.' + question.code\r\n \"\r\n [name]=\"'q' + i\"\r\n >\r\n <mat-radio-button [value]=\"option.code\">\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n @if (widgetInstance.isMultiple) {\r\n <div>\r\n <mat-checkbox\r\n [formControlName]=\"\r\n widgetInstance.key +\r\n '.data.' +\r\n question.code +\r\n '.' +\r\n option.code\r\n \"\r\n [value]=\"\r\n widgetInstance.value['data'][question.code][\r\n option.code\r\n ]\r\n \"\r\n [checked]=\"true\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n </td>\r\n }\r\n <br />\r\n @if (widgetInstance.button) {\r\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\r\n <smart-icon icon=\"close\"></smart-icon>\r\n </button>\r\n }\r\n </tr>\r\n }\r\n </table>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <youtube-player\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n videoId=\"{{ widgetInstance.videoId }}\"\r\n [width]=\"widgetInstance.width\"\r\n [height]=\"widgetInstance.height\"\r\n [startSeconds]=\"widgetInstance.startSeconds\"\r\n [endSeconds]=\"widgetInstance.endSeconds\"\r\n ></youtube-player>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"] }]
|
|
10986
|
+
], template: "<div class=\"container material\" [formGroup]=\"form()\">\r\n @if (\r\n widgetInstance.isVisible === undefined ? true : widgetInstance.isVisible\r\n ) {\r\n <div\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [class.sb4-widget-required]=\"isRequired()\"\r\n class=\"container\"\r\n >\r\n @if (widgetInstance.type === smartFormWidgetType.CONTAINER) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" [ngClass]=\"getDirection()\">\r\n @for (widget of visibleChildren; track widget) {\r\n <smartformwidget\r\n [form]=\"form()\"\r\n [widgetInstance]=\"widget\"\r\n class=\"container-item\"\r\n [ngClass]=\"widget.cssClass ?? ''\"\r\n [onBlur]=\"onBlur()\"\r\n [onValueChange]=\"onValueChange\"\r\n [sophisticatedValueChange]=\"sophisticatedValueChange()\"\r\n [blurSophisticatedValueChange]=\"blurSophisticatedValueChange()\"\r\n class=\"{{ widget.key }}\"\r\n [labelColor]=\"labelColor()\"\r\n ></smartformwidget>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD) {\r\n <div (capsLock)=\"capsOn = $event\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n @if (!widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [attr.inputmode]=\"\r\n widgetInstance.inputMode\r\n ? widgetInstance.inputMode.toLocaleLowerCase()\r\n : 'text'\r\n \"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n type=\"{{\r\n widgetInstance.isPassword\r\n ? hidePassword\r\n ? 'password'\r\n : 'text'\r\n : ''\r\n }}\"\r\n (keydown.enter)=\"onKeydown()\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n [mask]=\"widgetInstance.mask\"\r\n />\r\n }\r\n <!-- [mask]=\"widgetInstance.mask ?? ''\" -->\r\n @if (widgetInstance.selection) {\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n (click)=\"onValueChange?.next($event)\"\r\n type=\"{{ widgetInstance.isPassword ? 'password' : '' }}\"\r\n [matAutocomplete]=\"textFieldAuto\"\r\n (keydown.enter)=\"onKeydown()\"\r\n />\r\n }\r\n @if (widgetInstance.isPassword) {\r\n <button\r\n mat-icon-button\r\n matSuffix\r\n (click)=\"togglePasswordVisibility($event)\"\r\n >\r\n <mat-icon>{{\r\n hidePassword ? \"visibility_off\" : \"visibility\"\r\n }}</mat-icon>\r\n </button>\r\n }\r\n <mat-autocomplete #textFieldAuto=\"matAutocomplete\">\r\n @for (option of filteredOptions | async; track option) {\r\n <mat-option [value]=\"option.label\">\r\n <span\r\n [innerHTML]=\"option.label | highlight: toHighlight\"\r\n ></span>\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.capsLockWarning }}\r\n </span>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n @if (capsOn && widgetInstance.isPassword) {\r\n <smart-icon\r\n [icon]=\"\r\n widgetInstance.capsLockWarningIcon ?? 'keyboard_capslock'\r\n \"\r\n color=\"warn\"\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.icon && widgetInstance.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <div class=\"textFieldButtons\">\r\n @if (widgetInstance.textFieldProperties?.clearable) {\r\n <ui-action-button\r\n class=\"clearButton\"\r\n [addBasicClasses]=\"false\"\r\n [descriptor]=\"clearButtonDescriptor\"\r\n (actionClick)=\"clearField(widgetInstance.key)\"\r\n />\r\n }\r\n </div>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.textFieldButton.icon\"\r\n [color]=\"widgetInstance.textFieldButton.iconColor\"\r\n >\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_NUMBER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input textField widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [type]=\"'number'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [min]=\"widgetInstance.minValues ?? null\"\r\n [max]=\"widgetInstance.maxValues ?? null\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n <span matPrefix>\r\n {{ widgetInstance.prefix }}\r\n </span>\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (widgetInstance.icon) {\r\n <smart-icon [icon]=\"widgetInstance.icon\" matSuffix> </smart-icon>\r\n }\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (widgetInstance.textFieldButton) {\r\n <button\r\n matSuffix\r\n mat-button\r\n color=\"{{ widgetInstance.textFieldButton.color }}\"\r\n (click)=\"\r\n widgetInstance.textFieldButton.callback(widgetInstance)\r\n \"\r\n >\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().PRE &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n {{ widgetInstance.textFieldButton.label }}\r\n @if (\r\n widgetInstance.textFieldButton.iconPosition ===\r\n smartFormTextFieldButtonIconPosition().POST &&\r\n widgetInstance.textFieldButton.icon\r\n ) {\r\n <smart-icon [icon]=\"widgetInstance.textFieldButton.icon\">\r\n </smart-icon>\r\n }\r\n </button>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_CHIPS) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid #chipList aria-label=\"{{ widgetInstance.label }}\">\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip-row\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ value }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip-row>\r\n }\r\n <input\r\n #chipInput\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipList\"\r\n [matChipInputSeparatorKeyCodes]=\"separatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"addOnBlur\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n [matAutocomplete]=\"chipAuto\"\r\n (matChipInputTokenEnd)=\"add($event)\"\r\n (change)=\"handleBlurEvent($event)\"\r\n (input)=\"onValueChange?.next($event)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n <mat-autocomplete\r\n #chipAuto=\"matAutocomplete\"\r\n (optionSelected)=\"selected($event, widgetInstance)\"\r\n >\r\n @for (item of widgetInstance.valueList; track item) {\r\n <mat-option\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n [value]=\"item.value\"\r\n >\r\n {{ item.label }}\r\n </mat-option>\r\n }\r\n </mat-autocomplete>\r\n </mat-chip-grid>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_FIELD_LOOKUP) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-chip-grid\r\n #chipListLookup\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n >\r\n @for (value of widgetInstance.value; track value) {\r\n <mat-chip\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n (removed)=\"remove(value)\"\r\n >\r\n {{ getChipsValue(value) }}\r\n <button matChipRemove>\r\n <mat-icon>cancel</mat-icon>\r\n </button>\r\n </mat-chip>\r\n }\r\n <input\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matChipInputFor]=\"chipListLookup\"\r\n [matChipInputSeparatorKeyCodes]=\"emptySeparatorKeysCodes\"\r\n [matChipInputAddOnBlur]=\"false\"\r\n [readonly]=\"true\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n />\r\n </mat-chip-grid>\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TEXT_BOX) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <textarea\r\n class=\"sb4-textarea\"\r\n #sb4Textarea\r\n cols=\"30\"\r\n cdkTextareaAutosize\r\n [cdkAutosizeMinRows]=\"\r\n widgetInstance.textBoxProperties?.minRows ?? 1\r\n \"\r\n [cdkAutosizeMaxRows]=\"\r\n widgetInstance.textBoxProperties?.maxRows ?? undefined\r\n \"\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'string'\"\r\n [value]=\"widgetInstance.value\"\r\n [readonly]=\"widgetInstance.isReadonly\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent($event)\"\r\n maxlength=\"{{ widgetInstance.maxLength }}\"\r\n ></textarea>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint matSuffix align=\"end\">{{\r\n widgetInstance.maxLength -\r\n form().controls[widgetInstance.key].value.length\r\n }}</mat-hint>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance.hint ||\r\n widgetInstance.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n <div class=\"checkbox-item-container\">\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n (change)=\"onValueChange?.next(widgetInstance)\"\r\n (change)=\"onBlur()?.next(widgetInstance)\"\r\n >\r\n {{ widgetInstance.label }}\r\n </mat-checkbox>\r\n </div>\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.CHECK_BOX_2) {\r\n <div [attr.data-testid]=\"widgetInstance.key\" class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"input checkbox widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <section class=\"checkbox-section\" [ngClass]=\"getDirection()\">\r\n @for (\r\n checkbox of widgetInstance.valueList;\r\n track checkbox;\r\n let i = $index\r\n ) {\r\n <div class=\"checkbox-item-container\">\r\n @if (checkbox.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"checkbox-item-image\"\r\n [src]=\"checkbox.imageUrl\"\r\n />\r\n }\r\n <mat-checkbox\r\n class=\"selecatbleObject\"\r\n formControlName=\"{{\r\n widgetInstance.key + '.' + checkbox.key\r\n }}\"\r\n [value]=\"checkbox.value\"\r\n (change)=\"onValueChange?.next(checkbox)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n >\r\n {{ checkbox.label }}\r\n </mat-checkbox>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </section>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RADIO_BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-radio-group\r\n class=\"input radio-section widgetContent {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n aria-label=\"{{ widgetInstance.label }}\"\r\n appearance=\"outline\"\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label class=\"radioLabel\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <div [ngClass]=\"getDirection()\">\r\n @for (radio of widgetInstance.valueList; track radio) {\r\n <div class=\"radio-item-container\">\r\n @if (radio.imageUrl) {\r\n <img\r\n title=\"{{ widgetInstance.key }}\"\r\n class=\"radio-item-image\"\r\n [src]=\"radio.imageUrl\"\r\n />\r\n }\r\n <mat-radio-button\r\n class=\"selecatbleObject\"\r\n value=\"{{ radio.value }}\"\r\n [ngClass]=\"getDirection()\"\r\n (change)=\"onValueChange?.next(radio.value)\"\r\n [disabled]=\"widgetInstance.isDisabled\"\r\n >\r\n {{ radio.label }}\r\n </mat-radio-button>\r\n </div>\r\n }\r\n <div class=\"radio-error\">\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n <div class=\"radio-icon\">\r\n @if (widgetInstance.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n >\r\n </smart-icon>\r\n }\r\n </div>\r\n </div>\r\n </mat-radio-group>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_PICKER) {\r\n <div class=\"datePicker widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent date {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MONTH_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div class=\"{{ labelColor() }} smart-form-widget-label\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <lib-smart-month-picker\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n [control]=\"form().controls[widgetInstance.key]\"\r\n (valueChange)=\"handleYearMonthPicked($event)\"\r\n ></lib-smart-month-picker>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DATE_TIME_PICKER) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div class=\"dateTimePickerContainer\">\r\n <mat-form-field\r\n class=\"input widgetContent date {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-datepicker-toggle\r\n matSuffix\r\n [for]=\"picker\"\r\n ></mat-datepicker-toggle>\r\n <mat-datepicker\r\n #picker\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n ></mat-datepicker>\r\n <input\r\n #dateInput\r\n matInput\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [min]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.minDate ?? null\r\n )\r\n \"\r\n [max]=\"\r\n convertToLocalDateTime(\r\n widgetInstance.dateFieldProperties?.maxDate ?? null\r\n )\r\n \"\r\n [id]=\"widgetInstance.key\"\r\n [value]=\"widgetInstance.value\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n [matDatepicker]=\"picker\"\r\n (blur)=\"onDatePickerBlur($event)\"\r\n (dateChange)=\"onValueChange?.next(widgetInstance)\"\r\n [matDatepickerFilter]=\"widgetInstance.filter ?? dateFilter\"\r\n />\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <mat-hint>\r\n {{ widgetInstance.dateFormatHint }}\r\n </mat-hint>\r\n </mat-form-field>\r\n @if (hasCreated) {\r\n <mat-form-field\r\n class=\"input widgetContent time\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n appearance=\"outline\"\r\n >\r\n <input\r\n #timeInput\r\n [formControlName]=\"widgetInstance.key + '-time'\"\r\n [attr.data-testid]=\"widgetInstance.key + '-time'\"\r\n [id]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n (blur)=\"onTimePickerBlur($event)\"\r\n matInput\r\n />\r\n </mat-form-field>\r\n }\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <div\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </div>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}\r\n </mat-option>\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n <span matSuffix>\r\n {{ widgetInstance.suffix }}\r\n </span>\r\n @if (\r\n widgetInstance.icon &&\r\n (!widgetInstance.iconPosition ||\r\n widgetInstance.iconPosition === \"POST\")\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.icon\"\r\n [color]=\"widgetInstance.iconColor ?? 'primary'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SELECT_MULTIPLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <mat-select\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n multiple\r\n (selectionChange)=\"onValueChange?.next($event.value)\"\r\n (closed)=\"handleBlurEvent(widgetInstance)\"\r\n [disabled]=\"widgetInstance.isDisabled!\"\r\n [compareWith]=\"\r\n widgetInstance.compareWith == null\r\n ? compareItems\r\n : widgetInstance.compareWith\r\n \"\r\n placeholder=\"{{\r\n widgetInstance.placeholder ? widgetInstance.placeholder : ''\r\n }}\"\r\n >\r\n @for (option of widgetInstance.valueList; track option) {\r\n <div>\r\n @if (option.type === getType().ITEM_GROUP) {\r\n <mat-optgroup\r\n [label]=\"option.label\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @for (\r\n innerOption of option.valueList;\r\n track innerOption\r\n ) {\r\n <mat-option\r\n [value]=\"innerOption.value\"\r\n [disabled]=\"innerOption.isDisabled\"\r\n >\r\n @if (innerOption.icon) {\r\n <smart-icon\r\n [icon]=\"innerOption.icon\"\r\n [color]=\"innerOption.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ innerOption.label }}</mat-option\r\n >\r\n }\r\n </mat-optgroup>\r\n }\r\n @if (option.type === getType().ITEM) {\r\n <mat-option\r\n [value]=\"option.value\"\r\n [disabled]=\"option.isDisabled\"\r\n >\r\n @if (option.icon) {\r\n <smart-icon\r\n [icon]=\"option.icon\"\r\n [color]=\"option.iconColor\"\r\n ></smart-icon>\r\n }\r\n {{ option.label }}</mat-option\r\n >\r\n }\r\n </div>\r\n }\r\n </mat-select>\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n @if (isToolbarPresent()) {\r\n <smart-ui-action-toolbar\r\n class=\"textFieldToolbar\"\r\n matSuffix\r\n [id]=\"widgetInstance.toolbarId\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n </mat-form-field>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.LABEL) {\r\n <div\r\n class=\"label widgetContainer\"\r\n [ngStyle]=\"{ width: widgetInstance.minWidth + 'px' }\"\r\n >\r\n <div\r\n class=\"label-title labelContainer\"\r\n [ngClass]=\"widgetInstance.cssClass ?? ''\"\r\n >\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssClass ?? ''\r\n }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (widgetInstance.widgetDescription) {\r\n <p>{{ widgetInstance.widgetDescription }}</p>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TIME) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <mat-form-field\r\n class=\"input widgetContent time {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n appearance=\"outline\"\r\n >\r\n @if (!widgetInstance.showLabel) {\r\n <mat-label\r\n class=\"label\"\r\n [ngClass]=\"widgetInstance.cssLabelClass ?? ''\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </mat-label>\r\n }\r\n <input\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [type]=\"'time'\"\r\n placeholder=\"{{ widgetInstance.placeholder }}\"\r\n matInput\r\n (change)=\"handleBlurEvent(widgetInstance)\"\r\n />\r\n <span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n matSuffix\r\n ></smart-icon>\r\n }\r\n </mat-form-field>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.TOGGLE) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <div class=\"labelContainer\">\r\n <h4\r\n class=\"{{ labelColor() }} smart-form-widget-label {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <mat-slide-toggle\r\n formControlName=\"{{ widgetInstance.key }}\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n (change)=\"onValueChange?.next($event)\"\r\n [labelPosition]=\"widgetInstance.toggleLabelPosition ?? 'before'\"\r\n >{{\r\n !widgetInstance.showLabel ? widgetInstance.label : \"\"\r\n }}</mat-slide-toggle\r\n ><span class=\"mat-error\">\r\n {{ widgetInstance.error }}\r\n </span>\r\n @if (widgetInstance.error && widgetInstance.errorIcon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.errorIcon\"\r\n [color]=\"widgetInstance.errorIconColor ?? 'warn'\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.INDICATOR) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} labelContainer {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"smartIndicator widgetContent\">\r\n <div\r\n class=\"indicatorItems {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n >\r\n @for (item of indicatorItems; track item; let i = $index) {\r\n <div\r\n class=\"indicatorItem\"\r\n [ngClass]=\"getIndicatorItemClass(i)\"\r\n ></div>\r\n }\r\n </div>\r\n <p [ngClass]=\"getIndicatorStatusLabelColor()\">\r\n {{ getIndicatorStatusLabel() }}\r\n </p>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RECORDING_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"widgetItemContainer\">\r\n <smart-voice-recorder\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MULTI_FILE_UPLOADER) {\r\n <div class=\"widgetContainer\">\r\n <smart-multi-file-editor\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n (uploadFilesEvent)=\"upload($event)\"\r\n (fileEvent)=\"executeUiAction($event.uiAction)\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.IMAGE) {\r\n <div class=\"widgetContainer imageContainer\">\r\n @if (widgetInstance.showLabel && getWidgetLabel(widgetInstance)) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (widgetInstance.imageProperties?.image) {\r\n <smart-icon\r\n [imageResource]=\"\r\n $safeNavigationMigration(widgetInstance.imageProperties?.image)\r\n \"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n } @else if (widgetInstance.value) {\r\n <smart-icon\r\n [(ngModel)]=\"widgetInstance.value\"\r\n [imageResource]=\"widgetInstance.value\"\r\n class=\"widgetContent {{ widgetInstance.imageCss ?? '' }}\"\r\n alt=\"Image\"\r\n title=\"{{ widgetInstance.key }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-icon>\r\n }\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIV) {\r\n <div\r\n class=\"smartDiv\"\r\n [innerHTML]=\"sanitizeHtml(getWidgetLabel(widgetInstance))\"\r\n [ngClass]=\"getNgClass()\"\r\n [class.clickable]=\"!!widgetInstance.divProperties?.onClick\"\r\n [ngStyle]=\"getStyle()\"\r\n (click)=\"onDivClick()\"\r\n ></div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.HTML) {\r\n <smart-html-widget\r\n [widgetInstance]=\"widgetInstance\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></smart-html-widget>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SVG) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [innerHTML]=\"sanitizeHtml(widgetInstance.value)\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n ></div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.DIVIDER) {\r\n <div class=\"widgetContainer\">\r\n <hr\r\n class=\"smartDivider {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n />\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.BUTTON) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"labelContainer {{ labelColor() }} {{\r\n widgetInstance.cssLabelClass ?? ''\r\n }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div\r\n class=\"widgetContent {{ widgetInstance.cssClass ?? '' }}\"\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n >\r\n <button\r\n mat-button\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [ngClass]=\"getButtonType(widgetInstance.uiActionDescriptor)\"\r\n [color]=\"\r\n $safeNavigationMigration(\r\n widgetInstance.uiActionDescriptor?.color\r\n )\r\n \"\r\n (click)=\"onButtonClicked(widgetInstance)\"\r\n >\r\n @if (isOnlyIcon(widgetInstance.uiActionDescriptor)) {\r\n @if (widgetInstance.uiActionDescriptor?.icon) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n } @else {\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"PRE\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n {{ widgetInstance.uiActionDescriptor?.title }}\r\n @if (\r\n widgetInstance.uiActionDescriptor?.icon &&\r\n widgetInstance.uiActionDescriptor?.iconPosition === \"POST\"\r\n ) {\r\n <smart-icon\r\n [icon]=\"widgetInstance.uiActionDescriptor!.icon!\"\r\n [color]=\"\r\n widgetInstance.uiActionDescriptor?.iconColor ??\r\n widgetInstance.uiActionDescriptor?.color\r\n \"\r\n ></smart-icon>\r\n }\r\n }\r\n </button>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.COMPONENT) {\r\n <div class=\"widgetContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"labelContainer {{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n <div class=\"widgetContent\">\r\n <ng-template #customComponent></ng-template>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.RICH_TEXT) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <quill-editor\r\n #quillEditor\r\n [formControlName]=\"widgetInstance.key\"\r\n [id]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [modules]=\"\r\n widgetInstance.isDisabled\r\n ? emptyQuillToolbar\r\n : widgetInstance.quillModules\r\n \"\r\n [placeholder]=\"widgetInstance.placeholder ?? ''\"\r\n [readOnly]=\"widgetInstance.isReadonly ?? false\"\r\n [maxLength]=\"widgetInstance.maxLength ?? 0\"\r\n (onContentChanged)=\"onRichTextEditorContentChanged($event)\"\r\n ></quill-editor>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n @if (\r\n widgetInstance.showCharacterLimitSuffix &&\r\n widgetInstance.maxLength\r\n ) {\r\n <mat-hint\r\n matSuffix\r\n align=\"end\"\r\n class=\"rich-text-editor-leeway-counter\"\r\n >{{ getRichTextEditorLengthLeeway() }}</mat-hint\r\n >\r\n }\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.SORTABLE) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <div class=\"widgetContent\">\r\n <lib-sortable-widget\r\n [formControlName]=\"widgetInstance.key\"\r\n [attr.data-testid]=\"widgetInstance.key\"\r\n [widgetInstance]=\"widgetInstance\"\r\n ></lib-sortable-widget>\r\n </div>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.MATRIX) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4 class=\"{{ labelColor() }}\">\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <table class=\"matrixTable widgetContent\">\r\n <tr>\r\n <th></th>\r\n @for (option of widgetInstance.value.columns; track option) {\r\n <th class=\"optionLabel\">\r\n {{ option.displayValue }}\r\n </th>\r\n }\r\n </tr>\r\n @for (\r\n question of widgetInstance.value.rows;\r\n track question;\r\n let i = $index\r\n ) {\r\n <tr>\r\n <th class=\"questionLabel\">\r\n <label>{{ question.displayValue }}</label>\r\n </th>\r\n @for (\r\n option of widgetInstance.value.columns;\r\n track option;\r\n let j = $index\r\n ) {\r\n <td class=\"selectTd\">\r\n @if (!widgetInstance.isMultiple) {\r\n <mat-radio-group\r\n [formControlName]=\"\r\n widgetInstance.key + '.' + question.code\r\n \"\r\n [name]=\"'q' + i\"\r\n >\r\n <mat-radio-button [value]=\"option.code\">\r\n </mat-radio-button>\r\n </mat-radio-group>\r\n }\r\n @if (widgetInstance.isMultiple) {\r\n <div>\r\n <mat-checkbox\r\n [formControlName]=\"\r\n widgetInstance.key +\r\n '.data.' +\r\n question.code +\r\n '.' +\r\n option.code\r\n \"\r\n [value]=\"\r\n widgetInstance.value['data'][question.code][\r\n option.code\r\n ]\r\n \"\r\n [checked]=\"true\"\r\n ></mat-checkbox>\r\n </div>\r\n }\r\n </td>\r\n }\r\n <br />\r\n @if (widgetInstance.button) {\r\n <button mat-icon-button (click)=\"removeMatrixRow(question)\">\r\n <smart-icon icon=\"close\"></smart-icon>\r\n </button>\r\n }\r\n </tr>\r\n }\r\n </table>\r\n </div>\r\n }\r\n @if (widgetInstance.type === smartFormWidgetType.YOUTUBE_PLAYER) {\r\n <div class=\"widgetContainer\">\r\n <div class=\"labelContainer\">\r\n @if (widgetInstance.showLabel) {\r\n <h4\r\n class=\"{{ labelColor() }} {{ widgetInstance.cssLabelClass }}\"\r\n [ngClass]=\"getLabelNgClass()\"\r\n [ngStyle]=\"getLabelStyle()\"\r\n >\r\n {{ getWidgetLabel(widgetInstance) }}\r\n </h4>\r\n }\r\n @if (\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.LABEL\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n <youtube-player\r\n [ngClass]=\"getNgClass()\"\r\n [ngStyle]=\"getStyle()\"\r\n videoId=\"{{ widgetInstance.videoId }}\"\r\n [width]=\"widgetInstance.width\"\r\n [height]=\"widgetInstance.height\"\r\n [startSeconds]=\"widgetInstance.startSeconds\"\r\n [endSeconds]=\"widgetInstance.endSeconds\"\r\n ></youtube-player>\r\n @if (\r\n !widgetInstance?.hint ||\r\n widgetInstance?.hint?.position === SmartWidgetHintPosition.INPUT\r\n ) {\r\n <mat-hint>{{ widgetInstance.hint?.text }}</mat-hint>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".ql-container{box-sizing:border-box;font-family:Helvetica,Arial,sans-serif;font-size:13px;height:100%;margin:0;position:relative}.ql-container.ql-disabled .ql-tooltip{visibility:hidden}.ql-container:not(.ql-disabled) li[data-list=checked]>.ql-ui,.ql-container:not(.ql-disabled) li[data-list=unchecked]>.ql-ui{cursor:pointer}.ql-clipboard{left:-100000px;height:1px;overflow-y:hidden;position:absolute;top:50%}.ql-clipboard p{margin:0;padding:0}.ql-editor{box-sizing:border-box;counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;line-height:1.42;height:100%;outline:none;overflow-y:auto;padding:12px 15px;tab-size:4;-moz-tab-size:4;text-align:left;white-space:pre-wrap;word-wrap:break-word}.ql-editor>*{cursor:text}.ql-editor p,.ql-editor ol,.ql-editor pre,.ql-editor blockquote,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{margin:0;padding:0}@supports (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-set:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor p,.ql-editor h1,.ql-editor h2,.ql-editor h3,.ql-editor h4,.ql-editor h5,.ql-editor h6{counter-reset:list-0 list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor table{border-collapse:collapse}.ql-editor td{border:1px solid #000;padding:2px 5px}.ql-editor ol{padding-left:1.5em}.ql-editor li{list-style-type:none;padding-left:1.5em;position:relative}.ql-editor li>.ql-ui:before{display:inline-block;margin-left:-1.5em;margin-right:.3em;text-align:right;white-space:nowrap;width:1.2em}.ql-editor li[data-list=checked]>.ql-ui,.ql-editor li[data-list=unchecked]>.ql-ui{color:#777}.ql-editor li[data-list=bullet]>.ql-ui:before{content:\"\\2022\"}.ql-editor li[data-list=checked]>.ql-ui:before{content:\"\\2611\"}.ql-editor li[data-list=unchecked]>.ql-ui:before{content:\"\\2610\"}@supports (counter-set:none){.ql-editor li[data-list]{counter-set:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list]{counter-reset:list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered]{counter-increment:list-0}.ql-editor li[data-list=ordered]>.ql-ui:before{content:counter(list-0,decimal) \". \"}.ql-editor li[data-list=ordered].ql-indent-1{counter-increment:list-1}.ql-editor li[data-list=ordered].ql-indent-1>.ql-ui:before{content:counter(list-1,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-set:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-1{counter-reset:list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-2{counter-increment:list-2}.ql-editor li[data-list=ordered].ql-indent-2>.ql-ui:before{content:counter(list-2,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-set:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-2{counter-reset:list-3 list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-3{counter-increment:list-3}.ql-editor li[data-list=ordered].ql-indent-3>.ql-ui:before{content:counter(list-3,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-set:list-4 list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-3{counter-reset:list-4 list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-4{counter-increment:list-4}.ql-editor li[data-list=ordered].ql-indent-4>.ql-ui:before{content:counter(list-4,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-set:list-5 list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-4{counter-reset:list-5 list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-5{counter-increment:list-5}.ql-editor li[data-list=ordered].ql-indent-5>.ql-ui:before{content:counter(list-5,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-set:list-6 list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-5{counter-reset:list-6 list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-6{counter-increment:list-6}.ql-editor li[data-list=ordered].ql-indent-6>.ql-ui:before{content:counter(list-6,decimal) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-set:list-7 list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-6{counter-reset:list-7 list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-7{counter-increment:list-7}.ql-editor li[data-list=ordered].ql-indent-7>.ql-ui:before{content:counter(list-7,lower-alpha) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-set:list-8 list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-7{counter-reset:list-8 list-9}}.ql-editor li[data-list=ordered].ql-indent-8{counter-increment:list-8}.ql-editor li[data-list=ordered].ql-indent-8>.ql-ui:before{content:counter(list-8,lower-roman) \". \"}@supports (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-set:list-9}}@supports not (counter-set:none){.ql-editor li[data-list].ql-indent-8{counter-reset:list-9}}.ql-editor li[data-list=ordered].ql-indent-9{counter-increment:list-9}.ql-editor li[data-list=ordered].ql-indent-9>.ql-ui:before{content:counter(list-9,decimal) \". \"}.ql-editor .ql-indent-1:not(.ql-direction-rtl){padding-left:3em}.ql-editor li.ql-indent-1:not(.ql-direction-rtl){padding-left:4.5em}.ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:3em}.ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right{padding-right:4.5em}.ql-editor .ql-indent-2:not(.ql-direction-rtl){padding-left:6em}.ql-editor li.ql-indent-2:not(.ql-direction-rtl){padding-left:7.5em}.ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:6em}.ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right{padding-right:7.5em}.ql-editor .ql-indent-3:not(.ql-direction-rtl){padding-left:9em}.ql-editor li.ql-indent-3:not(.ql-direction-rtl){padding-left:10.5em}.ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:9em}.ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right{padding-right:10.5em}.ql-editor .ql-indent-4:not(.ql-direction-rtl){padding-left:12em}.ql-editor li.ql-indent-4:not(.ql-direction-rtl){padding-left:13.5em}.ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:12em}.ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right{padding-right:13.5em}.ql-editor .ql-indent-5:not(.ql-direction-rtl){padding-left:15em}.ql-editor li.ql-indent-5:not(.ql-direction-rtl){padding-left:16.5em}.ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:15em}.ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right{padding-right:16.5em}.ql-editor .ql-indent-6:not(.ql-direction-rtl){padding-left:18em}.ql-editor li.ql-indent-6:not(.ql-direction-rtl){padding-left:19.5em}.ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:18em}.ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right{padding-right:19.5em}.ql-editor .ql-indent-7:not(.ql-direction-rtl){padding-left:21em}.ql-editor li.ql-indent-7:not(.ql-direction-rtl){padding-left:22.5em}.ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:21em}.ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right{padding-right:22.5em}.ql-editor .ql-indent-8:not(.ql-direction-rtl){padding-left:24em}.ql-editor li.ql-indent-8:not(.ql-direction-rtl){padding-left:25.5em}.ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:24em}.ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right{padding-right:25.5em}.ql-editor .ql-indent-9:not(.ql-direction-rtl){padding-left:27em}.ql-editor li.ql-indent-9:not(.ql-direction-rtl){padding-left:28.5em}.ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:27em}.ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right{padding-right:28.5em}.ql-editor li.ql-direction-rtl{padding-right:1.5em}.ql-editor li.ql-direction-rtl>.ql-ui:before{margin-left:.3em;margin-right:-1.5em;text-align:left}.ql-editor table{table-layout:fixed;width:100%}.ql-editor table td{outline:none}.ql-editor .ql-code-block-container{font-family:monospace}.ql-editor .ql-video{display:block;max-width:100%}.ql-editor .ql-video.ql-align-center{margin:0 auto}.ql-editor .ql-video.ql-align-right{margin:0 0 0 auto}.ql-editor .ql-bg-black{background-color:#000}.ql-editor .ql-bg-red{background-color:#e60000}.ql-editor .ql-bg-orange{background-color:#f90}.ql-editor .ql-bg-yellow{background-color:#ff0}.ql-editor .ql-bg-green{background-color:#008a00}.ql-editor .ql-bg-blue{background-color:#06c}.ql-editor .ql-bg-purple{background-color:#93f}.ql-editor .ql-color-white{color:#fff}.ql-editor .ql-color-red{color:#e60000}.ql-editor .ql-color-orange{color:#f90}.ql-editor .ql-color-yellow{color:#ff0}.ql-editor .ql-color-green{color:#008a00}.ql-editor .ql-color-blue{color:#06c}.ql-editor .ql-color-purple{color:#93f}.ql-editor .ql-font-serif{font-family:Georgia,Times New Roman,serif}.ql-editor .ql-font-monospace{font-family:Monaco,Courier New,monospace}.ql-editor .ql-size-small{font-size:.75em}.ql-editor .ql-size-large{font-size:1.5em}.ql-editor .ql-size-huge{font-size:2.5em}.ql-editor .ql-direction-rtl{direction:rtl;text-align:inherit}.ql-editor .ql-align-center{text-align:center}.ql-editor .ql-align-justify{text-align:justify}.ql-editor .ql-align-right{text-align:right}.ql-editor .ql-ui{position:absolute}.ql-editor.ql-blank:before{color:#0009;content:attr(data-placeholder);font-style:italic;left:15px;pointer-events:none;position:absolute;right:15px}.ql-snow.ql-toolbar:after,.ql-snow .ql-toolbar:after{clear:both;content:\"\";display:table}.ql-snow.ql-toolbar button,.ql-snow .ql-toolbar button{background:none;border:none;cursor:pointer;display:inline-block;float:left;height:24px;padding:3px 5px;width:28px}.ql-snow.ql-toolbar button svg,.ql-snow .ql-toolbar button svg{float:left;height:100%}.ql-snow.ql-toolbar button:active:hover,.ql-snow .ql-toolbar button:active:hover{outline:none}.ql-snow.ql-toolbar input.ql-image[type=file],.ql-snow .ql-toolbar input.ql-image[type=file]{display:none}.ql-snow.ql-toolbar button:hover,.ql-snow .ql-toolbar button:hover,.ql-snow.ql-toolbar button:focus,.ql-snow .ql-toolbar button:focus,.ql-snow.ql-toolbar button.ql-active,.ql-snow .ql-toolbar button.ql-active,.ql-snow.ql-toolbar .ql-picker-label:hover,.ql-snow .ql-toolbar .ql-picker-label:hover,.ql-snow.ql-toolbar .ql-picker-label.ql-active,.ql-snow .ql-toolbar .ql-picker-label.ql-active,.ql-snow.ql-toolbar .ql-picker-item:hover,.ql-snow .ql-toolbar .ql-picker-item:hover,.ql-snow.ql-toolbar .ql-picker-item.ql-selected,.ql-snow .ql-toolbar .ql-picker-item.ql-selected{color:#06c}.ql-snow.ql-toolbar button:hover .ql-fill,.ql-snow .ql-toolbar button:hover .ql-fill,.ql-snow.ql-toolbar button:focus .ql-fill,.ql-snow .ql-toolbar button:focus .ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill,.ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill,.ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill{fill:#06c}.ql-snow.ql-toolbar button:hover .ql-stroke,.ql-snow .ql-toolbar button:hover .ql-stroke,.ql-snow.ql-toolbar button:focus .ql-stroke,.ql-snow .ql-toolbar button:focus .ql-stroke,.ql-snow.ql-toolbar button.ql-active .ql-stroke,.ql-snow .ql-toolbar button.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke,.ql-snow.ql-toolbar button:hover .ql-stroke-miter,.ql-snow .ql-toolbar button:hover .ql-stroke-miter,.ql-snow.ql-toolbar button:focus .ql-stroke-miter,.ql-snow .ql-toolbar button:focus .ql-stroke-miter,.ql-snow.ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar button.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter,.ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter,.ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter{stroke:#06c}@media(pointer:coarse){.ql-snow.ql-toolbar button:hover:not(.ql-active),.ql-snow .ql-toolbar button:hover:not(.ql-active){color:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-fill,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke.ql-fill{fill:#444}.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke,.ql-snow.ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter,.ql-snow .ql-toolbar button:hover:not(.ql-active) .ql-stroke-miter{stroke:#444}}.ql-snow,.ql-snow *{box-sizing:border-box}.ql-snow .ql-hidden{display:none}.ql-snow .ql-out-bottom,.ql-snow .ql-out-top{visibility:hidden}.ql-snow .ql-tooltip{position:absolute;transform:translateY(10px)}.ql-snow .ql-tooltip a{cursor:pointer;text-decoration:none}.ql-snow .ql-tooltip.ql-flip{transform:translateY(-10px)}.ql-snow .ql-formats{display:inline-block;vertical-align:middle}.ql-snow .ql-formats:after{clear:both;content:\"\";display:table}.ql-snow .ql-stroke{fill:none;stroke:#444;stroke-linecap:round;stroke-linejoin:round;stroke-width:2}.ql-snow .ql-stroke-miter{fill:none;stroke:#444;stroke-miterlimit:10;stroke-width:2}.ql-snow .ql-fill,.ql-snow .ql-stroke.ql-fill{fill:#444}.ql-snow .ql-empty{fill:none}.ql-snow .ql-even{fill-rule:evenodd}.ql-snow .ql-thin,.ql-snow .ql-stroke.ql-thin{stroke-width:1}.ql-snow .ql-transparent{opacity:.4}.ql-snow .ql-direction svg:last-child{display:none}.ql-snow .ql-direction.ql-active svg:last-child{display:inline}.ql-snow .ql-direction.ql-active svg:first-child{display:none}.ql-snow .ql-editor h1{font-size:2em}.ql-snow .ql-editor h2{font-size:1.5em}.ql-snow .ql-editor h3{font-size:1.17em}.ql-snow .ql-editor h4{font-size:1em}.ql-snow .ql-editor h5{font-size:.83em}.ql-snow .ql-editor h6{font-size:.67em}.ql-snow .ql-editor a{text-decoration:underline}.ql-snow .ql-editor blockquote{border-left:4px solid #ccc;margin-bottom:5px;margin-top:5px;padding-left:16px}.ql-snow .ql-editor code,.ql-snow .ql-editor .ql-code-block-container{background-color:#f0f0f0;border-radius:3px}.ql-snow .ql-editor .ql-code-block-container{margin-bottom:5px;margin-top:5px;padding:5px 10px}.ql-snow .ql-editor code{font-size:85%;padding:2px 4px}.ql-snow .ql-editor .ql-code-block-container{background-color:#23241f;color:#f8f8f2;overflow:visible}.ql-snow .ql-editor img{max-width:100%}.ql-snow .ql-picker{color:#444;display:inline-block;float:left;font-size:14px;font-weight:500;height:24px;position:relative;vertical-align:middle}.ql-snow .ql-picker-label{cursor:pointer;display:inline-block;height:100%;padding-left:8px;padding-right:2px;position:relative;width:100%}.ql-snow .ql-picker-label:before{display:inline-block;line-height:22px}.ql-snow .ql-picker-options{background-color:#fff;display:none;min-width:100%;padding:4px 8px;position:absolute;white-space:nowrap}.ql-snow .ql-picker-options .ql-picker-item{cursor:pointer;display:block;padding-bottom:5px;padding-top:5px}.ql-snow .ql-picker.ql-expanded .ql-picker-label{color:#ccc;z-index:2}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-fill{fill:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-label .ql-stroke{stroke:#ccc}.ql-snow .ql-picker.ql-expanded .ql-picker-options{display:block;margin-top:-1px;top:100%;z-index:1}.ql-snow .ql-color-picker,.ql-snow .ql-icon-picker{width:28px}.ql-snow .ql-color-picker .ql-picker-label,.ql-snow .ql-icon-picker .ql-picker-label{padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-label svg,.ql-snow .ql-icon-picker .ql-picker-label svg{right:4px}.ql-snow .ql-icon-picker .ql-picker-options{padding:4px 0}.ql-snow .ql-icon-picker .ql-picker-item{height:24px;width:24px;padding:2px 4px}.ql-snow .ql-color-picker .ql-picker-options{padding:3px 5px;width:152px}.ql-snow .ql-color-picker .ql-picker-item{border:1px solid transparent;float:left;height:16px;margin:2px;padding:0;width:16px}.ql-snow .ql-picker:not(.ql-color-picker):not(.ql-icon-picker) svg{position:absolute;margin-top:-9px;right:0;top:50%;width:18px}.ql-snow .ql-picker.ql-header .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-label[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-label]:not([data-label=\"\"]):before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-label]:not([data-label=\"\"]):before{content:attr(data-label)}.ql-snow .ql-picker.ql-header{width:98px}.ql-snow .ql-picker.ql-header .ql-picker-label:before,.ql-snow .ql-picker.ql-header .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"1\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{content:\"Heading 1\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"2\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{content:\"Heading 2\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"3\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{content:\"Heading 3\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"4\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{content:\"Heading 4\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"5\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{content:\"Heading 5\"}.ql-snow .ql-picker.ql-header .ql-picker-label[data-value=\"6\"]:before,.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{content:\"Heading 6\"}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"1\"]:before{font-size:2em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"2\"]:before{font-size:1.5em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"3\"]:before{font-size:1.17em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"4\"]:before{font-size:1em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"5\"]:before{font-size:.83em}.ql-snow .ql-picker.ql-header .ql-picker-item[data-value=\"6\"]:before{font-size:.67em}.ql-snow .ql-picker.ql-font{width:108px}.ql-snow .ql-picker.ql-font .ql-picker-label:before,.ql-snow .ql-picker.ql-font .ql-picker-item:before{content:\"Sans Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=serif]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{content:\"Serif\"}.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=monospace]:before,.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{content:\"Monospace\"}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=serif]:before{font-family:Georgia,Times New Roman,serif}.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=monospace]:before{font-family:Monaco,Courier New,monospace}.ql-snow .ql-picker.ql-size{width:98px}.ql-snow .ql-picker.ql-size .ql-picker-label:before,.ql-snow .ql-picker.ql-size .ql-picker-item:before{content:\"Normal\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=small]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{content:\"Small\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=large]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{content:\"Large\"}.ql-snow .ql-picker.ql-size .ql-picker-label[data-value=huge]:before,.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{content:\"Huge\"}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=small]:before{font-size:10px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=large]:before{font-size:18px}.ql-snow .ql-picker.ql-size .ql-picker-item[data-value=huge]:before{font-size:32px}.ql-snow .ql-color-picker.ql-background .ql-picker-item{background-color:#fff}.ql-snow .ql-color-picker.ql-color .ql-picker-item{background-color:#000}.ql-code-block-container{position:relative}.ql-code-block-container .ql-ui{right:5px;top:5px}.ql-toolbar.ql-snow{border:1px solid #ccc;box-sizing:border-box;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;padding:8px}.ql-toolbar.ql-snow .ql-formats{margin-right:15px}.ql-toolbar.ql-snow .ql-picker-label{border:1px solid transparent}.ql-toolbar.ql-snow .ql-picker-options{border:1px solid transparent;box-shadow:#0003 0 2px 8px}.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-label,.ql-toolbar.ql-snow .ql-picker.ql-expanded .ql-picker-options{border-color:#ccc}.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item.ql-selected,.ql-toolbar.ql-snow .ql-color-picker .ql-picker-item:hover{border-color:#000}.ql-toolbar.ql-snow+.ql-container.ql-snow{border-top:0}.ql-snow .ql-tooltip{background-color:#fff;border:1px solid #ccc;box-shadow:0 0 5px #ddd;color:#444;padding:5px 12px;white-space:nowrap}.ql-snow .ql-tooltip:before{content:\"Visit URL:\";line-height:26px;margin-right:8px}.ql-snow .ql-tooltip input[type=text]{display:none;border:1px solid #ccc;font-size:13px;height:26px;margin:0;padding:3px 5px;width:170px}.ql-snow .ql-tooltip a.ql-preview{display:inline-block;max-width:200px;overflow-x:hidden;text-overflow:ellipsis;vertical-align:top}.ql-snow .ql-tooltip a.ql-action:after{border-right:1px solid #ccc;content:\"Edit\";margin-left:16px;padding-right:8px}.ql-snow .ql-tooltip a.ql-remove:before{content:\"Remove\";margin-left:8px}.ql-snow .ql-tooltip a{line-height:26px}.ql-snow .ql-tooltip.ql-editing a.ql-preview,.ql-snow .ql-tooltip.ql-editing a.ql-remove{display:none}.ql-snow .ql-tooltip.ql-editing input[type=text]{display:inline-block}.ql-snow .ql-tooltip.ql-editing a.ql-action:after{border-right:0;content:\"Save\";padding-right:0}.ql-snow .ql-tooltip[data-mode=link]:before{content:\"Enter link:\"}.ql-snow .ql-tooltip[data-mode=formula]:before{content:\"Enter formula:\"}.ql-snow .ql-tooltip[data-mode=video]:before{content:\"Enter video:\"}.ql-snow a{color:#06c}.ql-container.ql-snow{border:1px solid #ccc}.checkbox-section,.radio-section{display:flex;flex-direction:column}.input{width:100%}.direction-col,.toggle-col{display:flex;flex-direction:column;gap:.5em}.toggle-col>label{font-size:.75rem;color:#6b7280;padding-left:.5em}.direction-row{display:flex;flex-direction:row;align-items:center;gap:.5em}.selecatbleObject{margin:.5em}.radioLabel{color:var(--primary-color);text-align:left!important}.container{height:100%}.input{height:100%;display:flex;flex-direction:column}.checkbox{flex-direction:column}.mat-form-field-wrapper{padding-bottom:0!important}.input .mat-mdc-standard-chip.mat-chip-with-trailing-icon{padding-right:12px}.time-picker{display:flex;flex-direction:row;height:100%;border:solid 2px lightgrey;padding:1em;border-radius:4px}.time-picker:hover{border-color:#000}::ng-deep .mat-h4 .mat-body-1 .mat-typography h4{margin:0}.label{margin:28px 0 8px}.smartIndicator{display:flex;flex-direction:column;gap:.25rem;width:-moz-fit-content;width:fit-content}.indicatorItems{display:flex;flex-direction:row;gap:.25rem}.indicatorItem{width:3rem;height:.25rem;background-color:#d3d3d3;border-radius:.5rem}.radio-error{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;gap:.5rem}.mat-calendar-previous-button,.mat-calendar-next-button{padding:0;min-width:0;width:40px!important;height:40px!important;flex-shrink:0;line-height:40px;border-radius:50%}.mat-calendar-arrow{height:36px!important;display:flex!important;flex-direction:column!important;justify-content:center}.radio-item-container,.checkbox-item-container{display:flex;flex-direction:column}.widgetContent::ng-deep .ql-container{height:200px;width:460px}.dateTimePickerContainer{display:flex;flex-direction:row;gap:.25rem}.dateTimePickerContainer mat-form-field{flex:1}.date,.time{width:100%}.date .mat-form-field-infix,.time .mat-form-field-infix{width:inherit!important}::ng-deep .mat-icon.mat-drag-indicator{--drag-indicator: #3b3b3b;color:var(--drag-indicator)}.matrixTable{width:100%;border-spacing:0 1rem}.matrixTable th{padding:.25rem}.matrixTable .optionLabel,.matrixTable td{text-align:center}.example-month-picker .mat-calendar-period-button{pointer-events:none}.example-month-picker .mat-calendar-arrow{display:none}.textFieldContainer{display:flex;flex-direction:row}.textFieldContainer{align-content:center;border:1px solid #cbd5e1;border-radius:3px;background-color:#fff}.textFieldContainer input{border:unset}.textFieldContainer:focus-within:not(:has(input:disabled)){outline:0 none;outline-offset:0;box-shadow:0 0 0 .2rem #a6d5fa;border-color:#2196f3}.textFieldContainer:has(input:disabled) .clearButton{cursor:not-allowed;opacity:.6}.textFieldButtons{display:flex;flex-direction:row;justify-content:flex-end;align-items:center}.clearButton .mat-mdc-raised-button,.clearButton button{background-color:unset!important;border:unset;color:#6b7280!important;box-shadow:unset;font-size:1rem!important}.clearButton .mat-icon.mat-primary{color:#6b7280!important}.clearButton .mat-mdc-raised-button:hover,.clearButton button:hover{color:#6b7280cc!important;background-color:unset;border:unset;box-shadow:unset;font-size:1rem!important}.mat-mdc-form-field-infix{display:flex;flex-direction:row}textarea:not(:placeholder-shown)~label{top:-.75em!important;font-size:12px!important}.disabledEditor *{-webkit-user-modify:read-only;-moz-user-modify:read-only;user-modify:read-only}.sb4-textarea{--sb4-textarea-line-height: 20px;line-height:var(--sb4-textarea-line-height);overflow-y:auto!important}.widgetContainer .imageIcon{max-width:unset!important;height:unset!important}.material .sb4-textarea{resize:vertical!important}.material .smart-form-widget-label{font-weight:700}.material .mat-mdc-form-field-subscript-wrapper{display:none}.label-right{display:flex;gap:.5rem;flex-direction:row-reverse}.label-left{display:flex;gap:.5rem;flex-direction:row}.label-top{display:flex;gap:.5rem;flex-direction:column}.label-bottom{display:flex;gap:.5rem;flex-direction:column-reverse}.smartDiv{width:100%}.clickable{cursor:pointer}\n/*!\n * Quill Editor v2.0.3\n * https://quilljs.com\n * Copyright (c) 2017-2024, Slab\n * Copyright (c) 2014, Jason Chen\n * Copyright (c) 2013, salesforce.com\n */\n"] }]
|
|
10974
10987
|
}], ctorParameters: () => [], propDecorators: { form: [{ type: i0.Input, args: [{ isSignal: true, alias: "form", required: true }] }], widgetInstance: [{
|
|
10975
10988
|
type: Input
|
|
10976
10989
|
}], onBlur: [{ type: i0.Input, args: [{ isSignal: true, alias: "onBlur", required: false }] }], onValueChange: [{
|
|
@@ -24768,7 +24781,11 @@ var FilterExpressionBuilderApiActions;
|
|
|
24768
24781
|
FilterExpressionBuilderApiActions["SAVE_EXPRESSION_FIELD_LIST"] = "SAVE_EXPRESSION_FIELD_LIST";
|
|
24769
24782
|
})(FilterExpressionBuilderApiActions || (FilterExpressionBuilderApiActions = {}));
|
|
24770
24783
|
|
|
24771
|
-
const USE_ADVANCED_FILTER = new InjectionToken(
|
|
24784
|
+
const USE_ADVANCED_FILTER = new InjectionToken("USE_ADVANCED_FILTER");
|
|
24785
|
+
function hasGroupEditActions(service) {
|
|
24786
|
+
return (service.model?.possibleActions?.some((action) => action.code === FilterExpressionBuilderApiActions.OPEN_FILTER_GROUPS ||
|
|
24787
|
+
action.code === FilterExpressionBuilderApiActions.CLOSE_FILTER_GROUPS) ?? false);
|
|
24788
|
+
}
|
|
24772
24789
|
|
|
24773
24790
|
/**
|
|
24774
24791
|
* Filter API 2
|
|
@@ -24888,18 +24905,21 @@ class AdvancedSmartFilterExpressionItemComponent extends SmartFilterExpressionIt
|
|
|
24888
24905
|
deleteItem($event) {
|
|
24889
24906
|
$event.stopPropagation();
|
|
24890
24907
|
this.service().peformWidgetAction({
|
|
24891
|
-
code:
|
|
24908
|
+
code: "REMOVE_FILTER_EXPRESSION",
|
|
24892
24909
|
params: {
|
|
24893
24910
|
model: this.item,
|
|
24894
24911
|
},
|
|
24895
24912
|
});
|
|
24896
24913
|
}
|
|
24914
|
+
showDeleteButton() {
|
|
24915
|
+
return hasGroupEditActions(this.service());
|
|
24916
|
+
}
|
|
24897
24917
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
24898
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AdvancedSmartFilterExpressionItemComponent, isStandalone: true, selector: "app-advanced-expression-item", usesInheritance: true, ngImport: i0, template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n @if (item.expressionData?.currentOperation === \"EXPRESSION\") {\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n @for (subItem of item.subFieldList?.filters; track subItem) {\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"!$last\"\r\n ></app-advanced-expression-item>\r\n }\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n } @else {\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [class.selectedSimpleItem]=\"isSelected\"\r\n >\r\n <button\r\n
|
|
24918
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: AdvancedSmartFilterExpressionItemComponent, isStandalone: true, selector: "app-advanced-expression-item", usesInheritance: true, ngImport: i0, template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n @if (item.expressionData?.currentOperation === \"EXPRESSION\") {\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n @for (subItem of item.subFieldList?.filters; track subItem) {\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"!$last\"\r\n ></app-advanced-expression-item>\r\n }\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n } @else {\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [class.selectedSimpleItem]=\"isSelected\"\r\n >\r\n @if (showDeleteButton()) {\r\n <button\r\n mat-button\r\n class=\"mat-raised-button delete-button\"\r\n (click)=\"deleteItem($event)\"\r\n >\r\n x\r\n </button>\r\n }\r\n <div class=\"expression-item-label\">{{ item.label }}:</div>\r\n\r\n @if (item.expressionData?.currentOperation !== \"BETWEEN\") {\r\n <div class=\"expression-item-data-fields\">\r\n @if (item.widgetType === \"DATE\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDate\r\n }}</b>\r\n } @else if (item.widgetType === \"DATE_TIME\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDateTime\r\n }}</b>\r\n } @else {\r\n <b class=\"expression-item-data-field\">{{\r\n getDisplayValue(item.expressionData!.operand2!.valueAsString!)\r\n }}</b>\r\n }\r\n </div>\r\n }\r\n\r\n @if (item.expressionData?.currentOperation === \"IN\") {\r\n <div class=\"expression-item-data-fields\">\r\n @for (\r\n value of item.expressionData?.operand2?.selectedValues;\r\n track value\r\n ) {\r\n <b class=\"expression-item-data-field\">\r\n {{ getDisplayValue(value) }}\r\n @if (!$last) {\r\n <b>,</b>\r\n }\r\n </b>\r\n }\r\n </div>\r\n }\r\n\r\n @if (item.expressionData?.currentOperation === \"BETWEEN\") {\r\n <div class=\"expressionValues expression-item-data-fields\">\r\n @if (item.widgetType === \"DATE\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDate\r\n }}</b>\r\n } @else if (item.widgetType === \"DATE_TIME\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDateTime\r\n }}</b>\r\n } @else {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData?.operand2?.valueAsString\r\n }}</b>\r\n }\r\n\r\n <b>-</b>\r\n\r\n @if (item.widgetType === \"DATE\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand3!.valueAsString! | smartDate\r\n }}</b>\r\n } @else if (item.widgetType === \"DATE_TIME\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand3!.valueAsString! | smartDateTime\r\n }}</b>\r\n } @else {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData?.operand3?.valueAsString\r\n }}</b>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;height:20px;padding:5px;border-radius:1.5rem}.expression-item-label{padding:0 .5rem}\n"], dependencies: [{ kind: "component", type: AdvancedSmartFilterExpressionItemComponent, selector: "app-advanced-expression-item" }, { kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: MatButton, selector: " button[matButton], a[matButton], button[mat-button], button[mat-raised-button], button[mat-flat-button], button[mat-stroked-button], a[mat-button], a[mat-raised-button], a[mat-flat-button], a[mat-stroked-button] ", inputs: ["matButton"], exportAs: ["matButton", "matAnchor"] }, { kind: "component", type: AdvancedRelationButtonComponent, selector: "lib-advanced-relation-button", inputs: ["boolOperator"], outputs: ["boolOperatorChanged"] }, { kind: "pipe", type: SmartDatePipe, name: "smartDate" }, { kind: "pipe", type: SmartDateTimePipe, name: "smartDateTime" }] }); }
|
|
24899
24919
|
}
|
|
24900
24920
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: AdvancedSmartFilterExpressionItemComponent, decorators: [{
|
|
24901
24921
|
type: Component,
|
|
24902
|
-
args: [{ selector:
|
|
24922
|
+
args: [{ selector: "app-advanced-expression-item", imports: [
|
|
24903
24923
|
NgClass,
|
|
24904
24924
|
NgIf,
|
|
24905
24925
|
NgForOf,
|
|
@@ -24907,7 +24927,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
24907
24927
|
SmartDatePipe,
|
|
24908
24928
|
SmartDateTimePipe,
|
|
24909
24929
|
AdvancedRelationButtonComponent,
|
|
24910
|
-
], template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n @if (item.expressionData?.currentOperation === \"EXPRESSION\") {\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n @for (subItem of item.subFieldList?.filters; track subItem) {\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"!$last\"\r\n ></app-advanced-expression-item>\r\n }\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n } @else {\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [class.selectedSimpleItem]=\"isSelected\"\r\n >\r\n <button\r\n
|
|
24930
|
+
], template: "<div class=\"expressionItemContainer\">\r\n <div\r\n class=\"expressionItemInnerContainer\"\r\n [ngClass]=\"\r\n item.expressionData?.currentOperation === 'EXPRESSION'\r\n ? isSelected\r\n ? 'selectedExpressionContainer'\r\n : 'expressionContainer'\r\n : ''\r\n \"\r\n >\r\n @if (item.expressionData?.currentOperation === \"EXPRESSION\") {\r\n <div class=\"sub-expression-container\" (click)=\"select($event, item)\">\r\n <div\r\n class=\"expressionItemBubble expression sub-expression-start\"\r\n (click)=\"select($event, item)\"\r\n ></div>\r\n <div class=\"sub-expression-items\">\r\n @for (subItem of item.subFieldList?.filters; track subItem) {\r\n <app-advanced-expression-item\r\n [item]=\"subItem\"\r\n [service]=\"service()\"\r\n [hasNext]=\"!$last\"\r\n ></app-advanced-expression-item>\r\n }\r\n </div>\r\n <lib-advanced-relation-button\r\n [boolOperator]=\"item.subFieldList?.defaultOperation\"\r\n (boolOperatorChanged)=\"onOperatorChanged($event)\"\r\n ></lib-advanced-relation-button>\r\n <div class=\"expressionItemBubble expression sub-expression-end\"></div>\r\n </div>\r\n } @else {\r\n <div\r\n (click)=\"select($event, item)\"\r\n class=\"expressionItemBubble simpleItem\"\r\n [class.selectedSimpleItem]=\"isSelected\"\r\n >\r\n @if (showDeleteButton()) {\r\n <button\r\n mat-button\r\n class=\"mat-raised-button delete-button\"\r\n (click)=\"deleteItem($event)\"\r\n >\r\n x\r\n </button>\r\n }\r\n <div class=\"expression-item-label\">{{ item.label }}:</div>\r\n\r\n @if (item.expressionData?.currentOperation !== \"BETWEEN\") {\r\n <div class=\"expression-item-data-fields\">\r\n @if (item.widgetType === \"DATE\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDate\r\n }}</b>\r\n } @else if (item.widgetType === \"DATE_TIME\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDateTime\r\n }}</b>\r\n } @else {\r\n <b class=\"expression-item-data-field\">{{\r\n getDisplayValue(item.expressionData!.operand2!.valueAsString!)\r\n }}</b>\r\n }\r\n </div>\r\n }\r\n\r\n @if (item.expressionData?.currentOperation === \"IN\") {\r\n <div class=\"expression-item-data-fields\">\r\n @for (\r\n value of item.expressionData?.operand2?.selectedValues;\r\n track value\r\n ) {\r\n <b class=\"expression-item-data-field\">\r\n {{ getDisplayValue(value) }}\r\n @if (!$last) {\r\n <b>,</b>\r\n }\r\n </b>\r\n }\r\n </div>\r\n }\r\n\r\n @if (item.expressionData?.currentOperation === \"BETWEEN\") {\r\n <div class=\"expressionValues expression-item-data-fields\">\r\n @if (item.widgetType === \"DATE\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDate\r\n }}</b>\r\n } @else if (item.widgetType === \"DATE_TIME\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand2!.valueAsString! | smartDateTime\r\n }}</b>\r\n } @else {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData?.operand2?.valueAsString\r\n }}</b>\r\n }\r\n\r\n <b>-</b>\r\n\r\n @if (item.widgetType === \"DATE\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand3!.valueAsString! | smartDate\r\n }}</b>\r\n } @else if (item.widgetType === \"DATE_TIME\") {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData!.operand3!.valueAsString! | smartDateTime\r\n }}</b>\r\n } @else {\r\n <b class=\"expression-item-data-field\">{{\r\n item.expressionData?.operand3?.valueAsString\r\n }}</b>\r\n }\r\n </div>\r\n }\r\n </div>\r\n }\r\n </div>\r\n</div>\r\n", styles: [".expressionItemContainer{display:flex;flex-direction:row;gap:.75rem}.expressionItemInnerContainer{display:flex;flex-direction:row;grid-area:.75rem;padding:.25rem;border-radius:.25rem}.expressionContainer{border:1px dashed var(--primary-lighter-gray-color);cursor:pointer}.selectedExpressionContainer{border:2px dashed var(--primary-color)}.expressionItemBubble,.relationItemBubble{display:flex;flex-direction:row;border-radius:1.5rem}.expressionItemBubble{padding:.75rem}.expression{background-color:var(--inner-container);font-weight:600;margin:auto 0}.simpleItem{background-color:#c6ddff;cursor:pointer}.relationItemBubble{border:1px solid #cdcdcd;padding:.25rem;max-height:42px;margin-top:.25rem}.relationItemBubble .mat-mdc-button{border-radius:1.5rem;height:100%;margin:auto 0}.expressionValues{display:flex;flex-direction:row;gap:.5rem}.sub-expression-container{display:flex;align-items:stretch}.sub-expression-start{padding:5px;height:100%;border-left:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-end{padding:5px;height:100%;border-right:2px solid black;border-top:2px solid black;border-bottom:2px solid black;border-radius:0}.sub-expression-items{display:flex;flex-wrap:wrap}lib-advanced-relation-button{margin-top:.25rem;margin-bottom:.25rem}.delete-button{min-width:10px;height:20px;padding:5px;border-radius:1.5rem}.expression-item-label{padding:0 .5rem}\n"] }]
|
|
24911
24931
|
}] });
|
|
24912
24932
|
|
|
24913
24933
|
class SmartFilterExpressionItemsComponent {
|
|
@@ -25909,11 +25929,15 @@ class SearchPageComponent extends SmartComponent {
|
|
|
25909
25929
|
this.layoutState.set(layout);
|
|
25910
25930
|
}
|
|
25911
25931
|
constructor(inject, filterService, _myPageName, _myComponentName, element, renderer) {
|
|
25912
|
-
super(inject, _myPageName, _myComponentName
|
|
25932
|
+
super(inject, _myPageName, _myComponentName
|
|
25933
|
+
? _myComponentName
|
|
25934
|
+
: _myPageName
|
|
25935
|
+
? undefined
|
|
25936
|
+
: "SearchPageComponent", element, renderer);
|
|
25913
25937
|
this.filterService = filterService;
|
|
25914
|
-
this.GRID_IDENTIFIER =
|
|
25915
|
-
this.FILTER_BUILDER_WIDGET_ID =
|
|
25916
|
-
this.componentName =
|
|
25938
|
+
this.GRID_IDENTIFIER = "RESULT_GRID";
|
|
25939
|
+
this.FILTER_BUILDER_WIDGET_ID = "FILTER_BUILDER_WIDGET";
|
|
25940
|
+
this.componentName = "SearchPageComponent";
|
|
25917
25941
|
/** Written from `dataChanged`, so a signal. */
|
|
25918
25942
|
this.layoutState = signal(undefined, /* @ts-ignore */
|
|
25919
25943
|
...(ngDevMode ? [{ debugName: "layoutState" }] : /* istanbul ignore next */ []));
|
|
@@ -25942,7 +25966,7 @@ class SearchPageComponent extends SmartComponent {
|
|
|
25942
25966
|
}
|
|
25943
25967
|
initLayout() {
|
|
25944
25968
|
if (this.model?.componentLayouts) {
|
|
25945
|
-
this.layout = this.model?.componentLayouts[
|
|
25969
|
+
this.layout = this.model?.componentLayouts["default"];
|
|
25946
25970
|
}
|
|
25947
25971
|
}
|
|
25948
25972
|
getGridIdentifier() {
|
|
@@ -25965,14 +25989,24 @@ class SearchPageComponent extends SmartComponent {
|
|
|
25965
25989
|
};
|
|
25966
25990
|
}
|
|
25967
25991
|
isShowNoResultText() {
|
|
25968
|
-
return this.data?.noResultText !== undefined && this.data?.noResultText !== null;
|
|
25992
|
+
return (this.data?.noResultText !== undefined && this.data?.noResultText !== null);
|
|
25993
|
+
}
|
|
25994
|
+
showFilterGroupParams() {
|
|
25995
|
+
return hasGroupEditActions(this.filterService);
|
|
25969
25996
|
}
|
|
25970
25997
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SearchPageComponent, deps: [{ token: i0.Injector }, { token: SmartFilterEditorService }, { token: SMART_SEARCH_PAGE_NAME }, { token: SMART_SEARCH_COMPONENT_NAME }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component }); }
|
|
25971
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SearchPageComponent, isStandalone: true, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "layoutComponent", first: true, predicate: SmartComponentLayoutComponent, descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div
|
|
25998
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.8", type: SearchPageComponent, isStandalone: true, selector: "search-page", providers: [SmartFilterEditorService], viewQueries: [{ propertyName: "layoutComponent", first: true, predicate: SmartComponentLayoutComponent, descendants: true, isSignal: true }, { propertyName: "grid", first: true, predicate: ["grid"], descendants: true }], usesInheritance: true, ngImport: i0, template: "<div\r\n class=\"searchPageContainer\"\r\n [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\"\r\n>\r\n @if (data?.showTitle) {\r\n <h1 class=\"search-page-title\">{{ data?.pageTitle }}</h1>\r\n }\r\n <!-- <div class=\"filterContainer\">\r\n <smart-filter [filter]=\"filter\"></smart-filter>\r\n</div> -->\r\n @if (data?.showToolbar) {\r\n <smart-ui-action-toolbar\r\n [uiActionModels]=\"uiActionModels\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (data?.showFilter && filterService.model) {\r\n <div class=\"filter-editor-container\">\r\n @if (showFilterGroupParams()) {\r\n <smart-filter-group-params\r\n [service]=\"filterService\"\r\n ></smart-filter-group-params>\r\n }\r\n <smart-filter-expression-editor\r\n class=\"filter-expression-editor\"\r\n [service]=\"filterService\"\r\n ></smart-filter-expression-editor>\r\n </div>\r\n }\r\n @if (data?.showLayout && layout) {\r\n <smart-component-layout\r\n [smartComponentLayout]=\"layout\"\r\n ></smart-component-layout>\r\n }\r\n @if (data?.showGrid) {\r\n <div class=\"gridContainer\">\r\n @if (isShowNoResultText()) {\r\n <h2 class=\"noResultText\">\r\n {{ data?.noResultText }}\r\n </h2>\r\n }\r\n @if (!isShowNoResultText()) {\r\n <smart-grid\r\n #grid\r\n [smartGrid]=\"smartGrid\"\r\n [uuid]=\"uuid!\"\r\n [parentLayoutComponent]=\"layoutComponent()\"\r\n ></smart-grid>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}.search-page-title{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host-context(.sm-nav-list) .searchPageContainer{gap:.5rem}.filter-expression-editor{flex:1}\n"], dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "component", type: UiActionToolbarComponent, selector: "smart-ui-action-toolbar", inputs: ["uiActionModels", "uiActionDescriptorService", "id", "executor", "widgetId", "nodeId", "actionParams", "scrollOnWrap", "toolbarPropertes"], outputs: ["actionFired"] }, { kind: "component", type: SmartFilterParamsComponent, selector: "smart-filter-group-params", inputs: ["service"] }, { kind: "component", type: SmartFilterEditorContentComponent, selector: "smart-filter-expression-editor", inputs: ["service"] }, { kind: "component", type: SmartComponentLayoutComponent, selector: "smart-component-layout", inputs: ["smartComponentLayout", "parentLayoutComponent", "gridRow"] }, { kind: "component", type: SmartGridComponent, selector: "smart-grid", inputs: ["smartGrid", "uuid", "parentLayoutComponent", "dev"] }] }); }
|
|
25972
25999
|
}
|
|
25973
26000
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SearchPageComponent, decorators: [{
|
|
25974
26001
|
type: Component,
|
|
25975
|
-
args: [{ selector:
|
|
26002
|
+
args: [{ selector: "search-page", providers: [SmartFilterEditorService], imports: [
|
|
26003
|
+
NgClass,
|
|
26004
|
+
UiActionToolbarComponent,
|
|
26005
|
+
SmartFilterParamsComponent,
|
|
26006
|
+
SmartFilterEditorContentComponent,
|
|
26007
|
+
SmartComponentLayoutComponent,
|
|
26008
|
+
SmartGridComponent,
|
|
26009
|
+
], template: "<div\r\n class=\"searchPageContainer\"\r\n [ngClass]=\"$safeNavigationMigration(data?.cssClassOfPage)\"\r\n>\r\n @if (data?.showTitle) {\r\n <h1 class=\"search-page-title\">{{ data?.pageTitle }}</h1>\r\n }\r\n <!-- <div class=\"filterContainer\">\r\n <smart-filter [filter]=\"filter\"></smart-filter>\r\n</div> -->\r\n @if (data?.showToolbar) {\r\n <smart-ui-action-toolbar\r\n [uiActionModels]=\"uiActionModels\"\r\n ></smart-ui-action-toolbar>\r\n }\r\n @if (data?.showFilter && filterService.model) {\r\n <div class=\"filter-editor-container\">\r\n @if (showFilterGroupParams()) {\r\n <smart-filter-group-params\r\n [service]=\"filterService\"\r\n ></smart-filter-group-params>\r\n }\r\n <smart-filter-expression-editor\r\n class=\"filter-expression-editor\"\r\n [service]=\"filterService\"\r\n ></smart-filter-expression-editor>\r\n </div>\r\n }\r\n @if (data?.showLayout && layout) {\r\n <smart-component-layout\r\n [smartComponentLayout]=\"layout\"\r\n ></smart-component-layout>\r\n }\r\n @if (data?.showGrid) {\r\n <div class=\"gridContainer\">\r\n @if (isShowNoResultText()) {\r\n <h2 class=\"noResultText\">\r\n {{ data?.noResultText }}\r\n </h2>\r\n }\r\n @if (!isShowNoResultText()) {\r\n <smart-grid\r\n #grid\r\n [smartGrid]=\"smartGrid\"\r\n [uuid]=\"uuid!\"\r\n [parentLayoutComponent]=\"layoutComponent()\"\r\n ></smart-grid>\r\n }\r\n </div>\r\n }\r\n</div>\r\n", styles: [".searchPageContainer{display:flex;flex-direction:column;gap:1.5rem}.filterContainer{display:flex;flex-direction:row;gap:1rem}.gridContainer{flex-grow:1}.filter-editor-container{display:flex;flex-direction:row}.noResultText{width:100%;text-align:center;padding-top:2rem;padding-bottom:2rem}.search-page-title{margin:0;font-size:1.35rem;font-weight:600;color:var(--color-text, #132033)}:host-context(.sm-nav-list) .searchPageContainer{gap:.5rem}.filter-expression-editor{flex:1}\n"] }]
|
|
25976
26010
|
}], ctorParameters: () => [{ type: i0.Injector }, { type: SmartFilterEditorService }, { type: undefined, decorators: [{
|
|
25977
26011
|
type: Inject,
|
|
25978
26012
|
args: [SMART_SEARCH_PAGE_NAME]
|
|
@@ -25981,7 +26015,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
25981
26015
|
args: [SMART_SEARCH_COMPONENT_NAME]
|
|
25982
26016
|
}] }, { type: i0.ElementRef }, { type: i0.Renderer2 }], propDecorators: { grid: [{
|
|
25983
26017
|
type: ViewChild,
|
|
25984
|
-
args: [
|
|
26018
|
+
args: ["grid"]
|
|
25985
26019
|
}], layoutComponent: [{ type: i0.ViewChild, args: [i0.forwardRef(() => SmartComponentLayoutComponent), { isSignal: true }] }] } });
|
|
25986
26020
|
|
|
25987
26021
|
class UiActionFileUploadDialogComponent {
|
|
@@ -26929,5 +26963,5 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImpor
|
|
|
26929
26963
|
* Generated bundle index. Do not edit.
|
|
26930
26964
|
*/
|
|
26931
26965
|
|
|
26932
|
-
export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiModule$4 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridDefaultRowActionTrigger, GridRowStateDisplay, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PageExportFieldScope, PageExportSelectionKind, PageExportValueType, PageExportValuesSource, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartKeybindingService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarAppearance, ToolbarDirection, TreeArrowPosition, TreeGridControl, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, formatChord, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, isMacPlatform, matches, multiAxisLineChart, parseChord, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
|
|
26966
|
+
export { ACLEntry, APIS$5 as APIS, AclEditingViewComponent, ApiModule$4 as ApiModule, ApiQueueService, BASE_PATH$7 as BASE_PATH, COLLECTION_FORMATS$7 as COLLECTION_FORMATS, CUSTOM_DIAGRAM_OPTIONS, CloseResult, ComponentFactoryService, ComponentType, ComponentWidgetType, Configuration$7 as Configuration, DEFAULT_ROW_LAYOUT, DIALOG_DISABLE_CLOSE, DataChangeKind, DefaultChartOptionsProvider, DefaultUiActionCode_CLOSE, DrawTime, EMPTY_PARAMS, ExpandableSectionButtonIconPosition, ExpandableSectionButtonType, ExpandableSectionComponent, FilterExpressionBoolOperator$1 as FilterExpressionBoolOperator, FilterExpressionBuilderGroupBuilderGroupKindEnum, FilterExpressionBuilderUiModelTypeEnum, FilterExpressionDataType, FilterExpressionFieldWidgetType, FilterExpressionOperation, FilterExpressionOrderByOrderEnum, GenericPageComponent, GeoMapDataLoadingMode, GeoMapDataSourceType, GeoMapItemKind, GeoMapOperationMode, GeoMapSelectionMode, GeoMapTextType, GridColumnContentType, GridDataAccessConfigKindEnum, GridDefaultRowActionTrigger, GridRowStateDisplay, GridSelectionMode, GridSelectionType, GridUiActionType, GridViewDescriptorKindEnum, HighlightPipe, IS_ASYNC_PARAM_NAME, IconPosition, ImageResourceKindEnum, InvalidSmartlinkComponent, LayoutDirection, LinkTargetEnum, MAP_ENGINE, MapEngine, MenuOpenDirection, MenuTriggerType, MessageOptionType, MessageTextType, MessageType, NAMED_VALIDATOR, NamedValidatorOperationEnum, NamedValidatorService, NoPermissionPageComponent, PageExportFieldScope, PageExportSelectionKind, PageExportValueType, PageExportValuesSource, REUSE_ROUTER_SLOT_COMPONENT, ROOT_CONTAINER_UUID, ROUTER_SLOT_ID, RecordingUploaderPropertiesOpenDirectionEnum, SMART_DATE_FORMATS, SMART_DEFAULT_VIEW_COMPONENTS, SMART_NG_CLIENT_CONFIG, SMART_ROW_LAYOUT_COMPONENT, SearchPageComponent, SelectionDefinitionTypeEnum, SelectionDefinitionValueSetValueTypeEnum, ServerRequestType, SessionAPIS, SessionErrorBehaviour, SessionService, SmartActionHost, SmartActionType, SmartBackendBootstrapService, SmartComponent, SmartComponentApiClient, SmartComponentDetachedDirective, SmartComponentHost, SmartComponentLayoutComponent, SmartDateFnsAdapter, SmartDatePipe, SmartDateTimePipe, SmartDefaultErrorUiService, SmartDiagramComponent, SmartDialog, SmartEmbeddedSlotDirective, SmartExpandableSectionService, SmartFileEditorComponent, SmartFilterComponent, SmartFilterEditorContentComponent, SmartFilterEditorService, SmartFilterExpressionFieldComponent, SmartFilterPosition, SmartFilterType, SmartFilterWidgetComponent, SmartFormInputMode, SmartFormTextFieldButtonIconPosition, SmartFormWidgetDirection, SmartFormWidgetType, SmartFormWidgetWidth, SmartGridButtonType, SmartGridComponent, SmartGridDataLayout, SmartGridService, SmartGridType, SmartIconComponent, SmartIconService, SmartKeybindingService, SmartLayoutDef, SmartLinkChannelVariableInPath, SmartLinkMigrationStatusStatusEnum, SmartLinkUuidVariableInPath, SmartMapComponent, SmartMultiFileEditorComponent, SmartNavbarComponent, SmartNavbarService, SmartNavigationService, SmartNgClientFeatureKind, SmartService, SmartSessionService, SmartSessionTimerComponent, SmartTable, SmartTableButtonType, SmartTableHeaderPropertyType, SmartTableInterfaceTypeEnum, SmartTableOptionButtonDirection, SmartTableOrder, SmartTableType, SmartTimePipe, SmartTooltipDirective, SmartTreeComponent, SmartTreeNodeButtonType, SmartUserSettinsIconPosition, SmartValidatorName, SmartViewContextService, SmartViewRedirect, SmartVoiceRecorderComponent, SmartWidgetHintPosition, SmartWidgetHintPositionEnum, SmartdialogService, SmartfileuploaderComponent, SmartformComponent, SmartformLayoutDefinitionService, SmarttreeGenericService, SmarttreeService, SubjectSelectorComponent, ThemeService, ToggleLabelPosition, ToolbarAlignment, ToolbarAppearance, ToolbarDirection, TreeArrowPosition, TreeGridControl, USE_ADVANCED_FILTER, UiActionButtonComponent, UiActionButtonType, UiActionConfirmDialogService, UiActionDescriptorService, UiActionDialogButtonComponent, UiActionDialogType, UiActionFeedbackType, UiActionInputDialogService, UiActionInputType, UiActionService, UiActionToolbarComponent, UiActionTooltipTooltipPositionEnum, UiBadgeComponent, UiBadgeDirective, UploadWidgetType, ValidationResultPageComponent, ValueChangeMode, ViewContextRebuiltError, ViewEventHandlerViewEventTypeEnum, ViewService, ViewState, ViewType, barChart, bubbleChart, createBasicOptions, doughnutChart, formatChord, hasGroupEditActions, horizontalBarChart, horizontalStackedBarChart, injectSmartComponent, isMacPlatform, matches, multiAxisLineChart, parseChord, pieChart, polarAreaChart, provideSmartNgClient, radarChart, registerSmartWidget, resolveDateLocale, resolveSlot, resolveSmartNgClientConfig, resolveViewHandler, scatterChart, stackedBarChart, transformDataToBarLikeDataSet, transformDataToBasicDataSets, transformDataToBubble, transformDataToScatter, withSmartDiagram, withSmartMap };
|
|
26933
26967
|
//# sourceMappingURL=smartbit4all-ng-client.mjs.map
|